261 lines
8.9 KiB
TypeScript
261 lines
8.9 KiB
TypeScript
import type { Metadata } from "next"
|
|
import Link from "next/link"
|
|
import { getAllLocations } from "@/lib/location-data"
|
|
import { businessConfig } from "@/lib/seo-config"
|
|
import { Breadcrumbs } from "@/components/breadcrumbs"
|
|
import { Button } from "@/components/ui/button"
|
|
import { ArrowRight, MapPin } from "lucide-react"
|
|
import {
|
|
PublicInset,
|
|
PublicPageHeader,
|
|
PublicSectionHeader,
|
|
PublicSurface,
|
|
} from "@/components/public-surface"
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Utah Service Areas | Rocky Mountain Vending",
|
|
description:
|
|
"Legacy service-area route for Rocky Mountain Vending. Use the main Utah service areas page for the canonical version.",
|
|
keywords: [
|
|
"vending machine services by location",
|
|
"Utah service areas",
|
|
"local vending services",
|
|
"vending machine locations Utah",
|
|
],
|
|
openGraph: {
|
|
title: "Utah Service Areas | Rocky Mountain Vending",
|
|
description:
|
|
"Legacy service-area route for Rocky Mountain Vending. Use the main Utah service areas page for the canonical version.",
|
|
url: `${businessConfig.website}/service-areas`,
|
|
type: "website",
|
|
},
|
|
alternates: {
|
|
canonical: `${businessConfig.website}/service-areas`,
|
|
},
|
|
robots: {
|
|
index: false,
|
|
follow: true,
|
|
},
|
|
}
|
|
|
|
export default function ServiceAreasServicesPage() {
|
|
const locations = getAllLocations()
|
|
|
|
// Group locations by county for better organization
|
|
const saltLakeCounty = locations.filter((loc) =>
|
|
[
|
|
"salt-lake-city-utah",
|
|
"sandy-utah",
|
|
"draper-utah",
|
|
"murray-utah",
|
|
"midvale-utah",
|
|
"south-salt-lake-utah",
|
|
"west-valley-city-utah",
|
|
"west-jordan-utah",
|
|
"south-jordan-utah",
|
|
"riverton-utah",
|
|
"herriman-utah",
|
|
"holladay-utah",
|
|
"millcreek-utah",
|
|
"cottonwood-heights-utah",
|
|
].includes(loc.slug)
|
|
)
|
|
|
|
const davisCounty = locations.filter((loc) =>
|
|
[
|
|
"ogden-utah",
|
|
"layton-utah",
|
|
"clearfield-utah",
|
|
"syracuse-utah",
|
|
"clinton-utah",
|
|
].includes(loc.slug)
|
|
)
|
|
|
|
const utahCounty = locations.filter((loc) =>
|
|
["provo-utah"].includes(loc.slug)
|
|
)
|
|
|
|
const services = [
|
|
{
|
|
title: "Vending Machine Sales",
|
|
description:
|
|
"Need a new machine? We've got options that fit your space and budget. Whether you run a school, office, or warehouse, we'll help you choose one that works.",
|
|
},
|
|
{
|
|
title: "Vending Machine Repair",
|
|
description:
|
|
"Machines break down—it happens. When yours does, we fix it fast so you're not stuck with an empty snack spot.",
|
|
},
|
|
{
|
|
title: "Healthy Snack and Beverage Options",
|
|
description:
|
|
"We stock machines with healthy choices like granola bars, fruit snacks, and sparkling water. Great for schools and gyms that want better options.",
|
|
},
|
|
{
|
|
title: "Maintenance Services",
|
|
description:
|
|
"Regular checkups keep machines working right. We handle restocking, cleaning, and small fixes so you don't have to think about it.",
|
|
},
|
|
]
|
|
|
|
const counties = [
|
|
{
|
|
title: "Salt Lake County",
|
|
description:
|
|
"Serving 14 cities in Salt Lake County with reliable vending services.",
|
|
locations: saltLakeCounty,
|
|
},
|
|
{
|
|
title: "Davis County",
|
|
description:
|
|
"Supporting businesses from Ogden to Layton with reliable vending services.",
|
|
locations: davisCounty,
|
|
},
|
|
{
|
|
title: "Utah County",
|
|
description:
|
|
"Serving Provo and surrounding areas with quality vending services.",
|
|
locations: utahCounty,
|
|
},
|
|
]
|
|
|
|
return (
|
|
<div className="public-page">
|
|
<Breadcrumbs
|
|
className="mb-6"
|
|
items={[
|
|
{ label: "Services", href: "/services" },
|
|
{ label: "By Location", href: "/services/service-areas" },
|
|
]}
|
|
/>
|
|
|
|
<PublicPageHeader
|
|
align="center"
|
|
eyebrow="Services by Location"
|
|
title="See how service support connects to the cities we cover."
|
|
description="Use this route to browse service coverage from the Services family view, then jump into the main service-area experience when you want the full location-by-location directory."
|
|
className="mb-10 md:mb-14"
|
|
/>
|
|
<section className="mx-auto mb-12 max-w-5xl">
|
|
<PublicSurface className="p-5 md:p-7">
|
|
<PublicSectionHeader
|
|
eyebrow="Service Overview"
|
|
title="Our services"
|
|
description="Every city we cover can be supported with the same core vending services, tailored to the way the location actually operates."
|
|
className="mb-6"
|
|
/>
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
{services.map((service, index) => (
|
|
<PublicInset key={index} className="h-full">
|
|
<h3 className="text-xl font-semibold mb-3">{service.title}</h3>
|
|
<p className="text-muted-foreground leading-7">
|
|
{service.description}
|
|
</p>
|
|
</PublicInset>
|
|
))}
|
|
</div>
|
|
</PublicSurface>
|
|
</section>
|
|
|
|
<div className="space-y-10 md:space-y-12">
|
|
{counties.map((county) => (
|
|
<section key={county.title} className="mx-auto max-w-6xl">
|
|
<div className="mb-6">
|
|
<PublicSectionHeader
|
|
eyebrow="Coverage"
|
|
title={county.title}
|
|
description={county.description}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
{county.locations.map((location) => (
|
|
<PublicSurface
|
|
key={location.slug}
|
|
className="flex h-full flex-col p-5"
|
|
>
|
|
<div className="mb-4">
|
|
<h3 className="text-xl font-semibold mb-1">
|
|
{location.city}
|
|
</h3>
|
|
<p className="text-sm text-muted-foreground flex items-center gap-1.5">
|
|
<MapPin className="h-4 w-4 text-primary" />
|
|
{location.zipCode}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mb-5">
|
|
<p className="text-sm font-medium text-foreground mb-2">
|
|
Services Available
|
|
</p>
|
|
<ul className="space-y-2 text-sm text-muted-foreground">
|
|
<li>Vending machine sales</li>
|
|
<li>Repair services</li>
|
|
<li>Healthy snack and beverage options</li>
|
|
<li>Maintenance and restocking</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<Link
|
|
href={`/vending-machines-${location.slug}`}
|
|
className="mt-auto"
|
|
>
|
|
<Button
|
|
variant="outline"
|
|
className="h-11 w-full rounded-full group"
|
|
>
|
|
View Services
|
|
<ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
|
|
</Button>
|
|
</Link>
|
|
</PublicSurface>
|
|
))}
|
|
</div>
|
|
</section>
|
|
))}
|
|
</div>
|
|
|
|
<section className="mx-auto mt-12 max-w-4xl">
|
|
<PublicSurface className="text-center">
|
|
<h2 className="text-3xl font-bold tracking-tight text-balance">
|
|
Ready to get started?
|
|
</h2>
|
|
<p className="mx-auto mt-4 max-w-2xl text-lg leading-8 text-muted-foreground">
|
|
All services are available across our coverage area. Reach out and
|
|
we'll help you figure out the right next step for your
|
|
location.
|
|
</p>
|
|
<div className="mt-6 flex flex-col justify-center gap-3 sm:flex-row">
|
|
<Link href="/contact-us">
|
|
<Button size="lg" className="min-h-11 rounded-full">
|
|
Contact Us
|
|
</Button>
|
|
</Link>
|
|
<Link href="/service-areas">
|
|
<Button
|
|
size="lg"
|
|
variant="outline"
|
|
className="min-h-11 rounded-full"
|
|
>
|
|
View All Service Areas
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
<PublicInset className="mx-auto mt-6 max-w-2xl text-left sm:text-center">
|
|
<p className="text-sm leading-6 text-muted-foreground">
|
|
This route stays available to keep the Services family connected,
|
|
but the primary service-area experience lives on the main{" "}
|
|
<Link
|
|
href="/service-areas"
|
|
className="font-medium text-foreground underline decoration-primary/35 underline-offset-4 hover:decoration-primary"
|
|
>
|
|
Utah service areas page
|
|
</Link>
|
|
.
|
|
</p>
|
|
</PublicInset>
|
|
</PublicSurface>
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|