287 lines
13 KiB
TypeScript
287 lines
13 KiB
TypeScript
"use client"
|
|
|
|
import { ReactNode } from "react"
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
import { Button } from "@/components/ui/button"
|
|
import Link from "next/link"
|
|
import { CheckCircle2, Wrench, Clock, Phone, Shield } from "lucide-react"
|
|
|
|
interface RepairsPageProps {
|
|
title: string
|
|
content: ReactNode
|
|
}
|
|
|
|
export function RepairsPage({ title, content }: RepairsPageProps) {
|
|
return (
|
|
<>
|
|
{/* Hero Header */}
|
|
<section className="py-20 md:py-28">
|
|
<div className="container mx-auto px-4">
|
|
<header className="text-center mb-12 md:mb-16 max-w-4xl mx-auto">
|
|
<h1 className="text-4xl md:text-5xl font-bold tracking-tight text-balance mb-4">
|
|
{typeof title === "string"
|
|
? title.replace(/<[^>]*>/g, "")
|
|
: title}
|
|
</h1>
|
|
<p className="text-lg text-muted-foreground max-w-3xl mx-auto leading-relaxed text-pretty">
|
|
Rocky Mountain Vending delivers expert vending machine repair 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.
|
|
</p>
|
|
</header>
|
|
|
|
{/* Main Content */}
|
|
<div id="request-service" className="scroll-mt-8 max-w-4xl mx-auto">
|
|
<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">
|
|
<div className="text-foreground leading-relaxed space-y-6 text-base md:text-lg">
|
|
{content}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Services Cards Section */}
|
|
<section className="py-20 md:py-28 bg-muted/30">
|
|
<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">
|
|
Our Repair Services
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground max-w-2xl mx-auto text-pretty leading-relaxed">
|
|
Comprehensive repair and maintenance services to keep your machines
|
|
running smoothly
|
|
</p>
|
|
</div>
|
|
|
|
<div className="container mx-auto px-4">
|
|
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
|
<Card className="border-border/50 hover:border-secondary/50 transition-colors">
|
|
<CardContent className="pt-6">
|
|
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
|
|
<Wrench className="h-6 w-6 text-primary" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold mb-2">
|
|
Diagnostics & Fixes
|
|
</h3>
|
|
<p className="text-muted-foreground text-sm leading-relaxed">
|
|
Diagnosing and fixing vending machine errors quickly and
|
|
efficiently
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-border/50 hover:border-secondary/50 transition-colors">
|
|
<CardContent className="pt-6">
|
|
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
|
|
<Wrench className="h-6 w-6 text-primary" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold mb-2">Payment Systems</h3>
|
|
<p className="text-muted-foreground text-sm leading-relaxed">
|
|
Bill and coin mechanism repairs, card reader troubleshooting
|
|
and setup
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-border/50 hover:border-secondary/50 transition-colors">
|
|
<CardContent className="pt-6">
|
|
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
|
|
<Wrench className="h-6 w-6 text-primary" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold mb-2">Refrigeration</h3>
|
|
<p className="text-muted-foreground text-sm leading-relaxed">
|
|
Refrigeration system maintenance and repair to keep products
|
|
cold
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-border/50 hover:border-secondary/50 transition-colors">
|
|
<CardContent className="pt-6">
|
|
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
|
|
<Wrench className="h-6 w-6 text-primary" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold mb-2">Software & Setup</h3>
|
|
<p className="text-muted-foreground text-sm leading-relaxed">
|
|
Software updates, programming, machine calibration and
|
|
inventory setup
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-border/50 hover:border-secondary/50 transition-colors">
|
|
<CardContent className="pt-6">
|
|
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
|
|
<Shield className="h-6 w-6 text-primary" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold mb-2">
|
|
Preventative Maintenance
|
|
</h3>
|
|
<p className="text-muted-foreground text-sm leading-relaxed">
|
|
Regular maintenance services to prevent issues before they
|
|
occur
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-border/50 hover:border-secondary/50 transition-colors">
|
|
<CardContent className="pt-6">
|
|
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
|
|
<Wrench className="h-6 w-6 text-primary" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold mb-2">
|
|
Card Reader Upgrades
|
|
</h3>
|
|
<p className="text-muted-foreground text-sm leading-relaxed">
|
|
Credit card reader upgrade and installation for modern payment
|
|
options
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Why Choose Us Section */}
|
|
<section className="py-20 md:py-28">
|
|
<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">
|
|
Why Choose Rocky Mountain Vending?
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground max-w-2xl mx-auto text-pretty leading-relaxed">
|
|
Local experts with over 10 years of experience serving Salt Lake
|
|
City and surrounding areas
|
|
</p>
|
|
</div>
|
|
|
|
<div className="container mx-auto px-4">
|
|
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
|
<Card className="border-border/50 hover:border-secondary/50 transition-colors">
|
|
<CardContent className="pt-6">
|
|
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
|
|
<CheckCircle2 className="h-6 w-6 text-primary" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold mb-2">Local Experts</h3>
|
|
<p className="text-muted-foreground text-sm leading-relaxed">
|
|
Serving Salt Lake City for over 10 years with deep knowledge
|
|
of local needs
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-border/50 hover:border-secondary/50 transition-colors">
|
|
<CardContent className="pt-6">
|
|
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
|
|
<Clock className="h-6 w-6 text-primary" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold mb-2">
|
|
Fast Response Times
|
|
</h3>
|
|
<p className="text-muted-foreground text-sm leading-relaxed">
|
|
Quick service to minimize downtime and get your machines back
|
|
in operation
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-border/50 hover:border-secondary/50 transition-colors">
|
|
<CardContent className="pt-6">
|
|
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
|
|
<Wrench className="h-6 w-6 text-primary" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold mb-2">All Major Brands</h3>
|
|
<p className="text-muted-foreground text-sm leading-relaxed">
|
|
Experienced technicians familiar with all major vending
|
|
machine brands
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-border/50 hover:border-secondary/50 transition-colors">
|
|
<CardContent className="pt-6">
|
|
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
|
|
<CheckCircle2 className="h-6 w-6 text-primary" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold mb-2">
|
|
Affordable Service Plans
|
|
</h3>
|
|
<p className="text-muted-foreground text-sm leading-relaxed">
|
|
Service plans tailored to your needs with competitive pricing
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-border/50 hover:border-secondary/50 transition-colors">
|
|
<CardContent className="pt-6">
|
|
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
|
|
<Shield className="h-6 w-6 text-primary" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold mb-2">
|
|
Preventative Maintenance
|
|
</h3>
|
|
<p className="text-muted-foreground text-sm leading-relaxed">
|
|
Regular maintenance services to keep your machines running
|
|
smoothly
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-border/50 hover:border-secondary/50 transition-colors">
|
|
<CardContent className="pt-6">
|
|
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
|
|
<CheckCircle2 className="h-6 w-6 text-primary" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold mb-2">
|
|
Expert Problem Solving
|
|
</h3>
|
|
<p className="text-muted-foreground text-sm leading-relaxed">
|
|
We've often come in and fixed problems others couldn't fix
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="py-20 md:py-28 bg-muted/30">
|
|
<div className="container mx-auto px-4">
|
|
<Card className="border-2 shadow-lg [&>div]:!bg-transparent bg-gradient-to-r from-[var(--primary)] to-[#1d7a35]">
|
|
<CardContent className="p-10 md:p-12 text-center">
|
|
<h2 className="text-2xl md:text-3xl font-bold text-white mb-4 tracking-tight text-balance">
|
|
Ready to Get Your Machine Fixed?
|
|
</h2>
|
|
<p className="text-white/90 mb-8 max-w-2xl mx-auto text-lg leading-relaxed">
|
|
Contact us today for fast, professional solutions. Our expert
|
|
technicians are ready to help you get your vending machine back
|
|
up and running.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
className="bg-white text-[var(--primary)] hover:bg-white/90 text-lg h-12 px-8 font-semibold"
|
|
>
|
|
<Link href="#request-service">Request Service</Link>
|
|
</Button>
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
variant="outline"
|
|
className="bg-transparent border-2 border-white text-white hover:bg-white/10 text-lg h-12 px-8 font-semibold"
|
|
>
|
|
<Link href="tel:+14352339668">
|
|
<Phone className="mr-2 h-5 w-5" />
|
|
Call (435) 233-9668
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
</>
|
|
)
|
|
}
|