Merge pull request #2 from betteridea-dev/redesign

Waitlist
betteridea-dev · May 28, 2024 · f52fbe4 · f52fbe4
2 parents 3488b77 + 1ad916e
commit f52fbe4
Show file tree

Hide file tree

Showing 14 changed files with 328 additions and 28 deletions.
diff --git a/public/SpaceGrotesk.ttf b/public/SpaceGrotesk.ttf
diff --git a/public/k-future.otf b/public/k-future.otf
diff --git a/public/k-suture.otf b/public/k-suture.otf
diff --git a/src/assets/1.svg b/src/assets/1.svg
diff --git a/src/assets/2.svg b/src/assets/2.svg
diff --git a/src/assets/3.svg b/src/assets/3.svg
diff --git a/src/assets/anda.svg b/src/assets/anda.svg
diff --git a/src/assets/cactii.svg b/src/assets/cactii.svg
diff --git a/src/assets/learn-ao.svg b/src/assets/learn-ao.svg
diff --git a/src/assets/popup.svg b/src/assets/popup.svg
diff --git a/src/assets/sneak-peek.svg b/src/assets/sneak-peek.svg
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -5,26 +5,40 @@ import Navbar from "@/components/navbar";
 import Head from "next/head";
 import Image from "next/image";
 import Link from "next/link";
-import { Toaster } from "@/components/ui/toaster"
+// import { Toaster } from "@/components/ui/toaster"
+import { Toaster as SonnerToaster } from "@/components/ui/sonner";
 import othentLogo from "@/assets/othent.png"
 import { Input } from "@/components/ui/input";
-import { useToast } from "@/components/ui/use-toast"
+// import { useToast } from "@/components/ui/use-toast"
+import { toast as sonnerToast, toast } from "sonner"
 import { DiscordLogoIcon, TwitterLogoIcon } from "@radix-ui/react-icons";
+import learnAOSVG from "@/assets/learn-ao.svg"
+import sneakPeekSVG from "@/assets/sneak-peek.svg"
+
+import sp1SVG from "@/assets/1.svg"
+import sp2SVG from "@/assets/2.svg"
+import sp3SVG from "@/assets/3.svg"
+
+import cactiSVG from "@/assets/cactii.svg"
+import andaSVG from "@/assets/anda.svg"
+import popupSVG from "@/assets/popup.svg"
 
 export default function Home() {
-  const { toast } = useToast()
+  // const { toast } = useToast()
 
   function joinWaitlist() {
     const email = (document.getElementById("email") as HTMLInputElement).value;
     console.log(email);
     // validate email
     if (email === "") {
-      return toast({ title: "Please enter an email address" })
+      // return toast({ title: "Please enter an email address" })
+      return toast.error("Please enter an email address")
     }
     // check string is an email
     const regex = /\S+@\S+\.\S+/;
     if (!regex.test(email)) {
-      return toast({ title: "Please enter a valid email address" })
+      // return toast({ title: "Please enter a valid email address" })
+      return toast.error("Please enter a valid email address")
     }
 
     fetch('https://sheetdb.io/api/v1/2pxxi2846am8j', {
@@ -44,7 +58,8 @@ export default function Home() {
       .then((response) => response.json())
       .then((data) => {
         console.log(data);
-        toast({ title: "Successfully joined waitlist", description: "We will notify you as soon as we launch" })
+        // toast({ title: "Successfully joined waitlist", description: "We will notify you as soon as we launch" })
+        toast.success("Successfully joined waitlist.\nWe will notify you as soon as we launch")
       });
 
   }
@@ -54,22 +69,23 @@ export default function Home() {
       <Head>
         <title>LearnAO | Home</title>
       </Head>
-      <Toaster />
+      {/* <Toaster /> */}
+      <SonnerToaster className="bg-transparent" />
 
 
       {/* <Navbar /> */}
       {/* min-h-[calc(100vh-92px)] */}
 
-      <div className="h-screen flex flex-col items-center justify-center bg-[#D2FFFA] text-[#008A79]">
-        <Image
+      <div className="h-screen flex flex-col items-center justify-center bg-[#D2FFFA] text-[#008A79] pb-0 mb-0">
+        <Image draggable={false}
           src="/images/cloud.svg"
           height={50}
           width={350}
           alt=""
-          className="absolute top-[10%] left-0 w-1/3 max-w-[350px]"
+          className="absolute top-[10%] left-0 w-1/3 max-w-[350px] animate-left-right"
         />
 
-        <Image
+        <Image draggable={false}
           src="/images/sun.svg"
           height={106}
           width={215}
@@ -78,54 +94,82 @@ export default function Home() {
         />
 
         <div className="flex flex-col gap-2 items-center">
-          <p className="py-2 text-md md:text-xl">Learn and build on ao, easy breezy</p>
+          <p className="py-2 text-md md:text-xl text-[#8F8F8F]">Learn and build on ao, easy breezy</p>
 
-          <div className="text-7xl md:text-9xl font-extrabold font-heading drop-shadow-lg">Learn AO</div>
+          {/* <div className="text-7xl md:text-9xl font-extrabold font-k-future drop-shadow-lg">learn ao</div> */}
+          <Image src={learnAOSVG} draggable={false} width={600} height={300} alt="Learn AO" className="drop-shadow-lg px-2" />
           <p className="py-2 text-md md:text-xl">Launching soon</p>
 
           {/* <Button size="lg">Connect
             <Image src={othentLogo} width={35} height={35} alt="othent" className="ml-1.5" />
           </Button> */}
           {/* <Button size="lg">Start learning</Button> */}
-          <div className="flex gap-2 w-full mx-auto p-1 items-center justify-center">
-            <Input placeholder="Email address" id="email" type="email" className="block bg-white text-black z-20 w-[60%]" />
-            <Button className="z-10 text-[#D2FFFA] bg-[#008A79] hover:-translate-y-1 hover:shadow-lg active:translate-y-1 transition-all duration-250" onClick={joinWaitlist}>Join waitlist</Button>
+          <div className="flex flex-col md:flex-row gap-3 md:gap-2 w-full mx-auto p-1 items-center justify-center">
+            <Input placeholder="Email address" id="email" type="email" className="block bg-white text-black z-20 w-[80%] md:w-[60%]" />
+            <Button className="w-[80%] md:w-fit text-[#D2FFFA] bg-[#008A79] hover:-translate-y-1 hover:shadow-lg active:translate-y-1 transition-all duration-250 z-50" onClick={joinWaitlist}>Join waitlist</Button>
           </div>
 
-          <div className="absolute left-2 top-2 flex gap-2">
+          <div className="absolute left-3 top-3 flex gap-2.5">
             <Link href="https://discord.gg/nm6VKUQBrA" target="_blank" className=" cursor-pointer z-50">
-              <div className="flex gap-2 items-center text-[#008A79] z-50 drop-shadow-lg justify-left font-bold">
-                <DiscordLogoIcon className="w-8 h-8" /><div>Join Discord</div>
+              <div className="flex gap-2 items-center z-50 drop-shadow-lg justify-left font-bold">
+                <DiscordLogoIcon className="w-10 h-10 bg-[#008A79] rounded-md text-[#D2FFFA] p-1" />
               </div>
             </Link>
             <Link href="https://twitter.com/betteridea_dev" target="_blank" className=" cursor-pointer z-50 font-bold">
-              <div className="flex gap-2 items-center drop-shadow-lg text-[#008A79] z-50 justify-center">
-                <TwitterLogoIcon className="w-8 h-8" />
-                <div>By BetterIDEa Team</div>
+              <div className="flex gap-2 items-center drop-shadow-lg z-50 justify-center">
+                <TwitterLogoIcon className="w-10 h-10 bg-[#008A79] rounded-md text-[#D2FFFA] p-1" />
               </div>
             </Link>
           </div>
+          <Link href="https://ide.betteridea.dev" target="_blank" className="absolute mx-auto bottom-5 z-30 animate-bounce">
+            <Button className="z-30 bg-[#008A79] text-[#D2FFFA]" size="sm">Powered By BetterIDEa</Button>
+          </Link>
         </div>
 
         {/* <div className="h-[200px]"></div> */}
 
-        <Image
+        <Image draggable={false}
           src="/images/hero-bottom-left.svg"
           height={233}
           width={750}
           alt=""
           className="absolute bottom-0 left-0"
         />
 
-        <Image
+        <Image draggable={false}
           src="/images/hero-bottom-right.svg"
           height={291}
           width={221}
           alt=""
-          className="absolute bottom-0 right-0"
+          className="absolute -bottom-0.5 right-0"
         />
       </div>
 
+      <div className="min-h-[100vh] py-20 bg-[#008A79] relative flex flex-col items-center justify-center gap-5">
+        <Image draggable={false} src={sneakPeekSVG} width={250} height={100} alt="Sneak Peek" className="drop-shadow-lg px-2 mb-5" />
+
+        <Image draggable={false} src={sp1SVG} width={700} height={450} alt="Sneak Peek" className="drop-shadow-lg px-2 z-30" />
+        <Image draggable={false} src={sp2SVG} width={700} height={450} alt="Sneak Peek" className="drop-shadow-lg px-2 z-30" />
+        <Image draggable={false} src={sp3SVG} width={700} height={450} alt="Sneak Peek" className="drop-shadow-lg px-2 z-30" />
+
+        <Button variant="link" className="z-40 bg-transparent drop-shadow-lg absolute bottom-5 right-5 p-0 h-16" onClick={() => {
+          // sonnerToast.custom(() => <Image draggable={false} src={popupSVG} width={800} height={300} alt="popup" className="bg-black" />)
+          sonnerToast.custom(() => <div className="rounded-lg p-2 bg-[#B2FFF6] border-2 border-[#003C35]">
+
+            We're launching our courses soon.<br />
+            The first 3 people to finish the courses get 1AR each
+            {/* <Image draggable={false} src={popupSVG} width={800} height={300} alt="popup" onClick={() => sonnerToast.dismiss()} /> */}
+          </div>)
+        }}>
+          <Image draggable={false} src={andaSVG} width={60} height={60} alt="easter egg" />
+        </Button>
+
+        <Image draggable={false} src={cactiSVG} width={140} height={140} alt="cacti" className="absolute bottom-0 left-0 z-20" />
+
+        <div className="absolute bottom-0 z-0 w-full bg-[#D2FFFA] h-10">
+        </div>
+      </div>
+
       {/* <div className="relative min-h-screen flex flex-col items-center gap-8 justify-center bg-[#008A79] text-[#D2FFFA]">
         <h3 className="text-3xl font-heading">Get started with basics. </h3>
 

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -2,6 +2,37 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+  font-family: 'K-Future';
+  src: url('/k-future.otf');
+}
+
+@font-face {
+  font-family: 'K-Suture';
+  src: url('/k-suture.otf');
+}
+
+@font-face {
+  font-family: 'SpaceGrotesk';
+  src: url('/SpaceGrotesk.ttf');
+}
+
+.font-k-future {
+  font-family: 'K-Future', sans-serif;
+}
+
+.font-k-suture {
+  font-family: 'K-Suture', sans-serif;
+}
+
+* {
+  font-family: "SpaceGrotesk", sans-serif;
+}
+
+section [aria-label="Notifications"] {
+  background-color: transparent
+}
+
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -70,12 +101,13 @@
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground;
   }
 }
 
-.markdown > * {
+.markdown>* {
   all: revert;
 }
 
@@ -90,3 +122,20 @@ a {
   /* font-weight: 200; */
   /* letter-spacing: 0.05em; */
 }
+
+.animate-left-right {
+  animation: left-right 5s ease-in-out infinite;
+}
+
+@keyframes left-right {
+
+  /* move left then back to start */
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  50% {
+    transform: translateX(-4%);
+  }
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -19,8 +19,8 @@ const config = {
     },
     extend: {
       fontFamily: {
-        sans: ["Space Grotesk", "sans-serif"],
-        heading: ["Karma", "serif"],
+        // sans: ["Space Grotesk", "sans-serif"],
+        // heading: ["Karma", "serif"],
       },
       colors: {
         border: "hsl(var(--border))",