Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -1,41 +1,38 @@
 "use client";
 
-import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
+import HeroSplit from "@/components/sections/hero/HeroSplit";
-import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
+import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
-import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
+import MediaAbout from "@/components/sections/about/MediaAbout";
-import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
+import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
 import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
 import FaqDouble from "@/components/sections/faq/FaqDouble";
-import ContactCTA from "@/components/sections/contact/ContactCTA";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
 import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
 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 } 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", company: "Independent", rating: 5, 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", company: "Personal", rating: 5, 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", price: "$0", name: "Starter", buttons: [{ text: "Get Started" }], 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", price: "$12", name: "Pro", buttons: [{ text: "Go Pro" }], 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,110 +43,100 @@ 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
+            <div id="nav" data-section="nav">
-                navItems={navItems}
+                <NavbarLayoutFloatingOverlay
-                brandName="Pathly"
+                    navItems={navItems}
-                bottomLeftText="Performante X🌟"
+                    brandName="Pathly"
-                bottomRightText="hello@pathly.ai"
+                    button={{ text: "Get Started", href: "#contact" }}
-            />
+                />
-            <HeroBillboardDashboard
+            </div>
-                background={{ variant: "canvas-reveal" }}
+            <div id="hero" data-section="hero">
-                tag="Your AI Goal Companion"
+                <HeroSplit
-                tagIcon={Target}
+                    background={{ variant: "canvas-reveal" }}
-                title="Turn Ambitions Into Daily Reality"
+                    tag="Your AI Goal Companion"
-                description="Stop dreaming and start achieving. Pathly uses AI to turn your biggest goals into manageable daily actions that actually fit your life."
+                    tagIcon={Target}
-                buttons={[{ text: "Start Your Path", href: "#contact" }]}
+                    title="Turn Ambitions Into Daily Reality"
-                dashboard={{
+                    description="Stop dreaming and start achieving."
-                    title: "Pathly Goal Tracker",                    logoIcon: Brain,
+                    avatars={[
-                    imageSrc: "http://img.b2bpic.net/free-photo/computer-dark-room-with-graphs-screen_169016-54998.jpg",                    stats: [
+                        { src: "https://img.b2bpic.net/free-photo/web-link-chain-interconnection-concept_53876-125191.jpg?id=17143325", alt: "User Profile" }
-                        { 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." },
+                    avatarText="Join the community"
-                        { title: "Tasks Done", values: [150, 180, 210], description: "Total milestones conquered this month." }
+                    mediaAnimation="slide-up"
-                    ],
+                />
-                    listTitle: "Today's Focus",                    listItems: [
+            </div>
-                        { icon: CheckSquare, title: "30 min deep work session", status: "To-do" },
+            <div id="features" data-section="features">
-                        { icon: TrendingUp, title: "Review weekly progress", status: "Done" },
+                <FeatureCardTwentyFour
-                        { icon: Smile, title: "Mindfulness meditation", status: "Pending" }
-                    ]
-                }}
-            />
-            <div id="features">
-                <FeatureHoverPattern
                     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", author: "Pathly AI", description: "Advanced LLMs for goal interpretation.", tags: ["AI-Powered"], imageSrc: "https://img.b2bpic.net/free-photo/motivational-handwriting-notebook_1357-263.jpg?id=1147911" },
-                        { icon: Clock, title: "Adaptive Planning", description: "Auto-adjusts your schedule based on your progress and motivation." },
+                        { id: "2", title: "Adaptive Planning", author: "Pathly Engine", description: "Flexible timelines that adjust automatically.", tags: ["Flexible"], imageSrc: "http://img.b2bpic.net/free-photo/business-plan-concept_23-2149154942.jpg" }
-                        { 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" data-section="about">
-                tag="The Edge"
+                <MediaAbout
-                tagIcon={Sparkles}
+                    title="Why Pathly Wins"
-                title="Why Pathly Wins"
+                    description="Our unique approach combines human intent with adaptive intelligence."
-                description="We replace frustration with clarity. By breaking the cycle of procrastination through intelligent, gentle nudges, Pathly makes progress the default state."
+                    useInvertedBackground={true}
-                metrics={[{ value: "2x", title: "Faster Goal Achievement" }, { value: "98%", title: "Retention Rate" }]}
+                />
-                imageSrc="http://img.b2bpic.net/free-photo/3d-rendered-abstract-design-elements-assortment_23-2148996791.jpg"
+            </div>
-                useInvertedBackground={false}
+            <div id="testimonials" data-section="testimonials">
-            />
+                <TestimonialCardSixteen
-            <TestimonialCardSix
+                    testimonials={testimonials}
-                testimonials={testimonials}
+                    kpiItems={[{ value: "2x", label: "Faster Results" }, { value: "98%", label: "Retention Rate" }, { value: "1M+", label: "Goals Achieved" }]}
-                animationType="slide-up"
+                    animationType="slide-up"
-                tag="Community"
+                    title="Changing Lives, Daily"
-                title="Changing Lives, Daily"
+                    description="See how our users are turning their ambitions into concrete results."
-                description="See how our users are turning their wildest ambitions into concrete results."
+                    textboxLayout="default"
-                textboxLayout="default"
+                    useInvertedBackground={false}
-                useInvertedBackground={false}
+                />
-            />
+            </div>
-            <div id="pricing">
+            <div id="pricing" data-section="pricing">
                 <PricingCardThree
                     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">
+            <div id="faq" data-section="faq">
                 <FaqDouble
                     faqs={faqs}
-                    tag="Support"
-                    title="Need Clarity?"
-                    description="Common questions about the Pathly methodology."
-                    textboxLayout="default"
                     faqsAnimation="slide-up"
+                    title="Need Clarity?"
+                    description="Common questions."
+                    textboxLayout="default"
                     useInvertedBackground={false}
                 />
             </div>
-            <div id="contact">
+            <div id="contact" data-section="contact">
-                <ContactCTA
+                <ContactSplitForm
-                    tag="Start Now"
+                    title="Ready to reach your potential?"
-                    tagIcon={Mail}
+                    description="Join Pathly today."
-                    title="Ready to Reach Your Potential?"
+                    inputs={[{ name: "email", type: "email", placeholder: "Enter your email" }, { name: "name", type: "text", placeholder: "Your name" }]}
-                    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
+            <div id="footer" data-section="footer">
-                logoText="Pathly"
+                <FooterBaseCard
-                columns={[{ title: "Product", items: [{ label: "Features", href: "#" }, { label: "Pricing", href: "#" }] }, { title: "Company", items: [{ label: "About", href: "#" }, { label: "Contact", href: "#" }] }]}
+                    logoText="Pathly"
-                copyrightText="© 2025 Pathly Inc. Built for you."
+                    columns={[
-            />
+                        { title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }] },
+                        { title: "Company", items: [{ label: "About", href: "#about" }, { label: "Contact", href: "#contact" }] }
+                    ]}
+                />
+            </div>
         </ThemeProvider>
     );
 }

src/app/styles/variables.css

@@ -12,13 +12,13 @@
 
   --background: #0a0a0a;
   --card: #1a1a1a;
-  --foreground: #ffffffe6;
+  --foreground: #f5f5f5;
-  --primary-cta: #e6e6e6;
+  --primary-cta: #ffdf7d;
   --primary-cta-text: #0a0a0a;
   --secondary-cta: #1a1a1a;
-  --secondary-cta-text: #ffffffe6;
+  --secondary-cta-text: #ffffff;
-  --accent: #737373;
+  --accent: #b8860b;
-  --background-accent: #737373;
+  --background-accent: #8b6914;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);