59 lines
2.4 KiB
TypeScript
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>
|
|
);
|
|
}
|