From 1dd53b266d690a9aa905b7aca51f5eb5923615f0 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Fri, 3 Jul 2026 16:51:31 +0000
Subject: [PATCH] Bob AI: Added background music with a toggle button

---
 src/pages/HomePage.tsx                        |  4 +-
 .../HomePage/sections/BackgroundMusic.tsx     | 46 +++++++++++++++++++
 2 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/HomePage/sections/BackgroundMusic.tsx

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 3d4f921..8819d10 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -19,7 +19,8 @@ import FaqSection from './HomePage/sections/Faq';
 import CertificationsSection from './HomePage/sections/Certifications';
 import ClientLogosSection from './HomePage/sections/ClientLogos';
 import FloatingCtaSection from './HomePage/sections/FloatingCta';
-import GuaranteeSection from './HomePage/sections/Guarantee';export default function HomePage(): React.JSX.Element {
+import GuaranteeSection from './HomePage/sections/Guarantee';
+import BackgroundMusicSection from './HomePage/sections/BackgroundMusic';export default function HomePage(): React.JSX.Element {
   return (
 <>
   <HeroSection />
@@ -42,6 +43,7 @@ import GuaranteeSection from './HomePage/sections/Guarantee';export default func
 
   <ContactSection />
           <FloatingCtaSection />
+          <BackgroundMusicSection />
     </>
   );
 }
diff --git a/src/pages/HomePage/sections/BackgroundMusic.tsx b/src/pages/HomePage/sections/BackgroundMusic.tsx
new file mode 100644
index 0000000..7182e22
--- /dev/null
+++ b/src/pages/HomePage/sections/BackgroundMusic.tsx
@@ -0,0 +1,46 @@
+import { useState, useRef, useEffect } from 'react';
+import { Volume2, VolumeX } from 'lucide-react';
+
+export default function BackgroundMusicSection() {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const audioRef = useRef<HTMLAudioElement>(null);
+
+  useEffect(() => {
+    if (audioRef.current) {
+      audioRef.current.volume = 0.15;
+      audioRef.current.play().then(() => {
+        setIsPlaying(true);
+      }).catch(() => {
+        setIsPlaying(false);
+      });
+    }
+  }, []);
+
+  const togglePlay = () => {
+    if (audioRef.current) {
+      if (isPlaying) {
+        audioRef.current.pause();
+      } else {
+        audioRef.current.play();
+      }
+      setIsPlaying(!isPlaying);
+    }
+  };
+
+  return (
+    <div data-webild-section="background-music" id="background-music" className="fixed bottom-4 right-4 z-50">
+      <audio
+        ref={audioRef}
+        src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
+        loop
+      />
+      <button
+        onClick={togglePlay}
+        className="w-10 h-10 rounded-full bg-background/90 backdrop-blur border border-black/10 flex items-center justify-center text-foreground hover:bg-background transition-colors shadow-lg"
+        aria-label="Toggle background music"
+      >
+        {isPlaying ? <Volume2 size={18} /> : <VolumeX size={18} />}
+      </button>
+    </div>
+  );
+}
\ No newline at end of file