194 lines
8 KiB
TypeScript
194 lines
8 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { useSeller } from '../../context/SellerContext';
|
|
|
|
export default function Header() {
|
|
const { currentPage, setCurrentPage, isMobileMenuOpen, setIsMobileMenuOpen, isProfileComplete } = useSeller();
|
|
const [isScrolled, setIsScrolled] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setIsScrolled(window.scrollY > 20);
|
|
};
|
|
window.addEventListener('scroll', handleScroll);
|
|
return () => window.removeEventListener('scroll', handleScroll);
|
|
}, []);
|
|
|
|
const handleNav = (page: any) => {
|
|
setCurrentPage(page);
|
|
setIsMobileMenuOpen(false);
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
};
|
|
|
|
return (
|
|
<header
|
|
className={`w-full border-b border-gray-200 bg-white/95 backdrop-blur-md sticky top-0 z-50 transition-shadow duration-300 ${
|
|
isScrolled ? 'shadow-md' : 'shadow-sm'
|
|
}`}
|
|
id="main-header"
|
|
>
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 flex items-center justify-between">
|
|
{/* Brand Logo */}
|
|
<a
|
|
className="flex items-center gap-3 group cursor-pointer"
|
|
onClick={() => handleNav('home')}
|
|
aria-label="TRADHOX Home"
|
|
>
|
|
<img
|
|
alt="TRADHOX Logo"
|
|
className="h-12 sm:h-14 md:h-16 w-auto object-contain transition-transform group-hover:scale-105"
|
|
src="/images/landing/tradhox-logo.png"
|
|
/>
|
|
</a>
|
|
|
|
{/* Desktop Navigation Links & Primary CTA */}
|
|
<div className="flex items-center gap-8">
|
|
<nav className="hidden lg:flex items-center space-x-8 text-sm font-medium text-slate-700">
|
|
<button
|
|
className={`hover:text-brand-maroon transition-colors font-medium cursor-pointer ${
|
|
currentPage === 'how-it-works' ? 'text-brand-maroon font-bold' : 'text-slate-700'
|
|
}`}
|
|
onClick={() => handleNav('how-it-works')}
|
|
type="button"
|
|
>
|
|
How it works
|
|
</button>
|
|
<button
|
|
className={`hover:text-brand-maroon transition-colors font-medium cursor-pointer ${
|
|
currentPage === 'pricing' ? 'text-brand-maroon font-bold' : 'text-slate-700'
|
|
}`}
|
|
onClick={() => handleNav('pricing')}
|
|
type="button"
|
|
>
|
|
Pricing
|
|
</button>
|
|
<button
|
|
className={`hover:text-brand-maroon transition-colors font-medium cursor-pointer ${
|
|
currentPage === 'grow-business' ? 'text-brand-maroon font-bold' : 'text-slate-700'
|
|
}`}
|
|
onClick={() => handleNav('grow-business')}
|
|
type="button"
|
|
>
|
|
Grow your business
|
|
</button>
|
|
<button
|
|
className={`hover:text-brand-maroon transition-colors font-medium cursor-pointer ${
|
|
currentPage === 'contact' ? 'text-brand-maroon font-bold' : 'text-slate-700'
|
|
}`}
|
|
onClick={() => handleNav('contact')}
|
|
type="button"
|
|
>
|
|
Contact Us
|
|
</button>
|
|
<button
|
|
className={`hover:text-brand-maroon transition-colors font-semibold cursor-pointer ${
|
|
currentPage === 'login' ? 'text-brand-maroon font-bold' : 'text-slate-900'
|
|
}`}
|
|
onClick={() => handleNav('login')}
|
|
type="button"
|
|
>
|
|
Login
|
|
</button>
|
|
</nav>
|
|
|
|
{/* Action Button */}
|
|
<div className="flex items-center gap-3">
|
|
{isProfileComplete ? (
|
|
<button
|
|
className="inline-flex items-center justify-center px-4 sm:px-5 py-2 sm:py-2.5 rounded-lg text-sm font-semibold bg-brand-maroon text-white hover:bg-brand-maroonHover transition-all shadow-sm cursor-pointer"
|
|
onClick={() => handleNav('dashboard')}
|
|
type="button"
|
|
>
|
|
<i className="fa-solid fa-gauge-high mr-2"></i> Seller Dashboard
|
|
</button>
|
|
) : (
|
|
<button
|
|
className="inline-flex items-center justify-center px-4 sm:px-5 py-2 sm:py-2.5 rounded-lg text-sm font-semibold border-2 border-brand-maroon text-brand-maroon hover:bg-brand-maroon hover:text-white transition-all shadow-sm cursor-pointer active:scale-95"
|
|
onClick={() => handleNav('signup')}
|
|
type="button"
|
|
>
|
|
Become a seller
|
|
</button>
|
|
)}
|
|
|
|
{/* Mobile Burger Toggle */}
|
|
<button
|
|
aria-expanded={isMobileMenuOpen}
|
|
aria-label="Toggle navigation menu"
|
|
className="p-2 rounded-lg text-stone-600 hover:text-slate-900 hover:bg-stone-100 lg:hidden focus:outline-none cursor-pointer"
|
|
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
|
type="button"
|
|
>
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
{isMobileMenuOpen ? (
|
|
<path d="M6 18L18 6M6 6l12 12" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" />
|
|
) : (
|
|
<path d="M4 6h16M4 12h16M4 18h16" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" />
|
|
)}
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Menu Dropdown */}
|
|
{isMobileMenuOpen && (
|
|
<div className="lg:hidden border-t border-gray-200 bg-white px-6 py-4 shadow-xl flex flex-col gap-3">
|
|
<button
|
|
className={`text-left py-2 text-sm font-medium hover:text-brand-maroon ${currentPage === 'how-it-works' ? 'text-brand-maroon font-bold' : 'text-slate-700'}`}
|
|
onClick={() => handleNav('how-it-works')}
|
|
type="button"
|
|
>
|
|
How it works
|
|
</button>
|
|
<button
|
|
className={`text-left py-2 text-sm font-medium hover:text-brand-maroon ${currentPage === 'pricing' ? 'text-brand-maroon font-bold' : 'text-slate-700'}`}
|
|
onClick={() => handleNav('pricing')}
|
|
type="button"
|
|
>
|
|
Pricing
|
|
</button>
|
|
<button
|
|
className={`text-left py-2 text-sm font-medium hover:text-brand-maroon ${currentPage === 'grow-business' ? 'text-brand-maroon font-bold' : 'text-slate-700'}`}
|
|
onClick={() => handleNav('grow-business')}
|
|
type="button"
|
|
>
|
|
Grow your business
|
|
</button>
|
|
<button
|
|
className={`text-left py-2 text-sm font-medium hover:text-brand-maroon ${currentPage === 'contact' ? 'text-brand-maroon font-bold' : 'text-slate-700'}`}
|
|
onClick={() => handleNav('contact')}
|
|
type="button"
|
|
>
|
|
Contact Us
|
|
</button>
|
|
<button
|
|
className={`text-left py-2 text-sm font-semibold hover:text-brand-maroon ${currentPage === 'login' ? 'text-brand-maroon font-bold' : 'text-slate-900'}`}
|
|
onClick={() => handleNav('login')}
|
|
type="button"
|
|
>
|
|
Login
|
|
</button>
|
|
<div className="pt-2 border-t border-gray-100">
|
|
{isProfileComplete ? (
|
|
<button
|
|
className="w-full text-center py-2.5 rounded-lg text-sm font-semibold bg-brand-maroon text-white hover:bg-brand-maroonHover transition-all shadow-sm"
|
|
onClick={() => handleNav('dashboard')}
|
|
type="button"
|
|
>
|
|
<i className="fa-solid fa-gauge-high mr-2"></i> Seller Dashboard
|
|
</button>
|
|
) : (
|
|
<button
|
|
className="w-full text-center py-2.5 rounded-lg text-sm font-semibold border-2 border-brand-maroon text-brand-maroon hover:bg-brand-maroon hover:text-white transition-all shadow-sm"
|
|
onClick={() => handleNav('signup')}
|
|
type="button"
|
|
>
|
|
Become a seller
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</header>
|
|
);
|
|
}
|