From fa5b6ea46b8a806a3fcecea3c8d8960eaf56242a Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 20 Apr 2026 00:05:58 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 136 +++++++++++++++++++++++++----------------------
 1 file changed, 73 insertions(+), 63 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 899a962..c4c9b1d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,17 +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, User } from "lucide-react";
-import AvatarGroup from "@/components/shared/AvatarGroup";
+import { Target, Activity, Shield } from "lucide-react";
 
 export default function PathlyPage() {
     const navItems = [
@@ -22,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 = [
@@ -49,54 +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)}
-                avatars={[
-                  { src: "http://img.b2bpic.net/free-photo/portrait-man-smiling_23-2148812604.jpg", alt: "User Profile" }
-                ]}
-                avatarText="Join the community"
-            />
-            <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="canvas-reveal"
+                    tag="Your AI Goal Companion"
+                    tagIcon={Target}
+                    title="Turn Ambitions Into Daily Reality"
+                    description="Stop dreaming and start achieving."
+                    avatars={[
+                        { src: "http://img.b2bpic.net/free-photo/portrait-man-smiling_23-2148812604.jpg", 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: "http://img.b2bpic.net/free-photo/artificial-intelligence-concept_23-2148766579.jpg" },
+                        { 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"
@@ -105,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>
     );
 }
\ No newline at end of file