Bob AI: Add three interactive enhancements to the site: (1) Create a

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;

src/app/page.tsx

@@ -2,6 +2,9 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+'use client';
+
+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 +12,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 +56,8 @@ export default function LandingPage() {
       secondaryButtonStyle="radial-glow"
       headingFontWeight="medium"
     >
+      <AnimatedCursor />
+      <LofiMusicPlayer />
       <div id="nav" data-section="nav">
         <NavbarStyleApple 
           brandName="Webild"