174 lines
8.0 KiB
TypeScript
174 lines
8.0 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Menu, X, Rocket, Sparkles, ExternalLink, MessageCircle, MessagesSquare } from 'lucide-react';
|
|
import { YOUR_BUY_LINK, YOUR_DISCORD_URL, YOUR_WHATSAPP_URL } from '../config';
|
|
import { triggerBirthdayConfetti } from '../utils/confetti';
|
|
import { ThemeToggle } from './ThemeToggle';
|
|
import coinImg from '../assets/images/bm_connect_coin_1787085516443.jpg';
|
|
|
|
export const Navbar: React.FC = () => {
|
|
const [isScrolled, setIsScrolled] = useState(false);
|
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setIsScrolled(window.scrollY > 20);
|
|
};
|
|
window.addEventListener('scroll', handleScroll);
|
|
return () => window.removeEventListener('scroll', handleScroll);
|
|
}, []);
|
|
|
|
const navLinks = [
|
|
{ name: 'ABOUT', href: '#why-bm-alpha' },
|
|
{ name: 'TOKENOMICS', href: '#token' },
|
|
{ name: 'HOW TO BUY', href: '#how-to-buy' },
|
|
{ name: 'COMMUNITY', href: '#community' },
|
|
];
|
|
|
|
const handleBuyClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
|
|
triggerBirthdayConfetti();
|
|
setMobileMenuOpen(false);
|
|
};
|
|
|
|
return (
|
|
<header
|
|
id="main-navbar"
|
|
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
|
|
isScrolled
|
|
? 'bg-white/85 dark:bg-[#0a0c14]/90 backdrop-blur-md border-b border-slate-200/80 dark:border-white/10 shadow-sm dark:shadow-lg dark:shadow-black/60 py-3.5'
|
|
: 'bg-transparent py-5'
|
|
}`}
|
|
>
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex items-center justify-between">
|
|
{/* Brand Logo & Wordmark */}
|
|
<a
|
|
href="#"
|
|
className="flex items-center gap-3 group focus:outline-none"
|
|
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
|
|
>
|
|
<div className="relative flex items-center justify-center w-9 h-9 rounded-full overflow-hidden bg-gradient-to-tr from-[#FF8C32] to-[#00D7FF] p-[1.5px] shadow-[0_0_15px_rgba(255,140,50,0.5)] group-hover:shadow-[0_0_20px_rgba(0,215,255,0.7)] transition-all duration-300">
|
|
<div className="w-full h-full bg-white dark:bg-[#0a0c14] rounded-full flex items-center justify-center overflow-hidden">
|
|
<img
|
|
src={coinImg}
|
|
alt="BM Alpha Coin"
|
|
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="font-display font-black text-xl sm:text-2xl tracking-tighter text-slate-900 dark:text-white group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-r group-hover:from-[#FF8C32] group-hover:to-[#00D7FF] transition-all">
|
|
BM ALPHA
|
|
</span>
|
|
<span className="text-[9px] font-bold px-1.5 py-0.5 rounded-full bg-[#00D7FF]/15 text-[#00A6DB] dark:text-[#00D7FF] border border-[#00D7FF]/30 tracking-wider">
|
|
SOL
|
|
</span>
|
|
</div>
|
|
<span className="text-[10px] font-medium text-slate-500 dark:text-gray-400 -mt-1 tracking-wide">
|
|
by BirthdayMessaging
|
|
</span>
|
|
</div>
|
|
</a>
|
|
|
|
{/* Desktop Navigation Links */}
|
|
<nav className="hidden md:flex items-center gap-8 text-sm font-medium text-slate-600 dark:text-gray-400">
|
|
{navLinks.map((link) => (
|
|
<a
|
|
key={link.name}
|
|
href={link.href}
|
|
className="hover:text-[#FF8C32] dark:hover:text-[#00D7FF] transition-colors relative py-1 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-0 after:h-[2px] after:bg-gradient-to-r after:from-[#FF8C32] after:to-[#00D7FF] hover:after:w-full after:transition-all after:duration-250 font-bold text-xs tracking-wider"
|
|
>
|
|
{link.name}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
|
|
{/* Desktop Action CTAs */}
|
|
<div className="hidden md:flex items-center gap-3">
|
|
{/* Theme Toggle Button */}
|
|
<ThemeToggle />
|
|
|
|
<a
|
|
id="nav-buy-cta-desktop"
|
|
href="#how-to-buy"
|
|
onClick={handleBuyClick}
|
|
className="bg-[#FF8C32] hover:bg-[#E6761D] text-black px-6 py-2.5 rounded-full font-bold text-xs shadow-[0_0_15px_rgba(255,140,50,0.35)] hover:shadow-[0_0_20px_rgba(255,140,50,0.5)] transition-all active:scale-95 flex items-center gap-1.5"
|
|
>
|
|
<Rocket className="w-3.5 h-3.5 text-black" />
|
|
<span>BUY BM ALPHA</span>
|
|
</a>
|
|
</div>
|
|
|
|
{/* Mobile Hamburger Button */}
|
|
<div className="flex md:hidden items-center gap-2">
|
|
<ThemeToggle />
|
|
<a
|
|
href="#how-to-buy"
|
|
onClick={handleBuyClick}
|
|
className="inline-flex items-center justify-center px-3.5 py-1.5 rounded-full text-xs font-bold font-display text-black bg-[#FF8C32] shadow-[0_0_12px_rgba(255,140,50,0.4)]"
|
|
>
|
|
BUY
|
|
</a>
|
|
<button
|
|
id="mobile-menu-toggle"
|
|
type="button"
|
|
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
|
className="p-2 rounded-lg text-slate-700 dark:text-gray-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 focus:outline-none"
|
|
aria-label="Toggle navigation menu"
|
|
>
|
|
{mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Drawer Menu */}
|
|
{mobileMenuOpen && (
|
|
<div className="md:hidden bg-white/95 dark:bg-[#0a0c14]/95 backdrop-blur-xl border-b border-slate-200 dark:border-white/10 px-4 pt-3 pb-6 shadow-xl animate-in slide-in-from-top-3 duration-200">
|
|
<div className="flex flex-col space-y-3">
|
|
{navLinks.map((link) => (
|
|
<a
|
|
key={link.name}
|
|
href={link.href}
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
className="px-3 py-2 rounded-lg text-sm font-bold tracking-wider text-slate-800 dark:text-gray-300 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-colors"
|
|
>
|
|
{link.name}
|
|
</a>
|
|
))}
|
|
<div className="pt-2 flex flex-col gap-2">
|
|
<a
|
|
id="nav-buy-cta-mobile"
|
|
href="#how-to-buy"
|
|
onClick={handleBuyClick}
|
|
className="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-full font-display font-black text-sm text-black bg-[#FF8C32] hover:bg-[#E6761D] shadow-[0_0_20px_rgba(255,140,50,0.4)] text-center"
|
|
>
|
|
<Rocket className="w-4 h-4 text-black" />
|
|
BUY BM ALPHA
|
|
</a>
|
|
<a
|
|
href={YOUR_WHATSAPP_URL}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-full font-display font-semibold text-xs text-white bg-emerald-600 hover:bg-emerald-500 text-center shadow-sm"
|
|
>
|
|
<MessageCircle className="w-3.5 h-3.5" />
|
|
<span>JOIN WHATSAPP CHANNEL</span>
|
|
</a>
|
|
<a
|
|
href={YOUR_DISCORD_URL}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-full font-display font-semibold text-xs text-white bg-[#5865F2] hover:bg-[#4752C4] text-center shadow-sm"
|
|
>
|
|
<MessagesSquare className="w-3.5 h-3.5" />
|
|
<span>JOIN DISCORD</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</header>
|
|
);
|
|
};
|