updated getstarted

sr2echa · Mar 30, 2024 · 96c78e0 · 96c78e0
1 parent f0fd1e8
commit 96c78e0
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 6 deletions.
diff --git a/pages/getstarted.css b/pages/getstarted.css
@@ -20,7 +20,7 @@
 }
 
 .title-bold {
- padding-top: 200px;
+ padding-top: 100px;
  font-weight: 700; /* Bold */
  font-size: 50px;
 }
@@ -33,13 +33,12 @@
 .get-started-button {
  display: inline-block;
  padding: 10px 20px;
- margin-top: 100px;
+ margin-top: 20px;
  border: 2px dotted; /* Adjust color and style as needed */
  text-decoration: none; /* Removes underline from links */
  color: black; /* Ensure button text is black */
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
- scale: 1.1;
  border-radius: 15px; /* Adds curviness to the button */
  transition: transform 0.3s ease; /* Smooth transition for the transform */
 }

diff --git a/pages/index.js b/pages/index.js
@@ -1,8 +1,19 @@
 "use client";
 import React from 'react';
 import Link from 'next/link';
-// import './getstarted.css'; // Ensure you create this CSS file
-
+// import './getstarted.css'; // Ensure you create this CSS files
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+ AlertDialogTrigger,
+} from "./ui/alert-dialog"
+import DropzoneComponent from './components/dropzonecomponent';
 const getstarted = () => {
  return (
  <div className="container">
@@ -13,7 +24,25 @@ const getstarted = () => {
  <h2 className="title-bold">A decentralized vault</h2>
  <p className="title-medium">to securely store your</p>
  <p className="title-medium">digital belongings</p>
- <Link href="/files" className="get-started-button">Get Started</Link>
+ <AlertDialog>
+ <AlertDialogTrigger asChild>
+ <button className="get-started-button">Get Started</button>
+ </AlertDialogTrigger>
+ <AlertDialogContent>
+ <AlertDialogHeader>
+ <AlertDialogTitle>Upload your Seed image here!</AlertDialogTitle>
+ <AlertDialogDescription>
+ This Image will be used as your password
+ </AlertDialogDescription>
+ </AlertDialogHeader>
+ <DropzoneComponent/>
+ <AlertDialogFooter>
+ <AlertDialogCancel>Cancel</AlertDialogCancel>
+ <AlertDialogAction>Continue</AlertDialogAction>
+ </AlertDialogFooter>
+ </AlertDialogContent>
+ </AlertDialog>
+
  </div>
  );
 };