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>
42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import Image from "next/image"
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
|
|
interface FeatureCardProps {
|
|
image: string
|
|
alt: string
|
|
title: string
|
|
description: string
|
|
imageWidth?: number
|
|
imageHeight?: number
|
|
}
|
|
|
|
export function FeatureCard({
|
|
image,
|
|
alt,
|
|
title,
|
|
description,
|
|
imageWidth = 247,
|
|
imageHeight = 300,
|
|
}: FeatureCardProps) {
|
|
return (
|
|
<Card className="border-border/50 overflow-hidden hover:border-secondary/50 transition-colors h-full flex flex-col">
|
|
<CardContent className="p-6 flex flex-col items-center text-center flex-1">
|
|
<div className="relative w-full max-w-[200px] mb-4">
|
|
<Image
|
|
src={image}
|
|
alt={alt}
|
|
width={imageWidth}
|
|
height={imageHeight}
|
|
className="rounded-lg shadow-lg w-auto h-auto object-contain"
|
|
/>
|
|
</div>
|
|
<h3 className="text-xl font-semibold mb-2">{title}</h3>
|
|
<p className="text-sm text-muted-foreground leading-relaxed flex-1">
|
|
{description}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
|