add: landing page

app/(landing)/layout.tsx

@@ -0,0 +1,9 @@
+const LandingLayout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <main className="h-full bg-[#111827] overflow-auto ">
+      <div className="mx-auto max-w-screen-xl h-full w-full">{children}</div>
+    </main>
+  );
+};
+
+export default LandingLayout;

app/(landing)/page.tsx

@@ -1,16 +1,13 @@
-import { Button } from "@/components/ui/button";
-import Link from "next/link";
+import LandingContent from "@/components/landing-content";
+import LandingHero from "@/components/landing-hero";
+import LandingNavbar from "@/components/landingNavbar";
 
 function LandingPage() {
   return (
-    <div>
-      <Link href={"/sign-in"}>
-        <Button>Login</Button>
-      </Link>
-
-      <Link href={"/sign-up"}>
-        <Button>Signup</Button>
-      </Link>
+    <div className="h-4">
+      <LandingNavbar />
+      <LandingHero />
+      <LandingContent />
     </div>
   );
 }

components/landing-content.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
+
+const testimonials = [
+  {
+    name: "Tim Berners-Lee",
+    avatar: "J",
+    title: "Founder of the World Wide Web",
+    description: "This is the best application I've used!",
+  },
+  {
+    name: "Brendan Eich",
+    avatar: "J",
+    title: "Founder of JavaScript",
+    description: "Amazing application for generating AI content",
+  },
+  {
+    name: "Bjarne Stroustrup",
+    avatar: "J",
+    title: "Founder of CPP",
+    description: "Awesome AI generations.",
+  },
+  {
+    name: "Linus Torvalds",
+    avatar: "J",
+    title: "Founder of Linux",
+    description: "Perfect for all use cases. Plus code genration is amazing.",
+  },
+];
+
+export default function LandingContent() {
+  return (
+    <div className="px-10 pb-18">
+      <h2 className="text-center text-4xl text-white font-extrabold mb-8">
+        Testimonials
+      </h2>
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+        {testimonials.map((item) => (
+          <Card
+            key={item.description}
+            className="bg-[#192339] border-none text-white"
+          >
+            <CardHeader>
+              <CardTitle className="flex items-center gap-x-2">
+                <div>
+                  <p className="text-lg">{item.name}</p>
+                  <p className="text-zinc-400 text-sm">{item.title}</p>
+                </div>
+              </CardTitle>
+              <CardContent className="pt-4 px-0">
+                {item.description}
+              </CardContent>
+            </CardHeader>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}

components/landing-hero.tsx

@@ -0,0 +1,42 @@
+"use client";
+import Link from "next/link";
+import { useAuth } from "@clerk/nextjs";
+import TypewriterComponent from "typewriter-effect";
+import { Button } from "./ui/button";
+
+export default function LandingHero() {
+  const { isSignedIn } = useAuth();
+  return (
+    <div className="text-white font-bold py-36 text-center space-y-5">
+      <div className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl space-y-5 font-extrabold">
+        <h1>The Best AI Tool for</h1>
+        <div className="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600">
+          <TypewriterComponent
+            options={{
+              strings: ["Chatbot", "Image Generation", "Code Generation"],
+              autoStart: true,
+              loop: true,
+            }}
+          />
+        </div>
+      </div>
+      <div className="text-sm md:text-xl font-light text-zinc-400">
+        Create content using AI 10x faster.
+      </div>
+      <div>
+        <Link href={isSignedIn ? "/dashboard" : "/signup"}>
+          <Button
+            variant="premium"
+            className="md:text-lg p-4 md:p-6 rounded-full font-semibold"
+          >
+            Start Generating For Free
+          </Button>
+        </Link>
+      </div>
+
+      <div className="text-zinc-400 text-xs md:text-sm font-normal">
+        No credit card required.
+      </div>
+    </div>
+  );
+}

components/landingNavbar.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { useAuth } from "@clerk/nextjs";
+import { Montserrat } from "next/font/google";
+import Image from "next/image";
+import Link from "next/link";
+import { Button } from "./ui/button";
+
+const font = Montserrat({
+  weight: "600",
+  subsets: ["latin"],
+});
+
+export default function LandingNavbar() {
+  const { isSignedIn } = useAuth();
+
+  return (
+    <nav className="p-4 bg-transparent flex items-center justify-between">
+      <Link href="/" className="flex items-center">
+        <div className="relative h-8 w-8 mr-4">
+          <Image fill alt="Logo" src="/logo.png" />
+        </div>
+        <h1 className={cn("text-2xl font-bold text-white", font.className)}>
+          Curious.AI
+        </h1>
+      </Link>
+      <div className="flex items-center gap-x-2">
+        <Link href={isSignedIn ? "/dashboard" : "/signup"}>
+          <Button variant="outline" className="rounded-full">
+            Get Started
+          </Button>
+        </Link>
+      </div>
+    </nav>
+  );
+}

package.json

@@ -35,6 +35,7 @@
     "stripe": "^17.3.1",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
+    "typewriter-effect": "^2.21.0",
     "zod": "^3.23.8",
     "zustand": "^5.0.1"
   },