39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import {
|
|
Card,
|
|
CardContent,
|
|
CardHeader,
|
|
CardTitle
|
|
} from "@/components/ui/Card";
|
|
import Image from "next/image";
|
|
|
|
interface CustomCardProps {
|
|
title: string;
|
|
description: string;
|
|
imageSrc: string;
|
|
imageAlt: string;
|
|
}
|
|
|
|
export function CustomCard({ title, description, imageSrc, imageAlt }: CustomCardProps) {
|
|
return (
|
|
<Card className="flex flex-col h-[492px] rounded-none shadow-none border-none bg-[#FAFAFA] overflow-hidden group">
|
|
<div className="w-full h-[269px] relative bg-white overflow-hidden">
|
|
<Image
|
|
src={imageSrc}
|
|
alt={imageAlt}
|
|
fill
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 33vw, 405px"
|
|
className="object-cover transition-transform duration-300 group-hover:scale-105"
|
|
priority
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col flex-grow p-6">
|
|
<CardHeader className="p-0 mb-4">
|
|
<CardTitle className="text-[28px] leading-[36px] font-allenoire transition-colors duration-300 group-hover:text-primary">{title}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="p-0">
|
|
<p className="text-[16px] leading-[26px] line-clamp-4 font-poppins">{description}</p>
|
|
</CardContent>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|