Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -1,16 +1,16 @@
 "use client";
 
-import HeroSignup from "@/components/sections/hero/HeroSignup";
+import HeroSplit from "@/components/sections/hero/HeroSplit";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
-import AboutMetric from "@/components/sections/about/AboutMetric";
-import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
-import PricingCardFive from "@/components/sections/pricing/PricingCardFive";
-import FaqSplitText from "@/components/sections/faq/FaqSplitText";
-import ContactText from "@/components/sections/contact/ContactText";
-import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
+import MediaAbout from "@/components/sections/about/MediaAbout";
+import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
+import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
+import FaqDouble from "@/components/sections/faq/FaqDouble";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { Target, Activity, Shield, Zap } from "lucide-react";
+import { Target } from "lucide-react";
 
 export default function PathlyPage() {
     const navItems = [
@@ -21,13 +21,13 @@ export default function PathlyPage() {
     ];
 
     const testimonials = [
-        { 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", role: "Fitness Enthusiast", testimonial: "The adaptive planning is magic.", imageSrc: "http://img.b2bpic.net/free-photo/sport-woman-use-towel_158595-3273.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", role: "Fitness Enthusiast", company: "Personal", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/sport-woman-use-towel_158595-3273.jpg" }
     ];
 
     const pricingPlans = [
-        { 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", tag: "Pro", price: "$12", period: "/mo", description: "Advanced features.", button: { text: "Go Pro" }, featuresTitle: "Everything in Starter, plus:", features: ["Unlimited goals", "Adaptive scheduling"] }
+        { id: "free", price: "$0", name: "Starter", buttons: [{ text: "Get Started" }], features: ["One personal goal", "Basic habit tracking"] },
+        { id: "pro", price: "$12", name: "Pro", buttons: [{ text: "Go Pro" }], features: ["Unlimited goals", "Adaptive scheduling"] }
     ];
 
     const faqs = [
@@ -48,50 +48,60 @@ export default function PathlyPage() {
             secondaryButtonStyle="glass"
             headingFontWeight="semibold"
         >
-            <NavbarLayoutFloatingOverlay
-                navItems={navItems}
-                brandName="Pathly"
-                button={{ text: "Get Started", href: "#contact" }}
-            />
-            <HeroSignup
-                background={{ variant: "canvas-reveal" }}
-                tag="Your AI Goal Companion"
-                tagIcon={Target}
-                title="Turn Ambitions Into Daily Reality"
-                description="Stop dreaming and start achieving."
-                onSubmit={(email) => console.log(email)}
-            />
-            <div id="features">
-                <FeatureCardTwentyThree
+            <div id="nav" data-section="nav">
+                <NavbarLayoutFloatingOverlay
+                    navItems={navItems}
+                    brandName="Pathly"
+                    button={{ text: "Get Started", href: "#contact" }}
+                />
+            </div>
+            <div id="hero" data-section="hero">
+                <HeroSplit
+                    background={{ variant: "canvas-reveal" }}
+                    tag="Your AI Goal Companion"
+                    tagIcon={Target}
+                    title="Turn Ambitions Into Daily Reality"
+                    description="Stop dreaming and start achieving."
+                    avatars={[
+                        { src: "https://img.b2bpic.net/free-photo/web-link-chain-interconnection-concept_53876-125191.jpg?id=17143325", alt: "User Profile" }
+                    ]}
+                    avatarText="Join the community"
+                    mediaAnimation="slide-up"
+                />
+            </div>
+            <div id="features" data-section="features">
+                <FeatureCardTwentyFour
                     animationType="slide-up"
                     title="Designed for Human Growth"
                     description="Technology should help, not judge."
                     textboxLayout="default"
                     useInvertedBackground={false}
                     features={[
-                        { id: "1", title: "Smart Goal Setting", tags: ["AI-Powered"] },
-                        { id: "2", title: "Adaptive Planning", tags: ["Flexible"] }
+                        { 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" },
+                        { 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" }
                     ]}
                 />
             </div>
-            <div id="about">
-                <AboutMetric
+            <div id="about" data-section="about">
+                <MediaAbout
                     title="Why Pathly Wins"
-                    metrics={[{ icon: Activity, label: "Goal Achievement", value: "2x Faster" }, { icon: Shield, label: "Retention Rate", value: "98%" }]}
-                    metricsAnimation="slide-up"
+                    description="Our unique approach combines human intent with adaptive intelligence."
                     useInvertedBackground={true}
                 />
             </div>
-            <TestimonialCardTwo
-                testimonials={testimonials}
-                animationType="slide-up"
-                title="Changing Lives, Daily"
-                description="See how our users are turning their ambitions into concrete results."
-                textboxLayout="default"
-                useInvertedBackground={false}
-            />
-            <div id="pricing">
-                <PricingCardFive
+            <div id="testimonials" data-section="testimonials">
+                <TestimonialCardSixteen
+                    testimonials={testimonials}
+                    kpiItems={[{ value: "2x", label: "Faster Results" }, { value: "98%", label: "Retention Rate" }, { value: "1M+", label: "Goals Achieved" }]}
+                    animationType="slide-up"
+                    title="Changing Lives, Daily"
+                    description="See how our users are turning their ambitions into concrete results."
+                    textboxLayout="default"
+                    useInvertedBackground={false}
+                />
+            </div>
+            <div id="pricing" data-section="pricing">
+                <PricingCardThree
                     plans={pricingPlans}
                     animationType="slide-up"
                     title="Simple Plans"
@@ -100,28 +110,33 @@ export default function PathlyPage() {
                     useInvertedBackground={false}
                 />
             </div>
-            <div id="faq">
-                <FaqSplitText
+            <div id="faq" data-section="faq">
+                <FaqDouble
                     faqs={faqs}
-                    sideTitle="Need Clarity?"
-                    sideDescription="Common questions."
                     faqsAnimation="slide-up"
+                    title="Need Clarity?"
+                    description="Common questions."
+                    textboxLayout="default"
                     useInvertedBackground={false}
                 />
             </div>
-            <div id="contact">
-                <ContactText
-                    text="Ready to reach your potential? Join Pathly today."
-                    buttons={[{ text: "Start for Free" }]}
-                    background={{ variant: "canvas-reveal" }}
+            <div id="contact" data-section="contact">
+                <ContactSplitForm
+                    title="Ready to reach your potential?"
+                    description="Join Pathly today."
+                    inputs={[{ name: "email", type: "email", placeholder: "Enter your email" }, { name: "name", type: "text", placeholder: "Your name" }]}
                     useInvertedBackground={false}
                 />
             </div>
-            <FooterLogoReveal
-                logoText="Pathly"
-                leftLink={{ text: "Privacy Policy", href: "#" }}
-                rightLink={{ text: "Terms of Service", href: "#" }}
-            />
+            <div id="footer" data-section="footer">
+                <FooterBaseCard
+                    logoText="Pathly"
+                    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

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