Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -3,15 +3,15 @@
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
+import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
-import TextAbout from "@/components/sections/about/TextAbout";
+import SplitAbout from "@/components/sections/about/SplitAbout";
-import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
+import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
-import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
+import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
 import FeatureBento from "@/components/sections/feature/FeatureBento";
-import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
+import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
-import ContactSplit from "@/components/sections/contact/ContactSplit";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
-import FooterCard from "@/components/sections/footer/FooterCard";
+import FooterMedia from "@/components/sections/footer/FooterMedia";
-import { Award, TrendingUp, Trophy, Zap, Star, Dumbbell, Heart, Lightbulb, Compass, Mail, Instagram, Twitter, Linkedin } from "lucide-react";
+import { Award, TrendingUp, Trophy, Zap, Star, Dumbbell, Heart, Lightbulb } from "lucide-react";
 
 export default function PersonalTrainerPage() {
     return (
@@ -43,52 +43,48 @@ export default function PersonalTrainerPage() {
                 </div>
 
                 <div id="hero" data-section="hero">
-                    <HeroSplitKpi
+                    <HeroBillboardRotatedCarousel
                         title="Peak Performance with Arsalan"
                         description="Elevate your fitness journey under the expert guidance of Arsalan. With a singular focus on your results, we build elite-level athleticism through data-driven training and disciplined habit formation."
                         background={{ variant: "rotated-rays-static-grid" }}
-                        kpis={[
+                        carouselItems={[
-                            { value: "500+", label: "Total Transformations" },
+                            { id: "1", imageSrc: "http://img.b2bpic.net/free-photo/handsome-athletic-male-blue-sportswear-holds-dumbbell-dark-vignette-background_613910-1364.jpg?w=800&h=600&_wi=1" },
-                            { value: "1", label: "Elite Trainer" },
+                            { id: "2", imageSrc: "http://img.b2bpic.net/free-photo/fit-man-doing-gymnastics-rings-exercise-gym_23-2148405088.jpg?w=800&h=600&_wi=1" },
-                            { value: "100%", label: "Dedicated Professional" }
+                            { id: "3", imageSrc: "http://img.b2bpic.net/free-photo/man-doing-pull-ups-gym_23-2149171221.jpg?w=800&h=600&_wi=1" },
+                            { id: "4", imageSrc: "http://img.b2bpic.net/free-photo/muscular-man-lifting-heavy-weights-gym_23-2148784846.jpg?w=800&h=600&_wi=1" },
+                            { id: "5", imageSrc: "http://img.b2bpic.net/free-photo/athlete-training-hard-gym_23-2149182377.jpg?w=800&h=600&_wi=1" },
+                            { id: "6", imageSrc: "http://img.b2bpic.net/free-photo/strong-male-athlete-posing_23-2148777098.jpg?w=800&h=600&_wi=1" }
                         ]}
-                        enableKpiAnimation={true}
-                        tag="Elite Fitness Coach"
-                        tagIcon={Award}
-                        imageSrc="http://img.b2bpic.net/free-photo/medium-shot-coach-helping-girl_23-2150363711.jpg?w=800&h=600"
-                        imageAlt="Professional Arsalan personal trainer session"
-                        imagePosition="right"
                         buttons={[
                             { text: "Start Training", href: "#contact" },
                             { text: "View Programs", href: "#services" }
                         ]}
-                        mediaAnimation="slide-up"
                     />
                 </div>
 
                 <div id="about" data-section="about">
-                    <TextAbout
+                    <SplitAbout
-                        title="Arsalan's Philosophy: Training is a craft. I believe in a direct, one-on-one approach where every movement is intentional. No generic plans—just pure, tailored intensity designed to push your limits while ensuring longevity and sustainable growth. Let’s redefine your potential together."
+                        title="Arsalan's Philosophy"
-                        useInvertedBackground={false}
+                        description="Training is a craft. I believe in a direct, one-on-one approach where every movement is intentional. No generic plans—just pure, tailored intensity designed to push your limits while ensuring longevity and sustainable growth. Let’s redefine your potential together."
-                        buttons={[
+                        bulletPoints={[
-                            { text: "Meet Arsalan", href: "#achievements" },
+                            { title: "Expert Guidance", description: "Direct mentorship", icon: Award },
-                            { text: "Read More", href: "#philosophy" }
+                            { title: "Data-Driven", description: "Tracked progress", icon: TrendingUp }
                         ]}
+                        imageSrc="http://img.b2bpic.net/free-photo/handsome-athletic-male-blue-sportswear-holds-dumbbell-dark-vignette-background_613910-1364.jpg?w=800&h=600&_wi=2"
+                        textboxLayout="split"
+                        useInvertedBackground={false}
                     />
                 </div>
 
                 <div id="achievements" data-section="achievements">
-                    <MetricCardOne
+                    <MetricCardThree
-                        title="Proven Results, One Trainer"
+                        title="Success Metrics"
-                        description="A legacy of excellence built through individual dedication"
+                        description="A legacy of excellence built through individual dedication."
-                        tag="Success Metrics"
-                        tagIcon={TrendingUp}
                         metrics={[
-                            { id: "1", value: "500+", title: "Successful Clients", description: "Transformations achieved through personalized guidance", icon: Trophy },
+                            { id: "1", icon: Trophy, title: "Successful Athletes", value: "500+" },
-                            { id: "2", value: "1", title: "Lead Coach", description: "Direct, expert 1-on-1 oversight by Arsalan", icon: Zap },
+                            { id: "2", icon: Zap, title: "Lead Coach", value: "1" },
-                            { id: "3", value: "100%", title: "Goal Clarity", description: "Precise, target-oriented athletic programming", icon: Star },
+                            { id: "3", icon: Star, title: "Goal Clarity", value: "100%" }
                         ]}
-                        gridVariant="uniform-all-items-equal"
                         animationType="slide-up"
                         textboxLayout="default"
                         useInvertedBackground={false}
@@ -96,27 +92,16 @@ export default function PersonalTrainerPage() {
                 </div>
 
                 <div id="services" data-section="services">
-                    <FeatureCardSeven
+                    <FeatureCardTwentyFour
                         title="Bespoke Training Programs"
-                        description="Direct, expert-led training sessions optimized for your growth"
+                        description="Direct, expert-led training sessions optimized for your growth."
-                        tag="Service Offerings"
-                        tagIcon={Dumbbell}
-                        features={[
-                            {
-                                title: "1-on-1 Elite Coaching",                                description: "Direct mentorship from Arsalan. Focus on perfect technique, aggressive progress tracking, and constant adjustments to keep you hitting new PRs.",                                imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-helping-fit-man-gym_23-2149740141.jpg?w=800&h=600",                                imageAlt: "1 on 1 coaching session"
-                            },
-                            {
-                                title: "Elite Conditioning",                                description: "High-intensity programming designed to maximize output, improve recovery cycles, and optimize your cardiovascular and muscular endurance.",                                imageSrc: "http://img.b2bpic.net/free-photo/crossfit-exercise-performed-by-strong-woman-with-rope_1098-18892.jpg?w=800&h=600",                                imageAlt: "Conditioning workout session"
-                            },
-                            {
-                                title: "Performance Nutrition",                                description: "Fuel your training with evidence-based macro and micro-nutrient planning designed specifically to complement your training phase.",                                imageSrc: "http://img.b2bpic.net/free-photo/front-view-women-with-delicious-food_23-2149894894.jpg?w=800&h=600",                                imageAlt: "Performance nutrition plan"
-                            }
-                        ]}
-                        textboxLayout="default"
                         animationType="slide-up"
                         useInvertedBackground={false}
-                        buttons={[
+                        textboxLayout="default"
-                            { text: "Inquire for Training", href: "#contact" }
+                        features={[
+                            { id: "1", title: "1-on-1 Elite Coaching", author: "Arsalan", description: "Direct mentorship focused on technique and progress.", tags: ["1-on-1", "Elite"], imageSrc: "http://img.b2bpic.net/free-photo/fit-man-doing-gymnastics-rings-exercise-gym_23-2148405088.jpg?w=800&h=600&_wi=2" },
+                            { id: "2", title: "Elite Conditioning", author: "Arsalan", description: "High-intensity programming for output and recovery.", tags: ["Conditioning", "Endurance"], imageSrc: "http://img.b2bpic.net/free-photo/man-doing-pull-ups-gym_23-2149171221.jpg?w=800&h=600&_wi=2" },
+                            { id: "3", title: "Performance Nutrition", author: "Arsalan", description: "Evidence-based macro and micro-nutrient planning.", tags: ["Nutrition", "Performance"], imageSrc: "http://img.b2bpic.net/free-photo/muscular-man-lifting-heavy-weights-gym_23-2148784846.jpg?w=800&h=600&_wi=2" }
                         ]}
                     />
                 </div>
@@ -125,81 +110,51 @@ export default function PersonalTrainerPage() {
                     <FeatureBento
                         title="Methodology by Arsalan"
                         description="Efficiency, Intensity, and Precision"
-                        tag="The Arsalan Method"
-                        tagIcon={Compass}
-                        features={[
-                            {
-                                title: "Data-Driven Progress",                                description: "Every session logged, every rep counted. We analyze data to ensure linear progression.",                                bentoComponent: "animated-bar-chart"
-                            },
-                            {
-                                title: "Core Pillars",                                description: "Focus on Strength, Stability, and Endurance.",                                bentoComponent: "3d-stack-cards",                                items: [
-                                    { icon: Dumbbell, title: "Strength", subtitle: "Raw Power", detail: "Compound mechanical advantage" },
-                                    { icon: Heart, title: "Cardio", subtitle: "Peak Output", detail: "VO2 max optimization" },
-                                    { icon: Lightbulb, title: "Form", subtitle: "Precision", detail: "Injury prevention mechanics" }
-                                ]
-                            },
-                            {
-                                title: "Growth Timeline",                                description: "Structured phases for sustainable athletic development.",                                bentoComponent: "timeline",                                heading: "The Transformation Path",                                subheading: "From Baseline to Elite",                                items: [
-                                    { label: "Assessment", detail: "Baseline metrics and goals" },
-                                    { label: "Execution", detail: "Intense training period" },
-                                    { label: "Optimization", detail: "Refining for peak performance" }
-                                ],
-                                completedLabel: "Arsalan Standard Achieved"
-                            }
-                        ]}
-                        textboxLayout="default"
-                        animationType="slide-up"
                         useInvertedBackground={true}
-                        buttons={[
+                        animationType="slide-up"
-                            { text: "Start Now", href: "#contact" }
+                        textboxLayout="default"
+                        features={[
+                            { title: "Core Pillars", description: "Strength, Stability, and Endurance.", bentoComponent: "3d-stack-cards", items: [
+                                { icon: Dumbbell, title: "Strength", subtitle: "Raw Power", detail: "Compound mechanical advantage" },
+                                { icon: Heart, title: "Cardio", subtitle: "Peak Output", detail: "VO2 max optimization" },
+                                { icon: Lightbulb, title: "Form", subtitle: "Precision", detail: "Injury prevention mechanics" }
+                            ]}
                         ]}
                     />
                 </div>
 
                 <div id="testimonials" data-section="testimonials">
-                    <TestimonialCardFifteen
+                    <TestimonialCardSix
-                        testimonial="Arsalan isn't just a trainer; he's a specialist in human performance. His 1-on-1 attention is unmatched. 500+ other clients can't be wrong—he builds athletes, not just lifters."
+                        title="Client Success Stories"
-                        rating={5}
+                        description="Hear from those who transformed their lives."
-                        author="Elite Client Experience"
+                        animationType="slide-up"
-                        avatars={[
+                        textboxLayout="default"
-                            { src: "http://img.b2bpic.net/free-photo/handsome-athletic-male-blue-sportswear-holds-dumbbell-dark-vignette-background_613910-1364.jpg?w=400&h=400", alt: "Client" },
+                        useInvertedBackground={false}
-                            { src: "http://img.b2bpic.net/free-photo/serious-sportswoman-with-crossed-arms_1153-942.jpg?w=400&h=400", alt: "Client" },
+                        testimonials={[
-                            { src: "http://img.b2bpic.net/free-photo/young-sports-man-happy-expression_1194-1586.jpg?w=400&h=400", alt: "Client" },
+                            { id: "1", name: "Elite Athlete", handle: "@proathlete", testimonial: "Arsalan builds athletes, not just lifters. His attention is unmatched.", imageSrc: "http://img.b2bpic.net/free-photo/strong-male-athlete-posing_23-2148777098.jpg?w=400&h=400&_wi=2" }
-                            { src: "http://img.b2bpic.net/free-photo/cute-young-woman-gym-with-dumbbells_624325-2251.jpg?w=400&h=400", alt: "Client" }
                         ]}
-                        ratingAnimation="slide-up"
-                        avatarsAnimation="slide-up"
-                        useInvertedBackground={true}
                     />
                 </div>
 
                 <div id="contact" data-section="contact">
-                    <ContactSplit
+                    <ContactCenter
-                        background={{ variant: "plain" }}
                         tag="Train with Arsalan"
                         title="Join the 500+ Club"
                         description="Limited training spots available. Secure your place for personalized elite-level coaching today."
+                        background={{ variant: "sparkles-gradient" }}
                         useInvertedBackground={false}
-                        imageSrc="http://img.b2bpic.net/free-photo/blurred-bikes_1203-367.jpg?w=800&h=600"
-                        imageAlt="Professional training facility"
-                        mediaPosition="right"
-                        mediaAnimation="slide-up"
-                        tagIcon={Mail}
-                        inputPlaceholder="Your name or email"
-                        buttonText="Secure Spot"
-                        termsText="Serious inquiries only. We focus on results."
                     />
                 </div>
 
                 <div id="footer" data-section="footer">
-                    <FooterCard
+                    <FooterMedia
                         logoText="Arsalan Elite"
-                        copyrightText="© 2025 Arsalan Elite Performance."
+                        imageSrc="http://img.b2bpic.net/free-photo/blurred-bikes_1203-367.jpg?w=800&h=600"
-                        socialLinks={[
+                        columns={[
-                            { icon: Instagram, href: "#", ariaLabel: "Instagram" },
+                            { title: "Quick Links", items: [
-                            { icon: Twitter, href: "#", ariaLabel: "Twitter" },
+                                { label: "Home", href: "#" },
-                            { icon: Linkedin, href: "#", ariaLabel: "LinkedIn" },
+                                { label: "Programs", href: "#services" }
-                            { icon: Mail, href: "mailto:coach@arsalan.fit", ariaLabel: "Email" }
+                            ]}
                         ]}
                     />
                 </div>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #e3deea;
+  --background: #ffffff;
-  --card: #ffffff;
+  --card: #f9f9f9;
-  --foreground: #27231f;
+  --foreground: #000612e6;
-  --primary-cta: #27231f;
+  --primary-cta: #15479c;
   --primary-cta-text: #e3deea;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #f9f9f9;
   --secondary-cta-text: #27231f;
-  --accent: #c68a62;
+  --accent: #e2e2e2;
-  --background-accent: #c68a62;
+  --background-accent: #c4c4c4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);