rakesh0x · rakesh0x · Sep 17, 2025 · Sep 17, 2025 · Sep 18, 2025 · Sep 18, 2025
diff --git a/app/dashboard/layout.tsx b/app/dashboard/layout.tsx
@@ -4,6 +4,7 @@ import { useState } from "react";
 import { Sidebar, SidebarBody, SidebarLink } from "@/components/ui/sidebar";
 import { IconArrowLeft, IconBrandTabler, IconSettings, IconUserBolt } from "@tabler/icons-react";
 import { cn } from "@/lib/utils";
+import { useUser } from "@clerk/nextjs";
 
 const links = [
   {
@@ -42,11 +43,12 @@ export default function DashboardLayout({
   children: React.ReactNode;
 }>) {
   const [open, setOpen] = useState(true);
+  const { user } = useUser();
 
   return (
     <div className="flex h-screen">
       <Sidebar open={open} setOpen={setOpen}>
-        <SidebarBody className="justify-between gap-10 bg-[#18191a]">
+        <SidebarBody className="justify-between gap-10 bg-[#0a0a0a]">
           <div className="flex flex-1 flex-col overflow-x-hidden overflow-y-auto">
             {open ? <Logo /> : <LogoIcon />}
             <div className="mt-8 flex flex-col gap-2">
@@ -58,16 +60,24 @@ export default function DashboardLayout({
           <div>
             <SidebarLink
               link={{
-                label: "User Name",
+                label: "",
                 href: "#",
                 icon: (
-                  <img
-                    src="/magnified.png"
-                    className="h-7 w-7 shrink-0 rounded-full"
-                    width={50}
-                    height={50}
-                    alt="Avatar"
-                  />
+                  <div className="flex items-center gap-2">
+                    <div className="h-7 w-7 shrink-0 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold text-lg">
+                      {user?.firstName ? user.firstName.charAt(0).toUpperCase() : "R"}
+                    </div>
+                    {open && (
+                      <div className="flex flex-col">
+                        <span className="text-white text-sm">
+                          {user?.fullName || user?.firstName || "User"}
+                        </span>
+                        <span className="text-gray-400 text-xs">
+                          Magnified
+                        </span>
+                      </div>
+                    )}
+                  </div>
                 ),
               }}
             />

diff --git a/app/globals.css b/app/globals.css
@@ -94,7 +94,31 @@
   0% {
     background-position: 0%;}
   100% {
-    background-position: 200%;}}}
+    background-position: 200%;}}
+  --animate-pulse: pulse var(--duration) ease-out infinite;
+  @keyframes pulse {
+  0%, 100% {
+    boxShadow: 0 0 0 0 var(--pulse-color);}
+  50% {
+    boxShadow: 0 0 0 8px var(--pulse-color);}}
+  --animate-marquee: marquee var(--duration) infinite linear;
+  --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
+  @keyframes marquee {
+  from {
+    transform: translateX(0);}
+  to {
+    transform: translateX(calc(-100% - var(--gap)));}}
+  @keyframes marquee-vertical {
+  from {
+    transform: translateY(0);}
+  to {
+    transform: translateY(calc(-100% - var(--gap)));}}
+  --animate-background-position-spin: background-position-spin 3000ms infinite alternate;
+  @keyframes background-position-spin {
+  0% {
+    background-position: top center;}
+  100% {
+    background-position: bottom center;}}}
 
 :root {
   --radius: 0.625rem;

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -4,6 +4,14 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { Analytics } from "@vercel/analytics/next";
+import {
+  ClerkProvider,
+  SignInButton,
+  SignUpButton,
+  SignedIn,
+  SignedOut,
+  UserButton,
+} from '@clerk/nextjs'
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -22,14 +30,17 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <head>
-        <link rel="icon" href="/magnified.png" />
-      </head>
-      <body className={` bg-[#0a0a0a] ${geistSans.variable} ${geistMono.variable} antialiased`}>
-        <Analytics/>
-        {children}
-      </body>
-    </html>
+    <ClerkProvider>
+      <html lang="en">
+        <head>
+          <link rel="icon" href="/magnified.png" />
+        </head>
+        <body className={` bg-[#0a0a0a] ${geistSans.variable} ${geistMono.variable} antialiased`}>
+          <Analytics/>
+          {children}
+        </body>
+      </html>
+    </ClerkProvider>
+
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,50 +1,199 @@
+'use client';
+
 import { SpotlightNewDemo } from "@/components/ui/spotlight";
 import { Navbar } from "@/components/ui/navbar";
 import { AuroraTextDemo } from "@/components/magicui/aurora";
-import { InputDemo } from "@/components/ui/waitlist";
 import { AnimatedGradientTextDemo } from "@/components/magicui/Animatedintro";
 import { Poppins } from "next/font/google";
+import { Auth } from "@/components/ui/onboarding";
+import { useUser } from "@clerk/nextjs";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { MarqueeDemo } from "@/components/ui/photos-marquee";
+import { Pricing } from "./pricing/pricingpage";
+import { CardSpotlight } from "@/components/ui/card-spotlight";
+import { AnimatedNumberBasic } from "@/components/magicui/animated-numbers";
+import { Testimonials } from "@/components/ui/testinomials";
+import { FlickeringGridDemo } from "@/components/ui/flickering-grid-layout";
 
-const poppins = Poppins({ 
+const poppins = Poppins({
   subsets: ["latin"],
-  weight: ["400", "700"]
-})
+  weight: ["400", "700"],
+});
 
 export default function Home() {
+  const { isSignedIn } = useUser();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (isSignedIn) {
+      router.push("/dashboard");
+    }
+  }, [isSignedIn, router]);
+
   return (
-    <SpotlightNewDemo>
-      {/* Fixed Navbar */}
-      <Navbar />
-
-      {/* Hero Section */}
-      <div className="flex flex-col justify-center items-center h-screen w-full gap-6 px-4 sm:px-6 lg:px-8 text-center">
-        {/* Animated Intro */}
-        <AnimatedGradientTextDemo />
-
-        {/* Aurora Subheading */}
-        <AuroraTextDemo />
-
-        {/* Description */} 
-        <p  className={`${poppins.className} text-base text-white sm:text-lg font-medium text-gray-700 dark:text-neutral-300 max-w-2xl leading-relaxed tracking-wide`} >
-          Upload your selfies and instantly generate{" "}
-          <span className="text-black text-white font-semibold">
-            AI-powered portraits
-          </span>
-          ,{" "}
-          <span className="text-black text-white font-semibold">
-            headshots
-          </span>
-          , and{" "}
-          <span className="text-black text-white font-semibold">
-            creative models
-          </span>.
-        </p>
-
-        {/* Waitlist / Input */}
-        <div className="w-full max-w-md">
-          <InputDemo />
+    <>
+      <SpotlightNewDemo>
+        {/* Fixed Navbar */}
+        <Navbar />
+
+        <div className="pt-[100px]">
+          <br />
+          <br />
         </div>
-      </div>
-    </SpotlightNewDemo>
+
+        {/* Hero Section */}
+        <div className="flex flex-col justify-center items-center gap-6 text-center max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
+          {/* Animated Intro */}
+          <AnimatedGradientTextDemo />
+          <AuroraTextDemo />
+
+          <p
+            className={`${poppins.className} text-base text-white sm:text-lg font-medium text-gray-700 dark:text-neutral-300 max-w-2xl leading-relaxed tracking-wide`}
+          >
+            Upload your selfies and instantly generate{" "}
+            <span className="text-black text-white font-semibold">
+              AI-powered portraits
+            </span>
+            ,{" "}
+            <span className="text-black text-white font-semibold">
+              headshots
+            </span>
+            , and{" "}
+            <span className="text-black text-white font-semibold">
+              creative models
+            </span>.
+          </p>
+
+          <br />
+          <div className="w-full max-w-7xl mx-auto">
+            {!isSignedIn && <Auth />}
+          </div>
+          <div className="w-full">
+            <MarqueeDemo />
+          </div>
+
+          {/* How it works section */}
+          <section className="py-20 w-full">
+            <h2 className="text-center text-4xl font-bold text-white mb-4">
+              How It <span className="text-purple-500">Works</span>
+            </h2>
+            <p className="text-center text-lg text-gray-400 mb-12">
+              Transform your photos into stunning AI-powered portraits in three
+              simple steps
+            </p>
+            <div className="flex flex-col md:flex-row justify-center items-center gap-8">
+              <CardSpotlight className="h-96 w-80 flex flex-col items-center justify-center p-6 text-center">
+                <UploadIcon />
+                <p className="text-xl font-bold relative z-20 mt-4 text-white">
+                  Upload Your Photo
+                </p>
+                <p className="text-neutral-300 mt-2 relative z-20 text-sm">
+                  Start by uploading any portrait photo you'd like to enhance
+                </p>
+              </CardSpotlight>
+
+              <CardSpotlight className="h-96 w-80 flex flex-col items-center justify-center p-6 text-center">
+                <MagicIcon />
+                <p className="text-xl font-bold relative z-20 mt-4 text-white">
+                  AI Magic
+                </p>
+                <p className="text-neutral-300 mt-2 relative z-20 text-sm">
+                  Our advanced AI transforms your photo into stunning portraits
+                </p>
+              </CardSpotlight>
+
+              <CardSpotlight className="h-96 w-80 flex flex-col items-center justify-center p-6 text-center">
+                <DownloadIcon />
+                <p className="text-xl font-bold relative z-20 mt-4 text-white">
+                  Download & Share
+                </p>
+                <p className="text-neutral-300 mt-2 relative z-20 text-sm">
+                  Get your enhanced portraits in multiple styles instantly
+                </p>
+              </CardSpotlight>
+            </div>
+          </section>
+
+          {/* Animated Numbers */}
+          <AnimatedNumberBasic />
+        </div>
+      </SpotlightNewDemo>
+
+      {/* FULL WIDTH Flickering Grid Section */}
+      <section className="relative w-full min-h-screen">
+        {/* Fullscreen background */}
+        <FlickeringGridDemo className="absolute inset-0 w-full h-full" />
+        <div className="relative z-10 w-full px-6 py-20 flex flex-col items-center gap-16">
+          <Testimonials />
+
+        </div>
+        <br/>
+        <br/>
+        <div>
+          <Pricing/>
+        </div>
+      </section>
+
+
+    </>
   );
 }
+
+const UploadIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="48"
+    height="48"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="#a855f7"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="lucide lucide-upload"
+  >
+    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+    <polyline points="17 8 12 3 7 8" />
+    <line x1="12" x2="12" y1="3" y2="15" />
+  </svg>
+);
+
+const MagicIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="48"
+    height="48"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="#a855f7"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="lucide lucide-sparkles"
+  >
+    <path d="M9.9 10.9L12 2l2.1 8.9" />
+    <path d="M2 12h20" />
+    <path d="M20.2 20.2 22 12l-1.8-8.2" />
+    <path d="M9.9 13.1 12 22l2.1-8.9" />
+  </svg>
+);
+
+const DownloadIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="48"
+    height="48"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="#a855f7"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="lucide lucide-download"
+  >
+    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+    <polyline points="7 10 12 15 17 10" />
+    <line x1="12" x2="12" y1="15" y2="3" />
+  </svg>
+);
diff --git a/app/pricing/page.tsx b/app/pricing/page.tsx
diff --git a/app/pricing/pricingpage.tsx b/app/pricing/pricingpage.tsx
@@ -0,0 +1,9 @@
+import { PricingPage } from "@/components/magicui/pricing-page";
+
+export function Pricing() {
+  return (
+    <div className="min-h-screen flex items-center justify-center">
+      <PricingPage />
+    </div>
+  );
+}