2026-05-22 16:04:52 +00:00
5 changed files with 104 additions and 67 deletions
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -8,16 +8,29 @@ import { Brain, Heart, Users } from "lucide-react";

 export default function AboutPage() {
  return (
-    <ThemeProvider>
-      <NavbarStyleFullscreen
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "About", id: "/about" },
-          { name: "Therapy AI", id: "/therapy-ai" },
-        ]}
-        brandName="NeuroFlow"
-      />
-      <div className="pt-32 pb-20">
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "About", id: "/about" },
+            { name: "Therapy AI", id: "/therapy-ai" },
+          ]}
+          brandName="NeuroFlow"
+        />
+      </div>
+      <div className="pt-32 pb-20" id="metrics" data-section="metrics">
        <AboutMetric
          title="Our Vision for Calm Productivity"
          metrics={[
@@ -26,14 +39,18 @@ export default function AboutPage() {
            { icon: Users, label: "Community", value: "10k+ Members" },
          ]}
          metricsAnimation="blur-reveal"
+          useInvertedBackground={false}
+        />
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterMedia
+          logoText="NeuroFlow"
+          imageSrc="https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0"
+          columns={[
+            { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Therapy AI", href: "/therapy-ai" }] },
+          ]}
        />
      </div>
-      <FooterMedia
-        logoText="NeuroFlow"
-        columns={[
-          { items: [{ label: "Home", href: "/" }, { label: "Therapy AI", href: "/therapy-ai" }] },
-        ]}
-      />
    </ThemeProvider>
  );
 }
--- a/src/app/focus-mode/page.tsx
+++ b/src/app/focus-mode/page.tsx
@@ -2,28 +2,37 @@

 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import TextBox from '@/components/Textbox';

 export default function FocusModePage() {
  return (
-    <ThemeProvider>
-      <NavbarStyleFullscreen
-        navItems={[
-            { name: "About Us", id: "/about" },
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "About", id: "/about" },
            { name: "Therapy AI", id: "/therapy-ai" },
            { name: "Study AI", id: "/study-ai" },
            { name: "Planner", id: "/planner" },
            { name: "Focus Mode", id: "/focus-mode" }
-        ]}
-        brandName="NeuroFlow"
-      />
+          ]}
+          brandName="NeuroFlow"
+        />
+      </div>
      <main className="min-h-screen flex items-center justify-center p-8">
        <div className="backdrop-blur-xl bg-white/10 border border-white/20 p-12 rounded-3xl shadow-2xl text-center max-w-2xl">
-            <TextBox 
-                title="Focus Mode"
-                description="Experience deep concentration with our nature-inspired, glass-morphic environment. Stay present, stay calm, and achieve your goals."
-                textboxLayout="default"
-            />
+            <p>Focus Mode</p>
        </div>
      </main>
    </ThemeProvider>
--- a/src/app/planner/page.tsx
+++ b/src/app/planner/page.tsx
@@ -1,7 +1,6 @@
 "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';

@@ -19,7 +18,7 @@ export default function PlannerPage() {
        secondaryButtonStyle="glass"
        headingFontWeight="semibold"
    >
-      <ReactLenis root>
+      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "/" },
@@ -28,20 +27,17 @@ export default function PlannerPage() {
          ]}
          brandName="NeuroFlow"
        />
-        <main className="min-h-screen p-10 flex flex-col items-center justify-center space-y-6">
-          <h1 className="text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-accent to-background-accent">Nature-Inspired Planner</h1>
-          <p className="max-w-2xl text-center text-lg">A fluid, interactive planner interface that grows with your productivity.</p>
-          <div className="w-full max-w-4xl h-96 rounded-3xl border border-white/10 bg-white/5 backdrop-blur-xl shadow-2xl p-8 grid grid-cols-7 gap-4">
-            {Array.from({ length: 28 }).map((_, i) => (
-              <div key={i} className="h-16 rounded-xl bg-white/5 border border-white/5 animate-pulse" />
-            ))}
-          </div>
-        </main>
+      </div>
+      <main className="min-h-screen p-10 flex flex-col items-center justify-center space-y-6">
+        <h1 className="text-5xl font-bold">Nature-Inspired Planner</h1>
+      </main>
+      <div id="footer" data-section="footer">
        <FooterMedia
          logoText="NeuroFlow"
+          videoSrc="https://player.vimeo.com/external/123456789.sd.mp4?s=123456789"
          columns={[]}
        />
-      </ReactLenis>
+      </div>
    </ThemeProvider>
  );
 }
--- a/src/app/study-ai/page.tsx
+++ b/src/app/study-ai/page.tsx
@@ -1,7 +1,6 @@
 "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';

@@ -19,7 +18,7 @@ export default function StudyAIPage() {
        secondaryButtonStyle="glass"
        headingFontWeight="semibold"
    >
-      <ReactLenis root>
+      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "/" },
@@ -28,18 +27,17 @@ export default function StudyAIPage() {
          ]}
          brandName="NeuroFlow"
        />
-        <main className="min-h-screen p-10 flex flex-col items-center justify-center space-y-6">
-          <h1 className="text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-accent to-background-accent">Study AI Assistant</h1>
-          <p className="max-w-2xl text-center text-lg">Your personal nature-inspired, liquid glass AI interface for deep, focused study sessions.</p>
-          <div className="w-full max-w-4xl h-96 rounded-3xl border border-white/10 bg-white/5 backdrop-blur-xl shadow-2xl p-8 flex items-center justify-center">
-            <p className="animate-pulse opacity-60 italic">AI environment loading...</p>
-          </div>
-        </main>
+      </div>
+      <main className="min-h-screen p-10 flex flex-col items-center justify-center space-y-6">
+        <h1 className="text-5xl font-bold">Study AI Assistant</h1>
+      </main>
+      <div id="footer" data-section="footer">
        <FooterMedia
          logoText="NeuroFlow"
+          videoSrc="https://player.vimeo.com/external/123456789.sd.mp4?s=123456789"
          columns={[]}
        />
-      </ReactLenis>
+      </div>
    </ThemeProvider>
  );
 }
--- a/src/app/therapy-ai/page.tsx
+++ b/src/app/therapy-ai/page.tsx
@@ -7,34 +7,51 @@ import FooterMedia from '@/components/sections/footer/FooterMedia';

 export default function TherapyAIPage() {
  return (
-    <ThemeProvider>
-      <NavbarStyleFullscreen
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "About", id: "/about" },
-          { name: "Therapy AI", id: "/therapy-ai" },
-        ]}
-        brandName="NeuroFlow"
-      />
-      <div className="pt-32 pb-20">
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "About", id: "/about" },
+            { name: "Therapy AI", id: "/therapy-ai" },
+          ]}
+          brandName="NeuroFlow"
+        />
+      </div>
+      <div className="pt-32 pb-20" id="features" data-section="features">
        <FeatureCardTwentyNine
          title="Your AI Therapy Companion"
          description="AI-driven support designed specifically for neurodivergent minds, providing a safe space for growth and organization."
          gridVariant="bento-grid"
          animationType="blur-reveal"
          textboxLayout="split"
+          useInvertedBackground={false}
          features={[
            { title: "Cognitive Reframing", description: "Gentle AI guidance to navigate overwhelming thoughts.", imageSrc: "", titleImageSrc: "", buttonText: "Learn More" },
            { title: "Goal Breakdown", description: "Transform large projects into manageable micro-steps.", imageSrc: "", titleImageSrc: "", buttonText: "Get Started" },
          ]}
        />
      </div>
-      <FooterMedia
-        logoText="NeuroFlow"
-        columns={[
-          { items: [{ label: "Home", href: "/" }, { label: "About", href: "/about" }] },
-        ]}
-      />
+      <div id="footer" data-section="footer">
+        <FooterMedia
+          logoText="NeuroFlow"
+          imageSrc="https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0"
+          columns={[
+            { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "About", href: "/about" }] },
+          ]}
+        />
+      </div>
    </ThemeProvider>
  );
 }