Bob AI: Add lofi background music to the entire website. Implement a

2026-02-24 15:38:34 +00:00
1 changed files with 56 additions and 1 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -7,11 +7,57 @@ import Tag from "@/tag/Tag";
 const instrumentSans = Instrument_Sans({
  variable: "--font-instrument-sans",  subsets: ["latin"],
 });
+"use client";
+
+import { useState, useEffect } from "react";
+import { Volume2, VolumeX } from "lucide-react";

 export const metadata: Metadata = {
-  title: "Premium Hookah Store | Quality & Tradition",  description: "Discover premium hookah experiences with our curated collection of high-quality pipes, tobacco, and accessories. Experience the art of traditional hookah culture.",  keywords: ["hookah store", "premium hookah", "hookah accessories", "hookah tobacco", "traditional hookah"]
+  title: "Premium Hookah Store | Quality & Tradition",
+  description: "Discover premium hookah experiences with our curated collection of high-quality pipes, tobacco, and accessories. Experience the art of traditional hookah culture.",
+  keywords: ["hookah store", "premium hookah", "hookah accessories", "hookah tobacco", "traditional hookah"]
 };

+function AudioPlayer() {
+  const [isMuted, setIsMuted] = useState(true);
+
+  useEffect(() => {
+    const audioElement = document.getElementById("lofi-background-music");
+    if (audioElement) {
+      if (isMuted) {
+        audioElement.pause();
+      } else {
+        audioElement.play().catch(() => {
+          console.log("Autoplay prevented by browser");
+        });
+      }
+    }
+  }, [isMuted]);
+
+  return (
+    <>
+      <audio
+        id="lofi-background-music"
+        src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
+        loop
+        preload="auto"
+      />
+      <button
+        onClick={() => setIsMuted(!isMuted)}
+        className="fixed bottom-6 right-6 z-50 bg-amber-600 hover:bg-amber-700 text-white p-3 rounded-full shadow-lg transition-all duration-200 flex items-center justify-center"
+        aria-label={isMuted ? "Unmute music" : "Mute music"}
+        title={isMuted ? "Play lofi music" : "Pause lofi music"}
+      >
+        {isMuted ? (
+          <VolumeX size={20} />
+        ) : (
+          <Volume2 size={20} />
+        )}
+      </button>
+    </>
+  );
+}
+
 export default function RootLayout({
  children,
 }: Readonly<{
@@ -23,6 +69,7 @@ export default function RootLayout({
        <body
          className={instrumentSans.variable}
        >
+          <AudioPlayer />
          <Tag />
          {children}
        
@@ -87,6 +134,14 @@ export default function RootLayout({
    '  font-weight: 600 !important;' +
    '  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;' +
    '  pointer-events: none !important;' +
+    '}'
+          }}
+        />
+        </body>
+      </ServiceWrapper>
+    </html>
+  );
+}
    '  white-space: nowrap !important;' +
    '  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;' +
    '  letter-spacing: 0.3px !important;' +