1  // Card.js
 2  // import Image from "next/image";
 3  // import Link from "next/link";
 4  import { Link } from "react-router";
 5  import React from "react";
 6  
 7  interface CardProps {
 8    title: string;
 9    imageUrl: string;
10    description: string;
11    buttonText: string;
12    buttonLink: string;
13  }
14  
15  const Card: React.FC<CardProps> = ({
16    title,
17    imageUrl,
18    description,
19    buttonText,
20    buttonLink,
21  }) => {
22    return (
23      <div className="w-full rounded overflow-hidden shadow-lg md:m-4">
24        <img
25          className="w-full"
26          src={imageUrl}
27          alt="Card image cap"
28          width="1000"
29          height={1000}
30        />
31        <div className="px-6 py-4">
32          <div className="font-bold text-xl mb-2">{title}</div>
33          <p className="text-gray-700 text-base">{description}</p>
34        </div>
35        <div className="px-6 pb-4">
36          <Link
37            to={buttonLink}
38            className="bg-[#1984c7] text-white font-bold py-2 px-4 rounded"
39          >
40            {buttonText}
41          </Link>
42        </div>
43      </div>
44    );
45  };
46  
47  export default Card;