bender/53fe21b3-03e6-46a7-bd4b-69b95698f5ff
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: bender:version_3
Branches Tags
bender:main bender:version_6 bender:version_5 bender:version_4 bender:version_3 bender:version_2 bender:version_1
...
pull from: bender:version_6
Branches Tags
bender:main bender:version_6 bender:version_5 bender:version_4 bender:version_3 bender:version_2 bender:version_1

5 Commits
version_3 ... version_6

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
1 changed files with 55 additions and 90 deletions
Expand all files Collapse all files

145
src/app/layout.tsx
View File

@@ -13,16 +13,35 @@ const ubuntu = Ubuntu({
const inter = Inter({ const inter = Inter({
variable: "--font-inter", subsets: ["latin"], variable: "--font-inter", subsets: ["latin"],
}); });
export const metadata: Metadata = { 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({ export default function RootLayout({
children, children,
}: Readonly<{ }: Readonly<{
children: React.ReactNode; 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 ( return (
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<ServiceWrapper> <ServiceWrapper>
@@ -32,6 +51,32 @@ export default function RootLayout({
<Tag /> <Tag />
{children} {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 <script
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: ` __html: `
@@ -93,6 +138,14 @@ export default function RootLayout({
' font-weight: 600 !important;' + ' font-weight: 600 !important;' +
' font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;' + ' font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;' +
' pointer-events: none !important;' + ' pointer-events: none !important;' +
'}';
}}
/>
</body>
</ServiceWrapper>
</html>
);
}
' white-space: nowrap !important;' + ' white-space: nowrap !important;' +
' box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;' + ' box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;' +
' letter-spacing: 0.3px !important;' + ' letter-spacing: 0.3px !important;' +
@@ -110,97 +163,9 @@ export default function RootLayout({
' pointer-events: none !important;' + ' pointer-events: none !important;' +
' z-index: 999998 !important;' + ' z-index: 999998 !important;' +
' transition: all 0.15s ease !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); 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) => { const getUniqueSelector = (element, assignId = false) => {
if (element.dataset && element.dataset.webildSelector) { if (element.dataset && element.dataset.webildSelector) {
return element.dataset.webildSelector; return element.dataset.webildSelector;