63 lines
1.7 KiB
JavaScript
63 lines
1.7 KiB
JavaScript
// import { motion } from "framer-motion";
|
|
// import { Link } from "react-router-dom";
|
|
|
|
// const TrendingCard = ({ title, img, href }) => {
|
|
// return (
|
|
// <motion.div
|
|
// whileHover={{ scale: 1.04 }}
|
|
// className="bg-white rounded-xl shadow-sm hover:shadow-md overflow-hidden transition-all"
|
|
// >
|
|
// <Link to={href}>
|
|
// <img
|
|
// src={img}
|
|
// alt={title}
|
|
// className="w-full h-36 object-cover"
|
|
// />
|
|
// <div className="p-3 text-center">
|
|
// <h4 className="text-sm font-semibold text-gray-800">
|
|
// {title}
|
|
// </h4>
|
|
// </div>
|
|
// </Link>
|
|
// </motion.div>
|
|
// );
|
|
// };
|
|
|
|
// export default TrendingCard;
|
|
|
|
|
|
|
|
|
|
import { motion } from "framer-motion";
|
|
import { Link } from "react-router-dom";
|
|
|
|
const TrendingCard = ({ title, img, href }) => {
|
|
return (
|
|
<motion.div
|
|
whileHover={{ scale: 1.05 }}
|
|
className="relative bg-white rounded-2xl shadow-lg overflow-hidden cursor-pointer transition-all duration-300"
|
|
>
|
|
<Link to={href}>
|
|
{/* Image */}
|
|
<img
|
|
src={img || "/default-product.png"}
|
|
alt={title}
|
|
className="w-full h-44 md:h-52 object-cover transition-transform duration-500 hover:scale-105"
|
|
/>
|
|
|
|
{/* Gradient Overlay */}
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent"></div>
|
|
|
|
{/* Title */}
|
|
<div className="absolute bottom-3 left-3 right-3 text-center">
|
|
<h4 className="text-white font-semibold text-sm md:text-base drop-shadow-md">
|
|
{title}
|
|
</h4>
|
|
</div>
|
|
</Link>
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
export default TrendingCard;
|