last push. animatsiya added

2025-11-07 22:52:50 +05:00
parent 45f5e2251b
commit 549535b471
8 changed files with 255 additions and 88 deletions
--- a/app/[lang]/[carType]/[carDeatil]/page.tsx
+++ b/app/[lang]/[carType]/[carDeatil]/page.tsx
@@ -1,9 +1,10 @@
-'use client';
+"use client";

-import { useCarDetail } from '@/components/lib_components/carDetailProvider';
-import Text from '@/components/lib_components/text';
-import Image from 'next/image';
-import React from 'react';
+import { useCarDetail } from "@/components/lib_components/carDetailProvider";
+import Text from "@/components/lib_components/text";
+import Image from "next/image";
+import React from "react";
+import { Send } from "lucide-react";

 export default function CarDetailPage() {
  const { detail } = useCarDetail();
@@ -18,33 +19,68 @@ export default function CarDetailPage() {
  }

  return (
-    <div dir="ltr" className="my-10 max-w-[1200px] w-full mx-auto space-y-5">
+    <div
+      dir="ltr"
+      className="my-10 max-w-[1200px] w-full mx-auto space-y-5 flex flex-col items-start justify-center "
+    >
      {/* 2️⃣ Mahsulot nomi */}
      <div className="text-2xl font-bold w-full text-center text-secondary mb-10">
        <Text txt={detail.name} />
      </div>

-      <div className="flex flex-col md:flex-row items-start gap-6 justify-between">
+      <div className="flex flex-col md:flex-row items-start gap-6 justify-center w-full">
        {/* 3️⃣ Rasmini ko‘rsatish */}
-        <div className="flex-shrink-0">
+        <div className="w-[400px] h-auto">
          <Image
            src={detail.image}
            alt={detail.name}
-            width={400}
-            height={300}
-            className="rounded-lg object-cover border border-gray-200"
+            width={600}
+            height={200}
+            className="rounded-lg object-cover border border-gray-200  w-full"
          />
        </div>

        {/* 4️⃣ Ma’lumotlar bloki */}
-        <div className="space-y-3 flex-1">
-          <div className="text-lg font-semibold">
-            <Text txt="Soatlik narx:" />{' '}
-            {detail.price?.toLocaleString('uz-UZ')} so‘m
+        <div className="space-y-3 ">
+          <div className="text-lg font-semibold flex gap-2 ">
+            <Text txt="hour-price" />
+            <span className="font-medium flex gap-2 text-gray-500">
+              {detail.price?.toLocaleString("uz-UZ")}
+              <Text txt="wallet" />
+            </span>
          </div>
-          <div className="text-lg font-semibold">
-            <Text txt="Minimal ijaraga olish vaqti:" /> {detail.min_order_time}{' '}
-            <Text txt="soat" />
+          <div className="text-lg font-semibold  flex gap-2">
+            <Text txt="min-time" />
+            <span className="font-medium flex gap-2 text-gray-500">
+              {detail.min_order_time}
+              <Text txt="time" />
+            </span>
+          </div>
+          <div className="text-lg font-semibold  flex gap-2">
+            <Text txt="day-price" />{" "}
+            <span className="font-medium flex gap-2 text-gray-500">
+              {detail.price && (detail.price * 8).toLocaleString("uz-UZ")}
+              <Text txt="wallet" />
+            </span>
+          </div>
+          <div className="space-y-2 text-gray-500 text-lg ">
+            <Text txt="note1" />
+            <Text txt="note2" />
+          </div>
+          <div className="flex gap-6">
+            <button className="
+            bg-secondary p-3 px-6 rounded-lg border-2 border-secondary text-white
+            hover:cursor-pointer hover:bg-white hover:text-secondary
+            ">
+              <Text txt="book" />
+            </button>
+            <button className="
+              flex gap-4 p-3 rounded-lg border-2 border-sky-500 text-sky-500
+              hover:cursor-pointer hover:text-black hover:border-black 
+              ">
+              <Send className="w-6 h-6" />
+              <Text txt="ask" />
+            </button>
          </div>
        </div>
      </div>
--- a/components/cards/innerProductcard.tsx
+++ b/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>
  );
 }
--- a/components/cards/productCard.tsx
+++ b/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>
  );
 }
--- a/components/cards/sliderCard.tsx
+++ b/components/cards/sliderCard.tsx
@@ -1,30 +1,51 @@
+"use client";
+
 import { ProductTypes } from "@/types";
-import Image, { StaticImageData } from "next/image";
+import Image from "next/image";
 import Link from "next/link";
 import Text from "../lib_components/text";
+import { motion } from "framer-motion";

 export default function SliderCard({ data }: { data: ProductTypes }) {
  return (
    <Link
      href={data.path}
      id="news_slider_card"
-      className="group hover:cursor-pointer"
+      className="group hover:cursor-pointer block"
    >
-      <Image
-        src={data.image}
-        alt="slider image"
-        width={600}
-        height={600}
-        className="object-cover max-w-[600px] w-full h-[300px]"
-      />
-      <div className="relative overflow-visible mt-6 text-primary flex flex-col items-start p-4 justify-start bg-gray-50 border-b-6 border-gray-400 group hover:border-b-secondary">
-        <div className="absolute -top-10 sm:-top-8 text-[16px] font-semibold left-5 bg-secondary py-1 px-3 clip-trapezoid">
-          <Text txt={data.truck_name} />
+      <motion.div
+        initial={{ opacity: 0, y: 40 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6, ease: "easeOut" }}
+        whileTap={{ scale: 0.98 }}
+        className="rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-all"
+      >
+        {/* Rasm qismi */}
+        <Image
+          src={data.image}
+          alt="slider image"
+          width={600}
+          height={600}
+          className="object-cover max-w-[600px] w-full h-[300px]"
+        />
+
+        {/* Pastki kontent */}
+        <div className="relative overflow-visible mt-6 text-primary flex flex-col items-start p-4 justify-start bg-gray-50 border-b-6 border-gray-400 group hover:border-b-secondary">
+          {/* Yuqoridagi belgi */}
+          <motion.div
+            className="absolute -top-10 sm:-top-8 text-[16px] font-semibold left-5 bg-secondary py-1 px-3 clip-trapezoid"
+            whileHover={{ scale: 1.05 }}
+            transition={{ type: "spring", stiffness: 200 }}
+          >
+            <Text txt={data.truck_name} />
+          </motion.div>
+
+          {/* Tavsif matni */}
+          <div className="text-xl font-bold flex items-center h-[60px] hover:text-secondary transition-colors">
+            <Text txt={data.desc} />
+          </div>
        </div>
-        <div className="text-xl font-bold flex items-center h-[60px] hover:text-secondary">
-          <Text txt={data.desc} />
-        </div>
-      </div>
+      </motion.div>
    </Link>
  );
 }
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,11 +9,13 @@
      "version": "0.1.0",
      "dependencies": {
        "antd": "^5.27.4",
+        "framer-motion": "^12.23.24",
        "i18next": "^25.5.3",
        "i18next-browser-languagedetector": "^8.2.0",
        "i18next-http-backend": "^3.0.2",
        "i18next-resources-to-backend": "^1.2.1",
        "leaflet": "^1.9.4",
+        "lucide-react": "^0.553.0",
        "next": "15.5.4",
        "next-i18next": "^15.4.2",
        "react": "19.1.0",
@@ -1614,6 +1616,33 @@
        "url": "https://github.com/sponsors/rawify"
      }
    },
+    "node_modules/framer-motion": {
+      "version": "12.23.24",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.24.tgz",
+      "integrity": "sha512-HMi5HRoRCTou+3fb3h9oTLyJGBxHfW+HnNE25tAXOvVx/IvwMHK0cx7IR4a2ZU6sh3IX1Z+4ts32PcYBOqka8w==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.23.23",
+        "motion-utils": "^12.23.6",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/graceful-fs": {
      "version": "4.2.11",
      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -1991,6 +2020,15 @@
        "loose-envify": "cli.js"
      }
    },
+    "node_modules/lucide-react": {
+      "version": "0.553.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.553.0.tgz",
+      "integrity": "sha512-BRgX5zrWmNy/lkVAe0dXBgd7XQdZ3HTf+Hwe3c9WK6dqgnj9h+hxV+MDncM88xDWlCq27+TKvHGE70ViODNILw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/magic-string": {
      "version": "0.30.19",
      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz",
@@ -2024,6 +2062,21 @@
        "node": ">= 18"
      }
    },
+    "node_modules/motion-dom": {
+      "version": "12.23.23",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz",
+      "integrity": "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.6"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "license": "MIT"
+    },
    "node_modules/nanoid": {
      "version": "3.3.11",
      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
--- a/package.json
+++ b/package.json
@@ -9,11 +9,13 @@
  },
  "dependencies": {
    "antd": "^5.27.4",
+    "framer-motion": "^12.23.24",
    "i18next": "^25.5.3",
    "i18next-browser-languagedetector": "^8.2.0",
    "i18next-http-backend": "^3.0.2",
    "i18next-resources-to-backend": "^1.2.1",
    "leaflet": "^1.9.4",
+    "lucide-react": "^0.553.0",
    "next": "15.5.4",
    "next-i18next": "^15.4.2",
    "react": "19.1.0",
--- a/public/locales/ru/common.json
+++ b/public/locales/ru/common.json
@@ -174,5 +174,8 @@
  "wallet": "сумов",
  "time": "часов",
  "hour-price": "Цена за 1 час: ",
-  "min-time": "Минимальный заказ: "
+  "min-time": "Минимальный заказ: ",
+  "day-price": "Цена аренды за день: ",
+  "note1": "Мы предоставляем автолифт только с нашим водителем.",
+  "note2": "Доставка автолифта включена в стоимость аренды."
 }
--- a/public/locales/uz/common.json
+++ b/public/locales/uz/common.json
@@ -176,5 +176,8 @@
    "wallet":"so'm",
    "time":"soat",
    "hour-price":"1 soat uchun narx: ",
-    "min-time":"Minimal buyrtma: "
+    "min-time":"Minimal buyrtma: ",
+    "day-price":"Bir kunlik ijara narxi: ",
+    "note1":"Biz avtoliftni faqat haydovchimiz bilan taqdim etamiz.",
+    "note2":"Avtoliftni yetkazib berish ijara narxiga kiritilgan."
 }