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

Bob AI: Update the background music player to use the Freepik audio
Bob AI: Create or update the background music player component to us
2026-02-24 19:36:46 +02:00 · 2026-02-24 19:34:50 +02:00 · 2026-02-24 19:32:10 +02:00 · 2026-02-24 19:29:59 +02:00 · 2026-02-24 17:28:35 +00:00
3 changed files with 231 additions and 4 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -4,9 +4,6 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
-import { BackgroundLofiMusicPlayer } from "@/components/BackgroundLofiMusicPlayer";
-
-// Create the BackgroundLofiMusicPlayer component file at src/components/BackgroundLofiMusicPlayer.tsx

 const notoSans = Noto_Sans({
  variable: "--font-noto-sans",  subsets: ["latin"],
@@ -31,7 +28,6 @@ export default function RootLayout({
        <body
          className={`${notoSans.variable} ${inter.variable} antialiased`}
        >
-          <BackgroundLofiMusicPlayer />
          <Tag />
          {children}
        
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,6 +10,7 @@ import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCar
 import ContactFaq from '@/components/sections/contact/ContactFaq';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
 import { Award, Sparkles, Users, Music } from "lucide-react";
+import BackgroundMusicPlayer from '@/components/BackgroundMusicPlayer';

 export default function LandingPage() {
  return (
@@ -25,6 +26,7 @@ export default function LandingPage() {
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
+      <BackgroundMusicPlayer />
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
@@ -42,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"
--- a/src/components/BackgroundMusicPlayer.tsx
+++ b/src/components/BackgroundMusicPlayer.tsx
@@ -0,0 +1,142 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { Volume2, VolumeX, Play, Pause } from 'lucide-react';
+
+interface Props {}
+
+export default function BackgroundMusicPlayer({}: Props) {
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [volume, setVolume] = useState(0.5);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+
+    audio.volume = volume;
+  }, [volume]);
+
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+
+    const handleCanPlay = () => {
+      setIsLoaded(true);
+      setError(null);
+    };
+
+    const handleError = () => {
+      setError('Failed to load audio');
+      setIsPlaying(false);
+    };
+
+    const handleEnded = () => {
+      audio.currentTime = 0;
+      audio.play().catch(() => {
+        setIsPlaying(false);
+      });
+    };
+
+    audio.addEventListener('canplay', handleCanPlay);
+    audio.addEventListener('error', handleError);
+    audio.addEventListener('ended', handleEnded);
+
+    return () => {
+      audio.removeEventListener('canplay', handleCanPlay);
+      audio.removeEventListener('error', handleError);
+      audio.removeEventListener('ended', handleEnded);
+    };
+  }, []);
+
+  const togglePlayPause = async () => {
+    const audio = audioRef.current;
+    if (!audio) return;
+
+    try {
+      if (isPlaying) {
+        audio.pause();
+        setIsPlaying(false);
+      } else {
+        await audio.play();
+        setIsPlaying(true);
+      }
+    } catch (err) {
+      setError('Autoplay policy prevented playback');
+      setIsPlaying(false);
+    }
+  };
+
+  const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newVolume = parseFloat(e.target.value);
+    setVolume(newVolume);
+  };
+
+  return (
+    <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="https://www.freepik.com/audio/tune/static"
+        loop
+        crossOrigin="anonymous"
+      />
+
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <h3 className="text-sm font-semibold text-white">Background Music</h3>
+          <div className="text-xs text-slate-400">
+            {isLoaded ? 'Ready' : 'Loading...'}
+          </div>
+        </div>
+
+        {error && (
+          <div className="text-xs text-red-400 bg-red-950 bg-opacity-50 rounded px-2 py-1">
+            {error}
+          </div>
+        )}
+
+        <div className="flex items-center gap-3">
+          <button
+            onClick={togglePlayPause}
+            disabled={!isLoaded}
+            className="flex-shrink-0 bg-blue-600 hover:bg-blue-700 disabled:bg-slate-600 disabled:cursor-not-allowed text-white rounded-full p-2 transition-colors duration-200"
+            aria-label={isPlaying ? 'Pause' : 'Play'}
+          >
+            {isPlaying ? (
+              <Pause size={20} fill="currentColor" />
+            ) : (
+              <Play size={20} fill="currentColor" />
+            )}
+          </button>
+
+          <div className="flex-1 flex items-center gap-2">
+            {volume === 0 ? (
+              <VolumeX size={18} className="text-slate-400 flex-shrink-0" />
+            ) : (
+              <Volume2 size={18} className="text-slate-400 flex-shrink-0" />
+            )}
+            <input
+              type="range"
+              min="0"
+              max="1"
+              step="0.05"
+              value={volume}
+              onChange={handleVolumeChange}
+              className="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-blue-600"
+              aria-label="Volume"
+            />
+            <span className="text-xs text-slate-400 w-8 text-right">
+              {Math.round(volume * 100)}%
+            </span>
+          </div>
+        </div>
+
+        <div className="text-xs text-slate-500 text-center">
+          {isPlaying ? 'Now playing' : 'Paused'}
+        </div>
+      </div>
+    </div>
+  );
+}
Author	SHA1	Message	Date
kudindmitriy	615b4d2859	Bob AI: Add fancy hover animations to all sections on the page. Impl	2026-02-24 19:36:46 +02:00
kudindmitriy	a34b39ff5e	Bob AI: Update the background music player to use the Freepik audio	2026-02-24 19:34:50 +02:00
kudindmitriy	9183f66f50	Bob AI: Create or update the background music player component to us	2026-02-24 19:32:10 +02:00
kudindmitriy	604104c875	Bob AI: Add a background music player that plays the custom song fro	2026-02-24 19:29:59 +02:00
bender	54497158b0	Update src/app/layout.tsx	2026-02-24 17:28:35 +00:00