124 lines
6.3 KiB
TypeScript
124 lines
6.3 KiB
TypeScript
'use client'
|
|
|
|
import { Button } from "@/components/ui/button"
|
|
import { VendingMachinesShowcase } from "@/components/vending-machines-showcase"
|
|
import { CheckCircle2, CreditCard, MonitorSmartphone, Package, Wrench } from "lucide-react"
|
|
import Link from "next/link"
|
|
import { PublicInset, PublicPageHeader, PublicSurface } from "@/components/public-surface"
|
|
|
|
export function VendingMachinesPage() {
|
|
return (
|
|
<div className="container mx-auto px-4 py-10 md:py-14">
|
|
<PublicPageHeader
|
|
align="center"
|
|
eyebrow="Machine Options"
|
|
title="Modern vending machines with a cleaner Rocky Mountain Vending presentation."
|
|
description="Browse the machines we use, the features we prioritize, and the support that comes with every installation. This page now matches the rest of the site instead of feeling like a separate design system."
|
|
/>
|
|
|
|
<div className="mt-10">
|
|
<VendingMachinesShowcase />
|
|
</div>
|
|
|
|
<section className="mt-12 grid gap-6 lg:grid-cols-[1.1fr_0.9fr]">
|
|
<PublicSurface>
|
|
<h2 className="text-3xl font-semibold tracking-tight text-balance">Why choose our machines?</h2>
|
|
<div className="mt-6 grid gap-5 md:grid-cols-2">
|
|
{[
|
|
["100% FREE service", "No upfront costs, installation fees, or monthly charges for qualifying businesses."],
|
|
["Modern technology", "Current equipment with reliable performance and updated features."],
|
|
["Cashless payments", "Integrated card readers and secure payment options for modern locations."],
|
|
["Full service and support", "Maintenance, restocking, and local follow-up are part of the experience."],
|
|
].map(([title, body]) => (
|
|
<div key={title} className="flex items-start gap-4 rounded-[1.5rem] border border-border/60 bg-background/85 p-5 shadow-sm">
|
|
<CheckCircle2 className="mt-0.5 h-6 w-6 shrink-0 text-primary" />
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-foreground">{title}</h3>
|
|
<p className="mt-2 text-sm leading-relaxed text-muted-foreground">{body}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</PublicSurface>
|
|
|
|
<PublicSurface className="bg-[linear-gradient(145deg,rgba(78,137,66,0.98),rgba(31,74,32,0.98))] text-white">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-white/75">Get Started</p>
|
|
<h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">Ready to talk through the right machine setup?</h2>
|
|
<p className="mt-3 text-base leading-relaxed text-white/82">
|
|
We can help with free placement, sales questions, feature comparisons, and planning the best layout for your location.
|
|
</p>
|
|
<div className="mt-6 flex flex-col gap-3 sm:flex-row">
|
|
<Button asChild size="lg" className="h-11 rounded-full bg-white px-6 text-primary hover:bg-white/92">
|
|
<Link href="/contact-us#contact-form">Contact Us</Link>
|
|
</Button>
|
|
<Button asChild size="lg" variant="outline" className="h-11 rounded-full border-white/50 bg-transparent px-6 text-white hover:bg-white/10">
|
|
<Link href="/#request-machine">Get Free Machine</Link>
|
|
</Button>
|
|
</div>
|
|
</PublicSurface>
|
|
</section>
|
|
|
|
<section className="mt-12">
|
|
<PublicSurface>
|
|
<h2 className="text-3xl font-semibold tracking-tight text-balance">Our services around the machines</h2>
|
|
<div className="mt-6 grid gap-5 md:grid-cols-3">
|
|
{[
|
|
{
|
|
icon: Wrench,
|
|
title: "Repairs & Maintenance",
|
|
body: "Expert service to keep machines running smoothly.",
|
|
href: "/services/repairs",
|
|
cta: "Repairs",
|
|
},
|
|
{
|
|
icon: MonitorSmartphone,
|
|
title: "Moving Services",
|
|
body: "Safe and efficient vending machine relocation when layouts change.",
|
|
href: "/services/moving",
|
|
cta: "Moving",
|
|
},
|
|
{
|
|
icon: CreditCard,
|
|
title: "Parts & Manuals",
|
|
body: "Replacement parts, manuals, and support resources for major brands.",
|
|
href: "/manuals",
|
|
cta: "Manuals",
|
|
},
|
|
].map((service) => (
|
|
<PublicInset key={service.title} className="h-full p-5 text-center">
|
|
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
|
|
<service.icon className="h-6 w-6" />
|
|
</div>
|
|
<h3 className="mt-4 text-xl font-semibold">{service.title}</h3>
|
|
<p className="mt-2 text-sm leading-relaxed text-muted-foreground">{service.body}</p>
|
|
<Button asChild variant="outline" className="mt-5 h-10 rounded-full px-4">
|
|
<Link href={service.href}>{service.cta}</Link>
|
|
</Button>
|
|
</PublicInset>
|
|
))}
|
|
</div>
|
|
</PublicSurface>
|
|
</section>
|
|
|
|
<section className="mt-12">
|
|
<PublicSurface>
|
|
<h2 className="text-3xl font-semibold tracking-tight text-balance">Machine features customers ask about most</h2>
|
|
<div className="mt-6 grid gap-5 md:grid-cols-2 xl:grid-cols-4">
|
|
{[
|
|
[Package, "Healthy Options", "Wide selection of nutritious snacks and beverages."],
|
|
[CreditCard, "Cashless Payment", "Accept cards and mobile payments with modern hardware."],
|
|
[Wrench, "Easy Maintenance", "Remote monitoring and quick service response when issues come up."],
|
|
[MonitorSmartphone, "Smart Technology", "Track inventory and sales with better visibility."],
|
|
].map(([Icon, title, body]) => (
|
|
<PublicInset key={title} className="h-full p-5 text-center">
|
|
<Icon className="mx-auto h-10 w-10 text-primary" />
|
|
<h3 className="mt-4 text-lg font-semibold">{title}</h3>
|
|
<p className="mt-2 text-sm leading-relaxed text-muted-foreground">{body}</p>
|
|
</PublicInset>
|
|
))}
|
|
</div>
|
|
</PublicSurface>
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|