diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index d8c9c45..523ac36 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -78,58 +78,49 @@
 }
 
 :root {
-  --background: hsl(0 0% 100%);
-  --foreground: hsl(0 0% 3.9%);
-  --card: hsl(0 0% 100%);
-  --card-foreground: hsl(0 0% 3.9%);
-  --popover: hsl(0 0% 100%);
-  --popover-foreground: hsl(0 0% 3.9%);
-  --primary: hsl(0 0% 9%);
-  --primary-foreground: hsl(0 0% 98%);
-  --secondary: hsl(0 0% 96.1%);
-  --secondary-foreground: hsl(0 0% 9%);
-  --muted: hsl(0 0% 96.1%);
-  --muted-foreground: hsl(0 0% 45.1%);
-  --accent: hsl(0 0% 96.1%);
-  --accent-foreground: hsl(0 0% 9%);
-  --destructive: hsl(0 84.2% 60.2%);
-  --destructive-foreground: hsl(0 0% 98%);
-  --border: hsl(0 0% 89.8%);
-  --input: hsl(0 0% 89.8%);
-  --ring: hsl(0 0% 3.9%);
-  --chart-1: hsl(12 76% 61%);
-  --chart-2: hsl(173 58% 39%);
-  --chart-3: hsl(197 37% 24%);
-  --chart-4: hsl(43 74% 66%);
-  --chart-5: hsl(27 87% 67%);
+  --background: hsl(292 0% 100%);
+  --foreground: hsl(292 0% 10%);
+  --card: hsl(292 0% 100%);
+  --card-foreground: hsl(292 0% 15%);
+  --popover: hsl(292 0% 100%);
+  --popover-foreground: hsl(292 95% 10%);
+  --primary: hsl(292 72% 59%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(292 10% 90%);
+  --secondary-foreground: hsl(0 0% 0%);
+  --muted: hsl(254 10% 95%);
+  --muted-foreground: hsl(292 0% 40%);
+  --accent: hsl(0, 0%, 95%);
+  --accent-foreground: hsl(292 0% 15%);
+  --destructive: hsl(0 50% 50%);
+  --destructive-foreground: hsl(292 0% 100%);
+  --border: hsl(285, 6%, 87%);
+  --input: hsl(292 20% 50%);
+  --ring: hsl(292 72% 59%);
   --radius: 0.6rem;
 }
 
 .dark {
-  --background: hsl(0 0% 3.9%);
-  --foreground: hsl(0 0% 98%);
-  --card: hsl(0 0% 3.9%);
-  --card-foreground: hsl(0 0% 98%);
-  --popover: hsl(0 0% 3.9%);
-  --popover-foreground: hsl(0 0% 98%);
-  --primary: hsl(0 0% 98%);
-  --primary-foreground: hsl(0 0% 9%);
-  --secondary: hsl(0 0% 14.9%);
-  --secondary-foreground: hsl(0 0% 98%);
-  --muted: hsl(0 0% 14.9%);
-  --muted-foreground: hsl(0 0% 63.9%);
-  --accent: hsl(0 0% 14.9%);
-  --accent-foreground: hsl(0 0% 98%);
-  --destructive: hsl(0 62.8% 30.6%);
-  --destructive-foreground: hsl(0 0% 98%);
-  --border: hsl(0 0% 14.9%);
-  --input: hsl(0 0% 14.9%);
-  --ring: hsl(0 0% 83.1%);
-  --chart-1: hsl(220 70% 50%);
-  --chart-2: hsl(160 60% 45%);
-  --chart-3: hsl(30 80% 55%);
-  --chart-4: hsl(280 65% 60%);
-  --chart-5: hsl(340 75% 55%);
+  --background: hsl(292 10% 7%);
+  --foreground: hsl(292 0% 90%);
+  --card: hsl(292 0% 7%);
+  --card-foreground: hsl(292 0% 90%);
+  --popover: hsl(292 10% 5%);
+  --popover-foreground: hsl(292 0% 90%);
+  --primary: hsl(292 72% 59%);
+  --primary-foreground: 0 0% 100%;
+  --secondary: hsl(292 10% 10%);
+  --secondary-foreground: 0 0% 100%;
+  --muted: hsl(254 10% 15%);
+  --muted-foreground: hsl(292 0% 60%);
+  --accent: hsl(254 10% 15%);
+  --accent-foreground: hsl(292 0% 90%);
+  --destructive: hsl(0 50% 30%);
+  --destructive-foreground: hsl(292 0% 90%);
+  --border: hsl(300, 6%, 13%);
+  --input: hsl(292 20% 18%);
+  --ring: hsl(292 72% 59%);
+  --radius: 0.6rem;
 }
 
 @theme inline {
@@ -172,6 +163,11 @@
   }
 }
 
+@theme {
+  --font-primary: "Manrope", sans-serif;
+  --font-secondary: "Instrument Serif", serif;
+}
+
 @layer base {
   :root {
     --sidebar-background: 0 0% 98%;
@@ -195,3 +191,51 @@
     --sidebar-ring: 217.2 91.2% 59.8%;
   }
 }
+
+/* Animations */
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.rotate-circle {
+  animation: rotate 60s linear infinite;
+}
+
+.counter-rotate {
+  animation: spin 60s linear infinite reverse;
+}
+
+/* Accordion */
+
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+/* Animation classes you can apply to your elements */
+.animate-accordion-down {
+  animation: accordion-down 0.2s ease-out;
+}
+
+.animate-accordion-up {
+  animation: accordion-up 0.2s ease-out;
+}
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 6c35438..94f6135 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -1,18 +1,20 @@
 import type { Metadata } from "next";
-import localFont from "next/font/local";
+import { Instrument_Serif, Manrope } from "next/font/google";
 import "./globals.css";
 import { Appbar } from "@/components/Appbar";
 import { Providers } from "@/components/providers/Providers";
-import { Footer } from "@/components/Footer";
+import Footer from "@/components/landing/footer";
 
-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
+const manrope = Manrope({
+  subsets: ["latin"],
+  variable: "--font-manrope",
+  weight: ["300", "400", "500", "600", "700"],
 });
 
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
+const instrumental_serif = Instrument_Serif({
+  subsets: ["latin"],
+  variable: "--font-instrumental-serif",
+  weight: ["400"],
 });
 
 export const metadata: Metadata = {
@@ -36,7 +38,7 @@ export default function RootLayout({
         />
       </head>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} min-h-screen bg-background font-sans antialiased`}
+        className={`${manrope.variable} ${instrumental_serif.variable} min-h-screen bg-background font-sans antialiased`}
       >
         <Providers>
           <div className="relative flex min-h-screen flex-col">
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index fb0800a..b3c47c5 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -1,9 +1,14 @@
-import { Hero } from "@/components/home/Hero";
+import Features from "@/components/landing/features";
+import FAQ from "@/components/landing/faq";
+import Footer from "@/components/landing/footer";
+import Hero from "@/components/landing/hero";
 
 export default function Home() {
   return (
     <div>
       <Hero />
+      <Features />
+      <FAQ />
     </div>
   );
 }
diff --git a/apps/web/components/Hero.tsx b/apps/web/components/Hero.tsx
new file mode 100644
index 0000000..72dcf2c
--- /dev/null
+++ b/apps/web/components/Hero.tsx
@@ -0,0 +1,394 @@
+"use client";
+import { SignInButton, SignedIn, SignedOut } from "@clerk/nextjs";
+import { Button } from "./ui/button";
+import { useRouter } from "next/navigation";
+import { motion } from "motion/react";
+import {
+  ArrowRight,
+  Sparkles,
+  Camera,
+  Wand2,
+  Users,
+  Star,
+  Clock,
+  CheckCircle2,
+  Zap,
+} from "lucide-react";
+import useEmblaCarousel from "embla-carousel-react";
+import Autoplay from "embla-carousel-autoplay";
+import { useEffect, useState } from "react";
+
+export function Hero() {
+  const router = useRouter();
+  const [emblaRef, emblaApi] = useEmblaCarousel(
+    {
+      loop: true,
+      align: "start",
+      skipSnaps: false,
+      dragFree: true,
+    },
+    [
+      Autoplay({
+        delay: 3000,
+        stopOnInteraction: false,
+        stopOnMouseEnter: true,
+      }),
+    ]
+  );
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [scrollSnaps, setScrollSnaps] = useState<number[]>([]);
+
+  useEffect(() => {
+    if (emblaApi) {
+      setScrollSnaps(emblaApi.scrollSnapList());
+      emblaApi.on("select", () => {
+        setSelectedIndex(emblaApi.selectedScrollSnap());
+      });
+    }
+  }, [emblaApi]);
+
+  const features = [
+    {
+      icon: <Camera className="w-6 h-6" />,
+      title: "Professional Quality",
+      description: "Studio-grade portraits generated in seconds",
+      gradient: "from-blue-500 to-purple-500",
+    },
+    {
+      icon: <Wand2 className="w-6 h-6" />,
+      title: "Magic Editing",
+      description: "Advanced AI tools to perfect every detail",
+      gradient: "from-purple-500 to-pink-500",
+    },
+    {
+      icon: <Users className="w-6 h-6" />,
+      title: "Family Collections",
+      description: "Create stunning portraits for the whole family",
+      gradient: "from-pink-500 to-red-500",
+    },
+    {
+      icon: <Clock className="w-6 h-6" />,
+      title: "Instant Delivery",
+      description: "Get your photos in minutes, not days",
+      gradient: "from-red-500 to-orange-500",
+    },
+  ];
+
+  const testimonials = [
+    {
+      text: "The quality of these AI portraits is absolutely incredible. They look better than my professional headshots!",
+      author: "Sarah J.",
+      role: "Marketing Director",
+      avatar:
+        "https://r2-us-west.photoai.com/1739277231-0b2465581e9551abecd467b163d0d48a-1.png",
+    },
+    {
+      text: "We used this for our family portraits and the results were stunning. So much easier than a traditional photoshoot.",
+      author: "Michael R.",
+      role: "Family of 5",
+      avatar:
+        "https://r2-us-west.photoai.com/1739273789-920e7410ef180855f9a5718d1e37eb3a-1.png",
+    },
+    {
+      text: "Game-changer for my professional brand. The variety of styles and quick delivery is unmatched.",
+      author: "David L.",
+      role: "Entrepreneur",
+      avatar:
+        "https://r2-us-west.photoai.com/1739273783-9effbeb7239423cba9629e7dd06f3565-1.png",
+    },
+  ];
+
+  return (
+    <div className="relative min-h-screen bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-purple-900 via-gray-900 to-black text-white overflow-hidden">
+      {/* Animated background elements */}
+      <div className="absolute inset-0 overflow-hidden">
+        <div className="absolute -inset-[10px] opacity-50">
+          <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-purple-500/30 rounded-full mix-blend-multiply filter blur-xl animate-blob" />
+          <div className="absolute top-1/3 right-1/4 w-96 h-96 bg-pink-500/30 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-2000" />
+          <div className="absolute bottom-1/4 left-1/3 w-96 h-96 bg-blue-500/30 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-4000" />
+        </div>
+      </div>
+
+      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-16">
+        {/* Hero Header Section */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          className="text-center space-y-8"
+        >
+          <div className="flex items-center justify-center gap-4 mb-6">
+            <motion.span
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ delay: 0.2, duration: 0.5 }}
+              className="px-4 py-2 rounded-full bg-purple-500/10 text-purple-300 text-sm font-medium flex items-center gap-2 border border-purple-500/20"
+            >
+              <Sparkles className="w-4 h-4" />
+              Next-Gen AI Portrait Generation
+            </motion.span>
+            <motion.span
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ delay: 0.4, duration: 0.5 }}
+              className="px-4 py-2 rounded-full bg-pink-500/10 text-pink-300 text-sm font-medium flex items-center gap-2 border border-pink-500/20"
+            >
+              <Zap className="w-4 h-4" />
+              Powered by Advanced AI
+            </motion.span>
+          </div>
+          <h1 className="text-5xl md:text-7xl lg:text-8xl font-normal  bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 leading-tight">
+            Transform Your Photos
+            <br />
+            <span className="bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 bg-clip-text text-transparent">
+              Into Magic
+            </span>
+          </h1>
+          <p className="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
+            Experience the next evolution in portrait photography. Create
+            stunning, professional-quality portraits that capture your essence
+            in seconds.
+          </p>
+
+          <div className="flex flex-wrap justify-center gap-4 mt-8">
+            <motion.div
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+              className="flex items-center gap-2 text-sm text-gray-300"
+            >
+              <CheckCircle2 className="w-5 h-5 text-green-500" />
+              100% AI-Powered
+            </motion.div>
+            <motion.div
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+              className="flex items-center gap-2 text-sm text-gray-300"
+            >
+              <CheckCircle2 className="w-5 h-5 text-green-500" />
+              Instant Results
+            </motion.div>
+            <motion.div
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+              className="flex items-center gap-2 text-sm text-gray-300"
+            >
+              <CheckCircle2 className="w-5 h-5 text-green-500" />
+              Professional Quality
+            </motion.div>
+          </div>
+        </motion.div>
+
+        {/* Main CTA and Carousel Section */}
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.4, duration: 0.8 }}
+          className="mt-12"
+        >
+          <div className="flex justify-center mb-12">
+            <SignedIn>
+              <Button
+                onClick={() => router.push("/dashboard")}
+                className="group relative px-8 py-6 text-lg bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white rounded-full transition-all duration-300 shadow-lg hover:shadow-xl hover:-translate-y-1"
+              >
+                Go to Dashboard
+                <ArrowRight className="inline-block ml-2 group-hover:translate-x-1 transition-transform" />
+              </Button>
+            </SignedIn>
+            <SignedOut>
+              <Button
+                asChild
+                className="group relative px-8 py-6 text-lg bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white rounded-full transition-all duration-300 shadow-lg hover:shadow-xl hover:-translate-y-1"
+              >
+                <SignInButton>
+                  <span className="flex items-center">
+                    Start Creating Now
+                    <ArrowRight className="ml-2 group-hover:translate-x-1 transition-transform" />
+                  </span>
+                </SignInButton>
+              </Button>
+            </SignedOut>
+          </div>
+
+          <div className="relative overflow-hidden">
+            <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent z-10" />
+            <div className="embla w-full max-w-6xl mx-auto">
+              <div className="embla__viewport" ref={emblaRef}>
+                <div className="embla__container">
+                  {[
+                    "https://r2-us-west.photoai.com/1739277231-0b2465581e9551abecd467b163d0d48a-1.png",
+                    "https://r2-us-west.photoai.com/1739273789-920e7410ef180855f9a5718d1e37eb3a-1.png",
+                    "https://r2-us-west.photoai.com/1739273783-9effbeb7239423cba9629e7dd06f3565-1.png",
+                    "https://r2-us-west.photoai.com/1738861046-1175c64ebe0ecfe10b857e205b3b4a1e-3.png",
+                    "https://r2-us-west.photoai.com/1738859038-086cec35785b734c68f99cab1f23d5a2-3.png",
+                    "https://r2-us-west.photoai.com/1738859049-0c3f5f8cbb13210cf7bb1e356fd5a30a-3.png",
+                  ].map((src, index) => (
+                    <div className="embla__slide pl-4" key={index}>
+                      <div className="embla__slide__inner">
+                        <motion.div
+                          whileHover={{ scale: 1.05, y: -10 }}
+                          transition={{ duration: 0.2 }}
+                          className="relative overflow-hidden rounded-2xl aspect-[3/4] shadow-2xl group"
+                        >
+                          <img
+                            src={src}
+                            alt={`AI Generated Portrait ${index + 1}`}
+                            className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
+                          />
+                          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                            <div className="absolute bottom-4 left-4 right-4">
+                              <p className="text-white font-medium mb-1">
+                                Portrait Style {index + 1}
+                              </p>
+                              <p className="text-gray-300 text-sm">
+                                Professional Grade Output
+                              </p>
+                            </div>
+                          </div>
+                        </motion.div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <div className="flex items-center justify-center gap-4 mt-6">
+                <motion.button
+                  whileHover={{ scale: 1.1 }}
+                  whileTap={{ scale: 0.9 }}
+                  className="p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors"
+                  onClick={() => emblaApi?.scrollPrev()}
+                >
+                  <ArrowRight className="w-6 h-6 rotate-180" />
+                </motion.button>
+                <div className="flex gap-2">
+                  {scrollSnaps.map((_, i) => (
+                    <motion.button
+                      key={i}
+                      whileHover={{ scale: 1.2 }}
+                      whileTap={{ scale: 0.9 }}
+                      className={`w-2 h-2 rounded-full transition-all duration-300 ${
+                        i === selectedIndex
+                          ? "bg-white scale-125"
+                          : "bg-white/20 hover:bg-white/40"
+                      }`}
+                      onClick={() => emblaApi?.scrollTo(i)}
+                    />
+                  ))}
+                </div>
+                <motion.button
+                  whileHover={{ scale: 1.1 }}
+                  whileTap={{ scale: 0.9 }}
+                  className="p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors"
+                  onClick={() => emblaApi?.scrollNext()}
+                >
+                  <ArrowRight className="w-6 h-6" />
+                </motion.button>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+
+        {/* Features Section */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.6, duration: 0.8 }}
+          className="mt-32 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"
+        >
+          {features.map((feature, index) => (
+            <motion.div
+              key={index}
+              whileHover={{ y: -10 }}
+              className="p-6 rounded-2xl bg-white/5 backdrop-blur-sm hover:bg-white/10 transition-all duration-300 border border-white/10 group"
+            >
+              <div
+                className={`w-12 h-12 rounded-xl bg-gradient-to-r ${feature.gradient} p-0.5 mb-4 group-hover:scale-110 transition-transform duration-300`}
+              >
+                <div className="w-full h-full bg-gray-900 rounded-[10px] flex items-center justify-center">
+                  {feature.icon}
+                </div>
+              </div>
+              <h3 className="text-xl font-semibold mb-2 bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">
+                {feature.title}
+              </h3>
+              <p className="text-gray-400">{feature.description}</p>
+            </motion.div>
+          ))}
+        </motion.div>
+
+        {/* Testimonials Section */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.8, duration: 0.8 }}
+          className="mt-32"
+        >
+          <h2 className="text-4xl font-bold text-center mb-4 bg-gradient-to-r from-purple-400 to-pink-500 bg-clip-text text-transparent">
+            Loved by Creators
+          </h2>
+          <p className="text-gray-400 text-center mb-12 text-lg">
+            Join thousands of satisfied users who have transformed their
+            portraits
+          </p>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {testimonials.map((testimonial, index) => (
+              <motion.div
+                key={index}
+                whileHover={{ y: -10 }}
+                className="p-6 rounded-2xl bg-white/5 backdrop-blur-sm relative border border-white/10 group hover:bg-white/10 transition-all duration-300"
+              >
+                <div className="absolute -top-6 left-6">
+                  <div className="w-12 h-12 rounded-full overflow-hidden border-2 border-purple-500">
+                    <img
+                      src={testimonial.avatar}
+                      alt={testimonial.author}
+                      className="w-full h-full object-cover"
+                    />
+                  </div>
+                </div>
+                <Star className="absolute top-4 right-4 text-yellow-500 w-6 h-6" />
+                <p className="text-gray-300 mb-4 mt-6">{testimonial.text}</p>
+                <div>
+                  <p className="font-semibold bg-gradient-to-r from-purple-400 to-pink-500 bg-clip-text text-transparent">
+                    {testimonial.author}
+                  </p>
+                  <p className="text-sm text-gray-400">{testimonial.role}</p>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+
+        {/* Final CTA Section */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 1, duration: 0.8 }}
+          className="mt-32 text-center relative"
+        >
+          <div className="absolute inset-0 bg-gradient-to-r from-purple-500/20 via-pink-500/20 to-red-500/20 blur-3xl -z-10" />
+          <h2 className="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 bg-clip-text text-transparent">
+            Ready to Transform Your Photos?
+          </h2>
+          <p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
+            Join the future of portrait photography. Create stunning,
+            professional portraits in seconds.
+          </p>
+          <SignedOut>
+            <Button
+              asChild
+              className="group relative px-8 py-6 text-lg bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white rounded-full transition-all duration-300 shadow-lg hover:shadow-xl hover:-translate-y-1"
+            >
+              <SignInButton>
+                <span className="flex items-center">
+                  Start Your Journey
+                  <ArrowRight className="ml-2 group-hover:translate-x-1 transition-transform" />
+                </span>
+              </SignInButton>
+            </Button>
+          </SignedOut>
+        </motion.div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/landing/faq.tsx b/apps/web/components/landing/faq.tsx
new file mode 100644
index 0000000..e6c7a7c
--- /dev/null
+++ b/apps/web/components/landing/faq.tsx
@@ -0,0 +1,52 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { faq } from "@/constants/data";
+import { Question } from "@phosphor-icons/react/dist/ssr";
+
+export default function FAQ() {
+  return (
+    <>
+      <section className="flex flex-col my-44 items-center w-full max-w-7xl px-4 mx-auto">
+        <div className="flex flex-col items-center py-4 mb-8 w-full h-60">
+          <div className="flex flex-col items-center gap-2">
+            <h2 className="text-sm bg-accent/30 w-fit border-accent border-2 px-4 py-2 rounded-full font-semibold flex items-center gap-2">
+              <Question weight="fill" className="size-4" />
+              FAQ
+            </h2>
+            <div className="text-3xl md:text-5xl text-center font-semibold">
+              Frequently Asked
+              <br />{" "}
+              <span className="bg-gradient-to-br from-primary via-purple-400 to-purple-100 text-transparent bg-clip-text">
+                <span className="font-secondary">Questions</span>
+              </span>
+            </div>
+          </div>
+          <p className="text-center text-sm mt-4">
+            Here are some of the questions that we get asked about PhotoAI.
+          </p>
+        </div>
+        <div className="max-w-3xl mx-auto w-full">
+          {/* add shadcn accordion component here */}
+          <Accordion type="single" collapsible>
+            {faq.map((item, index) => (
+              <AccordionItem
+                key={index}
+                className="px-4 mb-4 rounded-md bg-accent/40"
+                value={index.toString()}
+              >
+                <AccordionTrigger className="text-lg font-medium">
+                  {item.question}
+                </AccordionTrigger>
+                <AccordionContent>{item.answer}</AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+        </div>
+      </section>
+    </>
+  );
+}
diff --git a/apps/web/components/landing/features.tsx b/apps/web/components/landing/features.tsx
new file mode 100644
index 0000000..3cc5a2f
--- /dev/null
+++ b/apps/web/components/landing/features.tsx
@@ -0,0 +1,75 @@
+import { features } from "@/constants/data";
+import { ArrowUpRight, Medal } from "@phosphor-icons/react/dist/ssr";
+import { FlickeringGrid } from "../magicui/flickering-grid";
+import { Button } from "../ui/button";
+import { Badge } from "../ui/badge";
+import { Cube } from "@phosphor-icons/react/dist/ssr";
+
+export default function Features() {
+  return (
+    <>
+      <section className="flex flex-col items-center w-full max-w-7xl px-4 mx-auto">
+        <div className="flex flex-col items-center py-4 mb-8 w-full h-60 ">
+          <div className="flex flex-col items-center gap-2">
+            <h2 className="text-sm bg-accent/30 w-fit border-accent border-2 px-4 py-2 rounded-full font-semibold flex items-center gap-2">
+              <Medal weight="fill" className="size-4" />
+              Features
+            </h2>
+            <div className="text-3xl md:text-5xl text-center font-semibold">
+              Benefits of using
+              <br />{" "}
+              <span className="bg-gradient-to-br from-primary via-purple-400 to-purple-100 text-transparent bg-clip-text">
+                <span className="font-secondary">PhotoAI</span>
+              </span>
+            </div>
+          </div>
+          <p className="text-center text-sm mt-4">
+            PhotoAI is a platform that allows you to create stunning images
+            using
+            <br className="md:block hidden" />
+            AI and also let's you customize the images to your liking.
+          </p>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full">
+          {features.map((feature) => (
+            <div
+              key={feature.title}
+              className="flex relative group overflow-hidden transition-all duration-500 border-2 bg-accent/10 dark:bg-accent/50 border-accent flex-col items-start justify-between gap-4 p-6 md:p-10 w-full h-[25rem] rounded-3xl"
+            >
+              <FlickeringGrid
+                className="absolute transition-all duration-500 group-hover:opacity-20  dark:group-hover:opacity-40 opacity-10 inset-0 z-0 size-full"
+                squareSize={4}
+                gridGap={6}
+                color="#6B7280"
+                maxOpacity={0.5}
+                flickerChance={0.1}
+                height={800}
+                width={800}
+              />
+              <div className="absolute top-[-23rem] z-[101] delay-100 rotate-45 left-[-6rem] group-hover:top-[15rem] group-hover:left-[44rem] transition-all blur-[3em] duration-700 rounded-md h-[40rem] bg-white/50 opacity-30 w-[5rem] backdrop-blur-md"></div>
+              <div className="flex flex-col gap-4 z-[40]">
+                <div className="flex z-[40] items-center justify-center size-16 bg-gradient-to-br from-primary via-primary/80 to-primary/50 rounded-xl">
+                  <feature.icon className="w-10 h-10 text-white" />
+                </div>
+                <div className="z-[40]">
+                  <h3 className="text-2xl z-[40] md:text-3xl font-semibold">
+                    {feature.title}
+                  </h3>
+                  <p className="text-sm mt-2 z-[40] text-neutral-500 dark:text-neutral-400">
+                    {feature.description}
+                  </p>
+                </div>
+              </div>
+              <Badge className="z-[40] transition-all p-2 rounded-lg px-4 duration-500 cursor-pointer hover:bg-muted/80 text-foreground bg-accent">
+                {feature.badgeText}{" "}
+                <Cube weight="fill" className="ml-2 size-4" />
+              </Badge>
+              <div className="transition-all duration-700 opacity-0 group-hover:opacity-100 bottom-[-10rem] md:bottom-[-10rem] right-[0%] z-[-1] absolute bg-gradient-to-t  from-primary to-purple-900/20 blur-[8em] rounded-xl  ease-out size-[12rem] dark:md:size-[25rem] "></div>
+              <div className="transition-all duration-700 opacity-0 group-hover:opacity-100 top-[-10rem] md:top-[-10rem] left-[-20%] z-[10] absolute bg-gradient-to-t  from-background to-background/90 blur-[4em] rounded-full ease-out size-[12rem] dark:md:size-[30rem] "></div>
+            </div>
+          ))}
+        </div>
+      </section>
+    </>
+  );
+}
diff --git a/apps/web/components/landing/footer.tsx b/apps/web/components/landing/footer.tsx
new file mode 100644
index 0000000..7adf750
--- /dev/null
+++ b/apps/web/components/landing/footer.tsx
@@ -0,0 +1,31 @@
+import { Sparkle } from "@phosphor-icons/react/dist/ssr";
+
+export default function Footer() {
+  return (
+    <>
+      <footer className="w-full border-t-2 h-[14rem] md:h-[20rem] overflow-hidden relative border-accent py-10">
+        <div className="flex flex-col items-center justify-center w-full gap-4 ">
+          <div className="text-xl flex items-center gap-2">
+            <div className="flex items-center bg-primary rounded-lg mr-1 p-2">
+              <Sparkle weight="fill" className="size-5 text-white" />
+            </div>
+            <span className="font-secondary tracking-wider font-semibold">
+              PhotoAI
+            </span>
+          </div>
+          <div className="flex flex-col items-center justify-center">
+            <p>
+              © {new Date().getFullYear()}{" "}
+              <span className="font-semibold">PhotoAI</span>. All rights
+              reserved.
+            </p>
+          </div>
+        </div>
+
+        <div className="absolute bottom-[-4.5rem] md:bottom-[-10rem] opacity-100 md:opacity-40 left-1/2 -translate-x-1/2 text-[8rem] md:text-[20rem] font-extrabold text-muted-foreground/30 dark:text-accent font-secondary">
+          PhotoAI
+        </div>
+      </footer>
+    </>
+  );
+}
diff --git a/apps/web/components/landing/hero.tsx b/apps/web/components/landing/hero.tsx
new file mode 100644
index 0000000..71669f5
--- /dev/null
+++ b/apps/web/components/landing/hero.tsx
@@ -0,0 +1,133 @@
+"use client";
+import {
+  ArrowRight,
+  Cube,
+  CubeFocus,
+  Robot,
+  Rocket,
+  RocketLaunch,
+  ShootingStar,
+  Sliders,
+  Sparkle,
+} from "@phosphor-icons/react/dist/ssr";
+import { Button } from "../ui/button";
+import ImgIllustration from "./illustrations/img-illustration";
+import { Badge } from "../ui/badge";
+import RotatingPeople from "./illustrations/rotating-people";
+import AvatarComponent from "./illustrations/avatar-component";
+import { SignedIn, SignedOut, SignInButton } from "@clerk/nextjs";
+import { useRouter } from "next/navigation";
+
+export default function Hero() {
+  const router = useRouter();
+  return (
+    <>
+      <section className="min-h-[43rem] px-4 md:px-0 relative overflow-y-hidden max-h-fit">
+        <div className="flex items-center justify-start py-20 flex-col  w-full h-full">
+          <Badge
+            variant={"outline"}
+            className="bg-primary/10 dark:bg-primary/20 py-1 rounded-full"
+          >
+            <ShootingStar weight="fill" className="size-5 mr-1" /> Next-Gen AI
+            Portrait Generation
+          </Badge>
+          <div className="text-5xl md:text-6xl lg:text-7xl text-center font-semibold flex flex-col items-center w-full">
+            <div className="flex lg:flex-row flex-col items-center gap-2">
+              Transform any
+              <div className=" mx-2 flex items-center gap-2 font-medium">
+                <ImgIllustration />
+                <span className="font-semibold">photo</span>
+              </div>{" "}
+            </div>
+            <p className="">
+              into{" "}
+              <span className="font-secondary font-semibold bg-gradient-to-br from-primary to-purple-200 text-transparent bg-clip-text">
+                Magic
+              </span>{" "}
+              with AI
+            </p>
+          </div>
+          <p className="text-center text-neutral-500 dark:text-neutral-400 mt-6">
+            Experience the{" "}
+            <span className="text-neutral-700 dark:text-neutral-200 font-semibold">
+              next evolution
+            </span>{" "}
+            in portrait photography.
+            <br />
+            Create stunning,{" "}
+            <span className="text-neutral-700 dark:text-neutral-200 font-semibold">
+              professional-quality
+            </span>{" "}
+            portraits that capture your essence in{" "}
+            <span className="text-neutral-700 dark:text-neutral-200 font-semibold">
+              seconds
+            </span>
+            .
+          </p>
+          <div className="flex mt-8 items-center justify-center gap-4">
+            <SignedIn>
+              <Button
+                onClick={() => router.push("/dashboard")}
+                className="h-12 max-w-fit px-4 hover:ring-4 hover:ring-primary/40 transition-all duration-500 cursor-pointer min-w-38 text-base"
+              >
+                Go to Dashboard <RocketLaunch weight="fill" />
+              </Button>
+            </SignedIn>
+            <SignedOut>
+              <Button className="h-12 hover:ring-4 hover:ring-primary/40 transition-all duration-500 cursor-pointer w-38 text-base">
+                Get Started <RocketLaunch weight="fill" />
+              </Button>
+            </SignedOut>
+
+            <Button
+              variant={"outline"}
+              className="h-12 hover:ring-4 hover:ring-accent/80 transition-all duration-500 cursor-pointer border-border w-38 text-base"
+            >
+              Learn More <ArrowRight weight="bold" />
+            </Button>
+          </div>
+          <AvatarComponent />
+
+          <div className="overflow-hidden flex items-start justify-center w-full relative">
+            <RotatingPeople />
+
+            <div className="bg-muted/30 border-[4px] border-white/60 dark:border-white/10 backdrop-blur-xl flex items-center justify-center absolute p-6 -bottom-[128px] left-1/2 -translate-x-1/2 size-[24rem] rounded-full">
+              <div className="bg-white/60 dark:bg-white/5 backdrop-blur-xl font-secondary w-full h-full text-foreground flex flex-col py-14 gap-4 items-center font-semibold text-6xl rounded-full">
+                <div className="flex items-center shadow-lg shadow-primary bg-primary p-4 rounded-xl w-fit gap-2">
+                  <Sparkle weight="fill" className="size-10 text-white" />
+                </div>
+                <span>PhotoAI</span>
+              </div>
+            </div>
+            <div className="bottom-[-10rem] md:bottom-[-10rem] left-[50%] z-[-1] absolute bg-gradient-to-t opacity-50 dark:opacity-100 from-primary to-purple-900/20 blur-[8em] rounded-xl transition-all translate-x-[-50%] duration-700 ease-out size-[25rem] "></div>
+          </div>
+
+          <div className=" flex flex-wrap items-center mt-20 justify-center gap-4">
+            <div className="lg:absolute border bg-accent/40 backdrop-blur-lg flex items-center justify-center gap-2 font-semibold rounded-full px-3 py-1 w-fit h-fit lg:-rotate-12 top-[15rem] left-[10rem]">
+              <CubeFocus
+                weight="fill"
+                className="size-5 md:size-8 text-primary"
+              />
+              <span>Top Quality</span>
+            </div>
+            <div className="lg:absolute border bg-accent/40 backdrop-blur-lg flex items-center justify-center gap-2 font-semibold rounded-full px-3 py-1 w-fit h-fit lg:rotate-12 top-[27rem] left-[20rem]">
+              <Robot weight="fill" className="size-5 md:size-8 text-primary" />
+              <span>AI-Powered</span>
+            </div>
+            <div className="lg:absolute border bg-accent/40 backdrop-blur-lg flex items-center justify-center gap-2 font-semibold rounded-full px-3 py-1 w-fit h-fit lg:rotate-12 top-[15rem] right-[10rem]">
+              <Sliders
+                weight="fill"
+                className="size-5 md:size-8 text-primary"
+              />
+              <span>Customizable</span>
+            </div>
+            <div className="lg:absolute border bg-accent/40 backdrop-blur-lg flex items-center justify-center gap-2 font-semibold rounded-full px-3 py-1 w-fit h-fit lg:-rotate-12 top-[27rem] right-[20rem]">
+              <Cube weight="fill" className="size-5 md:size-8 text-primary" />
+              <span>Instant Results</span>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
diff --git a/apps/web/components/landing/illustrations/avatar-component.tsx b/apps/web/components/landing/illustrations/avatar-component.tsx
new file mode 100644
index 0000000..b842638
--- /dev/null
+++ b/apps/web/components/landing/illustrations/avatar-component.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+export default function AvatarComponent({ className }: { className?: string }) {
+  return (
+    <div
+      className={cn(
+        "flex items-center rounded-full mt-6 border border-border bg-background p-1 shadow shadow-black/5",
+        className
+      )}
+    >
+      <div className="flex -space-x-1.5">
+        <img
+          className="rounded-full ring-1 ring-background"
+          src="https://originui.com/avatar-80-03.jpg"
+          width={22}
+          height={22}
+          alt="Avatar 01"
+        />
+        <img
+          className="rounded-full ring-1 ring-background"
+          src="https://originui.com/avatar-80-04.jpg"
+          width={22}
+          height={22}
+          alt="Avatar 02"
+        />
+        <img
+          className="rounded-full ring-1 ring-background"
+          src="https://originui.com/avatar-80-05.jpg"
+          width={22}
+          height={22}
+          alt="Avatar 03"
+        />
+        <img
+          className="rounded-full ring-1 ring-background"
+          src="https://originui.com/avatar-80-06.jpg"
+          width={22}
+          height={22}
+          alt="Avatar 04"
+        />
+      </div>
+      <p className="px-2 text-xs text-muted-foreground">
+        Trusted by <strong className="font-medium text-foreground">50+</strong>{" "}
+        founders.
+      </p>
+    </div>
+  );
+}
diff --git a/apps/web/components/landing/illustrations/img-illustration.tsx b/apps/web/components/landing/illustrations/img-illustration.tsx
new file mode 100644
index 0000000..673ca10
--- /dev/null
+++ b/apps/web/components/landing/illustrations/img-illustration.tsx
@@ -0,0 +1,42 @@
+import Image from "next/image";
+
+export default function ImgIllustration() {
+  const IMAGES = [
+    "https://r2-us-west.photoai.com/1739277231-0b2465581e9551abecd467b163d0d48a-1.png",
+    "https://r2-us-west.photoai.com/1739273783-9effbeb7239423cba9629e7dd06f3565-1.png",
+    "https://r2-us-west.photoai.com/1738859038-086cec35785b734c68f99cab1f23d5a2-3.png",
+  ];
+  return (
+    <>
+      <div className="flex items-center group hover:-space-x-5 -space-x-4 h-full mt-0 md:mt-4">
+        <div className="w-8 md:w-11 transition-all duration-300 group-hover:-rotate-[4deg] -rotate-[10deg] border-2 md:border-[3px] border-white overflow-hidden rounded-md md:rounded-lg h-[70%]">
+          <img
+            src={IMAGES[0]}
+            alt="img-illustration-1"
+            className="w-full h-full object-cover"
+            width={100}
+            height={100}
+          />
+        </div>
+        <div className="shadow-xl w-8 transition-all duration-300 md:w-11 border-2 md:border-[3px] border-white z-20 rounded-md md:rounded-lg overflow-hidden h-[70%]">
+          <img
+            src={IMAGES[1]}
+            alt="img-illustration-2"
+            className="w-full h-full object-cover"
+            width={100}
+            height={100}
+          />
+        </div>
+        <div className="w-8 md:w-11 transition-all duration-300 group-hover:rotate-[4deg] rotate-[10deg] border-2 md:border-[3px] border-white overflow-hidden rounded-md md:rounded-lg h-[70%]">
+          <img
+            src={IMAGES[2]}
+            alt="img-illustration-3"
+            className="w-full h-full object-cover"
+            width={100}
+            height={100}
+          />
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/apps/web/components/landing/illustrations/rotating-people.tsx b/apps/web/components/landing/illustrations/rotating-people.tsx
new file mode 100644
index 0000000..8e7945c
--- /dev/null
+++ b/apps/web/components/landing/illustrations/rotating-people.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import { Users } from "lucide-react";
+import Image from "next/image";
+import { cn } from "@/lib/utils";
+
+export default function RotatingPeople({ className }: { className?: string }) {
+  const profiles = [
+    "https://r2-us-west.photoai.com/1739277231-0b2465581e9551abecd467b163d0d48a-1.png",
+    "https://r2-us-west.photoai.com/1739273789-920e7410ef180855f9a5718d1e37eb3a-1.png",
+    "https://r2-us-west.photoai.com/1739273783-9effbeb7239423cba9629e7dd06f3565-1.png",
+    "https://r2-us-west.photoai.com/1738861046-1175c64ebe0ecfe10b857e205b3b4a1e-3.png",
+    "https://r2-us-west.photoai.com/1738859038-086cec35785b734c68f99cab1f23d5a2-3.png",
+    "https://r2-us-west.photoai.com/1738859049-0c3f5f8cbb13210cf7bb1e356fd5a30a-3.png",
+    "https://r2-us-west.photoai.com/1739273783-9effbeb7239423cba9629e7dd06f3565-1.png",
+    "https://r2-us-west.photoai.com/1738861046-1175c64ebe0ecfe10b857e205b3b4a1e-3.png",
+  ];
+
+  return (
+    <div className="flex mt-[50rem] relative">
+      <div className="h-full rotate-circle">
+        {profiles.map((profile, index) => {
+          const angle = (index * 360) / profiles.length;
+          const radius = 550; // Adjust this value to change the circle size
+          const radian = (angle * Math.PI) / 180;
+          const x = Math.cos(radian) * radius;
+          const y = Math.sin(radian) * radius;
+
+          return (
+            <div
+              key={index}
+              className={cn(
+                "absolute !w-52 hover:scale-110  transition-all duration-700 aspect-square transform -translate-x-1/2 -translate-y-1/2",
+                index % 2 === 0 ? "hover:rotate-6" : "hover:-rotate-6"
+              )}
+              style={{
+                left: `calc(50% + ${x}px)`,
+                top: `calc(50% + ${y}px)`,
+              }}
+            >
+              <div className="counter-rotate">
+                <Image
+                  src={profile}
+                  width={800}
+                  height={800}
+                  alt={`Profile ${profile}`}
+                  className="w-full h-full rounded-2xl object-cover border-4 border-white shadow-lg"
+                />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/magicui/flickering-grid.tsx b/apps/web/components/magicui/flickering-grid.tsx
new file mode 100644
index 0000000..f303d4d
--- /dev/null
+++ b/apps/web/components/magicui/flickering-grid.tsx
@@ -0,0 +1,199 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+interface FlickeringGridProps extends React.HTMLAttributes<HTMLDivElement> {
+  squareSize?: number;
+  gridGap?: number;
+  flickerChance?: number;
+  color?: string;
+  width?: number;
+  height?: number;
+  className?: string;
+  maxOpacity?: number;
+}
+
+export const FlickeringGrid: React.FC<FlickeringGridProps> = ({
+  squareSize = 4,
+  gridGap = 6,
+  flickerChance = 0.3,
+  color = "rgb(0, 0, 0)",
+  width,
+  height,
+  className,
+  maxOpacity = 0.3,
+  ...props
+}) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isInView, setIsInView] = useState(false);
+  const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 });
+
+  const memoizedColor = useMemo(() => {
+    const toRGBA = (color: string) => {
+      if (typeof window === "undefined") {
+        return `rgba(0, 0, 0,`;
+      }
+      const canvas = document.createElement("canvas");
+      canvas.width = canvas.height = 1;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return "rgba(255, 0, 0,";
+      ctx.fillStyle = color;
+      ctx.fillRect(0, 0, 1, 1);
+      const [r, g, b] = Array.from(ctx.getImageData(0, 0, 1, 1).data);
+      return `rgba(${r}, ${g}, ${b},`;
+    };
+    return toRGBA(color);
+  }, [color]);
+
+  const setupCanvas = useCallback(
+    (canvas: HTMLCanvasElement, width: number, height: number) => {
+      const dpr = window.devicePixelRatio || 1;
+      canvas.width = width * dpr;
+      canvas.height = height * dpr;
+      canvas.style.width = `${width}px`;
+      canvas.style.height = `${height}px`;
+      const cols = Math.floor(width / (squareSize + gridGap));
+      const rows = Math.floor(height / (squareSize + gridGap));
+
+      const squares = new Float32Array(cols * rows);
+      for (let i = 0; i < squares.length; i++) {
+        squares[i] = Math.random() * maxOpacity;
+      }
+
+      return { cols, rows, squares, dpr };
+    },
+    [squareSize, gridGap, maxOpacity],
+  );
+
+  const updateSquares = useCallback(
+    (squares: Float32Array, deltaTime: number) => {
+      for (let i = 0; i < squares.length; i++) {
+        if (Math.random() < flickerChance * deltaTime) {
+          squares[i] = Math.random() * maxOpacity;
+        }
+      }
+    },
+    [flickerChance, maxOpacity],
+  );
+
+  const drawGrid = useCallback(
+    (
+      ctx: CanvasRenderingContext2D,
+      width: number,
+      height: number,
+      cols: number,
+      rows: number,
+      squares: Float32Array,
+      dpr: number,
+    ) => {
+      ctx.clearRect(0, 0, width, height);
+      ctx.fillStyle = "transparent";
+      ctx.fillRect(0, 0, width, height);
+
+      for (let i = 0; i < cols; i++) {
+        for (let j = 0; j < rows; j++) {
+          const opacity = squares[i * rows + j];
+          ctx.fillStyle = `${memoizedColor}${opacity})`;
+          ctx.fillRect(
+            i * (squareSize + gridGap) * dpr,
+            j * (squareSize + gridGap) * dpr,
+            squareSize * dpr,
+            squareSize * dpr,
+          );
+        }
+      }
+    },
+    [memoizedColor, squareSize, gridGap],
+  );
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const container = containerRef.current;
+    if (!canvas || !container) return;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    let animationFrameId: number;
+    let gridParams: ReturnType<typeof setupCanvas>;
+
+    const updateCanvasSize = () => {
+      const newWidth = width || container.clientWidth;
+      const newHeight = height || container.clientHeight;
+      setCanvasSize({ width: newWidth, height: newHeight });
+      gridParams = setupCanvas(canvas, newWidth, newHeight);
+    };
+
+    updateCanvasSize();
+
+    let lastTime = 0;
+    const animate = (time: number) => {
+      if (!isInView) return;
+
+      const deltaTime = (time - lastTime) / 1000;
+      lastTime = time;
+
+      updateSquares(gridParams.squares, deltaTime);
+      drawGrid(
+        ctx,
+        canvas.width,
+        canvas.height,
+        gridParams.cols,
+        gridParams.rows,
+        gridParams.squares,
+        gridParams.dpr,
+      );
+      animationFrameId = requestAnimationFrame(animate);
+    };
+
+    const resizeObserver = new ResizeObserver(() => {
+      updateCanvasSize();
+    });
+
+    resizeObserver.observe(container);
+
+    const intersectionObserver = new IntersectionObserver(
+      ([entry]) => {
+        setIsInView(entry.isIntersecting);
+      },
+      { threshold: 0 },
+    );
+
+    intersectionObserver.observe(canvas);
+
+    if (isInView) {
+      animationFrameId = requestAnimationFrame(animate);
+    }
+
+    return () => {
+      cancelAnimationFrame(animationFrameId);
+      resizeObserver.disconnect();
+      intersectionObserver.disconnect();
+    };
+  }, [setupCanvas, updateSquares, drawGrid, width, height, isInView]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(`h-full w-full ${className}`)}
+      {...props}
+    >
+      <canvas
+        ref={canvasRef}
+        className="pointer-events-none"
+        style={{
+          width: canvasSize.width,
+          height: canvasSize.height,
+        }}
+      />
+    </div>
+  );
+};
diff --git a/apps/web/components/toggler.tsx b/apps/web/components/toggler.tsx
new file mode 100644
index 0000000..46655a6
--- /dev/null
+++ b/apps/web/components/toggler.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import * as React from "react";
+import { useTheme } from "next-themes";
+import { Moon, Sun } from "@phosphor-icons/react";
+
+export function ToggleTheme() {
+  const { setTheme, theme } = useTheme();
+  return (
+    <>
+      <div
+        className={`flex border cursor-pointer bg-accent/80 rounded-lg gap-2 size-8 items-center flex-col justify-center text-center transition-all duration-300`}
+        onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+      >
+        <Sun
+          weight="bold"
+          className="size-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+        />
+        <Moon
+          weight="bold"
+          className="absolute size-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+        />
+      </div>
+    </>
+  );
+}
diff --git a/apps/web/components/ui/accordion.tsx b/apps/web/components/ui/accordion.tsx
new file mode 100644
index 0000000..0378817
--- /dev/null
+++ b/apps/web/components/ui/accordion.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item className={cn("border-b", className)} {...props} />
+  );
+}
+AccordionItem.displayName = "AccordionItem";
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        className={cn(
+          "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+      {...props}
+    >
+      <div className={cn("pb-4 pt-0", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/apps/web/components/ui/badge.tsx b/apps/web/components/ui/badge.tsx
new file mode 100644
index 0000000..e87d62b
--- /dev/null
+++ b/apps/web/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/apps/web/constants/data.ts b/apps/web/constants/data.ts
new file mode 100644
index 0000000..f01f256
--- /dev/null
+++ b/apps/web/constants/data.ts
@@ -0,0 +1,60 @@
+import {
+  Aperture,
+  MagicWand,
+  Users,
+  Clock,
+} from "@phosphor-icons/react/dist/ssr";
+
+export const features = [
+  {
+    icon: Aperture,
+    badgeText: "100% Quality",
+    title: "Professional Quality",
+    description: "Studio-grade portraits generated in seconds",
+    gradient: "from-blue-500 to-purple-500",
+  },
+  {
+    icon: MagicWand,
+    badgeText: "20+ Models",
+    title: "Advanced AI tools to perfect every detail",
+    description: "Advanced AI tools to perfect every detail",
+    gradient: "from-purple-500 to-pink-500",
+  },
+  {
+    icon: Users,
+    badgeText: "100k+ happy users",
+    title: "Create stunning portraits for the whole family",
+    description: "Create stunning portraits for the whole family",
+    gradient: "from-pink-500 to-red-500",
+  },
+  {
+    icon: Clock,
+    badgeText: "Results in <10s",
+    title: "Get your photos in minutes, not days",
+    description: "Get your photos in minutes, not days",
+    gradient: "from-red-500 to-orange-500",
+  },
+];
+
+export const faq = [
+  {
+    question: "What is PhotoAI?",
+    answer:
+      "PhotoAI is an advanced AI-powered platform that transforms your ideas into stunning, professional-quality images in seconds. Whether you're a designer, content creator, or business owner, our platform helps you generate unique visuals using state-of-the-art artificial intelligence.",
+  },
+  {
+    question: "How does PhotoAI work?",
+    answer:
+      "Simply describe the image you want to create using natural language, and our AI engine will generate high-quality images based on your description. You can further refine your results by adjusting parameters like style, composition, and color scheme. Our advanced algorithms ensure each creation is unique and tailored to your needs.",
+  },
+  {
+    question: "Is there a limit to how many images I can generate?",
+    answer:
+      "The number of images you can generate depends on your subscription plan. Free users can create up to 15 images per month, while our premium plans offer unlimited generations, priority processing, and access to advanced features like higher resolutions and commercial usage rights.",
+  },
+  {
+    question: "Can I use PhotoAI-generated images commercially?",
+    answer:
+      "Yes, premium subscribers receive full commercial rights to their generated images. This means you can use them for business purposes, marketing materials, websites, and social media. However, we recommend reviewing our terms of service for specific usage guidelines and restrictions.",
+  },
+];
diff --git a/apps/web/package.json b/apps/web/package.json
index 300686c..d52ab40 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -11,6 +11,7 @@
     "check-types": "tsc --noEmit"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.3",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-dropdown-menu": "^2.1.6",
     "@radix-ui/react-label": "^2.1.2",
@@ -40,7 +41,8 @@
     "react-hot-toast": "^2.5.1",
     "tailwind-merge": "^3.0.1",
     "tailwindcss": "^4.0.6",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "motion": "^12.4.2"
   },
   "devDependencies": {
     "@repo/eslint-config": "*",
diff --git a/bun.lockb b/bun.lockb
deleted file mode 100755
index 6aa8ab4..0000000
Binary files a/bun.lockb and /dev/null differ