Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -2,16 +2,15 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
-import FooterCard from '@/components/sections/footer/FooterCard';
-import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
-import MediaAbout from '@/components/sections/about/MediaAbout';
-import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
-import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
-import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
-import { Activity, Award, Dumbbell, Facebook, Instagram, Target, Twitter, Users, Zap } from "lucide-react";
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
+import TeamCardFive from '@/components/sections/team/TeamCardFive';
+import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
 
 export default function LandingPage() {
   return (
@@ -21,218 +20,130 @@ export default function LandingPage() {
         borderRadius="rounded"
         contentWidth="medium"
         sizing="largeSizeMediumTitles"
-        background="grid"
+        background="noiseDiagonalGradient"
         cardStyle="glass-elevated"
-        primaryButtonStyle="radial-glow"
-        secondaryButtonStyle="solid"
-        headingFontWeight="bold"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="extrabold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
-      navItems={[
-        {
-          name: "Home",          id: "hero"},
-        {
-          name: "About",          id: "about"},
-        {
-          name: "Services",          id: "services"},
-        {
-          name: "Pricing",          id: "pricing"},
-        {
-          name: "Contact",          id: "contact"},
-      ]}
-      brandName="Iron Pulse"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+            <NavbarStyleApple
+              navItems={[
+                { name: "Home", id: "hero" },
+                { name: "About", id: "about" },
+                { name: "Services", id: "services" },
+                { name: "Team", id: "team" },
+                { name: "Pricing", id: "pricing" },
+                { name: "Contact", id: "contact" }
+              ]}
+              brandName="Iron Pulse"
+            />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroLogoBillboardSplit
-      background={{
-        variant: "gradient-bars"}}
-      logoText="Iron Pulse"
-      description="Transform Your Body. Transform Your Life. Join the premier fitness community and crush your goals with world-class facilities and expert guidance."
-      buttons={[
-        {
-          text: "Join Now",          href: "#pricing"},
-        {
-          text: "Book Free Trial",          href: "#contact"},
-      ]}
-      buttonAnimation="slide-up"
-      layoutOrder="default"
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZLp4BmfAHuWfweAOsfhB6INWK/a-high-energy-cinematic-gym-interior-sce-1774691938766-18708a0c.png"
-      mediaAnimation="blur-reveal"
-    />
-  </div>
+        <div id="hero" data-section="hero">
+            <HeroBillboard
+              title="UNLEASH YOUR INNER ATHLETE"
+              description="Join the premier high-energy fitness destination. Elevate your performance with world-class facilities and expert guidance."
+              background={{ variant: "sparkles-gradient" }}
+              buttons={[{ text: "Join The Elite", href: "#pricing" }, { text: "Tour Our Gym", href: "#contact" }]}
+              imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZLp4BmfAHuWfweAOsfhB6INWK/a-high-energy-cinematic-gym-interior-sce-1774691938766-18708a0c.png?_wi=1"
+            />
+        </div>
 
-  <div id="about" data-section="about">
-      <MediaAbout
-      useInvertedBackground={false}
-      title="Built for Results"
-      description="At Iron Pulse, we don't just provide equipment; we provide the atmosphere you need to succeed. With modern gear, certified trainers, and personalized plans, our mission is to empower every individual to reach their peak potential in a professional, high-energy environment."
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZLp4BmfAHuWfweAOsfhB6INWK/professional-gym-environment-wide-angle--1774691937343-18e1d84f.png"
-    />
-  </div>
+        <div id="about" data-section="about">
+            <MetricSplitMediaAbout
+              title="BEYOND THE LIMITS"
+              description="At Iron Pulse, we redefine fitness through intensity and discipline. Our community is built for those who crave results and demand excellence."
+              metrics={[{ value: "500+", title: "Active Athletes" }, { value: "10+", title: "Expert Trainers" }]}
+              useInvertedBackground={false}
+              imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZLp4BmfAHuWfweAOsfhB6INWK/professional-gym-environment-wide-angle--1774691937343-18e1d84f.png"
+            />
+        </div>
 
-  <div id="services" data-section="services">
-      <FeatureCardTen
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      features={[
-        {
-          id: "f1",          title: "Personal Training",          description: "1-on-1 coaching for tailored results.",          media: {
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZLp4BmfAHuWfweAOsfhB6INWK/person-doing-yoga-in-a-dimly-lit-high-en-1774691937788-82b63ef7.png"},
-          items: [
-            {
-              icon: Dumbbell,
-              text: "Custom Plans"},
-            {
-              icon: Target,
-              text: "Goal Tracking"},
-          ],
-          reverse: false,
-        },
-        {
-          id: "f2",          title: "Strength Training",          description: "State-of-the-art weights and racks.",          media: {
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZLp4BmfAHuWfweAOsfhB6INWK/close-up-shot-of-heavy-weight-plates-on--1774691936941-d34a443f.png"},
-          items: [
-            {
-              icon: Award,
-              text: "Certified Gear"},
-            {
-              icon: Zap,
-              text: "Explosive Growth"},
-          ],
-          reverse: true,
-        },
-        {
-          id: "f3",          title: "Group Classes",          description: "High-intensity sessions for everyone.",          media: {
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZLp4BmfAHuWfweAOsfhB6INWK/a-modern-group-fitness-class-setup-silho-1774691937294-24c6a894.png"},
-          items: [
-            {
-              icon: Users,
-              text: "Fun Environment"},
-            {
-              icon: Activity,
-              text: "Cardio & Strength"},
-          ],
-          reverse: false,
-        },
-      ]}
-      title="Elite Fitness Services"
-      description="Our comprehensive gym services are designed to help you reach your goals faster than ever."
-    />
-  </div>
+        <div id="services" data-section="services">
+            <FeatureCardThree
+              title="PREMIUM FITNESS SUITE"
+              description="Top-tier equipment and personalized coaching."
+              textboxLayout="split"
+              animationType="blur-reveal"
+              gridVariant="bento-grid"
+              useInvertedBackground={false}
+              features={[
+                { id: "s1", title: "Personalized Coaching", description: "Tailored 1-on-1 plans for maximum gain.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZLp4BmfAHuWfweAOsfhB6INWK/person-doing-yoga-in-a-dimly-lit-high-en-1774691937788-82b63ef7.png" },
+                { id: "s2", title: "Strength Sanctuary", description: "Pro-grade equipment for heavy lifting.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZLp4BmfAHuWfweAOsfhB6INWK/close-up-shot-of-heavy-weight-plates-on--1774691936941-d34a443f.png" },
+                { id: "s3", title: "Group Synergy", description: "High-intensity classes for elite camaraderie.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZLp4BmfAHuWfweAOsfhB6INWK/a-modern-group-fitness-class-setup-silho-1774691937294-24c6a894.png?_wi=1" }
+              ]}
+            />
+        </div>
 
-  <div id="team" data-section="team">
-      <TeamCardEleven
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      groups={[
-        {
-          id: "g1",          groupTitle: "Elite Trainers",          members: [
-            {
-              id: "m1",              title: "Alex Rivers",              subtitle: "Lead Instructor",              detail: "10+ years of bodybuilding experience.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZLp4BmfAHuWfweAOsfhB6INWK/professional-fitness-trainer-portrait-at-1774691937034-f61ae64b.png"},
-            {
-              id: "m2",              title: "Sarah Chen",              subtitle: "HIIT Specialist",              detail: "CrossFit certified and expert strategist.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZLp4BmfAHuWfweAOsfhB6INWK/female-fitness-instructor-athletic-smili-1774691937327-d2c02137.png"},
-            {
-              id: "m3",              title: "Mike Ross",              subtitle: "Strength Coach",              detail: "Former competitive lifter and trainer.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZLp4BmfAHuWfweAOsfhB6INWK/young-fit-man-muscular-intense-look-dark-1774691937558-0c8bd314.png"},
-            {
-              id: "m4",              title: "Elena Volkov",              subtitle: "Yoga Director",              detail: "Expert in flexibility and recovery.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZLp4BmfAHuWfweAOsfhB6INWK/professional-trainer-holding-gym-equipme-1774691937241-4b55ba89.png"},
-          ],
-        },
-      ]}
-      title="Meet Your Coaches"
-      description="Expert trainers dedicated to your transformation journey."
-    />
-  </div>
+        <div id="team" data-section="team">
+            <TeamCardFive
+              title="MEET THE ELITE"
+              description="The professionals guiding your journey."
+              animationType="scale-rotate"
+              textboxLayout="split"
+              useInvertedBackground={false}
+              team={[
+                { id: "t1", name: "Alex Rivers", role: "Lead Coach", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZLp4BmfAHuWfweAOsfhB6INWK/professional-fitness-trainer-portrait-at-1774691937034-f61ae64b.png" },
+                { id: "t2", name: "Sarah Chen", role: "HIIT Specialist", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZLp4BmfAHuWfweAOsfhB6INWK/female-fitness-instructor-athletic-smili-1774691937327-d2c02137.png" },
+                { id: "t3", name: "Mike Ross", role: "Power Lifting Pro", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZLp4BmfAHuWfweAOsfhB6INWK/young-fit-man-muscular-intense-look-dark-1774691937558-0c8bd314.png" }
+              ]}
+            />
+        </div>
 
-  <div id="pricing" data-section="pricing">
-      <PricingCardTwo
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      plans={[
-        {
-          id: "basic",          badge: "Entry",          price: "$29/mo",          subtitle: "Standard gym access",          features: [
-            "Basic Weight Room",            "Cardio Area",            "Showers"],
-          buttons: [
-            {
-              text: "Choose Basic",              href: "#contact"},
-          ],
-        },
-        {
-          id: "standard",          badge: "Most Popular",          price: "$59/mo",          subtitle: "Classes & Access",          features: [
-            "Everything in Basic",            "Unlimited Classes",            "Towel Service"],
-          buttons: [
-            {
-              text: "Choose Standard",              href: "#contact"},
-          ],
-        },
-        {
-          id: "premium",          badge: "Unlimited",          price: "$89/mo",          subtitle: "Personalized Experience",          features: [
-            "Everything in Standard",            "2 PT Sessions",            "Nutrition Plan"],
-          buttons: [
-            {
-              text: "Choose Premium",              href: "#contact"},
-          ],
-        },
-      ]}
-      title="Membership Plans"
-      description="Flexible pricing built for your journey."
-    />
-  </div>
+        <div id="pricing" data-section="pricing">
+            <PricingCardThree
+              title="CHOOSE YOUR INTENSITY"
+              description="Select the plan that matches your goals."
+              animationType="blur-reveal"
+              textboxLayout="split"
+              useInvertedBackground={false}
+              plans={[
+                { id: "p1", name: "Core", price: "$49", features: ["Access all areas", "Free locker access"], buttons: [{ text: "Get Started", href: "#contact" }] },
+                { id: "p2", name: "Pro", price: "$99", features: ["Access all areas", "Unlimited group classes", "1 PT session"], buttons: [{ text: "Select Pro", href: "#contact" }] },
+                { id: "p3", name: "Elite", price: "$149", features: ["Full access", "Unlimited everything", "2 PT sessions/mo", "Personalized nutrition"], buttons: [{ text: "Go Elite", href: "#contact" }] }
+              ]}
+            />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwelve
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "t1",          name: "John Doe",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZLp4BmfAHuWfweAOsfhB6INWK/close-up-professional-headshot-of-a-happ-1774691936925-cd8a8513.png?_wi=1"},
-        {
-          id: "t2",          name: "Jane Smith",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZLp4BmfAHuWfweAOsfhB6INWK/professional-headshot-of-an-athletic-wom-1774691937445-9b994c0f.png"},
-        {
-          id: "t3",          name: "Mark Wilson",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZLp4BmfAHuWfweAOsfhB6INWK/professional-headshot-of-a-motivated-fit-1774691937598-393b34b1.png"},
-        {
-          id: "t4",          name: "Anna Lee",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZLp4BmfAHuWfweAOsfhB6INWK/professional-headshot-of-a-strong-fitnes-1774691938424-56b4529d.png"},
-        {
-          id: "t5",          name: "David P.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZLp4BmfAHuWfweAOsfhB6INWK/close-up-professional-headshot-of-a-happ-1774691936925-cd8a8513.png?_wi=2"},
-      ]}
-      cardTitle="Success Stories"
-      cardTag="Testimonials"
-      cardAnimation="slide-up"
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+            <TestimonialCardFive
+              title="WHAT OUR ATHLETES SAY"
+              description="Real stories of transformation from our community."
+              textboxLayout="split"
+              useInvertedBackground={false}
+              testimonials={[
+                { id: "t1", name: "John D.", date: "May 2024", title: "Total Transformation", quote: "The intensity here is unmatched. I've never felt stronger.", tag: "Elite", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZLp4BmfAHuWfweAOsfhB6INWK/close-up-professional-headshot-of-a-happ-1774691936925-cd8a8513.png?_wi=1" },
+                { id: "t2", name: "Jane S.", date: "June 2024", title: "Supportive Community", quote: "The trainers truly care about your form and progress.", tag: "Pro", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZLp4BmfAHuWfweAOsfhB6INWK/professional-headshot-of-an-athletic-wom-1774691937445-9b994c0f.png" }
+              ]}
+            />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactCenter
-      useInvertedBackground={false}
-      background={{
-        variant: "rotated-rays-static"}}
-      tag="Join Now"
-      title="Get Started Today"
-      description="Ready to change your life? Fill in your details below and we'll reach out to schedule your free tour or trial session."
-    />
-  </div>
+        <div id="contact" data-section="contact">
+            <ContactSplitForm
+              title="CLAIM YOUR PASS"
+              description="Secure your place in the most elite fitness community in the city."
+              useInvertedBackground={false}
+              inputs={[
+                { name: "name", type: "text", placeholder: "Full Name" },
+                { name: "email", type: "email", placeholder: "Email Address" }
+              ]}
+              buttonText="Secure Spot"
+              imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZLp4BmfAHuWfweAOsfhB6INWK/a-modern-group-fitness-class-setup-silho-1774691937294-24c6a894.png?_wi=2"
+            />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterCard
-      logoText="Iron Pulse"
-      socialLinks={[
-        {
-          icon: Instagram,
-          href: "https://instagram.com",          ariaLabel: "Instagram"},
-        {
-          icon: Twitter,
-          href: "https://twitter.com",          ariaLabel: "Twitter"},
-        {
-          icon: Facebook,
-          href: "https://facebook.com",          ariaLabel: "Facebook"},
-      ]}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+            <FooterMedia
+              logoText="Iron Pulse"
+              imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZLp4BmfAHuWfweAOsfhB6INWK/a-high-energy-cinematic-gym-interior-sce-1774691938766-18708a0c.png?_wi=2"
+              columns={[
+                { title: "Quick Links", items: [{ label: "Pricing", href: "#pricing" }, { label: "Team", href: "#team" }] },
+                { title: "Support", items: [{ label: "Contact", href: "#contact" }, { label: "Privacy", href: "#" }] }
+              ]}
+            />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
-  --card: #1a1a1a;
-  --foreground: #f0f8ffe6;
-  --primary-cta: #cee7ff;
+  --background: #000000;
+  --card: #0c0c0c;
+  --foreground: #ffffff;
+  --primary-cta: #106EFB;
   --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1a1a1a;
+  --secondary-cta: #000000;
   --secondary-cta-text: #f0f8ffe6;
-  --accent: #737373;
-  --background-accent: #737373;
+  --accent: #535353;
+  --background-accent: #106EFB;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);