last push. animatsiya added

components/cards/productCard.tsx

@@ -5,31 +5,48 @@ import Image from "next/image";
 import Link from "next/link";
 import Text from "../lib_components/text";
 import { useParams } from "next/navigation";
+import { motion } from "framer-motion";
 
 export default function ProductCard({ data }: { data: ProductTypes }) {
   const { lang } = useParams();
+
   return (
-    <Link
-      href={`/${lang}/${data.path}`}
-      className="h-[400px] flex flex-col items-center justify-between rounded-sm hover:scale-105 hover:cursor-pointer hover:shadow-[0px_0px_5px_10px_#ebebeb]"
+    <motion.div
+      initial={{ opacity: 0, y: 50 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, amount: 0.2 }}
+      transition={{ duration: 0.3, ease: "easeOut" }}
+      whileHover={{
+        scale: 1.05,
+        boxShadow: "0px 0px 15px rgba(0,0,0,0.1)",
+      }}
+      whileTap={{ scale: 0.98 }}
     >
-      <div className="rounded-t-lg bg-white py-15 px-2">
-        <Image
-          src={data.image}
-          alt={data.truck_name}
-          width={200}
-          height={200}
-          className="object-contain max-h-[200px] h-full"
-        />
-      </div>
-      <div className="bg-[#fafafa] w-full py-5 rounded-b-lg flex flex-col items-center justify-center ">
-        <p>
-          <Text txt={data.truck_name} />
-        </p>
-        <p className="text-secondary">
-          <Text txt={data.desc} />
-        </p>
-      </div>
-    </Link>
+      <Link
+        href={`/${lang}/${data.path}`}
+        className="h-[400px] flex flex-col items-center justify-between rounded-lg bg-white transition-transform"
+      >
+        {/* Yuqori qism - rasm */}
+        <div className="rounded-t-lg bg-white py-10 px-2 flex justify-center items-center">
+          <Image
+            src={data.image}
+            alt={data.truck_name}
+            width={200}
+            height={200}
+            className="object-contain max-h-[200px] h-full"
+          />
+        </div>
+
+        {/* Pastki qism - matn */}
+        <div className="bg-[#fafafa] w-full py-5 rounded-b-lg flex flex-col items-center justify-center space-y-1">
+          <p className="font-medium text-gray-800 text-lg text-center">
+            <Text txt={data.truck_name} />
+          </p>
+          <p className="text-secondary text-sm text-center">
+            <Text txt={data.desc} />
+          </p>
+        </div>
+      </Link>
+    </motion.div>
   );
 }