284 lines
12 KiB
TypeScript
284 lines
12 KiB
TypeScript
import type { Metadata } from "next";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { getAllLocations } from "@/lib/location-data";
|
|
import { businessConfig } from "@/lib/seo-config";
|
|
import { MapPin, Phone, ArrowRight } from "lucide-react";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Service Areas | Vending Machines Across Utah | Rocky Mountain Vending",
|
|
description:
|
|
"Rocky Mountain Vending serves 20+ cities across Utah including Salt Lake City, Ogden, Provo, Sandy, and more. Free vending machine delivery and installation. View all service areas.",
|
|
keywords: [
|
|
"vending machines Utah",
|
|
"Utah vending service areas",
|
|
"vending machine supplier Utah",
|
|
"Salt Lake County vending",
|
|
"Davis County vending",
|
|
"Utah County vending",
|
|
],
|
|
openGraph: {
|
|
title: "Service Areas | Vending Machines Across Utah",
|
|
description:
|
|
"Rocky Mountain Vending serves 20+ cities across Utah. Free vending machine delivery and installation. View all service areas.",
|
|
url: `${businessConfig.website}/service-areas`,
|
|
type: "website",
|
|
},
|
|
alternates: {
|
|
canonical: `${businessConfig.website}/service-areas`,
|
|
},
|
|
};
|
|
|
|
export default function ServiceAreasPage() {
|
|
const locations = getAllLocations();
|
|
|
|
// Group locations by county (approximate)
|
|
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));
|
|
|
|
return (
|
|
<div className="container mx-auto px-4 py-8 md:py-12">
|
|
{/* Hero Section */}
|
|
<header className="text-center mb-12">
|
|
<div className="inline-flex items-center justify-center gap-2 mb-4">
|
|
<MapPin className="h-8 w-8 text-secondary" />
|
|
<h1 className="text-4xl md:text-5xl font-bold">Our Service Areas</h1>
|
|
</div>
|
|
<p className="text-lg md:text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
|
|
Rocky Mountain Vending proudly serves businesses and schools across 20+ cities in Utah. We provide FREE
|
|
vending machines with no-cost installation and delivery within 50 miles of most service areas.
|
|
</p>
|
|
</header>
|
|
|
|
{/* Map Section */}
|
|
<div className="mb-16 max-w-4xl mx-auto">
|
|
<Card>
|
|
<CardContent className="p-6">
|
|
<div className="relative aspect-[926/1024] rounded-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>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Quick Contact */}
|
|
<div className="mb-16 max-w-4xl mx-auto">
|
|
<Card className="border-secondary/20 bg-secondary/5">
|
|
<CardContent className="p-8 text-center">
|
|
<h2 className="text-2xl font-bold mb-4">Don't See Your City?</h2>
|
|
<p className="text-muted-foreground mb-6">
|
|
We may still be able to serve you! Give us a call to check if we can deliver to your location.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
|
<a
|
|
href={businessConfig.phoneUrl}
|
|
className="flex items-center gap-2 text-lg font-semibold text-secondary hover:underline"
|
|
>
|
|
<Phone className="h-5 w-5" />
|
|
{businessConfig.phone}
|
|
</a>
|
|
<span className="text-muted-foreground">or</span>
|
|
<Button asChild className="bg-secondary hover:bg-secondary/90">
|
|
<Link href="#contact">Request a Free Machine</Link>
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Salt Lake County */}
|
|
<section className="mb-16">
|
|
<div className="mb-8">
|
|
<h2 className="text-3xl font-bold mb-2">Salt Lake County</h2>
|
|
<p className="text-muted-foreground">
|
|
Serving the heart of Utah's business district with comprehensive vending solutions
|
|
</p>
|
|
</div>
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
{saltLakeCounty.map((location) => (
|
|
<Link key={location.slug} href={`/vending-machines-${location.slug}`}>
|
|
<Card className="h-full hover:border-secondary/50 transition-colors group">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div>
|
|
<h3 className="text-xl font-semibold group-hover:text-secondary transition-colors">
|
|
{location.city}
|
|
</h3>
|
|
<p className="text-sm text-muted-foreground">{location.zipCode}</p>
|
|
</div>
|
|
<ArrowRight className="h-5 w-5 text-muted-foreground group-hover:text-secondary group-hover:translate-x-1 transition-all" />
|
|
</div>
|
|
<div className="text-sm text-muted-foreground space-y-1">
|
|
<p className="font-medium">Neighborhoods:</p>
|
|
<p>{location.neighborhoods.slice(0, 2).join(", ")}</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Davis County */}
|
|
<section className="mb-16">
|
|
<div className="mb-8">
|
|
<h2 className="text-3xl font-bold mb-2">Davis County</h2>
|
|
<p className="text-muted-foreground">
|
|
Supporting businesses from Ogden to Layton with reliable vending services
|
|
</p>
|
|
</div>
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
{davisCounty.map((location) => (
|
|
<Link key={location.slug} href={`/vending-machines-${location.slug}`}>
|
|
<Card className="h-full hover:border-secondary/50 transition-colors group">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div>
|
|
<h3 className="text-xl font-semibold group-hover:text-secondary transition-colors">
|
|
{location.city}
|
|
</h3>
|
|
<p className="text-sm text-muted-foreground">{location.zipCode}</p>
|
|
</div>
|
|
<ArrowRight className="h-5 w-5 text-muted-foreground group-hover:text-secondary group-hover:translate-x-1 transition-all" />
|
|
</div>
|
|
<div className="text-sm text-muted-foreground space-y-1">
|
|
<p className="font-medium">Neighborhoods:</p>
|
|
<p>{location.neighborhoods.slice(0, 2).join(", ")}</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Utah County */}
|
|
<section className="mb-16">
|
|
<div className="mb-8">
|
|
<h2 className="text-3xl font-bold mb-2">Utah County</h2>
|
|
<p className="text-muted-foreground">
|
|
Delivering quality vending solutions to Provo and surrounding areas
|
|
</p>
|
|
</div>
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
{utahCounty.map((location) => (
|
|
<Link key={location.slug} href={`/vending-machines-${location.slug}`}>
|
|
<Card className="h-full hover:border-secondary/50 transition-colors group">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div>
|
|
<h3 className="text-xl font-semibold group-hover:text-secondary transition-colors">
|
|
{location.city}
|
|
</h3>
|
|
<p className="text-sm text-muted-foreground">{location.zipCode}</p>
|
|
</div>
|
|
<ArrowRight className="h-5 w-5 text-muted-foreground group-hover:text-secondary group-hover:translate-x-1 transition-all" />
|
|
</div>
|
|
<div className="text-sm text-muted-foreground space-y-1">
|
|
<p className="font-medium">Neighborhoods:</p>
|
|
<p>{location.neighborhoods.slice(0, 2).join(", ")}</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Why Choose Us Section */}
|
|
<section className="mb-16 max-w-4xl mx-auto">
|
|
<Card className="border-secondary/20">
|
|
<CardContent className="p-8">
|
|
<h2 className="text-2xl font-bold mb-6 text-center">Why Choose Rocky Mountain Vending?</h2>
|
|
<div className="grid gap-6 md:grid-cols-2">
|
|
<div>
|
|
<h3 className="font-semibold mb-2 text-lg">✓ FREE Vending Machines</h3>
|
|
<p className="text-muted-foreground">No upfront costs, no hidden fees. We provide the machine at no charge.</p>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold mb-2 text-lg">✓ FREE Delivery & Installation</h3>
|
|
<p className="text-muted-foreground">Within 50 miles of most service areas. We handle everything.</p>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold mb-2 text-lg">✓ FREE Maintenance & Repairs</h3>
|
|
<p className="text-muted-foreground">We keep your machine running smoothly at no cost to you.</p>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold mb-2 text-lg">✓ Healthy & Traditional Options</h3>
|
|
<p className="text-muted-foreground">Stock your machine with whatever your team prefers.</p>
|
|
</div>
|
|
</div>
|
|
<div className="mt-8 text-center">
|
|
<Button asChild size="lg" className="bg-secondary hover:bg-secondary/90">
|
|
<Link href="/#contact">Get Your Free Machine Today</Link>
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</section>
|
|
|
|
{/* Service Details */}
|
|
<section className="max-w-4xl mx-auto">
|
|
<h2 className="text-3xl font-bold mb-6 text-center">What We Offer in Every Service Area</h2>
|
|
<div className="grid gap-6 md:grid-cols-3">
|
|
<Card>
|
|
<CardContent className="p-6 text-center">
|
|
<div className="text-4xl mb-4">🏢</div>
|
|
<h3 className="font-semibold mb-2">For Businesses</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
Offices, warehouses, auto shops, and more. Keep your team energized and productive.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardContent className="p-6 text-center">
|
|
<div className="text-4xl mb-4">🏫</div>
|
|
<h3 className="font-semibold mb-2">For Schools</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
Healthy options for students and staff. Easy management, no hassle.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardContent className="p-6 text-center">
|
|
<div className="text-4xl mb-4">💪</div>
|
|
<h3 className="font-semibold mb-2">For Gyms & Fitness</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
Protein bars, healthy snacks, and sports drinks. Perfect post-workout fuel.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|