ztp-next/app/components/Card.jsx

'use client'

import Link from 'next/link';
import { useState } from 'react';

const Card = ({ title, text, url }) => {
    const [isHovered, setIsHovered] = useState(false);

    const handleMouseEnter = () => {
        setIsHovered(true);
    };

    const handleMouseLeave = () => {
        setIsHovered(false);
    };

    const cardStyle = {
        boxShadow: isHovered ? '0 4px 20px rgba(0, 0, 0, 0.2)' : '0 1px 3px rgba(0, 0, 0, 0.1)',
        transition: 'box-shadow 0.3s ease-in-out',
    };

    return (
        <div className="col-md-6 mb-4">
            <Link href={url} className="text-decoration-none">
                <div
                    className="card h-100"
                    style={cardStyle}
                    onMouseEnter={handleMouseEnter}
                    onMouseLeave={handleMouseLeave}
                >
                    <div className="card-body text-center">
                        <h5 className="card-title">{title}</h5>
                        <p className="card-text">{text}</p>
                    </div>
                </div>
            </Link>
        </div>
    );
};

export default Card;