Bob AI: Move the 'use client' directive to the very top of the file,

src/app/layout.tsx

@@ -31,125 +31,6 @@ export default function RootLayout({
           dangerouslySetInnerHTML={{
             __html: `
 (function() {
-  // Initialize custom cursor and click sound
-  if (!window.__customCursorInitialized) {
-    window.__customCursorInitialized = true;
-    
-    // Create custom cursor elements
-    const cursorDot = document.createElement('div');
-    cursorDot.id = 'custom-cursor-dot';
-    cursorDot.style.cssText = 'position: fixed; width: 12px; height: 12px; background: radial-gradient(circle, #4d96ff, #2563eb); border-radius: 50%; pointer-events: none; z-index: 9999; box-shadow: 0 0 10px rgba(77, 150, 255, 0.6); display: none;';
-    document.body.appendChild(cursorDot);
-    
-    const cursorRing = document.createElement('div');
-    cursorRing.id = 'custom-cursor-ring';
-    cursorRing.style.cssText = 'position: fixed; width: 32px; height: 32px; border: 2px solid #4d96ff; border-radius: 50%; pointer-events: none; z-index: 9998; display: none; box-shadow: 0 0 15px rgba(77, 150, 255, 0.4);';
-    document.body.appendChild(cursorRing);
-    
-    // Trail particles
-    const trails = [];
-    const maxTrails = 8;
-    
-    function createTrail(x, y) {
-      const trail = document.createElement('div');
-      trail.style.cssText = 'position: fixed; width: 6px; height: 6px; background: rgba(77, 150, 255, 0.6); border-radius: 50%; pointer-events: none; z-index: 9997;';
-      trail.style.left = x + 'px';
-      trail.style.top = y + 'px';
-      document.body.appendChild(trail);
-      
-      trails.push({ element: trail, life: 1 });
-      if (trails.length > maxTrails) {
-        const old = trails.shift();
-        old.element.remove();
-      }
-      
-      let opacity = 1;
-      const fadeInterval = setInterval(() => {
-        opacity -= 0.15;
-        trail.style.opacity = opacity;
-        if (opacity <= 0) {
-          clearInterval(fadeInterval);
-          trail.remove();
-        }
-      }, 30);
-    }
-    
-    // Mouse move listener
-    let mouseX = 0, mouseY = 0;
-    let dotX = 0, dotY = 0;
-    let ringX = 0, ringY = 0;
-    
-    document.addEventListener('mousemove', (e) => {
-      mouseX = e.clientX;
-      mouseY = e.clientY;
-      
-      cursorDot.style.display = 'block';
-      cursorRing.style.display = 'block';
-      
-      createTrail(mouseX - 3, mouseY - 3);
-    });
-    
-    // Smooth animation loop
-    function animateCursor() {
-      dotX += (mouseX - dotX) * 0.3;
-      dotY += (mouseY - dotY) * 0.3;
-      ringX += (mouseX - ringX) * 0.15;
-      ringY += (mouseY - ringY) * 0.15;
-      
-      cursorDot.style.left = (dotX - 6) + 'px';
-      cursorDot.style.top = (dotY - 6) + 'px';
-      cursorRing.style.left = (ringX - 16) + 'px';
-      cursorRing.style.top = (ringY - 16) + 'px';
-      
-      requestAnimationFrame(animateCursor);
-    }
-    animateCursor();
-    
-    // Hide cursor on leave
-    document.addEventListener('mouseleave', () => {
-      cursorDot.style.display = 'none';
-      cursorRing.style.display = 'none';
-    });
-    
-    // Click sound effect
-    function playClickSound() {
-      const audioContext = new (window.AudioContext || window.webkitAudioContext)();
-      const oscillator = audioContext.createOscillator();
-      const gainNode = audioContext.createGain();
-      
-      oscillator.connect(gainNode);
-      gainNode.connect(audioContext.destination);
-      
-      oscillator.frequency.setValueAtTime(800, audioContext.currentTime);
-      oscillator.frequency.exponentialRampToValueAtTime(200, audioContext.currentTime + 0.1);
-      
-      gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
-      gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
-      
-      oscillator.start(audioContext.currentTime);
-      oscillator.stop(audioContext.currentTime + 0.1);
-    }
-    
-    // Click listener
-    document.addEventListener('click', () => {
-      playClickSound();
-      
-      // Pulse effect on ring
-      cursorRing.style.animation = 'none';
-      setTimeout(() => {
-        cursorRing.style.animation = 'pulse 0.4s ease-out';
-      }, 10);
-    });
-    
-    // Add pulse animation
-    const style = document.createElement('style');
-    style.textContent = '@keyframes pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }';
-    document.head.appendChild(style);
-    
-    // Hide default cursor
-    document.documentElement.style.cursor = 'none';
-  }
-  
   if (window.self === window.top) return;
 
   if (window.__webildEditorInitialized) return;
@@ -224,76 +105,9 @@ export default function RootLayout({
     '  pointer-events: none !important;' +
     '  z-index: 999998 !important;' +
     '  transition: all 0.15s ease !important;' +
-    '}' +
-    '.lofi-music-button {' +
-    '  position: fixed !important;' +
-    '  bottom: 30px !important;' +
-    '  right: 30px !important;' +
-    '  z-index: 999999 !important;' +
-    '  width: 50px !important;' +
-    '  height: 50px !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 15px 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-button:hover {' +
-    '  transform: scale(1.1) !important;' +
-    '  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;' +
-    '}' +
-    '.lofi-music-button.playing {' +
-    '  animation: pulse-glow 2s ease-in-out infinite !important;' +
-    '}' +
-    '@keyframes pulse-glow {' +
-    '  0%, 100% { box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important; }' +
-    '  50% { box-shadow: 0 4px 25px rgba(102, 126, 234, 0.8) !important; }' +
     '}';
   document.head.appendChild(style);
   
-  // Create lofi music player
-  const audioContainer = document.createElement('div');
-  audioContainer.id = 'lofi-music-container';
-  
-  const audio = document.createElement('audio');
-  audio.id = 'lofi-audio';
-  audio.loop = true;
-  audio.volume = 0.3;
-  audio.src = 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3';
-  audioContainer.appendChild(audio);
-  
-  const musicButton = document.createElement('button');
-  musicButton.className = 'lofi-music-button playing';
-  musicButton.innerHTML = '🎵';
-  musicButton.title = 'Toggle lofi music';
-  
-  let isPlaying = true;
-  audio.play().catch(() => {
-    isPlaying = false;
-    musicButton.classList.remove('playing');
-  });
-  
-  musicButton.addEventListener('click', () => {
-    if (isPlaying) {
-      audio.pause();
-      musicButton.classList.remove('playing');
-      isPlaying = false;
-    } else {
-      audio.play();
-      musicButton.classList.add('playing');
-      isPlaying = true;
-    }
-  });
-  
-  document.body.appendChild(audioContainer);
-  document.body.appendChild(musicButton);
-  
   const getUniqueSelector = (element, assignId = false) => {
     if (element.dataset && element.dataset.webildSelector) {
       return element.dataset.webildSelector;

src/app/page.tsx

@@ -2,6 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import { useState, useEffect } from 'react';
 import HeroOverlay from '@/components/sections/hero/HeroOverlay';
 import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
 import FeatureBento from '@/components/sections/feature/FeatureBento';
@@ -9,9 +10,37 @@ import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import AnimatedCursor from '@/components/AnimatedCursor';
+import LofiMusicPlayer from '@/components/LofiMusicPlayer';
 import { Sparkles, TrendingUp } from "lucide-react";
 
 export default function LandingPage() {
+  useEffect(() => {
+    const playClickSound = () => {
+      const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
+      const oscillator = audioContext.createOscillator();
+      const gainNode = audioContext.createGain();
+      
+      oscillator.connect(gainNode);
+      gainNode.connect(audioContext.destination);
+      
+      oscillator.frequency.value = 800;
+      oscillator.type = 'sine';
+      
+      gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
+      gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
+      
+      oscillator.start(audioContext.currentTime);
+      oscillator.stop(audioContext.currentTime + 0.1);
+    };
+
+    const handleClick = () => {
+      playClickSound();
+    };
+
+    document.addEventListener('click', handleClick);
+    return () => document.removeEventListener('click', handleClick);
+  }, []);
   return (
     <ThemeProvider
       defaultButtonVariant="hover-bubble"
@@ -25,6 +54,8 @@ export default function LandingPage() {
       secondaryButtonStyle="radial-glow"
       headingFontWeight="medium"
     >
+      <AnimatedCursor />
+      <LofiMusicPlayer />
       <div id="nav" data-section="nav">
         <NavbarStyleApple 
           brandName="Webild"