Bob AI: Add a lofi music player component to the layout that plays b

Bob AI: Fix the CursorTrail component error by either importing the
Update src/app/layout.tsx
2026-02-24 15:27:10 +00:00 · 2026-02-24 15:26:47 +00:00 · 2026-02-24 15:26:23 +00:00 · 2026-02-24 15:23:10 +00:00 · 2026-02-24 15:22:46 +00:00
1 changed files with 55 additions and 90 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -13,16 +13,35 @@ const ubuntu = Ubuntu({
 const inter = Inter({
  variable: "--font-inter",  subsets: ["latin"],
 });
-
 export const metadata: Metadata = {
-  title: "Strategic Media Buying Expert | Drive Advertising Results",  description: "Professional media buying services that deliver measurable ROI. Expert strategies for brands and advertising professionals seeking impactful campaigns.",  keywords: ["media buying", "advertising strategy", "digital marketing", "brand growth", "ROI optimization"]
+  title: "Strategic Media Buying Expert | Drive Advertising Results",
+  description: "Professional media buying services that deliver measurable ROI. Expert strategies for brands and advertising professionals seeking impactful campaigns.",
+  keywords: ["media buying", "advertising strategy", "digital marketing", "brand growth", "ROI optimization"]
 };

+'use client';
+
+import { useState } from 'react';
+
 export default function RootLayout({
  children,
 }: Readonly<{
  children: React.ReactNode;
 }>) {
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  const toggleMusic = () => {
+    const audio = document.getElementById('lofi-music') as HTMLAudioElement;
+    if (audio) {
+      if (isPlaying) {
+        audio.pause();
+      } else {
+        audio.play();
+      }
+      setIsPlaying(!isPlaying);
+    }
+  };
+
  return (
    <html lang="en" suppressHydrationWarning>
      <ServiceWrapper>
@@ -31,6 +50,32 @@ export default function RootLayout({
        >
          <Tag />
          {children}
+          
+          {/* Lofi Music Player */}
+          <audio
+            id="lofi-music"
+            src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
+            loop
+            preload="metadata"
+          />
+          
+          {/* Floating Music Toggle Button */}
+          <button
+            onClick={toggleMusic}
+            className="fixed bottom-6 right-6 z-50 w-14 h-14 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center hover:scale-110 active:scale-95"
+            aria-label="Toggle lofi music"
+            title={isPlaying ? "Pause music" : "Play lofi music"}
+          >
+            {isPlaying ? (
+              <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
+              </svg>
+            ) : (
+              <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M8 5v14l11-7z" />
+              </svg>
+            )}
+          </button>
        
        <script
          dangerouslySetInnerHTML={{
@@ -93,6 +138,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;' +
@@ -110,97 +163,9 @@ export default function RootLayout({
    '  pointer-events: none !important;' +
    '  z-index: 999998 !important;' +
    '  transition: all 0.15s ease !important;' +
-    '}' +
-    '.lofi-music-toggle {' +
-    '  position: fixed !important;' +
-    '  bottom: 30px !important;' +
-    '  right: 30px !important;' +
-    '  z-index: 999997 !important;' +
-    '  width: 56px !important;' +
-    '  height: 56px !important;' +
-    '  border-radius: 50% !important;' +
-    '  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;' +
-    '  border: none !important;' +
-    '  color: white !important;' +
-    '  font-size: 24px !important;' +
-    '  cursor: pointer !important;' +
-    '  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;' +
-    '  transition: all 0.3s ease !important;' +
-    '  display: flex !important;' +
-    '  align-items: center !important;' +
-    '  justify-content: center !important;' +
-    '}' +
-    '.lofi-music-toggle:hover {' +
-    '  transform: scale(1.1) !important;' +
-    '  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.6) !important;' +
-    '}' +
-    '.lofi-music-toggle.playing {' +
-    '  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;' +
    '}';
  document.head.appendChild(style);
  
-  // Initialize lofi music player
-  const initLofiMusicPlayer = () => {
-    // Create audio element
-    const audioElement = document.createElement('audio');
-    audioElement.id = 'lofi-music-player';
-    audioElement.loop = true;
-    audioElement.volume = 0.3;
-    
-    // Use a free lofi music source (YouTube Audio Library or similar)
-    // Using a direct link to a lofi music track
-    audioElement.src = 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3';
-    
-    document.body.appendChild(audioElement);
-    
-    // Create toggle button
-    const toggleButton = document.createElement('button');
-    toggleButton.className = 'lofi-music-toggle';
-    toggleButton.innerHTML = '🎵';
-    toggleButton.setAttribute('aria-label', 'Toggle lofi music');
-    toggleButton.setAttribute('title', 'Toggle background music');
-    
-    let isPlaying = false;
-    
-    toggleButton.addEventListener('click', () => {
-      if (isPlaying) {
-        audioElement.pause();
-        toggleButton.classList.remove('playing');
-        isPlaying = false;
-      } else {
-        audioElement.play().catch(err => console.log('Autoplay prevented:', err));
-        toggleButton.classList.add('playing');
-        isPlaying = true;
-      }
-    });
-    
-    document.body.appendChild(toggleButton);
-    
-    // Attempt autoplay (muted for browser compliance)
-    audioElement.muted = true;
-    audioElement.play().catch(err => console.log('Autoplay prevented:', err));
-    
-    // Unmute after user interaction
-    const unmuteOnInteraction = () => {
-      audioElement.muted = false;
-      audioElement.play().catch(err => console.log('Autoplay prevented:', err));
-      toggleButton.classList.add('playing');
-      isPlaying = true;
-      document.removeEventListener('click', unmuteOnInteraction);
-      document.removeEventListener('touchstart', unmuteOnInteraction);
-    };
-    
-    document.addEventListener('click', unmuteOnInteraction);
-    document.addEventListener('touchstart', unmuteOnInteraction);
-  };
-  
-  // Initialize when DOM is ready
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initLofiMusicPlayer);
-  } else {
-    initLofiMusicPlayer();
-  }
-  
  const getUniqueSelector = (element, assignId = false) => {
    if (element.dataset && element.dataset.webildSelector) {
      return element.dataset.webildSelector;
Author	SHA1	Message	Date
kudindmitriy	7dc207ddc4	Bob AI: Add a lofi music player component to the layout that plays b	2026-02-24 15:27:10 +00:00
kudindmitriy	94634a0425	Bob AI: Fix the CursorTrail component error by either importing the	2026-02-24 15:26:47 +00:00
bender	7c50af171e	Update src/app/layout.tsx	2026-02-24 15:26:23 +00:00
kudindmitriy	f53732c4a1	Bob AI: Add custom cursor animation with fancy visual effects, chang	2026-02-24 15:23:10 +00:00
bender	bc2461f1a3	Update src/app/layout.tsx	2026-02-24 15:22:46 +00:00