437 lines
18 KiB
TypeScript
437 lines
18 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import Link from "next/link"
|
|
import Image from "next/image"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Menu, X, Phone, ChevronDown } from "lucide-react"
|
|
import { GetFreeMachineModal } from "@/components/get-free-machine-modal"
|
|
|
|
export function Header() {
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false)
|
|
const [isWhoWeServeOpen, setIsWhoWeServeOpen] = useState(false)
|
|
const [isVendingMachinesOpen, setIsVendingMachinesOpen] = useState(false)
|
|
const [isFoodBeverageOpen, setIsFoodBeverageOpen] = useState(false)
|
|
const [isServicesOpen, setIsServicesOpen] = useState(false)
|
|
const [isAboutOpen, setIsAboutOpen] = useState(false)
|
|
const [isModalOpen, setIsModalOpen] = useState(false)
|
|
|
|
const whoWeServeItems = [
|
|
{ label: "Warehouses", href: "/warehouses" },
|
|
{ label: "Auto Repair", href: "/auto-repair" },
|
|
{ label: "Gyms", href: "/gyms" },
|
|
{ label: "Community Centers", href: "/community-centers" },
|
|
{ label: "Dance Studios", href: "/dance-studios" },
|
|
{ label: "Car Washes", href: "/car-washes" },
|
|
]
|
|
|
|
const vendingMachinesItems = [
|
|
{ label: "Machines We Use", href: "/vending-machines/machines-we-use" },
|
|
{ label: "Machines for Sale in Utah", href: "/vending-machines/machines-for-sale" },
|
|
{ label: "Vending Machine Manuals", href: "/manuals" },
|
|
]
|
|
|
|
const foodBeverageItems = [
|
|
{ label: "Healthy Options", href: "/food-and-beverage/healthy-options" },
|
|
{ label: "Traditional Options", href: "/food-and-beverage/traditional-options" },
|
|
{ label: "Food & Beverage Suppliers", href: "/food-and-beverage/suppliers" },
|
|
]
|
|
|
|
const servicesItems = [
|
|
{ label: "Vending Machine Repairs", href: "/services/repairs" },
|
|
{ label: "Vending Machine Moving Services", href: "/services/moving" },
|
|
{ label: "Vending Machine Parts", href: "/services/parts" },
|
|
]
|
|
|
|
const aboutItems = [
|
|
{ label: "About Us", href: "/about-us" },
|
|
{ label: "FAQs", href: "/about/faqs" },
|
|
]
|
|
|
|
return (
|
|
<header className="sticky top-0 z-40 w-full border-b border-border/40 bg-white/95 backdrop-blur supports-[backdrop-filter]:bg-white/90 shadow-sm">
|
|
<div className="container mx-auto px-4 lg:px-6">
|
|
<div className="flex h-20 items-center justify-between">
|
|
{/* Logo */}
|
|
<Link href="/" className="flex items-center gap-2 py-2">
|
|
<Image
|
|
src="/rmv-logo.png"
|
|
alt="Rocky Mountain Vending"
|
|
width={220}
|
|
height={55}
|
|
className="h-14 w-auto"
|
|
priority
|
|
/>
|
|
</Link>
|
|
|
|
{/* Desktop Navigation */}
|
|
<nav className="hidden items-center gap-6 md:flex">
|
|
<Link href="/" className="text-sm font-medium transition-colors hover:text-[#c4142c]">
|
|
Home
|
|
</Link>
|
|
|
|
{/* Who We Serve Dropdown */}
|
|
<div
|
|
className="relative"
|
|
onMouseEnter={() => setIsWhoWeServeOpen(true)}
|
|
onMouseLeave={() => setIsWhoWeServeOpen(false)}
|
|
>
|
|
<button
|
|
className="flex items-center gap-1.5 text-sm font-medium transition-colors hover:text-[#c4142c]"
|
|
aria-label="Who We Serve menu"
|
|
aria-expanded={isWhoWeServeOpen}
|
|
aria-haspopup="true"
|
|
>
|
|
Who We Serve
|
|
<ChevronDown className="h-4 w-4" aria-hidden="true" />
|
|
</button>
|
|
{isWhoWeServeOpen && (
|
|
<div className="absolute top-full left-0 pt-2 w-52 z-[60]">
|
|
<div className="bg-white border border-border rounded-lg shadow-xl py-2">
|
|
{whoWeServeItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className="block px-6 py-3 text-sm transition-colors hover:bg-secondary/5 hover:text-[#c4142c]"
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Vending Machines Dropdown */}
|
|
<div
|
|
className="relative"
|
|
onMouseEnter={() => setIsVendingMachinesOpen(true)}
|
|
onMouseLeave={() => setIsVendingMachinesOpen(false)}
|
|
>
|
|
<button
|
|
className="flex items-center gap-1.5 text-sm font-medium transition-colors hover:text-[#c4142c]"
|
|
aria-label="Vending Machines menu"
|
|
aria-expanded={isVendingMachinesOpen}
|
|
aria-haspopup="true"
|
|
>
|
|
Vending Machines
|
|
<ChevronDown className="h-4 w-4" aria-hidden="true" />
|
|
</button>
|
|
{isVendingMachinesOpen && (
|
|
<div className="absolute top-full left-0 pt-2 w-60 z-[60]">
|
|
<div className="bg-white border border-border rounded-lg shadow-xl py-2">
|
|
{vendingMachinesItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className="block px-6 py-3 text-sm transition-colors hover:bg-secondary/5 hover:text-[#c4142c]"
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Food and Beverage Dropdown */}
|
|
<div
|
|
className="relative"
|
|
onMouseEnter={() => setIsFoodBeverageOpen(true)}
|
|
onMouseLeave={() => setIsFoodBeverageOpen(false)}
|
|
>
|
|
<button
|
|
className="flex items-center gap-1.5 text-sm font-medium transition-colors hover:text-[#c4142c] whitespace-nowrap"
|
|
aria-label="Food & Beverage menu"
|
|
aria-expanded={isFoodBeverageOpen}
|
|
aria-haspopup="true"
|
|
>
|
|
Food & Beverage
|
|
<ChevronDown className="h-4 w-4" aria-hidden="true" />
|
|
</button>
|
|
{isFoodBeverageOpen && (
|
|
<div className="absolute top-full left-0 pt-2 w-60 z-[60]">
|
|
<div className="bg-white border border-border rounded-lg shadow-xl py-2">
|
|
{foodBeverageItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className="block px-6 py-3 text-sm transition-colors hover:bg-secondary/5 hover:text-[#c4142c]"
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Services Dropdown */}
|
|
<div
|
|
className="relative"
|
|
onMouseEnter={() => setIsServicesOpen(true)}
|
|
onMouseLeave={() => setIsServicesOpen(false)}
|
|
>
|
|
<button
|
|
className="flex items-center gap-1.5 text-sm font-medium transition-colors hover:text-[#c4142c]"
|
|
aria-label="Services menu"
|
|
aria-expanded={isServicesOpen}
|
|
aria-haspopup="true"
|
|
>
|
|
Services
|
|
<ChevronDown className="h-4 w-4" aria-hidden="true" />
|
|
</button>
|
|
{isServicesOpen && (
|
|
<div className="absolute top-full left-0 pt-2 w-72 z-[60]">
|
|
<div className="bg-white border border-border rounded-lg shadow-xl py-2">
|
|
{servicesItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className="block px-6 py-3 text-sm transition-colors hover:bg-secondary/5 hover:text-[#c4142c]"
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* About Us Dropdown */}
|
|
<div
|
|
className="relative"
|
|
onMouseEnter={() => setIsAboutOpen(true)}
|
|
onMouseLeave={() => setIsAboutOpen(false)}
|
|
>
|
|
<button className="flex items-center gap-1.5 text-sm font-medium transition-colors hover:text-[#c4142c]">
|
|
About Us
|
|
<ChevronDown className="h-4 w-4" />
|
|
</button>
|
|
{isAboutOpen && (
|
|
<div className="absolute top-full left-0 pt-2 w-52 z-[60]">
|
|
<div className="bg-white border border-border rounded-lg shadow-xl py-2">
|
|
{aboutItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className="block px-6 py-3 text-sm transition-colors hover:bg-secondary/5 hover:text-[#c4142c]"
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<Link
|
|
href="#contact"
|
|
className="text-sm font-medium transition-colors hover:text-[#c4142c]"
|
|
>
|
|
Contact Us
|
|
</Link>
|
|
</nav>
|
|
|
|
{/* Desktop CTA */}
|
|
<div className="hidden items-center gap-3 md:flex">
|
|
<a
|
|
href="tel:+14352339668"
|
|
className="flex items-center gap-2 text-sm font-medium hover:text-[#c4142c] transition-colors"
|
|
>
|
|
<Phone className="h-4 w-4" />
|
|
<span className="whitespace-nowrap">(435) 233-9668</span>
|
|
</a>
|
|
<Button
|
|
onClick={() => setIsModalOpen(true)}
|
|
className="bg-secondary hover:bg-secondary/90"
|
|
>
|
|
Get Free Machine
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Mobile Menu Button */}
|
|
<button className="md:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)} aria-label="Toggle menu">
|
|
{isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile Navigation */}
|
|
{isMenuOpen && (
|
|
<nav className="flex flex-col gap-5 py-6 md:hidden border-t border-border/40">
|
|
<Link
|
|
href="/"
|
|
className="text-sm font-medium py-1 hover:text-[#c4142c] transition-colors"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
Home
|
|
</Link>
|
|
|
|
{/* Who We Serve Mobile Section */}
|
|
<div className="flex flex-col gap-3">
|
|
<button
|
|
onClick={() => setIsWhoWeServeOpen(!isWhoWeServeOpen)}
|
|
className="flex items-center justify-between text-sm font-medium py-1 hover:text-[#c4142c] transition-colors"
|
|
aria-label="Who We Serve menu"
|
|
aria-expanded={isWhoWeServeOpen}
|
|
aria-haspopup="true"
|
|
>
|
|
Who We Serve
|
|
<ChevronDown className={`h-4 w-4 transition-transform ${isWhoWeServeOpen ? "rotate-180" : ""}`} aria-hidden="true" />
|
|
</button>
|
|
{isWhoWeServeOpen && (
|
|
<div className="flex flex-col gap-3 pl-4 border-l-2 border-secondary/30">
|
|
{whoWeServeItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className="text-sm py-1 hover:text-[#c4142c] transition-colors"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Vending Machines Mobile */}
|
|
<div className="flex flex-col gap-3">
|
|
<button
|
|
onClick={() => setIsVendingMachinesOpen(!isVendingMachinesOpen)}
|
|
className="flex items-center justify-between text-sm font-medium py-1 hover:text-[#c4142c] transition-colors"
|
|
aria-label="Vending Machines menu"
|
|
aria-expanded={isVendingMachinesOpen}
|
|
aria-haspopup="true"
|
|
>
|
|
Vending Machines
|
|
<ChevronDown className={`h-4 w-4 transition-transform ${isVendingMachinesOpen ? "rotate-180" : ""}`} aria-hidden="true" />
|
|
</button>
|
|
{isVendingMachinesOpen && (
|
|
<div className="flex flex-col gap-3 pl-4 border-l-2 border-secondary/30">
|
|
{vendingMachinesItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className="text-sm py-1 hover:text-[#c4142c] transition-colors"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Food and Beverage Mobile */}
|
|
<div className="flex flex-col gap-3">
|
|
<button
|
|
onClick={() => setIsFoodBeverageOpen(!isFoodBeverageOpen)}
|
|
className="flex items-center justify-between text-sm font-medium py-1 hover:text-[#c4142c] transition-colors"
|
|
aria-label="Food & Beverage menu"
|
|
aria-expanded={isFoodBeverageOpen}
|
|
aria-haspopup="true"
|
|
>
|
|
Food & Beverage
|
|
<ChevronDown className={`h-4 w-4 transition-transform ${isFoodBeverageOpen ? "rotate-180" : ""}`} aria-hidden="true" />
|
|
</button>
|
|
{isFoodBeverageOpen && (
|
|
<div className="flex flex-col gap-3 pl-4 border-l-2 border-secondary/30">
|
|
{foodBeverageItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className="text-sm py-1 hover:text-[#c4142c] transition-colors"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Services Mobile */}
|
|
<div className="flex flex-col gap-3">
|
|
<button
|
|
onClick={() => setIsServicesOpen(!isServicesOpen)}
|
|
className="flex items-center justify-between text-sm font-medium py-1 hover:text-[#c4142c] transition-colors"
|
|
aria-label="Services menu"
|
|
aria-expanded={isServicesOpen}
|
|
aria-haspopup="true"
|
|
>
|
|
Services
|
|
<ChevronDown className={`h-4 w-4 transition-transform ${isServicesOpen ? "rotate-180" : ""}`} aria-hidden="true" />
|
|
</button>
|
|
{isServicesOpen && (
|
|
<div className="flex flex-col gap-3 pl-4 border-l-2 border-secondary/30">
|
|
{servicesItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className="text-sm py-1 hover:text-[#c4142c] transition-colors"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* About Us Mobile */}
|
|
<div className="flex flex-col gap-3">
|
|
<button
|
|
onClick={() => setIsAboutOpen(!isAboutOpen)}
|
|
className="flex items-center justify-between text-sm font-medium py-1 hover:text-[#c4142c] transition-colors"
|
|
aria-label="About menu"
|
|
aria-expanded={isAboutOpen}
|
|
aria-haspopup="true"
|
|
>
|
|
About Us
|
|
<ChevronDown className={`h-4 w-4 transition-transform ${isAboutOpen ? "rotate-180" : ""}`} aria-hidden="true" />
|
|
</button>
|
|
{isAboutOpen && (
|
|
<div className="flex flex-col gap-3 pl-4 border-l-2 border-secondary/30">
|
|
{aboutItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className="text-sm py-1 hover:text-[#c4142c] transition-colors"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<Link
|
|
href="#contact"
|
|
className="text-sm font-medium py-1 hover:text-[#c4142c] transition-colors"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
Contact Us
|
|
</Link>
|
|
|
|
<div className="flex flex-col gap-4 pt-4 border-t border-border/40">
|
|
<a href="tel:+14352339668" className="flex items-center gap-2 text-sm font-medium hover:text-[#c4142c] transition-colors">
|
|
<Phone className="h-4 w-4" />
|
|
<span>(435) 233-9668</span>
|
|
</a>
|
|
<Button
|
|
onClick={() => {
|
|
setIsMenuOpen(false)
|
|
setIsModalOpen(true)
|
|
}}
|
|
className="bg-secondary hover:bg-secondary/90 w-full"
|
|
>
|
|
Get Free Machine
|
|
</Button>
|
|
</div>
|
|
</nav>
|
|
)}
|
|
</div>
|
|
<GetFreeMachineModal open={isModalOpen} onOpenChange={setIsModalOpen} />
|
|
</header>
|
|
)
|
|
}
|