first commit

src/pages/Trending/TrendingCard.jsx

@@ -0,0 +1,62 @@
+// 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}
+          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;