52 lines
1.5 KiB
TypeScript
Executable File
52 lines
1.5 KiB
TypeScript
Executable File
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { ArrowRight } from 'lucide-react';
|
|
|
|
interface ServiceCardProps {
|
|
title: string;
|
|
description: string;
|
|
image: string;
|
|
imageAlt: string;
|
|
href: string;
|
|
features?: string[];
|
|
}
|
|
|
|
export function ServiceCard({ title, description, image, imageAlt, href, features }: ServiceCardProps) {
|
|
return (
|
|
<Card className="overflow-hidden hover:shadow-lg transition-shadow">
|
|
<div className="aspect-square relative">
|
|
<Image
|
|
src={image}
|
|
alt={imageAlt}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
<CardHeader>
|
|
<CardTitle className="text-xl">{title}</CardTitle>
|
|
<CardDescription className="text-base">{description}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{features && (
|
|
<ul className="space-y-2 mb-6">
|
|
{features.slice(0, 3).map((feature, index) => (
|
|
<li key={index} className="flex items-center text-sm text-slate">
|
|
<div className="w-1.5 h-1.5 bg-teal rounded-full mr-2" />
|
|
{feature}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
<Button asChild className="w-full">
|
|
<Link href={href}>
|
|
Learn More
|
|
<ArrowRight className="ml-2 h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|