Update src/app/page.tsx

src/app/page.tsx

@@ -1,41 +1,38 @@
 "use client";
 
-import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
+import HeroSignup from "@/components/sections/hero/HeroSignup";
-import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
+import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
-import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
+import AboutMetric from "@/components/sections/about/AboutMetric";
-import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
+import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
-import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
+import PricingCardFive from "@/components/sections/pricing/PricingCardFive";
-import FaqDouble from "@/components/sections/faq/FaqDouble";
+import FaqSplitText from "@/components/sections/faq/FaqSplitText";
-import ContactCTA from "@/components/sections/contact/ContactCTA";
+import ContactText from "@/components/sections/contact/ContactText";
-import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { Brain, Sparkles, Target, Zap, MessageSquare, CreditCard, HelpCircle, Mail, Activity, Shield, Clock, BarChart3, TrendingUp, CheckSquare, Smile } from "lucide-react";
+import { Target, Activity, Shield, Zap } from "lucide-react";
 
 export default function PathlyPage() {
     const navItems = [
         { name: "How it Works", id: "features" },
+        { name: "About", id: "about" },
         { name: "Pricing", id: "pricing" },
         { name: "FAQ", id: "faq" },
-        { name: "Get Started", id: "contact" },
     ];
 
     const testimonials = [
-        { id: "1", name: "Alex Rivers", handle: "Freelance Designer", testimonial: "Pathly turned my vague goal of 'becoming a better designer' into a concrete roadmap. I'm finally consistent.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-businessman_23-2149153833.jpg" },
+        { id: "1", name: "Alex Rivers", role: "Freelance Designer", testimonial: "Pathly turned my vague goal into a concrete roadmap.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-businessman_23-2149153833.jpg" },
-        { id: "2", name: "Jamie Smith", handle: "Fitness Enthusiast", testimonial: "The adaptive planning is magic. When I missed a week due to illness, it simply recalibrated my schedule.", imageSrc: "http://img.b2bpic.net/free-photo/sport-woman-use-towel_158595-3273.jpg" },
+        { id: "2", name: "Jamie Smith", role: "Fitness Enthusiast", testimonial: "The adaptive planning is magic.", imageSrc: "http://img.b2bpic.net/free-photo/sport-woman-use-towel_158595-3273.jpg" }
-        { id: "3", name: "Morgan Lee", handle: "Software Engineer", testimonial: "I love the daily streaks. It's the dopamine hit I need to keep grinding on my side projects.", imageSrc: "http://img.b2bpic.net/free-photo/development-agency-office-worker-analyzing-project-sales-fintech-startup-businessperson-sitting-desk-marketing-company-office-developing-financial-strategy-accounting-management_482257-40323.jpg" }
     ];
 
     const pricingPlans = [
-        { id: "free", price: "$0", name: "Starter", buttons: [{ text: "Get Started", href: "#" }], features: ["One personal goal", "Basic habit tracking", "Weekly AI insights", "Standard support"] },
+        { id: "free", tag: "Starter", price: "$0", period: "/mo", description: "Basic features.", button: { text: "Get Started" }, featuresTitle: "Everything included:", features: ["One personal goal", "Basic habit tracking"] },
-        { id: "pro", price: "$12/mo", name: "Pro", buttons: [{ text: "Go Pro", href: "#" }], features: ["Unlimited goals", "Adaptive scheduling", "Gamified rewards", "Progress analytics", "Priority support"] },
+        { id: "pro", tag: "Pro", price: "$12", period: "/mo", description: "Advanced features.", button: { text: "Go Pro" }, featuresTitle: "Everything in Starter, plus:", features: ["Unlimited goals", "Adaptive scheduling"] }
-        { id: "team", price: "$49/mo", name: "Team", buttons: [{ text: "Get Started", href: "#" }], features: ["Collaboration tools", "Team streaks", "Shared goal boards", "Admin analytics", "Dedicated account manager"] }
     ];
 
     const faqs = [
-        { id: "1", title: "How does the AI create goals?", content: "Pathly uses advanced LLMs to interpret your intent, breaking down vague aspirations into SMART steps mapped to your calendar." },
+        { id: "1", title: "How does the AI create goals?", content: "Pathly uses advanced LLMs to interpret your intent." },
-        { id: "2", title: "What if I fall behind?", content: "Don't worry! Pathly detects missed tasks and automatically shifts your timeline, keeping you focused on progress rather than perfection." },
+        { id: "2", title: "What if I fall behind?", content: "Pathly automatically shifts your timeline." }
-        { id: "3", title: "Is my goal data private?", content: "Yes, we never share or sell your data. Your goals are encrypted, and you own every byte of your progress history." }
     ];
 
     return (
@@ -46,109 +43,84 @@ export default function PathlyPage() {
             contentWidth="medium"
             sizing="medium"
             background="none"
-            cardStyle="gradient-bordered"
+            cardStyle="glass-elevated"
             primaryButtonStyle="gradient"
-            secondaryButtonStyle="layered"
+            secondaryButtonStyle="glass"
             headingFontWeight="semibold"
         >
-            <NavbarStyleFullscreen
+            <NavbarLayoutFloatingOverlay
                 navItems={navItems}
                 brandName="Pathly"
-                bottomLeftText="Performante X🌟"
+                button={{ text: "Get Started", href: "#contact" }}
-                bottomRightText="hello@pathly.ai"
             />
-            <HeroBillboardDashboard
+            <HeroSignup
                 background={{ variant: "canvas-reveal" }}
                 tag="Your AI Goal Companion"
                 tagIcon={Target}
                 title="Turn Ambitions Into Daily Reality"
-                description="Stop dreaming and start achieving. Pathly uses AI to turn your biggest goals into manageable daily actions that actually fit your life."
+                description="Stop dreaming and start achieving."
-                buttons={[{ text: "Start Your Path", href: "#contact" }]}
+                onSubmit={(email) => console.log(email)}
-                dashboard={{
-                    title: "Pathly Goal Tracker",                    logoIcon: Brain,
-                    imageSrc: "http://img.b2bpic.net/free-photo/computer-dark-room-with-graphs-screen_169016-54998.jpg",                    stats: [
-                        { title: "Goal Completion", values: [85, 92, 88], valueSuffix: "%", description: "Success rate across your active goals." },
-                        { title: "Daily Streaks", values: [12, 18, 24], description: "Days of consistent habit building." },
-                        { title: "Tasks Done", values: [150, 180, 210], description: "Total milestones conquered this month." }
-                    ],
-                    listTitle: "Today's Focus",                    listItems: [
-                        { icon: CheckSquare, title: "30 min deep work session", status: "To-do" },
-                        { icon: TrendingUp, title: "Review weekly progress", status: "Done" },
-                        { icon: Smile, title: "Mindfulness meditation", status: "Pending" }
-                    ]
-                }}
             />
             <div id="features">
-                <FeatureHoverPattern
+                <FeatureCardTwentyThree
                     animationType="slide-up"
-                    tag="How It Works"
                     title="Designed for Human Growth"
-                    description="Technology should help, not judge. Pathly adapts to your unique rhythm."
+                    description="Technology should help, not judge."
                     textboxLayout="default"
                     useInvertedBackground={false}
                     features={[
-                        { icon: Brain, title: "Smart Goal Setting", description: "Turn any sentence into a detailed roadmap with milestones." },
+                        { id: "1", title: "Smart Goal Setting", tags: ["AI-Powered"] },
-                        { icon: Clock, title: "Adaptive Planning", description: "Auto-adjusts your schedule based on your progress and motivation." },
+                        { id: "2", title: "Adaptive Planning", tags: ["Flexible"] }
-                        { icon: Zap, title: "Habit Integration", description: "Transform lofty goals into recurring daily habits you can track." },
-                        { icon: Shield, title: "Privacy First", description: "Your personal aspirations are yours alone. Encrypted and safe." }
                     ]}
                 />
             </div>
-            <MetricSplitMediaAbout
+            <div id="about">
-                tag="The Edge"
+                <AboutMetric
-                tagIcon={Sparkles}
+                    title="Why Pathly Wins"
-                title="Why Pathly Wins"
+                    metrics={[{ icon: Activity, label: "Goal Achievement", value: "2x Faster" }, { icon: Shield, label: "Retention Rate", value: "98%" }]}
-                description="We replace frustration with clarity. By breaking the cycle of procrastination through intelligent, gentle nudges, Pathly makes progress the default state."
+                    metricsAnimation="slide-up"
-                metrics={[{ value: "2x", title: "Faster Goal Achievement" }, { value: "98%", title: "Retention Rate" }]}
+                    useInvertedBackground={true}
-                imageSrc="http://img.b2bpic.net/free-photo/3d-rendered-abstract-design-elements-assortment_23-2148996791.jpg"
+                />
-                useInvertedBackground={false}
+            </div>
-            />
+            <TestimonialCardTwo
-            <TestimonialCardSix
                 testimonials={testimonials}
                 animationType="slide-up"
-                tag="Community"
                 title="Changing Lives, Daily"
-                description="See how our users are turning their wildest ambitions into concrete results."
+                description="See how our users are turning their ambitions into concrete results."
                 textboxLayout="default"
                 useInvertedBackground={false}
             />
             <div id="pricing">
-                <PricingCardThree
+                <PricingCardFive
                     plans={pricingPlans}
                     animationType="slide-up"
-                    tag="Pricing"
+                    title="Simple Plans"
-                    title="Simple Plans for Everyone"
+                    description="Everything you need to succeed."
-                    description="Everything you need to succeed, without hidden barriers."
                     textboxLayout="default"
                     useInvertedBackground={false}
                 />
             </div>
             <div id="faq">
-                <FaqDouble
+                <FaqSplitText
                     faqs={faqs}
-                    tag="Support"
+                    sideTitle="Need Clarity?"
-                    title="Need Clarity?"
+                    sideDescription="Common questions."
-                    description="Common questions about the Pathly methodology."
-                    textboxLayout="default"
                     faqsAnimation="slide-up"
                     useInvertedBackground={false}
                 />
             </div>
             <div id="contact">
-                <ContactCTA
+                <ContactText
-                    tag="Start Now"
+                    text="Ready to reach your potential? Join Pathly today."
-                    tagIcon={Mail}
+                    buttons={[{ text: "Start for Free" }]}
-                    title="Ready to Reach Your Potential?"
-                    description="Join Pathly today and start turning your goals into reality, one step at a time."
-                    buttons={[{ text: "Start for Free", href: "#" }]}
                     background={{ variant: "canvas-reveal" }}
                     useInvertedBackground={false}
                 />
             </div>
-            <FooterBaseCard
+            <FooterLogoReveal
                 logoText="Pathly"
-                columns={[{ title: "Product", items: [{ label: "Features", href: "#" }, { label: "Pricing", href: "#" }] }, { title: "Company", items: [{ label: "About", href: "#" }, { label: "Contact", href: "#" }] }]}
+                leftLink={{ text: "Privacy Policy", href: "#" }}
-                copyrightText="© 2025 Pathly Inc. Built for you."
+                rightLink={{ text: "Terms of Service", href: "#" }}
             />
         </ThemeProvider>
     );

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
+  --background: #ffffff;
-  --card: #1a1a1a;
+  --card: #f9f9f9;
-  --foreground: #ffffffe6;
+  --foreground: #000612e6;
-  --primary-cta: #e6e6e6;
+  --primary-cta: #15479c;
   --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1a1a1a;
+  --secondary-cta: #f9f9f9;
   --secondary-cta-text: #ffffffe6;
-  --accent: #737373;
+  --accent: #e2e2e2;
-  --background-accent: #737373;
+  --background-accent: #c4c4c4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);