Initial commit: project setup and all features implemented
This commit is contained in:
138
src/components/Header.tsx
Normal file
138
src/components/Header.tsx
Normal file
@@ -0,0 +1,138 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
const Header: React.FC = () => {
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setIsScrolled(window.scrollY > 50);
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
const navLinks = [
|
||||
{ label: 'Home', href: '/home' },
|
||||
{ label: 'Agents', href: '/#agents' },
|
||||
{ label: 'Solutions', href: '/#solutions' },
|
||||
{ label: 'Contact', href: '/#contact' }
|
||||
];
|
||||
|
||||
return (
|
||||
<header
|
||||
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
|
||||
isScrolled
|
||||
? 'bg-deep-forest/90 backdrop-blur-xl border-b-2 border-luxury-gold/40 shadow-luxury'
|
||||
: 'bg-deep-forest/20 backdrop-blur-md'
|
||||
}`}
|
||||
>
|
||||
<nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center h-20">
|
||||
{/* Logo */}
|
||||
<div className="flex-shrink-0 animate-fadeInLeft">
|
||||
<a
|
||||
href="/home"
|
||||
className="flex items-center space-x-3 group"
|
||||
aria-label="Pennyzo Web Home"
|
||||
>
|
||||
<div className="relative">
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-luxury-gold to-bronze rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform duration-300 shadow-lg">
|
||||
<span className="text-deep-forest font-playfair text-xl font-bold">P</span>
|
||||
</div>
|
||||
<div className="absolute -top-1 -right-1 w-3 h-3 bg-luxury-gold rounded-full animate-pulse opacity-75"></div>
|
||||
</div>
|
||||
<span className="font-playfair text-2xl font-bold text-cream group-hover:text-luxury-gold transition-colors duration-300">
|
||||
Pennyzo Web
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<div className="hidden md:flex items-center space-x-8">
|
||||
{navLinks.map((link) => (
|
||||
<a
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
className="relative font-montserrat font-medium text-cream hover:text-luxury-gold transition-all duration-300 group py-2 px-3 rounded-lg hover:bg-luxury-gold/10 backdrop-blur-sm border border-transparent hover:border-luxury-gold/30"
|
||||
>
|
||||
{link.label}
|
||||
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-luxury-gold transition-all duration-300 group-hover:w-full"></span>
|
||||
</a>
|
||||
))}
|
||||
|
||||
{/* CTA Button */}
|
||||
<a
|
||||
href="/login"
|
||||
className="min-w-[140px] bg-gradient-to-r from-luxury-gold to-brass text-deep-forest font-montserrat font-bold px-6 py-3 rounded-full hover:from-brass hover:to-bronze hover:scale-105 transition-all duration-300 shadow-luxury hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-luxury-gold/50 border border-luxury-gold/30"
|
||||
>
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu button */}
|
||||
<div className="md:hidden">
|
||||
<button
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
className="relative w-10 h-10 bg-deep-forest/50 backdrop-blur-sm border border-luxury-gold/20 rounded-lg flex items-center justify-center hover:bg-luxury-gold/10 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-luxury-gold/50"
|
||||
aria-label="Toggle navigation menu"
|
||||
aria-expanded={isMenuOpen}
|
||||
>
|
||||
<div className="w-6 h-6 relative">
|
||||
<span
|
||||
className={`absolute block w-full h-0.5 bg-luxury-gold rounded transition-transform duration-300 ${
|
||||
isMenuOpen ? 'top-3 rotate-45' : 'top-1'
|
||||
}`}
|
||||
/>
|
||||
<span
|
||||
className={`absolute block w-full h-0.5 bg-luxury-gold rounded top-3 transition-opacity duration-300 ${
|
||||
isMenuOpen ? 'opacity-0' : 'opacity-100'
|
||||
}`}
|
||||
/>
|
||||
<span
|
||||
className={`absolute block w-full h-0.5 bg-luxury-gold rounded transition-transform duration-300 ${
|
||||
isMenuOpen ? 'top-3 -rotate-45' : 'top-5'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Navigation Menu */}
|
||||
<div
|
||||
className={`md:hidden transition-all duration-300 ${
|
||||
isMenuOpen
|
||||
? 'max-h-64 opacity-100 border-t border-luxury-gold/20 mt-4 pt-4'
|
||||
: 'max-h-0 opacity-0 overflow-hidden'
|
||||
}`}
|
||||
>
|
||||
<div className="bg-gradient-to-br from-deep-forest/95 to-rich-brown/85 backdrop-blur-xl rounded-2xl p-6 space-y-4 shadow-2xl border border-luxury-gold/20">
|
||||
{navLinks.map((link, index) => (
|
||||
<a
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
className={`block font-montserrat font-medium text-cream hover:text-luxury-gold transition-all duration-300 py-3 px-4 rounded-lg hover:bg-luxury-gold/10 border border-transparent hover:border-luxury-gold/30 animate-fadeInUp`}
|
||||
style={{ animationDelay: `${index * 100}ms` }}
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
))}
|
||||
|
||||
<a
|
||||
href="/login"
|
||||
className="block w-full mt-4 bg-gradient-to-r from-luxury-gold to-brass text-deep-forest font-montserrat font-bold px-6 py-3 rounded-full hover:from-brass hover:to-bronze transition-all duration-300 shadow-luxury hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-luxury-gold/50 border border-luxury-gold/30 text-center"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
Reference in New Issue
Block a user