last push. animatsiya added

components/cards/innerProductcard.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import { innerCardTypes } from "@/types";
 import Link from "next/link";
@@ -7,43 +7,75 @@ import React from "react";
 import Image from "next/image";
 import Text from "../lib_components/text";
 import { useCarDetail } from "../lib_components/carDetailProvider";
+import { motion } from "framer-motion";
 
 export default function InnerProductcard({ data }: { data: innerCardTypes }) {
   const route = useParams();
   const { setDetail } = useCarDetail();
+
   return (
-    <Link
-      href={`/${route.lang}/${route.carType}/${data.name}`}
-      onClick={() => setDetail(data)}
-      className=" 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: 40 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, amount: 0.2 }}
+      transition={{ duration: 0.5, ease: "easeOut" }}
+      whileHover={{
+        scale: 1.05,
+        boxShadow: "0px 0px 15px rgba(0,0,0,0.1)",
+      }}
+      whileTap={{ scale: 0.97 }}
+      className="rounded-lg overflow-hidden bg-white transition-all"
     >
-      <div className="rounded-t-lg bg-white">
-        <Image
-          src={data.image}
-          alt={data.name}
-          width={0}
-          height={200}
-          className="object-fill w-full max-h-[200px] h-full rounded-t-sm"
-        />
-      </div>
-      <div className="bg-[#fafafa] w-full p-2 px-4 rounded-b-lg flex flex-col items-start justify-start gap-2">
-        <div className="text-xl font-semibold ">
-          <Text txt={data.name} />
+      <Link
+        href={`/${route.lang}/${route.carType}/${data.name}`}
+        onClick={() => setDetail(data)}
+        className="flex flex-col items-center justify-between rounded-lg hover:cursor-pointer"
+      >
+        {/* Rasm qismi */}
+        <div className="rounded-t-lg bg-white">
+          <Image
+            src={data.image}
+            alt={data.name}
+            width={0}
+            height={200}
+            className="object-fill w-full max-h-[200px] h-full rounded-t-sm"
+          />
         </div>
-        <div className="flex gap-2">
-          <Text txt="hour-price" />
-          {data.price?.toLocaleString("uz-UZ")}
-          <Text txt="wallet" />
+
+        {/* Pastki qism */}
+        <div className="bg-[#fafafa] w-full p-2 px-4 rounded-b-lg flex flex-col items-start justify-start gap-2">
+          <div className="text-xl font-semibold">
+            <Text txt={data.name} />
+          </div>
+
+          <div className="flex gap-2">
+            <Text txt="hour-price" />
+            {data.price?.toLocaleString("uz-UZ")}
+            <Text txt="wallet" />
+          </div>
+
+          <div className="flex gap-2">
+            <Text txt="min-time" />
+            {data.min_order_time}
+            <Text txt="time" />
+          </div>
+
+          {/* Tugma animatsiyasi */}
+          <motion.button
+            whileHover={{
+              scale: 1.05,
+              backgroundColor: "#ffffff",
+              color: "#dc2626", // hoverda text-secondary (agar sizda secondary = red)
+              borderColor: "#dc2626",
+            }}
+            whileTap={{ scale: 0.95 }}
+            transition={{ duration: 0.3 }}
+            className="w-full p-3 bg-secondary rounded-lg text-white border-2 border-secondary"
+          >
+            <Text txt="more" />
+          </motion.button>
         </div>
-        <div className="flex gap-2">
-          <Text txt="min-time" />
-          {data.min_order_time}
-          <Text txt="time" />
-        </div>
-        <button className="w-full p-3 bg-secondary rounded-lg text-white border-2 border-secondary hover:cursor-pointer hover:bg-white hover:text-secondary">
-          <Text txt="more" />
-        </button>
-      </div>
-    </Link>
+      </Link>
+    </motion.div>
   );
 }