87 lines
3.4 KiB
TypeScript
87 lines
3.4 KiB
TypeScript
import { MapPin } from "lucide-react"
|
|
import Image from "next/image"
|
|
import Link from "next/link"
|
|
import { getServiceAreaCities, serviceAreas as serviceAreasConfig } from "@/lib/seo-config"
|
|
import { getAllLocations } from "@/lib/location-data"
|
|
|
|
export function ServiceAreasSection() {
|
|
const serviceAreas = getServiceAreaCities()
|
|
const locations = getAllLocations()
|
|
|
|
// Build structured data for service areas
|
|
const serviceAreaStructuredData = {
|
|
"@context": "https://schema.org",
|
|
"@type": "Service",
|
|
serviceType: "Vending Machine Services",
|
|
areaServed: serviceAreasConfig.map((area) => ({
|
|
"@type": "City",
|
|
name: area.city,
|
|
addressRegion: area.state,
|
|
addressCountry: area.country,
|
|
})),
|
|
}
|
|
|
|
return (
|
|
<section id="service-areas" className="py-16 md:py-24 bg-background">
|
|
<script
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(serviceAreaStructuredData) }}
|
|
/>
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-12">
|
|
<div className="inline-flex items-center justify-center gap-2 mb-4">
|
|
<MapPin className="h-6 w-6 text-secondary" />
|
|
<h2 className="text-3xl md:text-4xl font-bold">Service Areas in Utah</h2>
|
|
</div>
|
|
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
|
Proudly serving businesses across Davis, Salt Lake, and Utah Counties
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-8 lg:grid-cols-2 items-center max-w-6xl mx-auto">
|
|
<div className="order-2 lg:order-1 relative aspect-[926/1024] rounded-lg shadow-lg overflow-hidden">
|
|
<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 className="order-1 lg:order-2">
|
|
<h3 className="text-2xl font-bold mb-6">Cities We Serve</h3>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
{locations.map((location) => (
|
|
<Link
|
|
key={location.slug}
|
|
href={`/vending-machines-${location.slug}`}
|
|
className="flex items-center gap-2 group"
|
|
>
|
|
<div className="h-2 w-2 rounded-full bg-secondary flex-shrink-0" />
|
|
<span className="text-foreground group-hover:text-secondary transition-colors">
|
|
{location.city}
|
|
</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
<div className="mt-6 space-y-3">
|
|
<p className="text-muted-foreground">
|
|
Don't see your city? Give us a call at{" "}
|
|
<a href="tel:+14352339668" className="text-secondary font-semibold hover:underline">
|
|
(435) 233-9668
|
|
</a>{" "}
|
|
to check if we can serve your location!
|
|
</p>
|
|
<Link
|
|
href="/service-areas"
|
|
className="inline-flex items-center gap-2 text-secondary hover:underline font-medium"
|
|
>
|
|
View All Service Areas →
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|