162 lines
7.1 KiB
TypeScript
162 lines
7.1 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import { Sparkles, Menu, X, Compass, Layers, ShieldCheck, Box } from "lucide-react";
|
|
import CosmicAudioToggle from "../ui/CosmicAudioToggle";
|
|
|
|
export default function Navbar() {
|
|
const [scrolled, setScrolled] = useState(false);
|
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setScrolled(window.scrollY > 20);
|
|
};
|
|
window.addEventListener("scroll", handleScroll);
|
|
return () => window.removeEventListener("scroll", handleScroll);
|
|
}, []);
|
|
|
|
const navLinks = [
|
|
{ name: "About", href: "#about", icon: Compass },
|
|
{ name: "Core Tracks", href: "#focus", icon: Layers },
|
|
{ name: "Showcase", href: "#portfolio", icon: Box },
|
|
{ name: "Studio Creed", href: "#creed", icon: ShieldCheck },
|
|
];
|
|
|
|
return (
|
|
<header
|
|
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
|
|
scrolled
|
|
? "py-3 bg-[#0a0a12]/80 backdrop-blur-xl border-b border-white/10 shadow-[0_4px_30px_rgba(0,0,0,0.5)]"
|
|
: "py-5 bg-transparent"
|
|
}`}
|
|
>
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex items-center justify-between">
|
|
{/* Brand Logo */}
|
|
<a
|
|
href="#"
|
|
className="flex items-center gap-3 group focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400 rounded-lg p-1"
|
|
>
|
|
<div className="relative flex items-center justify-center w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500/20 via-purple-500/10 to-cyan-500/20 border border-white/15 group-hover:border-cyan-400/50 transition-colors shadow-inner">
|
|
<span className="w-2.5 h-2.5 rounded-full bg-cyan-400 group-hover:scale-125 transition-transform shadow-[0_0_12px_#38bdf8]" />
|
|
<div className="absolute inset-0 rounded-xl border border-indigo-500/30 group-hover:rotate-45 transition-transform duration-500 pointer-events-none" />
|
|
</div>
|
|
|
|
<div className="flex flex-col">
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-extrabold tracking-widest text-lg text-white group-hover:text-cyan-200 transition-colors">
|
|
AGHATIS
|
|
</span>
|
|
<span className="text-[10px] font-mono tracking-widest uppercase px-1.5 py-0.5 rounded bg-indigo-500/15 border border-indigo-400/20 text-indigo-300">
|
|
STUDIO
|
|
</span>
|
|
</div>
|
|
<span className="text-[10px] font-mono text-slate-400 tracking-wider">
|
|
ORIGINAL IP LAB
|
|
</span>
|
|
</div>
|
|
</a>
|
|
|
|
{/* Desktop Navigation Links */}
|
|
<nav className="hidden md:flex items-center gap-1 glass-panel px-4 py-1.5 rounded-full border border-white/10">
|
|
{navLinks.map((link) => (
|
|
<a
|
|
key={link.name}
|
|
href={link.href}
|
|
className="px-3.5 py-1.5 text-xs font-mono uppercase tracking-wider text-slate-300 hover:text-white rounded-full hover:bg-white/5 transition-all duration-200"
|
|
>
|
|
{link.name}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
|
|
{/* Right actions: Audio Toggle, Live Status & CTA */}
|
|
<div className="hidden sm:flex items-center gap-3">
|
|
<CosmicAudioToggle />
|
|
|
|
{/* In-house status pill */}
|
|
<div className="hidden lg:flex items-center gap-2 px-3 py-1.5 rounded-full bg-indigo-950/40 border border-indigo-500/20 text-[11px] font-mono text-indigo-200">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-indigo-400 animate-pulse" />
|
|
<span>100% PRODUCT LAB</span>
|
|
</div>
|
|
|
|
<a
|
|
href="#portfolio"
|
|
className="relative inline-flex items-center justify-center px-4 py-2 text-xs font-mono tracking-wider font-semibold uppercase text-slate-900 bg-gradient-to-r from-cyan-400 via-sky-300 to-indigo-300 rounded-lg shadow-[0_0_20px_rgba(56,189,248,0.35)] hover:shadow-[0_0_25px_rgba(56,189,248,0.6)] transition-all duration-300 hover:scale-[1.02] active:scale-95"
|
|
>
|
|
<Sparkles className="w-3.5 h-3.5 mr-1.5 text-slate-950" />
|
|
Explore IP
|
|
</a>
|
|
</div>
|
|
|
|
{/* Mobile Menu Button */}
|
|
<div className="flex sm:hidden items-center gap-2">
|
|
<CosmicAudioToggle />
|
|
<button
|
|
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
|
className="p-2 rounded-lg glass-panel text-slate-300 hover:text-white focus:outline-none"
|
|
aria-label="Toggle navigation menu"
|
|
>
|
|
{mobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Drawer Menu */}
|
|
<AnimatePresence>
|
|
{mobileMenuOpen && (
|
|
<motion.div
|
|
initial={{ opacity: 0, height: 0 }}
|
|
animate={{ opacity: 1, height: "auto" }}
|
|
exit={{ opacity: 0, height: 0 }}
|
|
transition={{ duration: 0.25 }}
|
|
className="sm:hidden border-b border-white/10 bg-[#0a0a12]/95 backdrop-blur-2xl overflow-hidden"
|
|
>
|
|
<div className="px-6 py-6 space-y-4">
|
|
<div className="flex items-center justify-between pb-3 border-b border-white/10 text-xs font-mono text-slate-400">
|
|
<span>SECTOR // AGH-MOBILE-HUD</span>
|
|
<span className="text-cyan-400">STATUS: NOMINAL</span>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
{navLinks.map((link) => {
|
|
const Icon = link.icon;
|
|
return (
|
|
<a
|
|
key={link.name}
|
|
href={link.href}
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-mono text-slate-300 hover:text-white hover:bg-white/5 transition-colors"
|
|
>
|
|
<Icon className="w-4 h-4 text-cyan-400" />
|
|
<span>{link.name}</span>
|
|
</a>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<div className="pt-2">
|
|
<a
|
|
href="#portfolio"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
className="w-full flex items-center justify-center gap-2 px-4 py-3 text-xs font-mono uppercase tracking-wider font-semibold text-slate-950 bg-gradient-to-r from-cyan-400 to-indigo-400 rounded-lg shadow-lg"
|
|
>
|
|
<Sparkles className="w-4 h-4 text-slate-950" />
|
|
Explore Original IP
|
|
</a>
|
|
</div>
|
|
|
|
<div className="text-[11px] font-mono text-center text-slate-400 pt-2 border-t border-white/5">
|
|
Independent Product Studio • Original Software & Games
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</header>
|
|
);
|
|
}
|