Rocky_Mountain_Vending/components/reviews-page.tsx
DMleadgen 46d973904b
Initial commit: Rocky Mountain Vending website
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>
2026-02-12 16:22:15 -07:00

205 lines
10 KiB
TypeScript

'use client'
import { Card, CardContent } from "@/components/ui/card"
import { Star } from "lucide-react"
export function ReviewsPage() {
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">
Customer Reviews
</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 mt-6 text-pretty leading-relaxed">
Read authentic customer reviews and testimonials about Rocky Mountain Vending&apos;s exceptional vending services in Utah. Discover why businesses trust us for free vending machines, reliable service, and outstanding customer support across Salt Lake City, Ogden, Provo, and surrounding areas.
</p>
</header>
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
{/* Review 1 */}
<Card className="border-border/50 hover:border-secondary/50 transition-colors">
<CardContent className="p-6">
<div className="flex items-center gap-1 mb-4">
{[1, 2, 3, 4, 5].map((i) => (
<Star key={i} className="w-5 h-5" />
))}
</div>
<p className="text-foreground font-semibold mb-2">Excellent Service!</p>
<p className="text-muted-foreground leading-relaxed">
Rocky Mountain Vending has been fantastic for our office. The machines are always well-stocked and working perfectly. Highly recommend!
</p>
<p className="text-sm text-muted-foreground mt-4 font-medium">
Sarah M., Salt Lake City
</p>
</CardContent>
</Card>
{/* Review 2 */}
<Card className="border-border/50 hover:border-secondary/50 transition-colors">
<CardContent className="p-6">
<div className="flex items-center gap-1 mb-4">
{[1, 2, 3, 4, 5].map((i) => (
<Star key={i} className="w-5 h-5" />
))}
</div>
<p className="text-foreground font-semibold mb-2">Professional and Reliable</p>
<p className="text-muted-foreground leading-relaxed">
We&apos;ve been working with Rocky Mountain Vending for over a year now. Their team is professional, responsive, and always goes above and beyond.
</p>
<p className="text-sm text-muted-foreground mt-4 font-medium">
John D., Ogden
</p>
</CardContent>
</Card>
{/* Review 3 */}
<Card className="border-border/50 hover:border-secondary/50 transition-colors">
<CardContent className="p-6">
<div className="flex items-center gap-1 mb-4">
{[1, 2, 3, 4, 5].map((i) => (
<Star key={i} className="w-5 h-5" />
))}
</div>
<p className="text-foreground font-semibold mb-2">Great Selection</p>
<p className="text-muted-foreground leading-relaxed">
Our employees love the healthy snack options and variety available. The free installation and maintenance service is a huge plus for our business.
</p>
<p className="text-sm text-muted-foreground mt-4 font-medium">
Michelle R., Provo
</p>
</CardContent>
</Card>
{/* Review 4 */}
<Card className="border-border/50 hover:border-secondary/50 transition-colors">
<CardContent className="p-6">
<div className="flex items-center gap-1 mb-4">
{[1, 2, 3, 4, 5].map((i) => (
<Star key={i} className="w-5 h-5" />
))}
</div>
<p className="text-foreground font-semibold mb-2">Outstanding Customer Service</p>
<p className="text-muted-foreground leading-relaxed">
Whenever we have an issue, the team responds quickly and resolves it the same day. It&apos;s rare to find this level of service today.
</p>
<p className="text-sm text-muted-foreground mt-4 font-medium">
David K., Sandy
</p>
</CardContent>
</Card>
{/* Review 5 */}
<Card className="border-border/50 hover:border-secondary/50 transition-colors">
<CardContent className="p-6">
<div className="flex items-center gap-1 mb-4">
{[1, 2, 3, 4, 5].map((i) => (
<Star key={i} className="w-5 h-5" />
))}
</div>
<p className="text-foreground font-semibold mb-2">Highly Recommended</p>
<p className="text-muted-foreground leading-relaxed">
Best vending service we&apos;ve ever used. Free machines, regular restocking, and great communication. What more could you ask for?
</p>
<p className="text-sm text-muted-foreground mt-4 font-medium">
Lisa T., West Valley City
</p>
</CardContent>
</Card>
{/* Review 6 */}
<Card className="border-border/50 hover:border-secondary/50 transition-colors">
<CardContent className="p-6">
<div className="flex items-center gap-1 mb-4">
{[1, 2, 3, 4, 5].map((i) => (
<Star key={i} className="w-5 h-5" />
))}
</div>
<p className="text-foreground font-semibold mb-2">Local Business We Trust</p>
<p className="text-muted-foreground leading-relaxed">
Supporting a local, family-owned business feels good. They really care about their customers and it shows in everything they do.
</p>
<p className="text-sm text-muted-foreground mt-4 font-medium">
Robert P., Bountiful
</p>
</CardContent>
</Card>
</div>
<section className="mt-20 max-w-6xl mx-auto">
<div className="border border-border/40 rounded-lg bg-secondary/5 p-8 md:p-12">
<h2 className="text-3xl font-bold tracking-tight md:text-4xl mb-6 text-balance">
Why Customers Choose Rocky Mountain Vending
</h2>
<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 mb-8" />
<div className="space-y-6">
<div>
<h3 className="text-xl font-semibold mb-3 text-foreground">100% FREE Installation</h3>
<p className="text-lg text-muted-foreground text-pretty leading-relaxed">
No upfront costs or hidden fees. We provide and install vending machines at no charge to your business.
</p>
</div>
<div>
<h3 className="text-xl font-semibold mb-3 text-foreground">Regular Restocking & Maintenance</h3>
<p className="text-lg text-muted-foreground text-pretty leading-relaxed">
Our team regularly services and restocks machines to ensure they&apos;re always fully operational and meeting customer needs.
</p>
</div>
<div>
<h3 className="text-xl font-semibold mb-3 text-foreground">Wide Product Variety</h3>
<p className="text-lg text-muted-foreground text-pretty leading-relaxed">
From traditional snacks and beverages to healthy options, we customize product selection to match your customers&apos; preferences.
</p>
</div>
<div>
<h3 className="text-xl font-semibold mb-3 text-foreground">Fast, Local Support</h3>
<p className="text-lg text-muted-foreground text-pretty leading-relaxed">
Based in Utah, we provide quick response times and personalized service. Call us anytime at (435) 233-9668.
</p>
</div>
<div>
<h3 className="text-xl font-semibold mb-3 text-foreground">Flexible Service Options</h3>
<p className="text-lg text-muted-foreground text-pretty leading-relaxed">
Whether you need one machine or multiple locations, we scale to meet your business needs and growth.
</p>
</div>
</div>
</div>
</section>
<section className="mt-20 max-w-6xl mx-auto">
<div className="text-center">
<h2 className="text-3xl font-bold tracking-tight md:text-4xl mb-6 text-balance">
Share Your Experience
</h2>
<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 mb-8" />
<p className="text-lg text-muted-foreground max-w-2xl mx-auto mb-8 text-pretty leading-relaxed">
We value your feedback and are constantly improving our services. Whether you&apos;re a current customer or considering Rocky Mountain Vending for your business, we&apos;d love to hear from you.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Card className="border-secondary/20 bg-secondary/5 p-6 flex-1">
<CardContent className="p-0">
<h3 className="text-xl font-semibold mb-3 text-foreground">Current Customer</h3>
<p className="text-muted-foreground leading-relaxed mb-4">
Share your experience with our services and help us serve you better.
</p>
</CardContent>
</Card>
<Card className="border-secondary/20 bg-secondary/5 p-6 flex-1">
<CardContent className="p-0">
<h3 className="text-xl font-semibold mb-3 text-foreground">Business Inquiry</h3>
<p className="text-muted-foreground leading-relaxed mb-4">
Learn how we can provide free vending solutions for your business.
</p>
</CardContent>
</Card>
</div>
</div>
</section>
</div>
</div>
)
}