ci-electrical/web/components/Header.tsx

59 lines
2.4 KiB
TypeScript

'use client';
import { track } from '@/lib/analytics';
export default function Header() {
return (
<header className="bg-white sticky top-0 z-50 shadow-lg border-b border-gray-200">
<nav aria-label="primary" className="container-custom py-4 flex items-center justify-between">
{/* Left: Logo */}
<a href="/" className="flex items-center gap-3 group">
<div className="w-12 h-12 bg-brand-green rounded-full flex items-center justify-center shadow-md group-hover:shadow-lg transition-shadow">
<img src="/images/favicon.png" alt="C & I Electrical Contractors" className="w-6 h-6" />
</div>
<div>
<div className="font-heading font-semibold text-lg text-brand-dark">C & I Electrical Contractors</div>
<div className="text-xs text-brand-green font-medium">Licensed & Insured</div>
</div>
</a>
{/* Middle: Navigation */}
<div className="hidden md:flex items-center gap-8">
<a href="/residential" className="font-body text-gray-700 hover:text-brand-green font-medium transition-colors">
Residential
</a>
<a href="/commercial" className="font-body text-gray-700 hover:text-brand-green font-medium transition-colors">
Commercial
</a>
<a href="/reviews" className="font-body text-gray-700 hover:text-brand-green font-medium transition-colors">
Reviews
</a>
<a href="/about" className="font-body text-gray-700 hover:text-brand-green font-medium transition-colors">
About
</a>
<a href="/contact" className="font-body text-gray-700 hover:text-brand-green font-medium transition-colors">
Contact
</a>
</div>
{/* Right: CTAs */}
<div className="flex items-center gap-3">
<a
href="tel:+13618850315"
onClick={() => track('phone_click', { placement: 'header' })}
className="btn-primary"
aria-label="Call Now, 24/7"
>
Call Now (24/7)
</a>
<a
href="#quote-form"
className="hidden md:inline-flex btn-secondary"
>
Free Quote
</a>
</div>
</nav>
</header>
);
}