"use client";
|
|
import Image from 'next/image';
|
import { motion } from 'framer-motion';
|
|
interface CardProps {
|
title: string;
|
description: string;
|
imageUrl: string;
|
onClick?: () => void;
|
}
|
|
const Card = ({ title, description, imageUrl, onClick }: CardProps) => {
|
return (
|
<motion.div
|
whileHover={{ scale: 1.02 }}
|
whileTap={{ scale: 0.98 }}
|
className="bg-white rounded-xl shadow-lg overflow-hidden cursor-pointer"
|
onClick={onClick}
|
>
|
<div className="relative h-48">
|
<Image
|
src={imageUrl}
|
alt={title}
|
fill
|
className="object-contain p-4"
|
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
/>
|
</div>
|
<div className="p-4">
|
<h3 className="text-lg font-semibold text-[#2F3C7E] mb-2">{title}</h3>
|
<p className="text-gray-600 text-sm">{description}</p>
|
</div>
|
</motion.div>
|
);
|
};
|
|
export default Card;
|
