90 lines
3.0 KiB
React
90 lines
3.0 KiB
React
|
import { useState, useEffect } from 'react'
|
||
|
|
import { SheetTrigger } from '@/components/ui/Sheet'
|
||
|
|
|
||
|
|
const Header = () => {
|
||
|
|
const [isScrolled, setIsScrolled] = useState(false)
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const handleScroll = () => {
|
||
|
|
setIsScrolled(window.scrollY > 10)
|
||
|
|
}
|
||
|
|
window.addEventListener('scroll', handleScroll)
|
||
|
|
return () => window.removeEventListener('scroll', handleScroll)
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
const navLinks = [
|
||
|
|
{ name: 'Home', href: '/' },
|
||
|
|
{ name: 'Services', href: '/services' },
|
||
|
|
{ name: 'Industries', href: '/industries' },
|
||
|
|
{ name: '8x8', href: '/8x8' },
|
||
|
|
{ name: 'About', href: '/about' },
|
||
|
|
{ name: 'Contact', href: '/contact' },
|
||
|
|
{ name: 'Support', href: '/support' },
|
||
|
|
]
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<header className={`sticky top-0 z-40 w-full border-b transition-all duration-300 ${isScrolled ? 'bg-background/90 backdrop-blur shadow-sm -translate-y-px' : 'bg-transparent'}`}>
|
||
|
|
<div className="container mx-auto px-4">
|
||
|
|
<div className="flex h-16 items-center justify-between">
|
||
|
|
{/* Logo */}
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<img
|
||
|
|
src="/logo.svg"
|
||
|
|
alt="Queue North Technologies"
|
||
|
|
className="h-8 w-auto"
|
||
|
|
/>
|
||
|
|
<span className="font-bold text-xl text-primary-navy hidden sm:block">Queue North</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Desktop Nav */}
|
||
|
|
<nav className="hidden md:flex items-center gap-6">
|
||
|
|
{navLinks.map((link) => (
|
||
|
|
<a
|
||
|
|
key={link.name}
|
||
|
|
href={link.href}
|
||
|
|
className="text-sm font-medium text-text hover:text-primary-navy transition-colors"
|
||
|
|
>
|
||
|
|
{link.name}
|
||
|
|
</a>
|
||
|
|
))}
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
{/* CTA Button */}
|
||
|
|
<div className="hidden md:flex">
|
||
|
|
<a
|
||
|
|
href="/contact"
|
||
|
|
className="bg-primary-navy text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-primary-navy-dark transition-colors"
|
||
|
|
>
|
||
|
|
Request Consultation
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Mobile Menu Toggle */}
|
||
|
|
<SheetTrigger asChild>
|
||
|
|
<button className="md:hidden p-2 text-text hover:text-primary-navy focus:outline-none focus:ring-2 focus:ring-primary-navy rounded-md">
|
||
|
|
<span className="sr-only">Open menu</span>
|
||
|
|
<svg
|
||
|
|
className="h-6 w-6"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
strokeWidth="2"
|
||
|
|
d="M4 6h16M4 12h16M4 18h16"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</SheetTrigger>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Header
|