DMleadgen
46d973904b
Next.js website for Rocky Mountain Vending company featuring: - Product catalog with Stripe integration - Service areas and parts pages - Admin dashboard with Clerk authentication - SEO optimized pages with JSON-LD structured data Co-authored-by: Cursor <cursoragent@cursor.com>
188 lines
9.5 KiB
TypeScript
188 lines
9.5 KiB
TypeScript
'use client'
|
|
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
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"
|
|
|
|
export function VendingMachinesPage() {
|
|
return (
|
|
<div className="container mx-auto px-4 py-16 md:py-24">
|
|
<div className="max-w-6xl mx-auto">
|
|
<header className="text-center mb-12 md:mb-16">
|
|
<h1 className="text-4xl md:text-5xl font-bold tracking-tight text-balance mb-4">
|
|
Vending Machines
|
|
</h1>
|
|
<div className="w-24 h-1 bg-gradient-to-r from-[var(--link-hover-color)] to-[var(--link-hover-color-dark)] mx-auto rounded-full" />
|
|
<p className="text-lg text-muted-foreground max-w-2xl mx-auto text-pretty leading-relaxed mt-6">
|
|
Browse our selection of high-quality vending machines for your business. We offer the latest technology with cashless payment options and advanced features.
|
|
</p>
|
|
</header>
|
|
|
|
<VendingMachinesShowcase />
|
|
|
|
<section className="mt-16 md:mt-24">
|
|
<h2 className="text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl mb-8 text-balance border-b border-border pb-4 text-center">
|
|
Why Choose Our Machines?
|
|
</h2>
|
|
<div className="grid gap-6 md:grid-cols-2 mb-12">
|
|
<div className="flex items-start gap-4">
|
|
<div className="flex-shrink-0 w-6 h-6 mt-1">
|
|
<CheckCircle2 className="w-6 h-6 text-primary" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-xl mb-2 text-foreground">100% FREE Service</h3>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
No upfront costs, installation fees, or monthly charges for qualifying businesses
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-4">
|
|
<div className="flex-shrink-0 w-6 h-6 mt-1">
|
|
<CheckCircle2 className="w-6 h-6 text-primary" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-xl mb-2 text-foreground">Modern Technology</h3>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
State-of-the-art machines with advanced features and reliable performance
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-4">
|
|
<div className="flex-shrink-0 w-6 h-6 mt-1">
|
|
<CheckCircle2 className="w-6 h-6 text-primary" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-xl mb-2 text-foreground">Cashless Payments</h3>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
Integrated credit card readers for convenient, secure transactions
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-4">
|
|
<div className="flex-shrink-0 w-6 h-6 mt-1">
|
|
<CheckCircle2 className="w-6 h-6 text-primary" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-xl mb-2 text-foreground">Full Service & Support</h3>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
Regular maintenance, restocking, and 24/7 customer support included
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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 Started?
|
|
</h2>
|
|
<p className="text-white/90 mb-8 max-w-2xl mx-auto text-lg leading-relaxed">
|
|
Contact us today to learn more about our free vending machine services and how we can help your business.
|
|
</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="/contact-us">Contact Us</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="/#request-machine">Get Free Machine</Link>
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</section>
|
|
|
|
<section className="mt-16 md:mt-24">
|
|
<h2 className="text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl mb-8 text-balance border-b border-border pb-4 text-center">
|
|
Our Services
|
|
</h2>
|
|
<div className="grid gap-6 md:grid-cols-3 mb-12">
|
|
<Card className="border-border/50 hover:border-secondary/50 transition-colors">
|
|
<CardContent className="p-6 text-center">
|
|
<Wrench className="w-12 h-12 text-primary mx-auto mb-4" />
|
|
<h3 className="font-semibold text-xl mb-2">Repairs & Maintenance</h3>
|
|
<p className="text-muted-foreground leading-relaxed mb-4">
|
|
Expert repair services to keep your machines running smoothly
|
|
</p>
|
|
<Button asChild variant="outline" className="w-full">
|
|
<Link href="/services">Learn More</Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="border-border/50 hover:border-secondary/50 transition-colors">
|
|
<CardContent className="p-6 text-center">
|
|
<MonitorSmartphone className="w-12 h-12 text-primary mx-auto mb-4" />
|
|
<h3 className="font-semibold text-xl mb-2">Moving Services</h3>
|
|
<p className="text-muted-foreground leading-relaxed mb-4">
|
|
Safe and efficient vending machine relocation
|
|
</p>
|
|
<Button asChild variant="outline" className="w-full">
|
|
<Link href="/services">Learn More</Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="border-border/50 hover:border-secondary/50 transition-colors">
|
|
<CardContent className="p-6 text-center">
|
|
<CreditCard className="w-12 h-12 text-primary mx-auto mb-4" />
|
|
<h3 className="font-semibold text-xl mb-2">Parts & Supplies</h3>
|
|
<p className="text-muted-foreground leading-relaxed mb-4">
|
|
Quality replacement parts and accessories
|
|
</p>
|
|
<Button asChild variant="outline" className="w-full">
|
|
<Link href="/manuals">Shop Parts</Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="mt-16 md:mt-24">
|
|
<h2 className="text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl mb-8 text-balance border-b border-border pb-4 text-center">
|
|
Machine Features
|
|
</h2>
|
|
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4 mb-12">
|
|
<Card className="border-border/50 hover:border-secondary/50 transition-colors">
|
|
<CardContent className="p-6 text-center">
|
|
<Package className="w-10 h-10 text-primary mx-auto mb-3" />
|
|
<h3 className="font-semibold text-lg mb-2">Healthy Options</h3>
|
|
<p className="text-sm text-muted-foreground leading-relaxed">
|
|
Wide selection of nutritious snacks and beverages
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="border-border/50 hover:border-secondary/50 transition-colors">
|
|
<CardContent className="p-6 text-center">
|
|
<CreditCard className="w-10 h-10 text-primary mx-auto mb-3" />
|
|
<h3 className="font-semibold text-lg mb-2">Cashless Payment</h3>
|
|
<p className="text-sm text-muted-foreground leading-relaxed">
|
|
Accept credit/debit cards and mobile payments
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="border-border/50 hover:border-secondary/50 transition-colors">
|
|
<CardContent className="p-6 text-center">
|
|
<Wrench className="w-10 h-10 text-primary mx-auto mb-3" />
|
|
<h3 className="font-semibold text-lg mb-2">Easy Maintenance</h3>
|
|
<p className="text-sm text-muted-foreground leading-relaxed">
|
|
Remote monitoring and quick service response
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="border-border/50 hover:border-secondary/50 transition-colors">
|
|
<CardContent className="p-6 text-center">
|
|
<MonitorSmartphone className="w-10 h-10 text-primary mx-auto mb-3" />
|
|
<h3 className="font-semibold text-lg mb-2">Smart Technology</h3>
|
|
<p className="text-sm text-muted-foreground leading-relaxed">
|
|
Track inventory and sales in real-time
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
|