initial

web/components/Header.tsx

@@ -0,0 +1,58 @@
+'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>
+  );
+}