Update src/app/page.tsx

Merge version_4 into main

src/app/page.tsx

@@ -3,28 +3,29 @@
 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 HeroOverlay from "@/components/sections/hero/HeroOverlay";
-import TextAbout from "@/components/sections/about/TextAbout";
+import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
-import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
+import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
-import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
+import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
 import FeatureBento from "@/components/sections/feature/FeatureBento";
-import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
+import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
-import ContactSplit from "@/components/sections/contact/ContactSplit";
+import PricingCardOne from "@/components/sections/pricing/PricingCardOne";
-import FooterCard from "@/components/sections/footer/FooterCard";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
-import { Award, TrendingUp, Trophy, Zap, Star, Dumbbell, Heart, Lightbulb, Compass, Mail, Instagram, Twitter, Linkedin } from "lucide-react";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+import { Trophy, Dumbbell, Star, TrendingUp, CheckCircle } from "lucide-react";
 
 export default function PersonalTrainerPage() {
     return (
         <ThemeProvider
             defaultButtonVariant="directional-hover"
-            defaultTextAnimation="background-highlight"
+            defaultTextAnimation="reveal-blur"
-            borderRadius="pill"
+            borderRadius="soft"
             contentWidth="medium"
             sizing="mediumLarge"
-            background="aurora"
+            background="noise"
-            cardStyle="gradient-bordered"
+            cardStyle="solid"
-            primaryButtonStyle="primary-glow"
+            primaryButtonStyle="flat"
-            secondaryButtonStyle="layered"
+            secondaryButtonStyle="solid"
             headingFontWeight="semibold"
         >
             <ReactLenis root>
@@ -33,173 +34,129 @@ export default function PersonalTrainerPage() {
                         navItems={[
                             { name: "Home", id: "home" },
                             { name: "About", id: "about" },
-                            { name: "Philosophy", id: "philosophy" },
                             { name: "Services", id: "services" },
+                            { name: "Philosophy", id: "philosophy" }
                         ]}
                         brandName="ROSHDY PHYSIQUES"
-                        bottomLeftText="Elite Performance"
-                        bottomRightText="contact@roshdyphysiques.com"
                     />
                 </div>
 
                 <div id="hero" data-section="hero">
-                    <HeroSplitKpi
+                    <HeroOverlay
-                        title="UNLEASH YOUR ULTIMATE POTENTIAL"
+                        title="ELITE PHYSIQUE ARCHITECTURE"
-                        description="Roshdy Physiques delivers elite-level coaching, precision programming, and an uncompromising commitment to your aesthetic and strength goals. Elevate your physique with gold-standard methods."
+                        description="Precision-engineered coaching for men demanding excellence. We redefine limits through scientific programming and unwavering discipline."
-                        background={{ variant: "rotated-rays-static-grid" }}
+                        tag="ROSHDY PHYSIQUES"
-                        kpis={[
-                            { value: "100%", label: "Dedication" },
-                            { value: "PRO", label: "Elite Standard" },
-                            { value: "#FFD600", label: "Our Signature" }
-                        ]}
-                        enableKpiAnimation={true}
-                        tag="ROSHDY PHYSIQUES ELITE"
                         tagIcon={Trophy}
                         imageSrc="http://img.b2bpic.net/free-photo/adult-training-body-building_23-2149660995.jpg"
-                        imageAlt="Elite Fitness Transformation"
+                        buttons={[{ text: "Apply Now", href: "#contact" }]}
-                        imagePosition="right"
+                        showBlur={true}
-                        buttons={[
-                            { text: "Join The Squad", href: "#contact" },
-                            { text: "Explore Services", href: "#services" }
-                        ]}
-                        mediaAnimation="slide-up"
                     />
                 </div>
 
                 <div id="about" data-section="about">
-                    <TextAbout
+                    <TestimonialAboutCard
-                        title="My mission is simple: To bridge the gap between where you are and your peak aesthetic state. With a focus on the signature Roshdy Physiques philosophy—where discipline meets science—I design blueprints for those ready to transcend average and command respect in every room."
+                        tag="The Standard"
-                        useInvertedBackground={false}
+                        title="Commitment Above All"
-                        buttons={[
+                        description="Roshdy Physiques is not just coaching; it is a standard. We cultivate elite male physiques by aligning rigorous training protocols with psychological fortitude."
-                            { text: "See The Results", href: "#achievements" },
+                        subdescription="My methods are built for those who understand that perfection is a moving target, not a destination."
-                            { text: "Our Core Values", href: "#philosophy" }
+                        icon={Dumbbell}
-                        ]}
+                        imageSrc="http://img.b2bpic.net/free-photo/fit-man-lifting-barbell_1098-14389.jpg?_wi=1"
+                        useInvertedBackground={true}
                     />
                 </div>
 
                 <div id="achievements" data-section="achievements">
-                    <MetricCardOne
+                    <MetricCardEleven
-                        title="The Gold Standard"
+                        title="Tangible Results"
-                        description="Quantifiable progress driven by refined, scientific training."
+                        description="Data-driven transformations backed by consistent application."
-                        tag="Proven Impact"
+                        tag="The Evidence"
                         tagIcon={TrendingUp}
+                        animationType="blur-reveal"
+                        textboxLayout="split"
+                        useInvertedBackground={true}
                         metrics={[
-                            { id: "1", value: "10/10", title: "Precision", description: "Tailored programming for maximal growth", icon: Trophy },
+                            { id: "m1", value: "100%", title: "Elite Focus", description: "Calculated hypertrophy programming", imageSrc: "http://img.b2bpic.net/free-photo/young-powerful-sportsman-white-clothing-black-wall_176420-542.jpg?_wi=1" },
-                            { id: "2", value: "100+", title: "Elite Clients", description: "Physiques redefined across the globe", icon: Zap },
+                            { id: "m2", value: "50+", title: "Transformations", description: "Sculpted physiques globally", imageSrc: "http://img.b2bpic.net/free-photo/smiling-sporty-black-man-standing-with-his-arms-crossed_1262-16419.jpg?_wi=1" }
-                            { id: "3", value: "5-Star", title: "Excellence", description: "Unmatched commitment to client success", icon: Star },
                         ]}
-                        gridVariant="uniform-all-items-equal"
-                        animationType="slide-up"
-                        textboxLayout="default"
-                        useInvertedBackground={false}
                     />
                 </div>
 
                 <div id="services" data-section="services">
-                    <FeatureCardSeven
+                    <FeatureCardNine
-                        title="High-Performance Coaching"
+                        title="Coaching Ecosystem"
-                        description="Structured, intensive programs built to change your composition."
+                        description="Systems for peak aesthetic and performance optimization."
-                        tag="The Services"
+                        showStepNumbers={true}
-                        tagIcon={Dumbbell}
+                        animationType="slide-up"
+                        textboxLayout="default"
+                        useInvertedBackground={true}
                         features={[
                             {
-                                title: "Physique Sculpting",                                description: "Strategic resistance training focused on symmetry and hypertrophy.",                                imageSrc: "http://img.b2bpic.net/free-photo/fit-man-lifting-barbell_1098-14389.jpg",                                imageAlt: "Physique Sculpting Training"
+                                title: "Sculpt & Definition",                                description: "Strategic resistance planning for aesthetic symmetry.",                                phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/fit-man-lifting-barbell_1098-14389.jpg?_wi=2" },
-                            },
+                                phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/young-powerful-sportsman-white-clothing-black-wall_176420-542.jpg?_wi=2" }
-                            {
-                                title: "Precision Nutrition",                                description: "Calculated macro coaching designed to fuel performance and reveal definition.",                                imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-checking-grocery-list-looking-vegetables-holding-notebook-reading-recipe-while_1258-193451.jpg",                                imageAlt: "Nutrition Guidance"
-                            },
-                            {
-                                title: "Elite Mentorship",                                description: "24/7 access to tactical adjustments and mental conditioning.",                                imageSrc: "http://img.b2bpic.net/free-photo/side-view-people-chatting-gym_23-2149734675.jpg",                                imageAlt: "Elite Coaching"
                             }
                         ]}
-                        textboxLayout="default"
-                        animationType="slide-up"
-                        useInvertedBackground={false}
-                        buttons={[
-                            { text: "Get Started", href: "#contact" }
-                        ]}
                     />
                 </div>
 
                 <div id="philosophy" data-section="philosophy">
                     <FeatureBento
-                        title="The Roshdy Philosophy"
+                        title="Methodology"
-                        description="Where the color yellow represents the energy, clarity, and gold-medal results we pursue."
+                        description="The core principles guiding every client towards an elite status."
-                        tag="Methodology"
+                        animationType="blur-reveal"
-                        tagIcon={Compass}
-                        features={[
-                            {
-                                title: "Intensity Protocol",                                description: "Training until you break boundaries, not spirit.",                                bentoComponent: "animated-bar-chart"
-                            },
-                            {
-                                title: "Peak Performance",                                description: "Three core pillars of athletic refinement.",                                bentoComponent: "3d-stack-cards",                                items: [
-                                    { icon: Dumbbell, title: "Power", subtitle: "Strength", detail: "Explosive movement dynamics" },
-                                    { icon: Heart, title: "Focus", subtitle: "Conditioning", detail: "High-intensity output systems" },
-                                    { icon: Lightbulb, title: "Clarity", subtitle: "Strategy", detail: "The science behind the physique" }
-                                ]
-                            },
-                            {
-                                title: "Transformation Path",                                description: "Evolve through disciplined, repeatable systems.",                                bentoComponent: "timeline",                                heading: "The Evolution",                                subheading: "The Roshdy Roadmap",                                items: [
-                                    { label: "Foundation", detail: "Building base integrity" },
-                                    { label: "Sculpting", detail: "Advanced hypertrophy protocols" },
-                                    { label: "Elite Status", detail: "Maintaining the gold standard" }
-                                ],
-                                completedLabel: "Peak Condition Achieved"
-                            }
-                        ]}
                         textboxLayout="default"
-                        animationType="slide-up"
+                        useInvertedBackground={false}
+                        features={[
+                            { title: "Tactical Rigor", description: "Disciplined execution in every session.", bentoComponent: "reveal-icon", icon: Dumbbell },
+                            { title: "Systematic Growth", description: "Progressive overload science.", bentoComponent: "animated-bar-chart" }
+                        ]}
+                    />
+                </div>
+
+                <div id="offer" data-section="offer">
+                    <PricingCardOne
+                        title="The Coaching Program"
+                        description="High-end programming and support structure for serious athletes."
+                        animationType="depth-3d"
+                        textboxLayout="split"
                         useInvertedBackground={true}
-                        buttons={[
+                        plans={[
-                            { text: "Enlist Now", href: "#contact" }
+                            { id: "p1", badge: "Elite", price: "$499", subtitle: "Complete Transformation", features: ["Custom Training Split", "Advanced Nutrition Macros", "Weekly Check-ins", "24/7 Priority Support"] }
                         ]}
                     />
                 </div>
 
                 <div id="testimonials" data-section="testimonials">
-                    <TestimonialCardFifteen
+                    <TestimonialCardTwelve
-                        testimonial="I've worked with many, but the Roshdy Physiques approach is on another level. The detail, the energy, and the constant push for better meant I reached my peak aesthetic within 12 weeks. Truly elite."
+                        cardTitle="Client Success"
-                        rating={5}
+                        cardTag="Results"
-                        author="Elite Client"
+                        cardAnimation="slide-up"
-                        avatars={[
-                            { src: "http://img.b2bpic.net/free-photo/young-powerful-sportsman-white-clothing-black-wall_176420-542.jpg", alt: "User" },
-                            { src: "http://img.b2bpic.net/free-photo/brunette-woman-wearing-sport-clothes_329181-13219.jpg", alt: "User" },
-                            { src: "http://img.b2bpic.net/free-photo/smiling-sporty-black-man-standing-with-his-arms-crossed_1262-16419.jpg", alt: "User" }
-                        ]}
-                        ratingAnimation="slide-up"
-                        avatarsAnimation="slide-up"
                         useInvertedBackground={true}
+                        testimonials={[
+                            { id: "t1", name: "Alexander K.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-sporty-black-man-standing-with-his-arms-crossed_1262-16419.jpg?_wi=2" },
+                            { id: "t2", name: "Marcus R.", imageSrc: "http://img.b2bpic.net/free-photo/young-powerful-sportsman-white-clothing-black-wall_176420-542.jpg" }
+                        ]}
                     />
                 </div>
 
                 <div id="contact" data-section="contact">
-                    <ContactSplit
+                    <ContactSplitForm
-                        background={{ variant: "plain" }}
+                        title="Begin Your Transformation"
-                        tag="READY FOR GOLD?"
+                        description="Submit your application to see if you qualify for 1-1 coaching"
-                        title="Command Your Transformation"
+                        inputs={[{ name: "name", type: "text", placeholder: "Name" }, { name: "email", type: "email", placeholder: "Email" }]}
-                        description="Stop settling. Apply for an elite coaching spot with Roshdy Physiques and commit to becoming the most disciplined, aesthetic version of yourself."
-                        useInvertedBackground={false}
-                        imageSrc="http://img.b2bpic.net/free-photo/athletic-woman-practicing-gymnastics_23-2150918093.jpg"
-                        imageAlt="Transformation Ready"
-                        mediaPosition="right"
-                        mediaAnimation="slide-up"
-                        tagIcon={Mail}
-                        inputPlaceholder="your.goal@email.com"
                         buttonText="Apply for Coaching"
-                        termsText="By submitting, you align with the Roshdy Physiques standard of excellence."
+                        useInvertedBackground={true}
+                        imageSrc="http://img.b2bpic.net/free-photo/athletic-woman-practicing-gymnastics_23-2150918093.jpg"
                     />
                 </div>
 
                 <div id="footer" data-section="footer">
-                    <FooterCard
+                    <FooterSimple
-                        logoText="ROSHDY PHYSIQUES"
+                        columns={[
-                        copyrightText="© 2025 Roshdy Physiques. The Gold Standard."
+                            { title: "Socials", items: [{ label: "Instagram" }, { label: "Twitter" }] },
-                        socialLinks={[
+                            { title: "Contact", items: [{ label: "Email Us" }] }
-                            { icon: Instagram, href: "#", ariaLabel: "Instagram" },
-                            { icon: Twitter, href: "#", ariaLabel: "Twitter" },
-                            { icon: Linkedin, href: "#", ariaLabel: "LinkedIn" },
-                            { icon: Mail, href: "#", ariaLabel: "Email" }
                         ]}
+                        bottomLeftText="© 2025 Roshdy Physiques"
+                        bottomRightText="Elite Coaching"
                     />
                 </div>
             </ReactLenis>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #e3deea;
+  --background: #000000;
-  --card: #ffffff;
+  --card: #0f0f0f;
-  --foreground: #27231f;
+  --foreground: #ffffff;
-  --primary-cta: #27231f;
+  --primary-cta: #ffd600;
   --primary-cta-text: #e3deea;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #27231f;
-  --accent: #c68a62;
+  --accent: #ffd600;
-  --background-accent: #c68a62;
+  --background-accent: #262626;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);