Merge version_9_1783097441907 into main

Merge version_9_1783097441907 into main

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 />
     </>
   );
 }

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>
+  );
+}