feat: design launch page

src/pages/launch/index.tsx

@@ -1,6 +1,35 @@
+import Footer from "@/components/Footer";
+
 export default function Launch() {
-    return (
-        <div>Launch</div>
-    )
-}
+  return (
+    <>
+      <main className="relative overflow-hidden pt-10 max-w-screen-lg mx-auto h-[90vh] space-y-14 p-4">
+        <div className="absolute opacity-15 w-full top-[40%] left-[25%]">
+          <img
+            className="w-[600px]"
+            src="/images/launch.svg"
+            alt="Launch Illustration"
+          />
+        </div>
+        <article className="space-y-3">
+          <h2 className="font-Public text-primary-foreground text-4xl font-semibold">
+            SyncSwap Launch
+          </h2>
+          <p className="font-Public text-card-foreground text-2xl font-semibold">
+            Participate in the launch and growth of ecosystem projects.
+          </p>
+        </article>
 
+        <article className="space-y-4">
+          <p className="font-Public text-primary-foreground text-xl font-medium">
+            Upcoming Projects
+          </p>
+          <h1 className="tracking-wider text-[15px] font-semibold text-primary relative w-[max-content] before:absolute before:inset-0 before:animate-typewriter before:bg-page after:absolute after:inset-0 after:w-[0.125em] after:ml-1 after:animate-caret after:bg-primary">
+            NO UPCOMING PROJECTS - STAY TUNED
+          </h1>
+        </article>
+      </main>
+      <Footer></Footer>
+    </>
+  );
+}

tailwind.config.js

@@ -103,6 +103,28 @@ export default {
           "50%": { opacity: "1" },
           "100%": { opacity: "0" },
         },
+        typewriter: {
+          to: {
+            left: "100%",
+          },
+        },
+        blink: {
+          "0%": {
+            opacity: "0",
+          },
+          "0.1%": {
+            opacity: "1",
+          },
+          "50%": {
+            opacity: "1",
+          },
+          "50.1%": {
+            opacity: "0",
+          },
+          "100%": {
+            opacity: "0",
+          },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
@@ -112,6 +134,9 @@ export default {
         "fade-in-out-10": "fade-in-out 10s linear infinite",
         "fade-in-out-15": "fade-in-out 12s linear infinite",
         "fade-in-out-20": "fade-in-out 14s linear infinite",
+        typewriter: "typewriter 2s steps(11) forwards",
+        caret:
+          "typewriter 2s steps(11) forwards, blink 1s steps(11) infinite 2s",
       },
     },
   },