925 lines
42 KiB
TypeScript
925 lines
42 KiB
TypeScript
import { notFound } from "next/navigation"
|
||
import { loadImageMapping } from "@/lib/wordpress-content"
|
||
import {
|
||
generateRegistryMetadata,
|
||
generateRegistryStructuredData,
|
||
} from "@/lib/seo"
|
||
import { getPageBySlug } from "@/lib/wordpress-data-loader"
|
||
import { cleanWordPressContent } from "@/lib/clean-wordPress-content"
|
||
import { FAQSection } from "@/components/faq-section"
|
||
import { ServiceAreasSection } from "@/components/service-areas-section"
|
||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import {
|
||
CheckCircle2,
|
||
Wrench,
|
||
Clock,
|
||
MapPin,
|
||
} from "lucide-react"
|
||
import { RepairsImageCarousel } from "@/components/repairs-image-carousel"
|
||
import { ContactForm } from "@/components/forms/contact-form"
|
||
import { Breadcrumbs } from "@/components/breadcrumbs"
|
||
import {
|
||
PublicInset,
|
||
PublicPageHeader,
|
||
PublicSectionHeader,
|
||
PublicSurface,
|
||
} from "@/components/public-surface"
|
||
import Image from "next/image"
|
||
import Link from "next/link"
|
||
import { ArrowRight } from "lucide-react"
|
||
import { businessConfig } from "@/lib/seo-config"
|
||
import type { Metadata } from "next"
|
||
|
||
const WORDPRESS_SLUG = "vending-machine-repairs"
|
||
|
||
export async function generateMetadata(): Promise<Metadata> {
|
||
const page = getPageBySlug(WORDPRESS_SLUG)
|
||
|
||
if (!page) {
|
||
return {
|
||
title: "Vending Machine Repairs | Rocky Mountain Vending",
|
||
description:
|
||
"Professional vending machine repair services in Utah. Expert technicians for all vending machine types.",
|
||
}
|
||
}
|
||
|
||
return generateRegistryMetadata("repairs", {
|
||
date: page.date,
|
||
modified: page.modified,
|
||
image: page.images?.[0]?.localPath,
|
||
})
|
||
}
|
||
|
||
export default async function RepairsPage() {
|
||
try {
|
||
const page = getPageBySlug(WORDPRESS_SLUG)
|
||
|
||
if (!page) {
|
||
notFound()
|
||
}
|
||
|
||
let imageMapping: any = {}
|
||
try {
|
||
imageMapping = loadImageMapping()
|
||
} catch (e) {
|
||
imageMapping = {}
|
||
}
|
||
|
||
// Extract FAQs from content
|
||
const faqs: Array<{ question: string; answer: string }> = []
|
||
let contentWithoutFAQs = page.content || ""
|
||
let contentWithoutVirtualServices = ""
|
||
let virtualServicesContent = ""
|
||
|
||
if (page.content) {
|
||
const contentStr = String(page.content)
|
||
|
||
// Extract FAQ items from accordion structure
|
||
const questionMatches = contentStr.matchAll(
|
||
/<span class="ekit-accordion-title">([^<]+)<\/span>/g
|
||
)
|
||
const answerMatches = contentStr.matchAll(
|
||
/<div class="elementskit-card-body ekit-accordion--content">([\s\S]*?)<\/div>\s*<\/div>\s*<!-- \.elementskit-card END -->/g
|
||
)
|
||
|
||
const questions = Array.from(questionMatches).map((m) => m[1].trim())
|
||
const answers = Array.from(answerMatches).map((m) => {
|
||
let answer = m[1].trim()
|
||
answer = answer
|
||
.replace(/\n\s*\n/g, "\n")
|
||
.replace(/>\s+</g, "><")
|
||
.trim()
|
||
return answer
|
||
})
|
||
|
||
// Match questions with answers and clean HTML entities
|
||
questions.forEach((question, index) => {
|
||
if (answers[index]) {
|
||
// Clean HTML entities from questions (e.g., ' -> ')
|
||
const cleanQuestion = question
|
||
.replace(/'/g, "'")
|
||
.replace(/"/g, '"')
|
||
.replace(/&/g, "&")
|
||
.replace(/</g, "<")
|
||
.replace(/>/g, ">")
|
||
.replace(/ /g, " ")
|
||
.trim()
|
||
faqs.push({ question: cleanQuestion, answer: answers[index] })
|
||
}
|
||
})
|
||
|
||
// Remove FAQ section from content if FAQs were found
|
||
if (faqs.length > 0) {
|
||
const faqSectionRegex =
|
||
/<h2[^>]*>.*?Answers\s+To\s+Common\s+Questions.*?<\/h2>[\s\S]*?(?=<h2[^>]*>.*?Virtual\s+Services|<h2[^>]*>.*?Service\s+Area|$)/i
|
||
contentWithoutFAQs = contentStr.replace(faqSectionRegex, "").trim()
|
||
}
|
||
|
||
// Extract Virtual Services section
|
||
const virtualServicesRegex =
|
||
/<h2[^>]*>.*?Virtual\s+Services.*?<\/h2>([\s\S]*?)(?=<h2[^>]*>.*?Service\s+Area|$)/i
|
||
const virtualMatch = contentStr.match(virtualServicesRegex)
|
||
if (virtualMatch) {
|
||
virtualServicesContent = virtualMatch[1]
|
||
// Remove Virtual Services from main content
|
||
contentWithoutVirtualServices = contentWithoutFAQs
|
||
.replace(virtualServicesRegex, "")
|
||
.trim()
|
||
} else {
|
||
contentWithoutVirtualServices = contentWithoutFAQs
|
||
}
|
||
}
|
||
|
||
const content = contentWithoutVirtualServices ? (
|
||
<div className="max-w-none">
|
||
{cleanWordPressContent(String(contentWithoutVirtualServices), {
|
||
imageMapping,
|
||
pageTitle: page.title,
|
||
})}
|
||
</div>
|
||
) : (
|
||
<p className="text-muted-foreground">No content available.</p>
|
||
)
|
||
|
||
const structuredData = generateRegistryStructuredData("repairs", {
|
||
datePublished: page.date,
|
||
dateModified: page.modified || page.date,
|
||
})
|
||
|
||
const surfaceCardClass =
|
||
"rounded-[var(--public-surface-radius)] border border-border/70 bg-[linear-gradient(180deg,rgba(255,255,255,0.98),rgba(255,251,243,0.96))] shadow-[var(--public-surface-shadow)]"
|
||
const insetCardClass =
|
||
"rounded-[var(--public-inset-radius)] border border-border/60 bg-white/95 shadow-[0_10px_28px_rgba(15,23,42,0.06)]"
|
||
|
||
return (
|
||
<>
|
||
<script
|
||
type="application/ld+json"
|
||
dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
|
||
/>
|
||
{/* Hero Header */}
|
||
<section className="py-20 md:py-28 bg-background">
|
||
<div className="container mx-auto px-4 max-w-4xl">
|
||
<Breadcrumbs
|
||
className="mb-6"
|
||
items={[
|
||
{ label: "Services", href: "/services" },
|
||
{ label: "Repairs", href: "/services/repairs" },
|
||
]}
|
||
/>
|
||
<PublicPageHeader
|
||
align="center"
|
||
className="mb-8"
|
||
eyebrow="Repair Services"
|
||
title={page.title || "Vending Machine Repairs and Service"}
|
||
description={
|
||
"Rocky Mountain Vending delivers expert vending machine repair and maintenance services to keep your business thriving."
|
||
}
|
||
>
|
||
<p className="mx-auto max-w-3xl text-base leading-relaxed text-muted-foreground md:text-lg">
|
||
Rocky Mountain Vending delivers expert{" "}
|
||
<Link
|
||
href="/services/repairs"
|
||
className="text-primary hover:underline font-semibold"
|
||
>
|
||
vending machine repair
|
||
</Link>{" "}
|
||
and maintenance services to keep your business thriving. From
|
||
resolving jammed coin slots and refrigeration issues to fixing
|
||
non-dispensing machines, our skilled technicians ensure reliable
|
||
performance. For all your{" "}
|
||
<Link
|
||
href="/services/parts"
|
||
className="text-primary hover:underline"
|
||
>
|
||
vending machine parts
|
||
</Link>{" "}
|
||
needs and professional{" "}
|
||
<Link
|
||
href="/services/moving"
|
||
className="text-primary hover:underline"
|
||
>
|
||
vending machine moving
|
||
</Link>{" "}
|
||
services, contact us today for fast, professional solutions!
|
||
</p>
|
||
</PublicPageHeader>
|
||
{/* Images Carousel */}
|
||
<PublicSurface className="mx-auto max-w-4xl p-4 md:p-5">
|
||
<RepairsImageCarousel />
|
||
</PublicSurface>
|
||
</div>
|
||
</section>
|
||
|
||
{contentWithoutVirtualServices ? (
|
||
<section className="py-16 md:py-20 bg-background">
|
||
<div className="container mx-auto px-4 max-w-4xl">
|
||
<PublicSurface>
|
||
<div className="max-w-none">{content}</div>
|
||
</PublicSurface>
|
||
</div>
|
||
</section>
|
||
) : null}
|
||
|
||
{/* Services Section */}
|
||
<section className="py-20 md:py-28 bg-muted/30">
|
||
<div className="container mx-auto px-4 max-w-6xl">
|
||
<PublicSectionHeader
|
||
eyebrow="Service Scope"
|
||
title="Repair and maintenance support"
|
||
description="Our repair and maintenance services cover the most common machine, payment, and refrigeration issues businesses call us about."
|
||
className="mx-auto mb-12 max-w-3xl text-center md:mb-16"
|
||
/>
|
||
<div className="grid gap-8 md:grid-cols-2 items-start">
|
||
<Card className={surfaceCardClass}>
|
||
<CardContent className="p-6">
|
||
<ul className="space-y-4">
|
||
<li className="flex items-start gap-3">
|
||
<CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
|
||
<span className="text-foreground">
|
||
Diagnosing and fixing vending machine errors
|
||
</span>
|
||
</li>
|
||
<li className="flex items-start gap-3">
|
||
<CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
|
||
<span className="text-foreground">
|
||
Bill and coin mechanism repairs
|
||
</span>
|
||
</li>
|
||
<li className="flex items-start gap-3">
|
||
<CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
|
||
<span className="text-foreground">
|
||
Refrigeration system maintenance and repair
|
||
</span>
|
||
</li>
|
||
<li className="flex items-start gap-3">
|
||
<CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
|
||
<span className="text-foreground">
|
||
Card reader troubleshooting and setup
|
||
</span>
|
||
</li>
|
||
<li className="flex items-start gap-3">
|
||
<CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
|
||
<span className="text-foreground">
|
||
Software updates and programming
|
||
</span>
|
||
</li>
|
||
<li className="flex items-start gap-3">
|
||
<CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
|
||
<span className="text-foreground">
|
||
Machine calibration and inventory setup
|
||
</span>
|
||
</li>
|
||
<li className="flex items-start gap-3">
|
||
<CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
|
||
<span className="text-foreground">
|
||
Preventative maintenance services
|
||
</span>
|
||
</li>
|
||
<li className="flex items-start gap-3">
|
||
<CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
|
||
<span className="text-foreground">
|
||
Credit card reader upgrade and installation
|
||
</span>
|
||
</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
<div className="relative aspect-[4/3] max-w-md mx-auto overflow-hidden rounded-[1.75rem] border border-border/60 bg-[linear-gradient(180deg,rgba(255,255,255,0.98),rgba(247,244,236,0.94))] p-3 shadow-[0_18px_40px_rgba(15,23,42,0.08)] md:mx-0">
|
||
<Image
|
||
src="https://rockymountainvending.com/wp-content/uploads/elementor/thumbs/Vending-Machine-repairs-e1737751914630-r0hul4xrzal3af9zw0ss3hzq6enyjd5ldxqqylpgnc.webp"
|
||
alt="Vending machine being repaired"
|
||
fill
|
||
className="rounded-[1rem] object-cover"
|
||
sizes="(max-width: 768px) 100vw, 400px"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Why Choose Section */}
|
||
<section className="py-20 md:py-28">
|
||
<div className="container mx-auto px-4 max-w-6xl">
|
||
<PublicSectionHeader
|
||
eyebrow="Why Rocky"
|
||
title="Why businesses call Rocky Mountain Vending for repairs"
|
||
description="This page should feel connected to the rest of the Services family while still making the repair value proposition obvious."
|
||
className="mx-auto mb-12 max-w-3xl text-center md:mb-16"
|
||
/>
|
||
<div className="grid gap-8 md:grid-cols-2 items-start">
|
||
<div className="relative aspect-video overflow-hidden rounded-[1.75rem] border border-border/60 bg-[linear-gradient(180deg,rgba(255,255,255,0.98),rgba(247,244,236,0.94))] p-3 shadow-[0_18px_40px_rgba(15,23,42,0.08)]">
|
||
<Image
|
||
src="https://rockymountainvending.com/wp-content/uploads/elementor/thumbs/Coin-Mech-with-Low-Battery-e1737751934594-r0hulnqjrzatqmiou8xbhd8y243atb884isgk4xl6w.webp"
|
||
alt="Coin mech with low battery"
|
||
fill
|
||
className="rounded-[1rem] object-cover"
|
||
sizes="(max-width: 768px) 100vw, 50vw"
|
||
/>
|
||
</div>
|
||
<Card className={surfaceCardClass}>
|
||
<CardContent className="p-6">
|
||
<ul className="space-y-4">
|
||
<li className="flex items-start gap-3">
|
||
<CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
|
||
<span className="text-foreground">
|
||
Local experts serving Salt Lake City for over 10 years
|
||
experience
|
||
</span>
|
||
</li>
|
||
<li className="flex items-start gap-3">
|
||
<CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
|
||
<span className="text-foreground">
|
||
Fast response times to minimize downtime
|
||
</span>
|
||
</li>
|
||
<li className="flex items-start gap-3">
|
||
<CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
|
||
<span className="text-foreground">
|
||
Experienced technicians familiar with all major vending
|
||
machine brands
|
||
</span>
|
||
</li>
|
||
<li className="flex items-start gap-3">
|
||
<CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
|
||
<span className="text-foreground">
|
||
Affordable service plans tailored to your needs
|
||
</span>
|
||
</li>
|
||
<li className="flex items-start gap-3">
|
||
<CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
|
||
<span className="text-foreground">
|
||
Preventative maintenance services
|
||
</span>
|
||
</li>
|
||
<li className="flex items-start gap-3">
|
||
<CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
|
||
<span className="text-foreground">
|
||
We've often come in and fixed problems others couldn't
|
||
fix
|
||
</span>
|
||
</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* How It Works Section */}
|
||
|
||
{/* Related Services Section */}
|
||
<section className="py-20 md:py-28 bg-background">
|
||
<div className="container mx-auto px-4 max-w-6xl">
|
||
<PublicSectionHeader
|
||
eyebrow="Connected Services"
|
||
title="Our complete service network"
|
||
description="Repairs should still point cleanly to the rest of the family, including moving, parts, and city-based support."
|
||
className="mx-auto mb-12 max-w-3xl text-center md:mb-16"
|
||
/>
|
||
<div className="grid gap-8 md:grid-cols-3">
|
||
<Card className={`${insetCardClass} hover:border-primary/30`}>
|
||
<CardContent className="p-8 text-center">
|
||
<Wrench className="h-12 w-12 text-primary mx-auto mb-4" />
|
||
<h3 className="text-xl font-semibold mb-3">
|
||
Vending Machine Parts
|
||
</h3>
|
||
<p className="text-muted-foreground mb-6">
|
||
Quality replacement parts and components for all major
|
||
vending machine brands
|
||
</p>
|
||
<Link
|
||
href="/services/parts"
|
||
className="inline-flex items-center gap-2 text-primary hover:underline font-medium"
|
||
>
|
||
View Parts Services <ArrowRight className="h-4 w-4" />
|
||
</Link>
|
||
</CardContent>
|
||
</Card>
|
||
<Card className={`${insetCardClass} hover:border-primary/30`}>
|
||
<CardContent className="p-8 text-center">
|
||
<MapPin className="h-12 w-12 text-primary mx-auto mb-4" />
|
||
<h3 className="text-xl font-semibold mb-3">Service Areas</h3>
|
||
<p className="text-muted-foreground mb-6">
|
||
Serving 20+ cities across Utah with free delivery and
|
||
installation
|
||
</p>
|
||
<Link
|
||
href="/service-areas"
|
||
className="inline-flex items-center gap-2 text-primary hover:underline font-medium"
|
||
>
|
||
View Service Areas <ArrowRight className="h-4 w-4" />
|
||
</Link>
|
||
</CardContent>
|
||
</Card>
|
||
<Card className={`${insetCardClass} hover:border-primary/30`}>
|
||
<CardContent className="p-8 text-center">
|
||
<Clock className="h-12 w-12 text-primary mx-auto mb-4" />
|
||
<h3 className="text-xl font-semibold mb-3">
|
||
Moving Services
|
||
</h3>
|
||
<p className="text-muted-foreground mb-6">
|
||
Professional vending machine relocation and installation
|
||
services
|
||
</p>
|
||
<Link
|
||
href="/services/moving"
|
||
className="inline-flex items-center gap-2 text-primary hover:underline font-medium"
|
||
>
|
||
View Moving Services <ArrowRight className="h-4 w-4" />
|
||
</Link>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section
|
||
id="how-it-works"
|
||
className="py-20 md:py-28 bg-muted/30 scroll-mt-24"
|
||
>
|
||
<div className="container mx-auto px-4 max-w-6xl">
|
||
<div className="text-center mb-12 md:mb-16">
|
||
<h2 className="text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl mb-4 text-balance">
|
||
How It Works
|
||
</h2>
|
||
</div>
|
||
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4 mb-12">
|
||
<Card className={`${insetCardClass} h-full hover:border-primary/30`}>
|
||
<CardContent className="p-8">
|
||
<div className="mb-6">
|
||
<div className="inline-flex items-center justify-center h-16 w-16 rounded-full bg-primary text-primary-foreground text-2xl font-bold">
|
||
01
|
||
</div>
|
||
</div>
|
||
<h3 className="text-xl font-semibold mb-3">
|
||
Fill Out the Form
|
||
</h3>
|
||
<p className="text-muted-foreground text-sm leading-relaxed">
|
||
Start by filling out the service form with as much detail as
|
||
possible about your vending machine and the issue you're
|
||
experiencing. By providing detailed information upfront, you
|
||
help us save you time and money by allowing our technicians
|
||
to potentially diagnose the issue before arriving.
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
<Card className={`${insetCardClass} h-full hover:border-primary/30`}>
|
||
<CardContent className="p-8">
|
||
<div className="mb-6">
|
||
<div className="inline-flex items-center justify-center h-16 w-16 rounded-full bg-primary text-primary-foreground text-2xl font-bold">
|
||
02
|
||
</div>
|
||
</div>
|
||
<h3 className="text-xl font-semibold mb-3">
|
||
We'll Review Your Request
|
||
</h3>
|
||
<p className="text-muted-foreground text-sm leading-relaxed">
|
||
Once we receive your request, our team will review it and
|
||
contact you to confirm whether the issue can be resolved
|
||
virtually or needs in-person service.
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
<Card className={`${insetCardClass} h-full hover:border-primary/30`}>
|
||
<CardContent className="p-8">
|
||
<div className="mb-6">
|
||
<div className="inline-flex items-center justify-center h-16 w-16 rounded-full bg-primary text-primary-foreground text-2xl font-bold">
|
||
03
|
||
</div>
|
||
</div>
|
||
<h3 className="text-xl font-semibold mb-3">
|
||
Schedule Your Service
|
||
</h3>
|
||
<p className="text-muted-foreground text-sm leading-relaxed">
|
||
After reviewing your request, we'll help you schedule an
|
||
in-person service visit or a virtual session via Google
|
||
Meet. Virtual sessions will include payment details before
|
||
you can schedule a time. You won't be charged until you
|
||
select a time that works for you.
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
<Card className={`${insetCardClass} h-full hover:border-primary/30`}>
|
||
<CardContent className="p-8">
|
||
<div className="mb-6">
|
||
<div className="inline-flex items-center justify-center h-16 w-16 rounded-full bg-primary text-primary-foreground text-2xl font-bold">
|
||
04
|
||
</div>
|
||
</div>
|
||
<h3 className="text-xl font-semibold mb-3">
|
||
Get Your Machine Back Up and Running
|
||
</h3>
|
||
<p className="text-muted-foreground text-sm leading-relaxed">
|
||
Our expert technicians will repair your vending machine or
|
||
guide you step-by-step during the virtual session.
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* Request Service Form */}
|
||
<div
|
||
id="request-service"
|
||
className="max-w-3xl mx-auto scroll-mt-24"
|
||
>
|
||
<div className="text-center mb-8">
|
||
<h3 className="text-2xl font-bold tracking-tight mb-2 text-balance">
|
||
Request Service
|
||
</h3>
|
||
<p className="text-muted-foreground">
|
||
Tell us what your machine is doing and our team will help you
|
||
figure out the fastest next step.
|
||
</p>
|
||
</div>
|
||
<PublicSurface className="space-y-6 p-5 md:p-7">
|
||
<PublicInset className="flex flex-col gap-3 p-5 text-sm text-muted-foreground md:flex-row md:items-center md:justify-between">
|
||
<div>
|
||
<p className="font-semibold text-foreground">
|
||
Before you submit
|
||
</p>
|
||
<p className="mt-1 leading-relaxed">
|
||
Include the machine model, what it is doing, and whether
|
||
you need on-site help or virtual support.
|
||
</p>
|
||
</div>
|
||
<div className="flex flex-col gap-2 text-left md:text-right">
|
||
<a
|
||
href={businessConfig.publicCallUrl}
|
||
className="font-medium text-foreground hover:text-primary"
|
||
>
|
||
Call {businessConfig.publicCallNumber}
|
||
</a>
|
||
<a
|
||
href={businessConfig.publicSmsUrl}
|
||
className="font-medium text-foreground hover:text-primary"
|
||
>
|
||
Text photos or videos
|
||
</a>
|
||
</div>
|
||
</PublicInset>
|
||
<ContactForm defaultIntent="Repairs" />
|
||
</PublicSurface>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Brands Section */}
|
||
<section className="py-20 md:py-28 bg-background">
|
||
<div className="container mx-auto px-4 max-w-4xl">
|
||
<div className="text-center mb-12 md:mb-16">
|
||
<h2 className="text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl mb-4 text-balance">
|
||
Brands We Commonly Service
|
||
</h2>
|
||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto text-pretty leading-relaxed mb-8">
|
||
If you don't see your brand listed, feel free to reach out! We
|
||
may still be able to service it, but there are some brands we
|
||
may not support.{" "}
|
||
<Link
|
||
href="/contact-us"
|
||
className="text-primary hover:underline"
|
||
>
|
||
Contact us
|
||
</Link>
|
||
, and we'll let you know how we can help.
|
||
</p>
|
||
</div>
|
||
<div className="grid gap-8 md:grid-cols-3">
|
||
{/* Vending Machine Brands */}
|
||
<Card className={surfaceCardClass}>
|
||
<CardHeader>
|
||
<CardTitle className="text-2xl">
|
||
Vending Machine Brands We Commonly Service
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="px-6 pb-6 pt-0">
|
||
<ul className="space-y-2">
|
||
<li>• AMS (Automated Merchandising Systems)</li>
|
||
<li>• AP (Automatic Products)</li>
|
||
<li>• Cavalier</li>
|
||
<li>• CPI (Crane Payment Innovations)</li>
|
||
<li>• Crane National Vendors</li>
|
||
<li>• Dixie-Narco</li>
|
||
<li>• GPL (General Products Limited)</li>
|
||
<li>• HealthyYOU Vending</li>
|
||
<li>• National Vendors</li>
|
||
<li>• Quick Fresh Vending</li>
|
||
<li>• Royal Vendors</li>
|
||
<li>• Seaga</li>
|
||
<li>• USI (United Standard Industries)</li>
|
||
<li>• Vendo</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Card Reader Brands */}
|
||
<Card className={surfaceCardClass}>
|
||
<CardHeader>
|
||
<CardTitle className="text-2xl">
|
||
Card Reader Brands We Service
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="px-6 pb-6 pt-0">
|
||
<ul className="space-y-2">
|
||
<li>• Nayax</li>
|
||
<li>• USA Technologies/Cantaloupe</li>
|
||
<li>• Parlevel/365 Markets</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Bill Validator and Coin Mechanism Brands */}
|
||
<Card className={surfaceCardClass}>
|
||
<CardHeader>
|
||
<CardTitle className="text-2xl">
|
||
Bill Validator and Coin Mechanism Brands We Service
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="px-6 pb-6 pt-0">
|
||
<ul className="space-y-2">
|
||
<li>• CPI (Crane Payment Innovations)</li>
|
||
<li>• Coinco (PayComplete)</li>
|
||
<li>• Conlux</li>
|
||
<li>• Currenza</li>
|
||
<li>• ICT (Innovative Concepts in Technology)</li>
|
||
<li>• MEI (Mars Electronics International)</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Technologies Section */}
|
||
<section className="py-20 md:py-28 bg-muted/30">
|
||
<div className="container mx-auto px-4 max-w-4xl">
|
||
<div className="text-center mb-12 md:mb-16">
|
||
<h2 className="text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl mb-4 text-balance">
|
||
Technologies and Protocols We Service
|
||
</h2>
|
||
</div>
|
||
<Card className={surfaceCardClass}>
|
||
<CardContent className="p-6">
|
||
<p className="text-muted-foreground mb-6 leading-relaxed">
|
||
At Rocky Mountain Vending, we support three key vending
|
||
machine technologies to boost your business profitability. The
|
||
MDB (Multi-Drop Bus) protocol connects payment systems
|
||
seamlessly, ensuring smooth transactions. DEX (Data Exchange)
|
||
provides remote auditing of sales and inventory, helping you
|
||
optimize stock and reduce waste. CCI (Crane Connectivity
|
||
Interface) enhances cashless payments and telemetry,
|
||
increasing convenience and revenue potential. Together, these
|
||
technologies streamline operations and maximize your earnings.
|
||
</p>
|
||
<ul className="space-y-4">
|
||
<li className="flex items-start gap-3">
|
||
<CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
|
||
<span className="text-foreground">
|
||
<strong>CCI (Crane Connectivity Interface)</strong> – A
|
||
modern protocol for enhanced cashless payments and
|
||
telemetry integration; we can provide limited support.
|
||
</span>
|
||
</li>
|
||
<li className="flex items-start gap-3">
|
||
<CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
|
||
<span className="text-foreground">
|
||
<strong>DEX (Data Exchange)</strong> – A standard protocol
|
||
for auditing sales and inventory data remotely.
|
||
</span>
|
||
</li>
|
||
<li className="flex items-start gap-3">
|
||
<CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
|
||
<span className="text-foreground">
|
||
<strong>MDB (Multi-Drop Bus)</strong> – The
|
||
industry-standard protocol for connecting payment systems
|
||
to vending controllers.
|
||
</span>
|
||
</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</section>
|
||
|
||
{/* FAQ Section */}
|
||
{faqs.length > 0 && <FAQSection faqs={faqs} />}
|
||
|
||
{/* Virtual Services Section */}
|
||
{virtualServicesContent && (
|
||
<section className="py-20 md:py-28 bg-muted/30">
|
||
<div className="container mx-auto px-4 max-w-4xl">
|
||
<div className="text-center mb-12 md:mb-16">
|
||
<h2 className="text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl mb-4 text-balance">
|
||
Virtual Services
|
||
</h2>
|
||
</div>
|
||
<div className="space-y-8">
|
||
{/* How It Works */}
|
||
<div className="prose prose-lg max-w-none prose-headings:text-foreground prose-p:text-muted-foreground prose-a:text-foreground prose-a:hover:text-secondary prose-a:transition-colors">
|
||
<h3 className="text-2xl font-bold mb-4">How It Works</h3>
|
||
<p className="text-muted-foreground leading-relaxed">
|
||
Virtual support is a convenient way to resolve vending
|
||
machine issues remotely. Through a{" "}
|
||
<strong>Google Meet session</strong>, our expert technicians
|
||
will guide you step-by-step to troubleshoot and repair your
|
||
machine. This saves time and allows you to get back to
|
||
business quickly without waiting for an onsite visit.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Required Tools Card */}
|
||
<Card className={surfaceCardClass}>
|
||
<CardHeader>
|
||
<CardTitle className="text-2xl">What You'll Need</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="px-6 pb-6 pt-2">
|
||
<p className="text-muted-foreground mb-4 leading-relaxed">
|
||
To make the most of your virtual session, it's important
|
||
to be prepared with the necessary tools. Having the right
|
||
equipment on hand ensures we can troubleshoot effectively
|
||
and minimize delays.
|
||
</p>
|
||
<p className="text-muted-foreground mb-4 leading-relaxed">
|
||
<strong className="text-foreground">
|
||
Required Tools:
|
||
</strong>
|
||
</p>
|
||
<ul className="space-y-2">
|
||
<li className="flex items-start gap-3">
|
||
<CheckCircle2 className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
|
||
<span className="text-foreground">
|
||
Multimeter (to test electrical components)
|
||
</span>
|
||
</li>
|
||
<li className="flex items-start gap-3">
|
||
<CheckCircle2 className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
|
||
<span className="text-foreground">
|
||
11/32" Deep Socket Nut Driver (in case we need to
|
||
remove the bill or coin mechs)
|
||
</span>
|
||
</li>
|
||
<li className="flex items-start gap-3">
|
||
<CheckCircle2 className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
|
||
<span className="text-foreground">
|
||
#2 Phillips Screwdriver
|
||
</span>
|
||
</li>
|
||
<li className="flex items-start gap-3">
|
||
<CheckCircle2 className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
|
||
<span className="text-foreground">Socket Set</span>
|
||
</li>
|
||
<li className="flex items-start gap-3">
|
||
<CheckCircle2 className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
|
||
<span className="text-foreground">Pliers</span>
|
||
</li>
|
||
<li className="flex items-start gap-3">
|
||
<CheckCircle2 className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
|
||
<span className="text-foreground">
|
||
Any additional tools you would typically need to
|
||
service a vending machine
|
||
</span>
|
||
</li>
|
||
</ul>
|
||
<p className="text-muted-foreground mt-4 text-sm leading-relaxed">
|
||
Not having the right tools on hand will make it so we
|
||
won't be able to help you. There might be more tools that
|
||
you will need. In that case we if we know of these we will
|
||
advise you in advance of what you will need to get. Please
|
||
ensure you have these and are comfortable using these
|
||
tools. We can't do HVAC refill repairs.
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* How to Prepare Card */}
|
||
<Card className={surfaceCardClass}>
|
||
<CardHeader>
|
||
<CardTitle className="text-2xl">How to Prepare</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="px-6 pb-6 pt-2">
|
||
<ol className="space-y-4">
|
||
<li className="text-foreground">
|
||
<strong>Be On-Site with Your Machine:</strong>
|
||
<span className="text-muted-foreground block mt-2">
|
||
Ensure you're at the location of the vending machine
|
||
during the session.
|
||
</span>
|
||
</li>
|
||
<li className="text-foreground">
|
||
<strong>Stable Internet Connection:</strong>
|
||
<span className="text-muted-foreground block mt-2">
|
||
Make sure you have a stable internet connection for
|
||
the Google Meet call.
|
||
</span>
|
||
</li>
|
||
<li className="text-foreground">
|
||
<strong>Camera Device:</strong>
|
||
<span className="text-muted-foreground block mt-2">
|
||
Use a device with a camera so you can show our
|
||
technician the machine and any issues in real-time.
|
||
</span>
|
||
</li>
|
||
</ol>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Important Policies Card */}
|
||
<Card className={surfaceCardClass}>
|
||
<CardHeader>
|
||
<CardTitle className="text-2xl">
|
||
Important Policies
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="px-6 pb-6 pt-2">
|
||
<ul className="space-y-4">
|
||
<li className="flex items-start gap-3">
|
||
<CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
|
||
<div>
|
||
<strong className="text-foreground">Payment:</strong>
|
||
<span className="text-muted-foreground">
|
||
{" "}
|
||
All virtual sessions must be paid for upfront.
|
||
</span>
|
||
</div>
|
||
</li>
|
||
<li className="flex items-start gap-3">
|
||
<CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
|
||
<div>
|
||
<strong className="text-foreground">
|
||
Session Duration:
|
||
</strong>
|
||
<span className="text-muted-foreground">
|
||
{" "}
|
||
Sessions are scheduled in 30-minute increments.
|
||
Additional time can be purchased if needed.
|
||
</span>
|
||
</div>
|
||
</li>
|
||
<li className="flex items-start gap-3">
|
||
<CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
|
||
<div>
|
||
<strong className="text-foreground">
|
||
Cancellation Policy:
|
||
</strong>
|
||
<span className="text-muted-foreground">
|
||
{" "}
|
||
Cancellations must be made at least 48 hours in
|
||
advance to avoid being charged. We will send
|
||
reminders and confirmations with links to
|
||
reschedule.
|
||
</span>
|
||
</div>
|
||
</li>
|
||
<li className="flex items-start gap-3">
|
||
<CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
|
||
<div>
|
||
<strong className="text-foreground">No-Shows:</strong>
|
||
<span className="text-muted-foreground">
|
||
{" "}
|
||
If you miss your scheduled session, the full amount
|
||
will still be billed.
|
||
</span>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Schedule Your Virtual Session Today */}
|
||
<Card className={surfaceCardClass}>
|
||
<CardHeader>
|
||
<CardTitle className="text-2xl">
|
||
Schedule Your Virtual Session Today
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="px-6 pb-6 pt-2">
|
||
<p className="text-muted-foreground leading-relaxed mb-4">
|
||
Ready to get started? Fill out our{" "}
|
||
<Link
|
||
href="#request-service"
|
||
className="text-primary hover:underline font-semibold"
|
||
>
|
||
Service Request Form
|
||
</Link>{" "}
|
||
and select "Virtual Support" to book your session. Our
|
||
technicians are here to help you get your vending machine
|
||
up and running as quickly as possible.
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{/* Service Areas Section */}
|
||
<ServiceAreasSection />
|
||
</>
|
||
)
|
||
} catch (error) {
|
||
if (process.env.NODE_ENV === "development") {
|
||
console.error("Error rendering Repairs page:", error)
|
||
}
|
||
notFound()
|
||
}
|
||
}
|