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