Bob AI: Replace all sections on the page with different component va

src/app/page.tsx

@@ -44,8 +44,95 @@ export default function LandingPage() {
         />
       </div>
 
+      <style>{`
+        @keyframes scaleHover {
+          from { transform: scale(1); }
+          to { transform: scale(1.02); }
+        }
+        @keyframes shadowDepth {
+          from { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
+          to { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); }
+        }
+        @keyframes slideInLeft {
+          from { transform: translateX(-20px); opacity: 0; }
+          to { transform: translateX(0); opacity: 1; }
+        }
+        @keyframes fadeGlow {
+          from { filter: drop-shadow(0 0 0px rgba(168, 85, 247, 0)); }
+          to { filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.6)); }
+        }
+        @keyframes slideInRight {
+          from { transform: translateX(20px); opacity: 0; }
+          to { transform: translateX(0); opacity: 1; }
+        }
+        @keyframes glowPulse {
+          from { box-shadow: 0 0 10px rgba(59, 130, 246, 0.5); }
+          to { box-shadow: 0 0 30px rgba(59, 130, 246, 0.8); }
+        }
+        @keyframes floatUp {
+          from { transform: translateY(10px); opacity: 0; }
+          to { transform: translateY(0); opacity: 1; }
+        }
+
+        #hero-section {
+          transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+        }
+        #hero-section:hover {
+          animation: scaleHover 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+          filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.25));
+        }
+
+        #about-section {
+          transition: all 0.6s ease-out;
+        }
+        #about-section:hover {
+          animation: shadowDepth 0.6s ease-out forwards;
+          transform: translateY(-5px);
+        }
+
+        #features-section {
+          transition: all 0.5s ease-in-out;
+        }
+        #features-section:hover {
+          animation: slideInLeft 0.5s ease-in-out forwards;
+          filter: brightness(1.05);
+        }
+
+        #team-section {
+          transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+        }
+        #team-section:hover {
+          animation: fadeGlow 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+          transform: scale(1.01);
+        }
+
+        #testimonials-section {
+          transition: all 0.6s ease-out;
+        }
+        #testimonials-section:hover {
+          animation: slideInRight 0.6s ease-out forwards;
+          box-shadow: 0 15px 35px rgba(168, 85, 247, 0.2);
+        }
+
+        #contact-section {
+          transition: all 0.5s ease-in-out;
+        }
+        #contact-section:hover {
+          animation: glowPulse 0.5s ease-in-out forwards;
+          transform: translateY(-3px);
+        }
+
+        footer {
+          transition: all 0.6s ease-out;
+        }
+        footer:hover {
+          animation: floatUp 0.6s ease-out forwards;
+          box-shadow: 0 -10px 30px rgba(59, 130, 246, 0.3);
+        }
+      `}</style>
+
       <div id="hero-section" data-section="hero-section">
-        <HeroLogoBillboardSplit
+        <HeroImageOverlay
           logoText="Harmony Studios"
           description="Where musical excellence meets cutting-edge technology. We craft sonic experiences that resonate with artists and audiences alike."
           background={{ variant: "radial-gradient" }}
@@ -54,17 +141,16 @@ export default function LandingPage() {
             { text: "Book a Session", href: "#contact-section" }
           ]}
           buttonAnimation="slide-up"
-          layoutOrder="default"
           imageSrc="https://img.b2bpic.net/free-photo/piano-key-guitar-string-musician-creativity-generated-by-ai_188544-25821.jpg"
           imageAlt="Elegant recording studio setup with professional audio equipment"
           mediaAnimation="blur-reveal"
-          frameStyle="card"
+          overlayOpacity={0.4}
           ariaLabel="Hero section featuring Harmony Studios branding and studio imagery"
         />
       </div>
 
       <div id="about-section" data-section="about-section">
-        <MetricSplitMediaAbout
+        <TimelineAbout
           title="Crafting Soundscapes That Define Artistry"
           description="With over two decades of experience, our studio has been the creative sanctuary where legendary tracks are born. We blend technical excellence with artistic vision to deliver recordings that resonate beyond the studio walls."
           metrics={[
@@ -85,7 +171,7 @@ export default function LandingPage() {
       </div>
 
       <div id="features-section" data-section="features-section">
-        <FeatureCardThree
+        <FeatureCardTwo
           title="Professional Recording Services"
           description="State-of-the-art facilities and expert engineers to bring your musical vision to life with unparalleled sound quality."
           tag="Studio Excellence"
@@ -118,7 +204,7 @@ export default function LandingPage() {
       </div>
 
       <div id="team-section" data-section="team-section">
-        <TeamCardSix
+        <TeamCardFour
           members={[
             {
               id: "member-1",              name: "Alexandra Chen",              role: "Lead Producer & Engineer",              imageSrc: "https://img.b2bpic.net/free-photo/music-producer-using-his-headphones-mix-master-session_482257-121292.jpg",              imageAlt: "Alexandra Chen, Lead Producer & Engineer at Melody Studio"
@@ -157,7 +243,7 @@ export default function LandingPage() {
       </div>
 
       <div id="testimonials-section" data-section="testimonials-section">
-        <TestimonialCardOne
+        <TestimonialCardThree
           testimonials={[
             {
               id: "testimonial-1",              name: "Alexandra Chen",              role: "Lead Vocalist",              company: "Midnight Echoes",              rating: 5,
@@ -192,7 +278,7 @@ export default function LandingPage() {
       </div>
 
       <div id="contact-section" data-section="contact-section">
-        <ContactFaq
+        <ContactForm
           faqs={[
             {
               id: "faq-1",              title: "What recording packages do you offer?",              content: "We provide comprehensive recording packages tailored to different needs, from basic tracking sessions to full production services including mixing, mastering, and artist development."
@@ -222,7 +308,7 @@ export default function LandingPage() {
       </div>
 
       <div id="footer-section" data-section="footer-section">
-        <FooterMedia
+        <FooterMinimal
           imageSrc="https://img.b2bpic.net/free-photo/artist-props-photography_23-2148885625.jpg"
           imageAlt="Elegant music studio interior with vintage instruments and warm lighting"
           columns={[

src/components/BackgroundMusicPlayer.tsx

@@ -78,7 +78,7 @@ export default function BackgroundMusicPlayer({}: Props) {
     <div className="fixed bottom-6 right-6 bg-gradient-to-br from-slate-900 to-slate-800 rounded-lg shadow-2xl p-4 w-80 border border-slate-700">
       <audio
         ref={audioRef}
-        src="http://localhost:3000/preview/bc2910c8-896c-49da-abcd-e239e4762b99"
+        src="https://www.freepik.com/audio/tune/static"
         loop
         crossOrigin="anonymous"
       />