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>
71 lines
2.7 KiB
TypeScript
71 lines
2.7 KiB
TypeScript
import { Card, CardContent } from "@/components/ui/card"
|
|
import { Wrench, MonitorSmartphone, CreditCard, Sparkles } from "lucide-react"
|
|
import Link from "next/link"
|
|
|
|
const features = [
|
|
{
|
|
icon: Sparkles,
|
|
title: "Zero Cost Installation",
|
|
description:
|
|
"Get your vending machine installed completely free. No upfront costs, no hidden fees, no commitments.",
|
|
link: "/about",
|
|
linkText: "Learn More",
|
|
},
|
|
{
|
|
icon: Wrench,
|
|
title: "Full Maintenance Support",
|
|
description: "We handle all repairs, restocking, and maintenance. Your only job is to enjoy the convenience.",
|
|
link: "/services/repairs",
|
|
linkText: "View Repair Services",
|
|
},
|
|
{
|
|
icon: MonitorSmartphone,
|
|
title: "24/7 Remote Monitoring",
|
|
description: "Advanced monitoring systems ensure machines are always stocked and functioning properly.",
|
|
link: "/services",
|
|
linkText: "Our Services",
|
|
},
|
|
{
|
|
icon: CreditCard,
|
|
title: "All Payment Options",
|
|
description: "Accept cash, credit cards, mobile payments, and more. Modern cashless payment technology included.",
|
|
link: "/contact-us",
|
|
linkText: "Contact Us",
|
|
},
|
|
]
|
|
|
|
export function FeaturesSection() {
|
|
return (
|
|
<section className="py-20 md:py-28 bg-muted/30">
|
|
<div className="container mx-auto px-4">
|
|
<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">
|
|
We make vending simple, reliable, and completely hassle-free for your business.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
|
|
{features.map((feature, index) => (
|
|
<Link key={index} href={feature.link}>
|
|
<Card className="border-border/50 hover:border-secondary/50 transition-all hover:shadow-lg h-full cursor-pointer">
|
|
<CardContent className="pt-6 flex flex-col h-full">
|
|
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
|
|
<feature.icon className="h-6 w-6 text-primary" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
|
|
<p className="text-muted-foreground text-sm leading-relaxed flex-grow">{feature.description}</p>
|
|
<p className="text-primary text-sm font-medium mt-4 hover:underline">
|
|
{feature.linkText} →
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|