Bob AI: Add fancy hover animations to all sections on the page. Impl

src/app/page.tsx

@@ -44,6 +44,93 @@ 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
           logoText="Harmony Studios"

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"
       />