Update src/app/planner/page.tsx

src/app/about/page.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import TextAbout from '@/components/sections/about/TextAbout';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import { Users } from "lucide-react";
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-stagger"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="soft"
+        contentWidth="medium"
+        sizing="largeSizeMediumTitles"
+        background="noiseDiagonalGradient"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Features", id: "/#features" },
+              { name: "Pricing", id: "/#pricing" },
+            ]}
+            brandName="NeuroFlow"
+          />
+        </div>
+
+        <div id="about" data-section="about">
+          <TextAbout
+            tag="Our Mission"
+            tagIcon={Users}
+            title="Building a Calmer Future for Neurodivergent Minds"
+            useInvertedBackground={false}
+            className="py-24"
+          />
+        </div>
+
+        <div id="contact" data-section="contact">
+          <ContactCenter
+            tag="Contact Us"
+            title="Have questions or want to partner with us?"
+            description="Reach out to our team—we'd love to hear your story."
+            background={{ variant: "rotated-rays-static" }}
+            useInvertedBackground={false}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterMedia
+            imageSrc="http://img.b2bpic.net/free-photo/aesthetic-background-with-light-sunset-projector-lamp_53876-103668.jpg"
+            logoText="NeuroFlow"
+            columns={[
+              { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Careers", href: "#" }] },
+              { title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
+            ]}
+            copyrightText="© 2025 NeuroFlow | Calm Productivity"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -17,33 +17,27 @@ import { Activity, Calendar, CheckCircle, Clock, Lightbulb, Music, ShieldCheck,
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="text-stagger"
+        defaultButtonVariant="hover-magnetic"
         defaultTextAnimation="reveal-blur"
         borderRadius="soft"
         contentWidth="medium"
         sizing="largeSizeMediumTitles"
         background="noiseDiagonalGradient"
         cardStyle="soft-shadow"
-        primaryButtonStyle="flat"
+        primaryButtonStyle="primary-glow"
         secondaryButtonStyle="glass"
-        headingFontWeight="normal"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
         {
-          name: "Features",
-          id: "#features",
-        },
+          name: "Features",          id: "#features"},
         {
-          name: "Pricing",
-          id: "#pricing",
-        },
+          name: "Pricing",          id: "#pricing"},
         {
-          name: "Support",
-          id: "#faq",
-        },
+          name: "Support",          id: "#faq"},
       ]}
       brandName="NeuroFlow"
     />
@@ -52,87 +46,51 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroBillboardRotatedCarousel
       background={{
-        variant: "rotated-rays-animated",
-      }}
+        variant: "rotated-rays-animated"}}
       title="Start Focusing Smarter"
       description="NeuroFlow is your calm, AI-powered companion designed to help you study, organize, and thrive—free from the overwhelm."
       buttons={[
         {
-          text: "Start Free Trial",
-          href: "#",
-        },
+          text: "Start Free Trial",          href: "#"},
       ]}
       carouselItems={[
         {
-          id: "slide1",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-blurred-spots-black-screen_23-2148241362.jpg",
-          imageAlt: "futuristic dashboard interface",
-        },
+          id: "slide1",          imageSrc: "http://img.b2bpic.net/free-photo/high-blurred-spots-black-screen_23-2148241362.jpg",          imageAlt: "futuristic dashboard interface"},
         {
-          id: "slide2",
-          imageSrc: "http://img.b2bpic.net/free-photo/three-smart-blank-screens-wall_53876-160689.jpg",
-          imageAlt: "futuristic dashboard interface",
-        },
+          id: "slide2",          imageSrc: "http://img.b2bpic.net/free-photo/three-smart-blank-screens-wall_53876-160689.jpg",          imageAlt: "futuristic dashboard interface"},
         {
-          id: "slide3",
-          imageSrc: "http://img.b2bpic.net/free-photo/shiny-blue-computer-graphic-backdrop-with-defocused-motion-generated-by-ai_188544-9599.jpg",
-          imageAlt: "futuristic dashboard interface",
-        },
+          id: "slide3",          imageSrc: "http://img.b2bpic.net/free-photo/shiny-blue-computer-graphic-backdrop-with-defocused-motion-generated-by-ai_188544-9599.jpg",          imageAlt: "futuristic dashboard interface"},
         {
-          id: "slide4",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-geometric-shapes_23-2150979717.jpg",
-          imageAlt: "futuristic dashboard interface",
-        },
+          id: "slide4",          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-geometric-shapes_23-2150979717.jpg",          imageAlt: "futuristic dashboard interface"},
         {
-          id: "slide5",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-shape-glowing-with-bright-holographic-colors_23-2151037277.jpg",
-          imageAlt: "futuristic dashboard interface",
-        },
+          id: "slide5",          imageSrc: "http://img.b2bpic.net/free-photo/3d-shape-glowing-with-bright-holographic-colors_23-2151037277.jpg",          imageAlt: "futuristic dashboard interface"},
         {
-          id: "slide6",
-          imageSrc: "http://img.b2bpic.net/free-vector/gradient-glassmorphism-mobile-app-template_23-2149440842.jpg",
-          imageAlt: "futuristic dashboard interface",
-        },
+          id: "slide6",          imageSrc: "http://img.b2bpic.net/free-vector/gradient-glassmorphism-mobile-app-template_23-2149440842.jpg",          imageAlt: "futuristic dashboard interface"},
       ]}
     />
   </div>
 
   <div id="metrics" data-section="metrics">
       <MetricCardThree
-      animationType="slide-up"
+      animationType="depth-3d"
       textboxLayout="default"
       useInvertedBackground={false}
       metrics={[
         {
-          id: "1",
-          icon: CheckCircle,
-          title: "Tasks Completed",
-          value: "2.4k+",
-        },
+          id: "1",          icon: CheckCircle,
+          title: "Tasks Completed",          value: "2.4k+"},
         {
-          id: "2",
-          icon: Clock,
-          title: "Focus Hours",
-          value: "1.2k",
-        },
+          id: "2",          icon: Clock,
+          title: "Focus Hours",          value: "1.2k"},
         {
-          id: "3",
-          icon: Zap,
-          title: "XP Points Earned",
-          value: "58k",
-        },
+          id: "3",          icon: Zap,
+          title: "XP Points Earned",          value: "58k"},
         {
-          id: "4",
-          icon: TrendingUp,
-          title: "Streaks Built",
-          value: "45",
-        },
+          id: "4",          icon: TrendingUp,
+          title: "Streaks Built",          value: "45"},
         {
-          id: "5",
-          icon: Users,
-          title: "Community Members",
-          value: "10k+",
-        },
+          id: "5",          icon: Users,
+          title: "Community Members",          value: "10k+"},
       ]}
       title="Your Progress"
       description="Visualize your journey towards deep focus and sustained productivity."
@@ -141,35 +99,25 @@ export default function LandingPage() {
 
   <div id="features" data-section="features">
       <FeatureHoverPattern
-      animationType="slide-up"
+      animationType="blur-reveal"
       textboxLayout="default"
       useInvertedBackground={false}
       features={[
         {
           icon: Lightbulb,
-          title: "AI ADHD Assistant",
-          description: "Gentle, supportive AI guidance for task breakdowns and routines.",
-        },
+          title: "AI ADHD Assistant",          description: "Gentle, supportive AI guidance for task breakdowns and routines."},
         {
           icon: Activity,
-          title: "Gamified Flow",
-          description: "Earn XP, unlock themes, and build streaks through focused work.",
-        },
+          title: "Gamified Flow",          description: "Earn XP, unlock themes, and build streaks through focused work."},
         {
           icon: Music,
-          title: "Ambient Soundscape",
-          description: "Curated ambient textures to help you enter and stay in deep focus.",
-        },
+          title: "Ambient Soundscape",          description: "Curated ambient textures to help you enter and stay in deep focus."},
         {
           icon: Calendar,
-          title: "Intuitive Planning",
-          description: "Drag-and-drop scheduling that adapts to your energy levels.",
-        },
+          title: "Intuitive Planning",          description: "Drag-and-drop scheduling that adapts to your energy levels."},
         {
           icon: ShieldCheck,
-          title: "Privacy First",
-          description: "Your focus habits and tasks remain yours and yours alone.",
-        },
+          title: "Privacy First",          description: "Your focus habits and tasks remain yours and yours alone."},
       ]}
       title="Designed for Clarity"
       description="Every feature is crafted to reduce friction and minimize cognitive load."
@@ -178,45 +126,25 @@ export default function LandingPage() {
 
   <div id="pricing" data-section="pricing">
       <PricingCardTwo
-      animationType="slide-up"
+      animationType="scale-rotate"
       textboxLayout="default"
       useInvertedBackground={false}
       plans={[
         {
-          id: "basic",
-          badge: "Essential",
-          price: "$0",
-          subtitle: "Get started for free",
-          buttons: [
+          id: "basic",          badge: "Essential",          price: "$0",          subtitle: "Get started for free",          buttons: [
             {
-              text: "Sign Up",
-              href: "#",
-            },
+              text: "Sign Up",              href: "#"},
           ],
           features: [
-            "Basic task manager",
-            "Focus timer",
-            "Community access",
-          ],
+            "Basic task manager",            "Focus timer",            "Community access"],
         },
         {
-          id: "premium",
-          badge: "Pro",
-          price: "$12",
-          subtitle: "For advanced support",
-          buttons: [
+          id: "premium",          badge: "Pro",          price: "$12",          subtitle: "For advanced support",          buttons: [
             {
-              text: "Upgrade",
-              href: "#",
-            },
+              text: "Upgrade",              href: "#"},
           ],
           features: [
-            "AI Assistant",
-            "Ambient music library",
-            "Advanced analytics",
-            "Custom themes",
-            "Priority support",
-          ],
+            "AI Assistant",            "Ambient music library",            "Advanced analytics",            "Custom themes",            "Priority support"],
         },
       ]}
       title="Simple Pricing"
@@ -226,50 +154,25 @@ export default function LandingPage() {
 
   <div id="testimonials" data-section="testimonials">
       <TestimonialCardThirteen
-      animationType="slide-up"
+      animationType="depth-3d"
       textboxLayout="default"
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "1",
-          name: "Sarah J.",
-          handle: "@sarah_focus",
-          testimonial: "Finally, a tool that doesn't feel overwhelming. It feels like a hug for my brain.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/serious-beautiful-middle-aged-business-woman_1262-3072.jpg",
-        },
+          id: "1",          name: "Sarah J.",          handle: "@sarah_focus",          testimonial: "Finally, a tool that doesn't feel overwhelming. It feels like a hug for my brain.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/serious-beautiful-middle-aged-business-woman_1262-3072.jpg"},
         {
-          id: "2",
-          name: "Mark L.",
-          handle: "@mark_study",
-          testimonial: "The AI assistant changed how I break down projects. No more executive dysfunction anxiety.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/middle-eastern-manager-examines-infographics-oversee-business-operations_482257-128607.jpg",
-        },
+          id: "2",          name: "Mark L.",          handle: "@mark_study",          testimonial: "The AI assistant changed how I break down projects. No more executive dysfunction anxiety.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/middle-eastern-manager-examines-infographics-oversee-business-operations_482257-128607.jpg"},
         {
-          id: "3",
-          name: "Emily C.",
-          handle: "@emily_creative",
-          testimonial: "The music and interface are so calming. It makes studying actually feel good.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/waist-up-shot-young-girl-sitting-her-desk-with-pile-textbooks-writing_1098-20796.jpg",
-        },
+          id: "3",          name: "Emily C.",          handle: "@emily_creative",          testimonial: "The music and interface are so calming. It makes studying actually feel good.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/waist-up-shot-young-girl-sitting-her-desk-with-pile-textbooks-writing_1098-20796.jpg"},
         {
-          id: "4",
-          name: "David W.",
-          handle: "@david_pro",
-          testimonial: "I love the gamification. It's the only way I stay consistent with my daily habits.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/man-with-laptop-posing-coworker_23-2148746260.jpg",
-        },
+          id: "4",          name: "David W.",          handle: "@david_pro",          testimonial: "I love the gamification. It's the only way I stay consistent with my daily habits.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/man-with-laptop-posing-coworker_23-2148746260.jpg"},
         {
-          id: "5",
-          name: "Anna P.",
-          handle: "@anna_design",
-          testimonial: "NeuroFlow is gorgeous. It reduces my stress just by opening the dashboard.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-man-looking-camera_23-2148130353.jpg",
-        },
+          id: "5",          name: "Anna P.",          handle: "@anna_design",          testimonial: "NeuroFlow is gorgeous. It reduces my stress just by opening the dashboard.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-man-looking-camera_23-2148130353.jpg"},
       ]}
       showRating={true}
       title="Loved by Neurodivergent Humans"
@@ -282,74 +185,35 @@ export default function LandingPage() {
       useInvertedBackground={false}
       faqs={[
         {
-          id: "q1",
-          title: "Is it right for me?",
-          content: "Yes! NeuroFlow is specifically built for neurodivergent minds.",
-        },
+          id: "q1",          title: "Is it right for me?",          content: "Yes! NeuroFlow is specifically built for neurodivergent minds."},
         {
-          id: "q2",
-          title: "Is it free?",
-          content: "We offer a generous free tier for daily needs.",
-        },
+          id: "q2",          title: "Is it free?",          content: "We offer a generous free tier for daily needs."},
         {
-          id: "q3",
-          title: "What about my data?",
-          content: "Your data is private and never shared.",
-        },
+          id: "q3",          title: "What about my data?",          content: "Your data is private and never shared."},
         {
-          id: "q4",
-          title: "Can I cancel anytime?",
-          content: "Absolutely. Our subscription can be managed or canceled in your settings at any time.",
-        },
+          id: "q4",          title: "Can I cancel anytime?",          content: "Absolutely. Our subscription can be managed or canceled in your settings at any time."},
         {
-          id: "q5",
-          title: "Does it support desktop?",
-          content: "Yes, NeuroFlow is accessible via browser on all major desktop and mobile platforms.",
-        },
+          id: "q5",          title: "Does it support desktop?",          content: "Yes, NeuroFlow is accessible via browser on all major desktop and mobile platforms."},
       ]}
       sideTitle="Questions?"
-      faqsAnimation="slide-up"
+      faqsAnimation="blur-reveal"
     />
   </div>
 
   <div id="blog" data-section="blog">
       <BlogCardThree
-      animationType="slide-up"
+      animationType="scale-rotate"
       textboxLayout="default"
       useInvertedBackground={false}
       title="Latest Insights"
       description="Tips for managing ADHD and finding flow."
       blogs={[
         {
-          id: "b1",
-          category: "Focus",
-          title: "Why Pomodoro helps ADHD",
-          excerpt: "Deep dive into focus rhythms.",
-          imageSrc: "http://img.b2bpic.net/free-vector/chatbot-ai-multiple-styles-set_78370-9694.jpg",
-          authorName: "Team NeuroFlow",
-          authorAvatar: "http://img.b2bpic.net/free-photo/man-sitting-living-room-home-guy-enjoying-studying-using-laptop-headset_1157-48722.jpg",
-          date: "Jan 2025",
-        },
+          id: "b1",          category: "Focus",          title: "Why Pomodoro helps ADHD",          excerpt: "Deep dive into focus rhythms.",          imageSrc: "http://img.b2bpic.net/free-vector/chatbot-ai-multiple-styles-set_78370-9694.jpg",          authorName: "Team NeuroFlow",          authorAvatar: "http://img.b2bpic.net/free-photo/man-sitting-living-room-home-guy-enjoying-studying-using-laptop-headset_1157-48722.jpg",          date: "Jan 2025"},
         {
-          id: "b2",
-          category: "Routine",
-          title: "Morning Habits Simplified",
-          excerpt: "How to start your day calmly.",
-          imageSrc: "http://img.b2bpic.net/free-photo/black-coffee-cup-alarm-clock-diary-pencil-white-background-with-copy-space-text_23-2148061615.jpg",
-          authorName: "Team NeuroFlow",
-          authorAvatar: "http://img.b2bpic.net/free-photo/content-creator-filming-packaged-product-unboxing_482257-124404.jpg",
-          date: "Jan 2025",
-        },
+          id: "b2",          category: "Routine",          title: "Morning Habits Simplified",          excerpt: "How to start your day calmly.",          imageSrc: "http://img.b2bpic.net/free-photo/black-coffee-cup-alarm-clock-diary-pencil-white-background-with-copy-space-text_23-2148061615.jpg",          authorName: "Team NeuroFlow",          authorAvatar: "http://img.b2bpic.net/free-photo/content-creator-filming-packaged-product-unboxing_482257-124404.jpg",          date: "Jan 2025"},
         {
-          id: "b3",
-          category: "Science",
-          title: "The Dopamine Effect",
-          excerpt: "How rewards build consistency.",
-          imageSrc: "http://img.b2bpic.net/free-photo/azure-specks-light_23-2147786100.jpg",
-          authorName: "Team NeuroFlow",
-          authorAvatar: "http://img.b2bpic.net/free-photo/teenage-boy-bedroom-doing-work-stressed-out-frustrated_53876-144262.jpg",
-          date: "Jan 2025",
-        },
+          id: "b3",          category: "Science",          title: "The Dopamine Effect",          excerpt: "How rewards build consistency.",          imageSrc: "http://img.b2bpic.net/free-photo/azure-specks-light_23-2147786100.jpg",          authorName: "Team NeuroFlow",          authorAvatar: "http://img.b2bpic.net/free-photo/teenage-boy-bedroom-doing-work-stressed-out-frustrated_53876-144262.jpg",          date: "Jan 2025"},
       ]}
     />
   </div>
@@ -358,8 +222,7 @@ export default function LandingPage() {
       <ContactCenter
       useInvertedBackground={false}
       background={{
-        variant: "rotated-rays-static",
-      }}
+        variant: "rotated-rays-static"}}
       tag="Get Started"
       title="Ready to find your flow?"
       description="Join thousands who are reclaiming their focus. Sign up today."
@@ -372,29 +235,19 @@ export default function LandingPage() {
       logoText="NeuroFlow"
       columns={[
         {
-          title: "Company",
-          items: [
+          title: "Company",          items: [
             {
-              label: "About",
-              href: "#",
-            },
+              label: "About",              href: "#"},
             {
-              label: "Careers",
-              href: "#",
-            },
+              label: "Careers",              href: "#"},
           ],
         },
         {
-          title: "Legal",
-          items: [
+          title: "Legal",          items: [
             {
-              label: "Privacy",
-              href: "#",
-            },
+              label: "Privacy",              href: "#"},
             {
-              label: "Terms",
-              href: "#",
-            },
+              label: "Terms",              href: "#"},
           ],
         },
       ]}
@@ -404,4 +257,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/planner/page.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+
+export default function PlannerPage() {
+  const [tasks, setTasks] = useState([
+    { id: "1", title: "Review Project Brief" },
+    { id: "2", title: "Design System Updates" },
+    { id: "3", title: "Focus Time - Research" },
+  ]);
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="medium"
+      sizing="largeSizeMediumTitles"
+      background="noiseDiagonalGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <div className="min-h-screen bg-[var(--background)] p-8">
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            brandName="NeuroFlow Planner"
+            navItems={[{ name: "Back to Home", id: "/" }]}
+          />
+        </div>
+        
+        <main className="mt-24 max-w-4xl mx-auto space-y-6">
+          <h1 className="text-4xl font-bold text-[var(--foreground)]">Daily Planner</h1>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="p-8 rounded-3xl bg-white/10 backdrop-blur-xl border border-white/20">
+              <h2 className="text-xl font-semibold mb-4">To Do</h2>
+              <div className="space-y-4">
+                {tasks.map((task) => (
+                  <div
+                    key={task.id}
+                    draggable
+                    className="p-4 rounded-xl bg-white/5 border border-white/10 cursor-move hover:bg-white/10 transition-colors"
+                  >
+                    {task.title}
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div className="p-8 rounded-3xl bg-white/10 backdrop-blur-xl border border-white/20">
+              <h2 className="text-xl font-semibold mb-4">In Progress</h2>
+              <div className="h-64 border-2 border-dashed border-white/10 rounded-2xl flex items-center justify-center text-[var(--foreground)]/50">
+                Drop tasks here
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/study-ai/page.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
+import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
+import { Zap, Target, Star, Brain } from "lucide-react";
+
+export default function StudyAIPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-stagger"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="soft"
+        contentWidth="medium"
+        sizing="largeSizeMediumTitles"
+        background="noiseDiagonalGradient"
+        cardStyle="glass-depth"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Study AI", id: "/study-ai" },
+              { name: "Features", id: "/#features" },
+              { name: "Pricing", id: "/#pricing" }
+            ]}
+            brandName="NeuroFlow"
+          />
+        </div>
+
+        <div id="metrics" data-section="metrics">
+          <MetricCardFourteen
+            title="Your Study XP"
+            tag="Gamified Progression"
+            metrics={[
+              { id: "1", value: "4,250", description: "Total XP Earned" },
+              { id: "2", value: "Level 12", description: "Current Study Rank" },
+              { id: "3", value: "15", description: "Daily Streaks" }
+            ]}
+            metricsAnimation="slide-up"
+            useInvertedBackground={false}
+          />
+        </div>
+
+        <div id="features" data-section="features">
+          <FeatureCardTwelve
+            animationType="blur-reveal"
+            title="Interactive Study Missions"
+            description="Complete your daily checklists to level up your focus and earn rewards."
+            textboxLayout="split"
+            useInvertedBackground={true}
+            features={[
+              { id: "1", label: "Mission 01", title: "Deep Focus Session", items: ["25 min pomodoro", "No phone distractions", "Complete 1 task"], buttons: [{ text: "Start Mission" }] },
+              { id: "2", label: "Mission 02", title: "Knowledge Review", items: ["Summarize lecture notes", "Flashcard drill", "Review missed quiz"], buttons: [{ text: "Start Mission" }] },
+              { id: "3", label: "Mission 03", title: "Mindful Breaks", items: ["5 min meditation", "Drink water", "Stretch"], buttons: [{ text: "Start Mission" }] }
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterMedia
+            imageSrc="http://img.b2bpic.net/free-photo/aesthetic-background-with-light-sunset-projector-lamp_53876-103668.jpg"
+            logoText="NeuroFlow"
+            columns={[
+              { title: "Product", items: [{ label: "Dashboard", href: "/" }, { label: "Study AI", href: "/study-ai" }] },
+              { title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
+            ]}
+            copyrightText="© 2025 NeuroFlow | Calm Productivity"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #000000;
-  --card: #0c0c0c;
-  --foreground: #ffffff;
-  --primary-cta: #cee7ff;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #f8f5ffe6;
+  --primary-cta: #c89bff;
   --primary-cta-text: #000000;
-  --secondary-cta: #000000;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #ffffff;
-  --accent: #535353;
-  --background-accent: #CEE7FF;
+  --accent: #737373;
+  --background-accent: #737373;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/app/therapy-ai/page.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import { Brain, Wind, Sparkles, HeartPulse } from "lucide-react";
+
+export default function TherapyAiPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-stagger"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="soft"
+        contentWidth="medium"
+        sizing="largeSizeMediumTitles"
+        background="noiseDiagonalGradient"
+        cardStyle="glass-depth"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Breathing", id: "#breathing" },
+            ]}
+            brandName="NeuroFlow"
+          />
+        </div>
+
+        <div id="ai-orb" data-section="ai-orb" className="min-h-[600px] flex items-center justify-center bg-gradient-to-b from-background to-accent/10">
+          <div className="relative w-64 h-64 rounded-full bg-gradient-to-r from-blue-400 to-purple-500 animate-pulse blur-3xl opacity-30"></div>
+          <div className="absolute flex flex-col items-center">
+            <Brain size={64} className="text-white" />
+            <h1 className="text-4xl font-bold mt-4">Therapy AI</h1>
+            <p className="text-lg opacity-80 mt-2">Your intelligent companion for serenity.</p>
+          </div>
+        </div>
+
+        <div id="breathing" data-section="breathing">
+          <FeatureCardTwelve
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={true}
+            title="Guided Breathing Exercises"
+            description="Reclaim your calm in moments of overwhelm with our immersive, AI-paced breathing sessions."
+            features={[
+              {
+                id: "f1",                label: "Box Breathing",                title: "Calm the Nervous System",                items: ["4-second inhale", "4-second hold", "4-second exhale", "4-second hold"],
+              },
+              {
+                id: "f2",                label: "Deep Relief",                title: "Stress Reduction",                items: ["Slow rhythmic pacing", "Visual guidance", "Auditory cues"],
+              }
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterMedia
+            imageSrc="http://img.b2bpic.net/free-photo/aesthetic-background-with-light-sunset-projector-lamp_53876-103668.jpg"
+            logoText="NeuroFlow"
+            columns={[]}
+            copyrightText="© 2025 NeuroFlow | AI Wellness"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}