Update src/app/page.tsx

Merge version_5 into main

src/app/page.tsx

@@ -2,7 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
 import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
 import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
@@ -10,7 +10,8 @@ import TeamCardSix from '@/components/sections/team/TeamCardSix';
 import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import { Zap, Target, DollarSign, Users, Star, Mail, Hexagon, House, MessageSquareText, Settings, CircleDollarSign, ArrowLeftRight, Send } from 'lucide-react';
+import HeroBackgrounds from '@/components/background/HeroBackgrounds';
+import { Zap, Target, DollarSign, Users, Star, Mail, Sparkles } from 'lucide-react';
 
 export default function LandingPage() {
   return (
@@ -43,50 +44,91 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroBillboardDashboard
+        <HeroOverlay
           title="Transform Your Body, Elevate Your Life"
           description="Expert personal coaching designed to help you achieve your fitness goals. Whether you're starting your journey or reaching peak performance, our certified coaches are here to guide every step."
           tag="Professional Sports Coaching"
           tagIcon={Zap}
           tagAnimation="slide-up"
-          background={{ variant: "canvas-reveal" }}
+          imageSrc="http://img.b2bpic.net/free-photo/woman-gym-with-coach_1303-5545.jpg"
+          imageAlt="Elite coaching professional trainer helping client"
+          textPosition="bottom-left"
+          showBlur={true}
+          showDimOverlay={false}
           buttons={[
             { text: "Book Your First Session", href: "#contact" },
             { text: "View Services", href: "#services" }
           ]}
           buttonAnimation="slide-up"
-          dashboard={{
-            title: "Coaching Performance Hub",            logoIcon: Hexagon,
-            imageSrc: "http://img.b2bpic.net/free-photo/woman-gym-with-coach_1303-5545.jpg",            buttons: [
-              { text: "View Dashboard", href: "#" },
-              { text: "Export Progress", href: "#" }
-            ],
-            sidebarItems: [
-              { icon: House, active: true },
-              { icon: MessageSquareText },
-              { icon: Settings }
-            ],
-            stats: [
-              { title: "Clients Trained", values: [150, 280, 450], description: "Active coaching clients." },
-              { title: "Sessions Completed", values: [1240, 1850, 2340], description: "Total training sessions." },
-              { title: "Goals Achieved", values: [92, 145, 198], description: "Client success rate." }
-            ],
-            chartTitle: "Monthly Training Activity",            chartData: [
-              { value: 65 },
-              { value: 45 },
-              { value: 78 },
-              { value: 55 },
-              { value: 88 }
-            ],
-            listTitle: "Recent Client Achievements",            listItems: [
-              { icon: CircleDollarSign, title: "Weight Loss Goal Met", status: "Completed" },
-              { icon: ArrowLeftRight, title: "Strength Milestone", status: "In Progress" },
-              { icon: Send, title: "Endurance Record", status: "Completed" }
-            ]
-          }}
         />
       </div>
 
+      <div id="wow" data-section="wow">
+        <div className="relative w-full py-20 lg:py-32 overflow-hidden bg-gradient-to-br from-purple-600 via-blue-600 to-cyan-500">
+          <div className="absolute inset-0 opacity-40">
+            <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-purple-400 rounded-full mix-blend-multiply filter blur-3xl animate-blob"></div>
+            <div className="absolute top-1/3 right-1/4 w-96 h-96 bg-blue-400 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000"></div>
+            <div className="absolute -bottom-8 left-1/2 w-96 h-96 bg-cyan-400 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-4000"></div>
+          </div>
+          
+          <div className="relative z-10 w-full px-6 lg:px-12">
+            <div className="max-w-4xl mx-auto text-center space-y-8">
+              <div className="inline-flex items-center justify-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-md border border-white/20">
+                <Sparkles className="w-5 h-5 text-white" />
+                <span className="text-white text-sm font-semibold">WOW Factor</span>
+              </div>
+              
+              <h2 className="text-4xl lg:text-6xl font-bold text-white leading-tight drop-shadow-lg">
+                Experience the
+                <span className="bg-gradient-to-r from-yellow-200 via-pink-200 to-cyan-200 bg-clip-text text-transparent block">Transformation Magic</span>
+              </h2>
+              
+              <p className="text-lg lg:text-xl text-white/90 max-w-2xl mx-auto drop-shadow-md">
+                Witness the incredible power of elite coaching as we transform bodies and minds. Our proprietary methods create stunning results that leave a lasting impression.
+              </p>
+              
+              <div className="grid grid-cols-3 gap-6 pt-8">
+                <div className="bg-white/10 backdrop-blur-md border border-white/20 rounded-lg p-6 hover:bg-white/20 transition-all duration-300">
+                  <div className="text-3xl font-bold text-transparent bg-gradient-to-r from-yellow-200 to-pink-200 bg-clip-text">300%</div>
+                  <p className="text-white/80 text-sm mt-2">Faster Results</p>
+                </div>
+                <div className="bg-white/10 backdrop-blur-md border border-white/20 rounded-lg p-6 hover:bg-white/20 transition-all duration-300">
+                  <div className="text-3xl font-bold text-transparent bg-gradient-to-r from-pink-200 to-cyan-200 bg-clip-text">100%</div>
+                  <p className="text-white/80 text-sm mt-2">Guaranteed Success</p>
+                </div>
+                <div className="bg-white/10 backdrop-blur-md border border-white/20 rounded-lg p-6 hover:bg-white/20 transition-all duration-300">
+                  <div className="text-3xl font-bold text-transparent bg-gradient-to-r from-cyan-200 to-yellow-200 bg-clip-text">∞</div>
+                  <p className="text-white/80 text-sm mt-2">Unlimited Potential</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <style jsx>{`
+          @keyframes blob {
+            0%, 100% {
+              transform: translate(0, 0) scale(1);
+            }
+            33% {
+              transform: translate(30px, -50px) scale(1.1);
+            }
+            66% {
+              transform: translate(-20px, 20px) scale(0.9);
+            }
+          }
+          .animate-blob {
+            animation: blob 7s infinite;
+          }
+          .animation-delay-2000 {
+            animation-delay: 2s;
+          }
+          .animation-delay-4000 {
+            animation-delay: 4s;
+          }
+        `}</style>
+      </div>
+
       <div id="about" data-section="about">
         <TextSplitAbout
           title="About Elite Coaching"