51 lines
2.2 KiB
TypeScript
51 lines
2.2 KiB
TypeScript
'use client';
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import site from '@/content/site.json';
|
|
import Button from './ui/Button';
|
|
import { useState } from 'react';
|
|
|
|
export default function Navbar() {
|
|
const [open, setOpen] = useState(false);
|
|
return (
|
|
<header className="sticky top-0 z-40 bg-white/90 backdrop-blur">
|
|
<nav className="mx-auto max-w-7xl px-4 h-16 flex items-center justify-between" aria-label="Main">
|
|
<Link href="/" className="flex items-center gap-2" aria-label="Go to home">
|
|
<div className="flex items-center gap-2">
|
|
<Image
|
|
src="/images/favicon.png"
|
|
alt="C & I Electrical Contractors"
|
|
width={32}
|
|
height={32}
|
|
/>
|
|
<div>
|
|
<div className="font-semibold text-gray-800">C & I Electrical Contractors</div>
|
|
<div className="text-xs text-green-600">Licensed & Insured</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
<button className="md:hidden p-2" aria-expanded={open} aria-controls="menu" onClick={()=>setOpen(!open)}>☰</button>
|
|
<ul id="menu" className={`md:flex gap-6 items-center ${open ? 'block' : 'hidden'} md:block`}>
|
|
<li><Link href="/residential">Residential</Link></li>
|
|
<li><Link href="/commercial">Commercial</Link></li>
|
|
<li><Link href="/reviews">Reviews</Link></li>
|
|
<li><Link href="/about">About</Link></li>
|
|
<li><Link href="/contact">Contact</Link></li>
|
|
<li className="md:ml-4"><Button variant="success" href={`tel:${site.business.phoneRaw}`}>Call Now — 24/7</Button></li>
|
|
<li><Button href="/contact">Get My Free Quote</Button></li>
|
|
</ul>
|
|
</nav>
|
|
<div className="bg-brand-red text-white text-center text-sm py-1" role="status">
|
|
<div className="flex items-center justify-center gap-2">
|
|
<Image
|
|
src="/images/favicon.png"
|
|
alt="C & I Electrical Contractors"
|
|
width={16}
|
|
height={16}
|
|
/>
|
|
24/7 Emergency Electrician • Average response under 60 minutes in Corpus Christi
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
} |