carType page over

components/carPageParts/carType_head.tsx

@@ -3,7 +3,7 @@
 import { backOne } from "@/assets";
 import Image from "next/image";
 import { useParams } from "next/navigation";
-import Text from "../text";
+import Text from "../lib_components/text";
 import Link from "next/link";
 
 export default function CarType_Header() {
@@ -41,13 +41,13 @@ export default function CarType_Header() {
           className="text-white flex items-center justify-center gap-3"
         >
           <Link
-            href='/'
+            href="/"
             className="hover:cursor-pointer hover:text-secondary  "
           >
             <Text txt="home" />
           </Link>
           /
-          <div className="text-secondary" >
+          <div className="text-secondary">
             <Text txt={`${params.carType}`} />
           </div>
         </div>

components/cards/innerProductcard.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import { innerCardTypes } from "@/types";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import React from "react";
+import Image from "next/image";
+import Text from "../lib_components/text";
+import { useCarDetail } from "../lib_components/carDetailProvider";
+
+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]"
+    >
+      <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} />
+        </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>
+        <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>
+  );
+}

components/cards/productCard.tsx

@@ -3,14 +3,17 @@
 import { ProductTypes } from "@/types";
 import Image from "next/image";
 import Link from "next/link";
-import Text from "../text";
+import Text from "../lib_components/text";
 import { useParams } from "next/navigation";
 
-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]">
-      <div className="rounded-t-lg bg-white py-15 px-2" >
+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]"
+    >
+      <div className="rounded-t-lg bg-white py-15 px-2">
         <Image
           src={data.image}
           alt={data.truck_name}
@@ -20,8 +23,12 @@ export default function ProductCard({data}:{data: ProductTypes}) {
         />
       </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>
+        <p>
+          <Text txt={data.truck_name} />
+        </p>
+        <p className="text-secondary">
+          <Text txt={data.desc} />
+        </p>
       </div>
     </Link>
   );

components/cards/sliderCard.tsx

@@ -1,24 +1,30 @@
 import { ProductTypes } from "@/types";
 import Image, { StaticImageData } from "next/image";
 import Link from "next/link";
-import Text from "../text";
+import Text from "../lib_components/text";
 
-export default function SliderCard({data}:{data:ProductTypes}) {
+export default function SliderCard({ data }: { data: ProductTypes }) {
   return (
-    <Link href={data.path} id="news_slider_card" className="group hover:cursor-pointer" >
-        <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}/>
-            </div>
-            <div className="text-xl font-bold flex items-center h-[60px] hover:text-secondary"><Text txt={data.desc}/></div>
+    <Link
+      href={data.path}
+      id="news_slider_card"
+      className="group hover:cursor-pointer"
+    >
+      <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} />
         </div>
+        <div className="text-xl font-bold flex items-center h-[60px] hover:text-secondary">
+          <Text txt={data.desc} />
+        </div>
+      </div>
     </Link>
-  )
+  );
 }

components/lib_components/carDetailProvider.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+import { innerCardTypes } from '@/types';
+
+// 1️⃣ Context tipi
+interface CarDetailContextType {
+  detail: innerCardTypes | null;
+  setDetail: React.Dispatch<React.SetStateAction<innerCardTypes | null>>;
+}
+
+// 2️⃣ Default context qiymatini yaratamiz
+const CarDetailContext = createContext<CarDetailContextType | undefined>(undefined);
+
+// 3️⃣ Provider komponent
+export const CarDetailProvider = ({ children }: { children: ReactNode }) => {
+  const [detail, setDetail] = useState<innerCardTypes | null>(null);
+
+  return (
+    <CarDetailContext.Provider value={{ detail, setDetail }}>
+      {children}
+    </CarDetailContext.Provider>
+  );
+};
+
+// 4️⃣ Custom hook (Context’ni qulay ishlatish uchun)
+export const useCarDetail = () => {
+  const context = useContext(CarDetailContext);
+  if (!context) {
+    throw new Error('useCarDetail must be used within a CarDetailProvider');
+  }
+  return context;
+};

components/lib_components/title.tsx

@@ -0,0 +1,11 @@
+import { TitleType } from "@/types";
+import React from "react";
+import Text from "./text";
+
+export default function Title({ text }: TitleType) {
+  return (
+    <div className="text-primary md:text-[40px] text-[25px] w-full text-center font-bold ">
+      <Text txt={text} />
+    </div>
+  );
+}

components/nav_foot/footer.tsx

@@ -1,5 +1,5 @@
 import Image from "next/image";
-import Text from "../text";
+import Text from "../lib_components/text";
 import {
   FaFacebookF,
   FaTwitter,
@@ -110,62 +110,62 @@ export default function Footer() {
           </div>
         </div>
         <div className=" max-[1200px]:absolute z-10 bottom-30 right-5  group flex flex-col items-end justify-end pt-15">
-            <div className="group relative">
-              <div
-                className="
+          <div className="group relative">
+            <div
+              className="
                     flex gap-1 items-center text-white text-xl
                     opacity-0 translate-x-8 pointer-events-none
                     group-hover:opacity-100 group-hover:translate-x-0 group-hover:pointer-events-auto
                     transition-all duration-1000 ease-in-out delay-800 hover:cursor-pointer
                     "
-              >
-                <p className="bg-[#0e76a8] p-2 rounded-[8px]">Telegram</p>
-                <span className="rounded-full p-2 bg-[#0e76a8] ml-2">
-                  <FaTelegram />
-                </span>
-              </div>
+            >
+              <p className="bg-[#0e76a8] p-2 rounded-[8px]">Telegram</p>
+              <span className="rounded-full p-2 bg-[#0e76a8] ml-2">
+                <FaTelegram />
+              </span>
             </div>
+          </div>
 
-            <div className="group relative my-2 ">
-              <div
-                className="
+          <div className="group relative my-2 ">
+            <div
+              className="
                     flex gap-1 items-center text-white text-xl
                     opacity-0 translate-x-6 pointer-events-none
                     group-hover:opacity-100 group-hover:translate-x-0 group-hover:pointer-events-auto
                     transition-all duration-500 ease-in-out delay-600 hover:cursor-pointer
                     "
-              >
-                <p className="bg-[#00900c] p-2 rounded-[8px] bg-linear-to-tr from-[#feda75] via-[#cc2980] to-[#9a2eba] ">
-                  Instagram
-                </p>
-                <span className="bg-linear-to-tr from-[#feda75] via-[#cc2980] to-[#9a2eba] rounded-[50%] p-2 ">
-                  <FaInstagram />
-                </span>
-              </div>
+            >
+              <p className="bg-[#00900c] p-2 rounded-[8px] bg-linear-to-tr from-[#feda75] via-[#cc2980] to-[#9a2eba] ">
+                Instagram
+              </p>
+              <span className="bg-linear-to-tr from-[#feda75] via-[#cc2980] to-[#9a2eba] rounded-[50%] p-2 ">
+                <FaInstagram />
+              </span>
             </div>
+          </div>
 
-            <div className="group relative">
-              <div
-                className="
+          <div className="group relative">
+            <div
+              className="
                     flex gap-1 items-center text-white text-xl
                     opacity-0 translate-x-2 pointer-events-none
                     group-hover:opacity-100 group-hover:translate-x-0 group-hover:pointer-events-auto
                     transition-all duration-100 ease-in-out delay-200 hover:cursor-pointer
                     "
-              >
-                <p className="bg-[#00900c] p-2 rounded-[8px]">Phone</p>
-                <span className="rounded-[50%] p-2 bg-[#00900c] ">
-                  <FaPhone />
-                </span>
-              </div>
+            >
+              <p className="bg-[#00900c] p-2 rounded-[8px]">Phone</p>
+              <span className="rounded-[50%] p-2 bg-[#00900c] ">
+                <FaPhone />
+              </span>
             </div>
-            <Image
-              src={Ekxkavator_vektor}
-              width={90}
-              height={90}
-              className="mt-3 hover:cursor-pointer icon_animation rounded-[50%] object-cover"
-              alt="icon image"
-            />
+          </div>
+          <Image
+            src={Ekxkavator_vektor}
+            width={90}
+            height={90}
+            className="mt-3 hover:cursor-pointer icon_animation rounded-[50%] object-cover"
+            alt="icon image"
+          />
         </div>
       </div>
 

components/nav_foot/navbar.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import { useState } from "react";
 import i18n from "@/i18n";
 import { Link } from "react-scroll";
-import Text from "../text";
+import Text from "../lib_components/text";
 import "./navbar.css";
 import { logoImg } from "@/assets";
 import Image from "next/image";
@@ -70,27 +70,27 @@ export default function Navbar() {
 
             {/* change language part */}
             <div className=" max-[580px]:flex hidden items-center justify-center gap-5">
-            <button
-              onClick={() => handleChangeLang("uz")}
-              className={`hover:cursor-pointer ${
-                lang === "uz" && "bg-secondary text-primary rounded-[8px]"
-              } px-2 py-1 text-[20px] ${
-                lang !== "uz" && "border-l-2 border-b-2 border-primary"
-              } `}
-            >
-              UZ
-            </button>
-            <button
-              onClick={() => handleChangeLang("ru")}
-              className={`hover:cursor-pointer ${
-                lang === "ru" && "bg-secondary text-primary rounded-[8px]"
-              } px-2 py-1 text-[20px]  ${
-                lang !== "ru" && "border-r-2 border-b-2 border-primary"
-              }`}
-            >
-              RU
-            </button>
-          </div>
+              <button
+                onClick={() => handleChangeLang("uz")}
+                className={`hover:cursor-pointer ${
+                  lang === "uz" && "bg-secondary text-primary rounded-[8px]"
+                } px-2 py-1 text-[20px] ${
+                  lang !== "uz" && "border-l-2 border-b-2 border-primary"
+                } `}
+              >
+                UZ
+              </button>
+              <button
+                onClick={() => handleChangeLang("ru")}
+                className={`hover:cursor-pointer ${
+                  lang === "ru" && "bg-secondary text-primary rounded-[8px]"
+                } px-2 py-1 text-[20px]  ${
+                  lang !== "ru" && "border-r-2 border-b-2 border-primary"
+                }`}
+              >
+                RU
+              </button>
+            </div>
 
             <div onClick={changeToggler} className={togglerIcon}>
               <div className="toggle_item1"></div>

components/pageParts/faq.tsx

@@ -1,7 +1,7 @@
 import type { CollapseProps } from "antd";
 import { Collapse } from "antd";
-import Text from "../text";
-import Title from "../title";
+import Text from "../lib_components/text";
+import Title from "../lib_components/title";
 
 const FaqTexts: CollapseProps["items"] = [
   {

components/pageParts/map.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import Title from "../title";
+import Title from "../lib_components/title";
 import { FaPhoneAlt, FaTelegram } from "react-icons/fa";
 import { BiTargetLock } from "react-icons/bi";
-import GoogleMap from "../google.map";
+import GoogleMap from "../lib_components/google.map";
 
 export default function Map() {
   return (

components/pageParts/newsSlider.tsx

@@ -4,7 +4,7 @@ import { Swiper, SwiperSlide } from "swiper/react";
 import { Navigation } from "swiper/modules";
 import "swiper/css";
 import "swiper/css/navigation";
-import Title from "../title";
+import Title from "../lib_components/title";
 import SliderCard from "../cards/sliderCard";
 import { sliderData } from "@/data";
 
@@ -14,27 +14,35 @@ const navigationNextEl = ".custom-swiper-next";
 
 export default function CustomSlider() {
   return (
-    <div dir="ltr" className="max-w-[1400px] w-full mx-auto relative my-20 px-4">
+    <div
+      dir="ltr"
+      className="max-w-[1400px] w-full mx-auto relative my-20 px-4"
+    >
       {/* Title */}
       <div className="my-10 mb-20 flex items-center justify-between ">
         <div className="">
           <Title text="news-h2" />
         </div>
 
-         {/* Custom buttons */}
-      <div className="flex gap-2 items-center justify-center">
-        <button
-          className={`${navigationPrevEl.replace('.', '')} w-10 h-10  p-0 bg-primary text-[30px] text-center text-white flex items-center justify-center hover:bg-secondary hover:cursor-pointer transition`}
-        >
-          ‹
-        </button>
-        <button
-          className={`${navigationNextEl.replace('.', '')} w-10 h-10 bg-primary text-[30px] text-center text-white flex items-center justify-center hover:bg-secondary hover:cursor-pointer transition `}
-        >
-          ›
-        </button>
-      </div>
-
+        {/* Custom buttons */}
+        <div className="flex gap-2 items-center justify-center">
+          <button
+            className={`${navigationPrevEl.replace(
+              ".",
+              ""
+            )} w-10 h-10  p-0 bg-primary text-[30px] text-center text-white flex items-center justify-center hover:bg-secondary hover:cursor-pointer transition`}
+          >
+            ‹
+          </button>
+          <button
+            className={`${navigationNextEl.replace(
+              ".",
+              ""
+            )} w-10 h-10 bg-primary text-[30px] text-center text-white flex items-center justify-center hover:bg-secondary hover:cursor-pointer transition `}
+          >
+            ›
+          </button>
+        </div>
       </div>
 
       {/* Swiper */}
@@ -60,7 +68,6 @@ export default function CustomSlider() {
           </SwiperSlide>
         ))}
       </Swiper>
-
     </div>
   );
 }

components/pageParts/offer.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image";
-import Title from "../title";
-import Text from "../text";
+import Title from "../lib_components/title";
+import Text from "../lib_components/text";
 import { Ekskavator_offer } from "@/assets";
 
 export default function Offer() {
@@ -25,8 +25,8 @@ export default function Offer() {
           </div>
           <div className="text-primary flex flex-col text-[18px] relative pl-8">
             <div className=" absolute left-0">
-                <div className="bg-primary w-[3px] h-[28px]"></div>
-                <div className="bg-secondary w-[3px] h-[100px]"></div>
+              <div className="bg-primary w-[3px] h-[28px]"></div>
+              <div className="bg-secondary w-[3px] h-[100px]"></div>
             </div>
             <span>"</span>
             <Text txt="about-block-quote" />

components/pageParts/partners.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import Title from "../title";
+import Title from "../lib_components/title";
 
 import React from "react";
 // Import Swiper React components

components/pageParts/products.tsx

@@ -1,12 +1,19 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
-import Title from "../title";
-import Text from "../text";
+import Title from "../lib_components/title";
+import Text from "../lib_components/text";
 import { Asphalt, Ekskavator, Forklift, Kran, Truck } from "@/assets";
 import Image from "next/image";
 import type { productFilterTypes, ProductTypes } from "@/types";
-import { allProducts, cranes, excavators, forklift, road_repairs, trucks } from "@/data";
+import {
+  allProducts,
+  cranes,
+  excavators,
+  forklift,
+  road_repairs,
+  trucks,
+} from "@/data";
 import ProductCard from "../cards/productCard";
 
 const productFilterTypesMainPage: productFilterTypes[] = [
@@ -15,31 +22,30 @@ const productFilterTypesMainPage: productFilterTypes[] = [
   { name: "forklift-trucks", image: Ekskavator },
   { name: "excavators", image: Forklift },
   { name: "road-repairs", image: Asphalt },
-  { name: "all", image: '' },
+  { name: "all", image: "" },
 ];
 
 export default function Products() {
- 
   const [productFilter, setProductFilter] = useState<string | null>(null);
 
-  const [cars,setCars] = useState(allProducts)
+  const [cars, setCars] = useState(allProducts);
 
-  // execute filetr function 
-  useEffect(()=>{
-    if(productFilter === 'trucks'){
+  // execute filetr function
+  useEffect(() => {
+    if (productFilter === "trucks") {
       setCars(trucks);
-    }else if(productFilter === 'cranes'){
+    } else if (productFilter === "cranes") {
       setCars(cranes);
-    }else if(productFilter === 'forklift-trucks'){
+    } else if (productFilter === "forklift-trucks") {
       setCars(forklift);
-    } else if(productFilter === 'excavators'){
+    } else if (productFilter === "excavators") {
       setCars(excavators);
-    }else if(productFilter === 'road-repairs'){
-      setCars(road_repairs)
-    }else {
-      setCars(allProducts)
+    } else if (productFilter === "road-repairs") {
+      setCars(road_repairs);
+    } else {
+      setCars(allProducts);
     }
-  },[productFilter])
+  }, [productFilter]);
   return (
     <div dir="ltr" className="max-w-[1200px] w-full mx-auto">
       {/* title part */}
@@ -66,21 +72,23 @@ export default function Products() {
             } flex items-center gap-2 h-[58px] hover:bg-secondary border-gray-300 hover:border-secondary border-[1px] px-7 text-2xl rounded-tr-full rounded-bl-full `}
           >
             <Text txt={item.name} />
-            {item.image && (<Image
-              src={item.image}
-              alt="Truck images"
-              width={50}
-              height={50}
-              className="object-cover"
-            />)}
-          </button> 
+            {item.image && (
+              <Image
+                src={item.image}
+                alt="Truck images"
+                width={50}
+                height={50}
+                className="object-cover"
+              />
+            )}
+          </button>
         ))}
       </div>
 
       {/* products */}
       <div className="px-4 grid gap-5 grid-cols-1 place-content-center min-[500px]:grid-cols-2 min-lg:grid-cols-4 min-[1210px]:grid-cols-4">
         {cars.map((item: ProductTypes, index: number) => (
-          <div key={index} >
+          <div key={index}>
             <ProductCard data={item} />
           </div>
         ))}

components/pageParts/texnika.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import Title from "../title";
+import Title from "../lib_components/title";
 import { Gehl, Hyundai, JCB, Lonking, Mitsubishi, XCMG } from "@/assets";
 import Image, { StaticImageData } from "next/image";
 
@@ -48,7 +48,7 @@ export default function Texnika() {
           className="mySwiper flex items-center justify-around"
         >
           {slideImage.map((item, index) => (
-            <SwiperSlide key={index} className="!w-[200px] mx-10 " >
+            <SwiperSlide key={index} className="!w-[200px] mx-10 ">
               <Image
                 src={item}
                 alt="Partner images"

components/title.tsx

@@ -1,9 +0,0 @@
-import { TitleType } from '@/types'
-import React from 'react'
-import Text from './text'
-
-export default function Title({text}:TitleType) {
-  return (
-    <div className='text-primary md:text-[40px] text-[25px] w-full text-center font-bold '><Text txt={text} /></div>
-  )
-}