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 ( <> @@ -42,6 +43,7 @@ import GuaranteeSection from './HomePage/sections/Guarantee';export default func + ); } 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(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 ( +
+
+ ); +} \ No newline at end of file