b7247f21a3
- Live waitlist integration with backend API - Real-time polling every 60 seconds - Comprehensive API logging and error handling - WaitlistContext for global state management - Responsive UI with live data updates - Registration form with automatic waitlist refresh - Modern React/TypeScript architecture - Tailwind CSS styling with luxury theme
54 lines
2.3 KiB
TypeScript
54 lines
2.3 KiB
TypeScript
const Header: React.FC = () => {
|
|
return (
|
|
<header className="sticky top-0 z-50 bg-deep-forest bg-opacity-95 backdrop-blur-sm border-b border-luxury-gold border-opacity-20">
|
|
<div className="container mx-auto px-6 py-1">
|
|
<div className="flex items-center justify-between">
|
|
{/* Logo */}
|
|
<div className="flex-shrink-0">
|
|
<img
|
|
src="/assets/Dark-LineLogo-cropped.svg"
|
|
alt="Pennyzo Logo"
|
|
className="h-16 w-auto"
|
|
/>
|
|
</div>
|
|
|
|
{/* Navigation Links - Centered */}
|
|
<nav className="hidden md:flex items-center space-x-10 absolute left-1/2 transform -translate-x-1/2">
|
|
<a
|
|
href="#features"
|
|
className="text-cream hover:text-luxury-gold transition-all duration-300 font-elegant-sans font-medium tracking-wide relative group"
|
|
>
|
|
Features
|
|
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-luxury-gold transition-all duration-300 group-hover:w-full"></span>
|
|
</a>
|
|
<a
|
|
href="#why-pennyzo"
|
|
className="text-cream hover:text-luxury-gold transition-all duration-300 font-elegant-sans font-medium tracking-wide relative group"
|
|
>
|
|
Why Pennyzo?
|
|
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-luxury-gold transition-all duration-300 group-hover:w-full"></span>
|
|
</a>
|
|
<a
|
|
href="#roadmap"
|
|
className="text-cream hover:text-luxury-gold transition-all duration-300 font-elegant-sans font-medium tracking-wide relative group"
|
|
>
|
|
Roadmap
|
|
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-luxury-gold transition-all duration-300 group-hover:w-full"></span>
|
|
</a>
|
|
</nav>
|
|
|
|
{/* Mobile Menu Button */}
|
|
<div className="md:hidden">
|
|
<button className="text-cream hover:text-luxury-gold focus:outline-none focus:text-luxury-gold transition-colors duration-300">
|
|
<svg className="h-6 w-6 fill-current" viewBox="0 0 24 24">
|
|
<path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Header; |