60 lines
3 KiB
TypeScript
60 lines
3 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
export default function Logo() {
|
|
const [isAnimating, setIsAnimating] = useState(true);
|
|
|
|
useEffect(() => {
|
|
// Subtle animation on load
|
|
const timer = setTimeout(() => setIsAnimating(false), 2000);
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="flex items-center gap-3 group cursor-pointer">
|
|
{/* Logo Icon */}
|
|
<div className={`relative w-10 h-10 ${isAnimating ? 'animate-pulse' : ''}`}>
|
|
{/* Glow Background */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-[#1DB954] via-[#1ed760] to-[#169c46] rounded-xl blur-sm opacity-60 group-hover:opacity-100 transition duration-500" />
|
|
|
|
{/* Main Logo Container */}
|
|
<div className="relative w-10 h-10 bg-gradient-to-br from-[#1DB954] to-[#169c46] rounded-xl flex items-center justify-center shadow-lg group-hover:scale-105 transition duration-300">
|
|
{/* Sound Wave Bars */}
|
|
<div className="flex items-end gap-[3px] h-5">
|
|
<div className="w-[3px] bg-black rounded-full animate-soundwave-1 h-3" />
|
|
<div className="w-[3px] bg-black rounded-full animate-soundwave-2 h-5" />
|
|
<div className="w-[3px] bg-black rounded-full animate-soundwave-3 h-4" />
|
|
<div className="w-[3px] bg-black rounded-full animate-soundwave-4 h-2" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Text Logo */}
|
|
<div className="flex flex-col">
|
|
<span className="text-lg font-bold bg-gradient-to-r from-white via-[#1DB954] to-[#1ed760] bg-clip-text text-transparent group-hover:from-[#1DB954] group-hover:to-white transition duration-500">
|
|
Audiophile
|
|
</span>
|
|
<span className="text-[10px] text-[#a7a7a7] tracking-widest uppercase -mt-1">
|
|
Web Player
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Mini version for header/mobile
|
|
export function LogoMini() {
|
|
return (
|
|
<div className="relative w-8 h-8 group cursor-pointer">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-[#1DB954] to-[#169c46] rounded-lg blur-sm opacity-50 group-hover:opacity-80 transition" />
|
|
<div className="relative w-8 h-8 bg-gradient-to-br from-[#1DB954] to-[#169c46] rounded-lg flex items-center justify-center shadow-lg group-hover:scale-110 transition">
|
|
<div className="flex items-end gap-[2px] h-4">
|
|
<div className="w-[2px] bg-black rounded-full animate-soundwave-1 h-2" />
|
|
<div className="w-[2px] bg-black rounded-full animate-soundwave-2 h-4" />
|
|
<div className="w-[2px] bg-black rounded-full animate-soundwave-3 h-3" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|