connected to backend

components/cards/innerProductcard.tsx

@@ -1,5 +1,4 @@
 "use client";
-
 import { innerCardTypes } from "@/types";
 import Link from "next/link";
 import { useParams } from "next/navigation";
@@ -8,74 +7,132 @@ import Image from "next/image";
 import Text from "../lib_components/text";
 import { useCarDetail } from "../lib_components/carDetailProvider";
 import { motion } from "framer-motion";
+import { useCarType } from "@/store/carType";
 
-export default function InnerProductcard({ data }: { data: innerCardTypes }) {
+export default function InnerProductcard({ data }: { data: any }) {
   const route = useParams();
   const { setDetail } = useCarDetail();
+  const setInitialCar = useCarType((state) => state.setInitialCar);
+
+  const carInfo = {
+    id: data?.id,
+    name: data?.name,
+  };
 
   return (
-    <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)",
+    <Link
+      href={`/${route.lang}/${route.carType}/${data.name}`}
+      onClick={() => {
+        setDetail(data);
+        setInitialCar(carInfo);
       }}
-      whileTap={{ scale: 0.97 }}
-      className="h-[420px] rounded-lg overflow-hidden bg-white transition-all"
+      className="block h-full"
     >
-      <Link
-        href={`/${route.lang}/${route.carType}/${data.name}`}
-        onClick={() => setDetail(data)}
-        className="h-full flex flex-col items-center justify-between rounded-lg hover:cursor-pointer"
+      <motion.div
+        initial={{ opacity: 0, y: 40 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true, amount: 0.2 }}
+        transition={{ duration: 0.5, ease: "easeOut" }}
+        className="h-full group"
       >
-        {/* 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>
-
-        {/* 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"
+        <div
+          className="h-full bg-white rounded-2xl overflow-hidden border-2 border-gray-100 
+                        hover:border-[#f2a01c] transition-all duration-300 
+                        shadow-sm hover:shadow-xl flex flex-col"
+        >
+          {/* Rasm container - katta va responsive */}
+          <div
+            className="relative w-full aspect-[4/3] bg-gradient-to-br from-gray-50 via-white to-gray-50 
+                          overflow-hidden group-hover:bg-gradient-to-br group-hover:from-orange-50 
+                          group-hover:via-white group-hover:to-orange-50 transition-all duration-500"
           >
-            <Text txt="more" />
-          </motion.button>
+            {/* Rasm */}
+            <div className="absolute inset-0 p-6 flex items-center justify-center">
+              <motion.div
+                whileHover={{ scale: 1.05 }}
+                transition={{ duration: 0.4 }}
+                className="relative w-full h-full"
+              >
+                <Image
+                  src={data.image}
+                  alt={data.name}
+                  fill
+                  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                  className="object-contain"
+                  priority
+                />
+              </motion.div>
+            </div>
+
+            {/* Dekorativ element */}
+            <div
+              className="absolute top-4 right-4 w-12 h-12 bg-[#f2a01c]/10 rounded-full 
+                            flex items-center justify-center opacity-0 group-hover:opacity-100 
+                            transition-opacity duration-300"
+            >
+              <svg
+                className="w-6 h-6 text-[#f2a01c]"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M9 5l7 7-7 7"
+                />
+              </svg>
+            </div>
+          </div>
+
+          {/* Content qismi */}
+          <div className="flex-1 p-6 flex flex-col justify-between bg-white">
+            {/* Nomi va tavsif */}
+            <div className="mb-4">
+              <h3
+                className="text-xl font-bold text-[#0c1239] mb-2 line-clamp-2 
+                             group-hover:text-[#f2a01c] transition-colors duration-300"
+              >
+                <Text txt={data.name} />
+              </h3>
+
+              {/* Agar qo'shimcha ma'lumot bo'lsa */}
+              {data.description && (
+                <p className="text-sm text-gray-600 line-clamp-2">
+                  <Text txt={data.description} />
+                </p>
+              )}
+            </div>
+
+            {/* Tugma - past qismda */}
+            <div className="pt-4 border-t border-gray-100">
+              <motion.div
+                whileHover={{ x: 4 }}
+                transition={{ duration: 0.2 }}
+                className="flex items-center justify-between text-[#f2a01c] font-semibold"
+              >
+                <span>
+                  <Text txt="more" />
+                </span>
+                <svg
+                  className="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M9 5l7 7-7 7"
+                  />
+                </svg>
+              </motion.div>
+            </div>
+          </div>
         </div>
-      </Link>
-    </motion.div>
+      </motion.div>
+    </Link>
   );
 }