121 lines
4.7 KiB
TypeScript
121 lines
4.7 KiB
TypeScript
import { MapPin } from "lucide-react"
|
|
import Image from "next/image"
|
|
import Link from "next/link"
|
|
import {
|
|
PublicInset,
|
|
PublicPageHeader,
|
|
PublicSection,
|
|
PublicSurface,
|
|
} from "@/components/public-surface"
|
|
import {
|
|
businessConfig,
|
|
serviceAreas as serviceAreasConfig,
|
|
} from "@/lib/seo-config"
|
|
import { getAllLocations } from "@/lib/location-data"
|
|
|
|
export function ServiceAreasSection() {
|
|
const locations = getAllLocations()
|
|
|
|
// Build structured data for service areas
|
|
const serviceAreaStructuredData = {
|
|
"@context": "https://schema.org",
|
|
"@type": "Service",
|
|
serviceType: "Vending Machine Services",
|
|
provider: {
|
|
"@type": "Organization",
|
|
name: businessConfig.name,
|
|
url: businessConfig.website,
|
|
},
|
|
areaServed: serviceAreasConfig.map((area) => ({
|
|
"@type": "City",
|
|
name: area.city,
|
|
addressRegion: area.state,
|
|
addressCountry: area.country,
|
|
})),
|
|
}
|
|
|
|
return (
|
|
<PublicSection id="service-areas">
|
|
<script
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{
|
|
__html: JSON.stringify(serviceAreaStructuredData),
|
|
}}
|
|
/>
|
|
<PublicPageHeader
|
|
align="center"
|
|
className="mb-12"
|
|
eyebrow="Service Coverage"
|
|
title="Service Areas in Utah"
|
|
description="Proudly serving businesses across Davis, Salt Lake, and Utah Counties."
|
|
/>
|
|
|
|
<PublicSurface className="grid items-center gap-6 p-5 md:p-7 lg:grid-cols-[1.05fr_0.95fr]">
|
|
<div className="order-2 lg:order-1 relative overflow-hidden rounded-[1.5rem] border border-border/60 bg-[radial-gradient(circle_at_top_left,rgba(196,154,52,0.16),transparent_55%),linear-gradient(180deg,rgba(247,244,236,0.72),rgba(255,255,255,0.96))]">
|
|
<div className="relative aspect-[926/1024]">
|
|
<Image
|
|
src="/images/rocky-mountain-vending-service-area-926x1024.webp"
|
|
alt="Rocky Mountain Vending service area map covering Salt Lake City, Ogden, Provo and surrounding Utah cities"
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="order-1 lg:order-2">
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex h-11 w-11 items-center justify-center rounded-full bg-primary/10 text-primary">
|
|
<MapPin className="h-5 w-5" />
|
|
</div>
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-primary/80">
|
|
City Coverage
|
|
</p>
|
|
<h3 className="text-2xl font-semibold tracking-tight text-balance">
|
|
Cities We Serve
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
<div className="mt-6 grid grid-cols-2 gap-3">
|
|
{locations.map((location) => (
|
|
<Link
|
|
key={location.slug}
|
|
href={`/vending-machines-${location.slug}`}
|
|
className="group flex min-h-11 items-center gap-2 rounded-full border border-border/60 bg-white px-4 text-sm font-medium text-foreground transition hover:border-primary/35 hover:text-primary"
|
|
>
|
|
<div className="h-2 w-2 rounded-full bg-primary/70 flex-shrink-0 transition group-hover:scale-110" />
|
|
<span className="transition-colors">{location.city}</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
<PublicInset className="mt-6">
|
|
<p className="text-sm leading-relaxed text-muted-foreground">
|
|
Don't see your city? Give us a call at{" "}
|
|
<a
|
|
href="tel:+14352339668"
|
|
className="font-semibold text-foreground underline decoration-primary/35 underline-offset-4 hover:decoration-primary"
|
|
>
|
|
(435) 233-9668
|
|
</a>{" "}
|
|
to check if we can serve your location!
|
|
</p>
|
|
<div className="mt-4 flex flex-col gap-3 sm:flex-row">
|
|
<Link
|
|
href="/service-areas"
|
|
className="inline-flex min-h-11 items-center justify-center gap-2 rounded-full bg-primary px-5 text-sm font-medium text-primary-foreground transition hover:bg-primary/90"
|
|
>
|
|
View All Service Areas →
|
|
</Link>
|
|
<Link
|
|
href="/contact-us#contact-form"
|
|
className="inline-flex min-h-11 items-center justify-center gap-2 rounded-full border border-border bg-white px-5 text-sm font-medium text-foreground transition hover:border-primary/40 hover:text-primary"
|
|
>
|
|
Ask about your location
|
|
</Link>
|
|
</div>
|
|
</PublicInset>
|
|
</div>
|
|
</PublicSurface>
|
|
</PublicSection>
|
|
)
|
|
}
|