71 lines
3.0 KiB
JavaScript
71 lines
3.0 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Menu, X, ChevronDown, Github } from 'lucide-react';
|
|
|
|
function Header() {
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
|
|
return (
|
|
<header className="fixed top-0 left-0 right-0 z-50 bg-black/90 backdrop-blur-sm">
|
|
<div className="container-custom">
|
|
<div className="flex items-center justify-between h-16">
|
|
{/* Logo */}
|
|
<div className="flex items-center">
|
|
<div className="w-10 h-10 bg-brand-red rounded-lg flex items-center justify-center">
|
|
<svg viewBox="0 0 24 24" className="w-6 h-6 text-white fill-current">
|
|
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Desktop Navigation */}
|
|
<nav className="hidden md:flex items-center space-x-8">
|
|
<a href="#" className="text-white hover:text-brand-red transition-colors">OUR WEBSITE</a>
|
|
<a href="#" className="text-white hover:text-brand-red transition-colors">COURSES</a>
|
|
<div className="relative group">
|
|
<button className="flex items-center text-white hover:text-brand-red transition-colors">
|
|
<span className="bg-brand-red text-white text-xs px-2 py-1 rounded mr-2">NEW</span>
|
|
RESOURCES
|
|
<ChevronDown className="w-4 h-4 ml-1" />
|
|
</button>
|
|
</div>
|
|
<a href="#" className="text-white hover:text-brand-red transition-colors">
|
|
<Github className="w-5 h-5" />
|
|
</a>
|
|
<a href="#" className="text-white hover:text-brand-red transition-colors">
|
|
<X className="w-5 h-5" />
|
|
</a>
|
|
</nav>
|
|
|
|
{/* Mobile menu button */}
|
|
<button
|
|
className="md:hidden text-white"
|
|
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
|
>
|
|
{isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile Navigation */}
|
|
{isMenuOpen && (
|
|
<div className="md:hidden bg-black/95 absolute top-16 left-0 right-0 border-t border-gray-800">
|
|
<nav className="flex flex-col space-y-4 p-4">
|
|
<a href="#" className="text-white hover:text-brand-red transition-colors">OUR WEBSITE</a>
|
|
<a href="#" className="text-white hover:text-brand-red transition-colors">COURSES</a>
|
|
<a href="#" className="text-white hover:text-brand-red transition-colors">RESOURCES</a>
|
|
<div className="flex space-x-4 pt-2">
|
|
<a href="#" className="text-white hover:text-brand-red transition-colors">
|
|
<Github className="w-5 h-5" />
|
|
</a>
|
|
<a href="#" className="text-white hover:text-brand-red transition-colors">
|
|
<X className="w-5 h-5" />
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
export default Header; |