carType page over

app/[lang]/[carType]/[carDeatil]/layout.tsx

@@ -0,0 +1,9 @@
+import React, { ReactNode } from "react";
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <div>
+      {children}
+    </div>
+  );
+}

app/[lang]/[carType]/[carDeatil]/page.tsx

@@ -0,0 +1,13 @@
+"use client"
+
+import { useCarDetail } from '@/components/lib_components/carDetailProvider'
+import React from 'react'
+
+export default function page() {
+    const {detail} = useCarDetail();
+  return (
+    <div>
+      {detail?.name}
+    </div>
+  )
+}

app/[lang]/[carType]/page.tsx

@@ -1,13 +1,120 @@
 "use client";
 
-import Title from "@/components/title";
+import InnerProductcard from "@/components/cards/innerProductcard";
+import Title from "@/components/lib_components/title";
+import { avtogreyderlar, avtokran, avtominora, buldozerlar, cement_trucks, dizel, dumb_trucks, eks_yuklagichlar, forkliftlar, gazels, gildirakli_eks, katkalar, kompressorlar, mini_eks, minora, old_yuklagichlar, paletli_eks, paletli_kranlar, teleskop_yuklagichlar, trailers } from "@/data";
 import { useParams } from "next/navigation";
 
 export default function CartType() {
   const router = useParams();
+  const carType = router.carType;
   return (
-    <div dir="ltr" className="my-20" >
+    <div dir="ltr" className="my-20">
       <Title text="tex-rent" />
+
+      {/* car type groups */}
+      <div className="mt-10 grid grid-cols-3 gap-5 max-w-[1200px] w-full mx-auto">
+        
+        {/* Avtosementavoz */}
+        {carType === "cement-truck" && cement_trucks.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* Samasvallar */}
+        {carType === "dumb-truck" && dumb_trucks.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* Traylerlar */}
+        {carType === "trailers" && trailers.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* Gazellar */}
+        {carType === "gazels" && gazels.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* Avtominora */}
+        {carType === "avtotowers" && avtominora.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })} 
+
+        {/* Avtokran */}
+        {carType === "avtocranes" && avtokran.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* Minora kranlar */}
+        {carType === "tower-cranes" && minora.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* Dizel ko'targichlar */}
+        {carType === "lifters" && dizel.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* Paletli kranlar */}
+        {carType === "crawler-cranes" && paletli_kranlar.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* old yuklagichlar */}
+        {carType === "front-loaders" && old_yuklagichlar.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* Teleskopik yuklagichlar */}
+        {carType === "tele-loaders" && teleskop_yuklagichlar.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* forkliftlar */}
+        {carType === "forklift-trucks" && forkliftlar.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* Paletli ekskavatorlar */}
+        {carType === "crawler-excavators" && paletli_eks.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* G'ildirakli ekskavatorlar */}
+        {carType === "wheel-excavators" && gildirakli_eks.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* Mini-ekskavatorlar */}
+        {carType === "mini-excavators" && mini_eks.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* ekskavator yuklagichlar */}
+        {carType === "excavator-loaders" && eks_yuklagichlar.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* avtogreyderlar */}
+        {carType === "avtograders" && avtogreyderlar.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* Buldozerlar */}
+        {carType === "buldozers" && buldozerlar.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* Katkalar */}
+        {carType === "katkas" && katkalar.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* Kampressorlar */}
+        {carType === "compressors" && kompressorlar.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+      </div>
     </div>
   );
 }

app/[lang]/layout.tsx

@@ -3,7 +3,7 @@ import Header from "@/components/nav_foot/header";
 import Navbar from "@/components/nav_foot/navbar";
 import Footer from "@/components/nav_foot/footer";
 import Contact from "@/components/pageParts/contact";
-import UpScrollIcon from "@/components/upScroll";
+import UpScrollIcon from "@/components/lib_components/upScroll";
 
 export default async function LangLayout({
   children,

app/layout.tsx

@@ -2,6 +2,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { CarDetailProvider } from "@/components/lib_components/carDetailProvider";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -23,8 +24,10 @@ export default function RootLayout({
 }: Readonly<{ children: React.ReactNode }>) {
   return (
     <html lang="uz">
-      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
-        {children}
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <CarDetailProvider>{children}</CarDetailProvider>
       </body>
     </html>
   );

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();
+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" >
+    <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,11 +1,15 @@
 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" >
+    <Link
+      href={data.path}
+      id="news_slider_card"
+      className="group hover:cursor-pointer"
+    >
       <Image
         src={data.image}
         alt="slider image"
@@ -15,10 +19,12 @@ export default function SliderCard({data}:{data:ProductTypes}) {
       />
       <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}/>
+          <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 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,

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";

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,7 +14,10 @@ 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="">
@@ -24,17 +27,22 @@ export default function CustomSlider() {
         {/* 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`}
+            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 `}
+            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() {

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'){
+  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,13 +72,15 @@ 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
+            {item.image && (
+              <Image
                 src={item.image}
                 alt="Truck images"
                 width={50}
                 height={50}
                 className="object-cover"
-            />)}
+              />
+            )}
           </button>
         ))}
       </div>
@@ -80,7 +88,7 @@ export default function Products() {
       {/* 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>
-  )
-}

data/index.ts

@@ -1,13 +1,52 @@
 import {
+  Avtokran1,
+  Avtokran2,
+  Avtokran4,
   AvtokranSlider,
   Balon,
+  Balon1,
+  Balon2,
   Buldozer,
+  Buldozer1,
+  Buldozer2,
+  Chakman1,
+  Chakman2,
   Digger,
+  Digger1,
+  Digger2,
+  Dizel1,
+  Dizel2,
+  Dizel3,
   ekskavatorSlider,
+  Fork1,
+  Fork2,
+  Fork3,
   Forkliftlar,
   Gazel,
+  Gazel1,
+  Gazel2,
+  Gazel3,
+  Gazel5,
+  Gazel6,
   Grayder,
+  Grayder1,
+  Howo1,
+  Howo2,
+  Howo2_1,
+  Howo2_2,
+  Howo2_3,
+  Howo3,
+  Howo3_1,
+  Isuzu1,
+  Isuzu2,
+  Kaimei1,
+  Kaimei2,
+  Kampressor1,
+  Kampressor2,
+  Kampressor3,
   Kat,
+  Katka1,
+  Katka2,
   Kompressor,
   kompressorSlider,
   Kran1,
@@ -15,18 +54,38 @@ import {
   Kran3,
   Kran4,
   Kran5,
+  Kranmexanik1,
+  Kranminora1,
   Mikser,
   Mini,
+  Mini1,
+  Mini2,
+  Minora1,
+  Minora4,
   Old,
+  Old1,
+  Old2,
+  Old3,
   oldYuklagich,
+  Palet1,
+  Palet3,
   Paletli,
+  Paletli1,
+  Paletli2,
   Samasval,
+  Tel1,
+  Tel2,
   Teleskop,
   Treyler,
+  Treyler1,
+  Treyler10,
+  Treyler2,
+  Treyler3,
+  Treyler6,
 } from "@/assets";
-import { ProductTypes } from "@/types";
-import { StaticImageData } from "next/image";
+import { innerCardTypes, ProductTypes } from "@/types";
 
+// all truck information
 export const trucks: ProductTypes[] = [
   {
     id: 1,
@@ -68,9 +127,9 @@ export const cranes: ProductTypes[] = [
   },
   {
     id: 2,
-    truck_name: "crawler-cranes",
+    truck_name: "avtocranes",
     desc: "agreement",
-    path: "crawler-cranes",
+    path: "avtocranes",
     image: Kran2,
   },
   {
@@ -78,20 +137,20 @@ export const cranes: ProductTypes[] = [
     truck_name: "tower-cranes",
     desc: "agreement",
     path: "tower-cranes",
-    image: Kran3,
+    image: Kran4,
   },
   {
     id: 4,
     truck_name: "lifters",
     desc: "agreement",
     path: "lifters",
-    image: Kran4,
+    image: Kran3,
   },
   {
     id: 5,
-    truck_name: "lifters",
+    truck_name: "crawler-cranes",
     desc: "agreement",
-    path: "lifters",
+    path: "crawler-cranes",
     image: Kran5,
   },
 ];
@@ -190,8 +249,123 @@ export const allProducts : ProductTypes[] = [
   ...road_repairs,
 ];
 
+// inner car information by types of trucks
+
+//yuk mashinalari
+export const cement_trucks: innerCardTypes[] = [
+  { id: 1, image: Howo1, name: "Avtosementavoz Howo 1", min_order_time: 4, price: 350000, path: "" },
+  { id: 4, image: Howo2_1, name: "Avtosementavoz Howo 4", min_order_time: 4, price: 365000, path: "" },
+  { id: 5, image: Howo3_1, name: "Avtosementavoz Howo 5", min_order_time: 4, price: 370000, path: "" },
+];
+
+export const dumb_trucks: innerCardTypes[] = [
+  { id: 1, image: Kaimei1, name: "Kaimei Samasval", min_order_time: 3, price: 400000, path: "" },
+  { id: 2, image: Chakman2, name: "Chakman Samasval", min_order_time: 3, price: 410000, path: "" },
+  { id: 3, image: Isuzu2, name: "Isuzu Samasval", min_order_time: 3, price: 430000, path: "" },
+];
+
+export const trailers: innerCardTypes[] = [
+  { id: 1, image: Treyler1, name: "Treyler XCMG", min_order_time: 5, price: 500000, path: "" },
+  { id: 2, image: Treyler2, name: "Treyler Long", min_order_time: 5, price: 520000, path: "" },
+  { id: 3, image: Treyler6, name: "Treyler Platforma", min_order_time: 5, price: 560000, path: "" },
+];
+
+export const gazels: innerCardTypes[] = [
+  { id: 1, image: Gazel2, name: "Gazel mini", min_order_time: 2, price: 260000, path: "" },
+  { id: 2, image: Gazel5, name: "Gazel 4x2", min_order_time: 2, price: 280000, path: "" },
+];
 
 
+//kranlar
+export const avtominora: innerCardTypes[] = [
+  { id: 1, image: Kranminora1, name: "Avtominora Kran", min_order_time: 5, price: 600000, path: "" },
+  { id: 2, image: Kranmexanik1, name: "Avtokran Zoomlion", min_order_time: 5, price: 620000, path: "" },
+];
+
+export const avtokran: innerCardTypes[] = [
+  { id: 1, image: Avtokran1, name: "Avtokran", min_order_time: 5, price: 600000, path: "" },
+  { id: 2, image: Avtokran4, name: "Avtokran", min_order_time: 5, price: 620000, path: "" },
+];
+
+export const minora: innerCardTypes[] = [
+  { id: 1, image: Minora1, name: "Avtominora Kran", min_order_time: 5, price: 600000, path: "" },
+  { id: 2, image: Minora4, name: "Avtominora Kran", min_order_time: 5, price: 620000, path: "" },
+];
+
+export const dizel: innerCardTypes[] = [
+  { id: 1, image: Dizel2, name: "Dizel Ko'targichlar", min_order_time: 5, price: 600000, path: "" },
+  { id: 2, image: Dizel3, name: "Dizel Ko'targichlar", min_order_time: 5, price: 620000, path: "" },
+];
+
+export const paletli_kranlar: innerCardTypes[] = [
+  { id: 1, image: Palet1, name: "Paletli kran", min_order_time: 5, price: 600000, path: "" },
+  { id: 2, image: Palet3, name: "Paletli kran", min_order_time: 5, price: 620000, path: "" },
+];
+
+//forkliftlar
+export const old_yuklagichlar: innerCardTypes[] = [
+  { id: 1, image: Old1, name: "Old Yuklagich GEHL", min_order_time: 3, price: 350000, path: "" },
+  { id: 2, image: Old2, name: "Old Yuklagich Hyundai", min_order_time: 3, price: 365000, path: "" },
+  { id: 3, image: Old3, name: "Old Yuklagich Lonking", min_order_time: 3, price: 370000, path: "" },
+];
+
+export const teleskop_yuklagichlar: innerCardTypes[] = [
+  { id: 1, image: Tel1, name: "Teleskopik Yuklagich JCB", min_order_time: 3, price: 400000, path: "" },
+  { id: 2, image: Tel2, name: "Teleskopik Yuklagich XCMG", min_order_time: 3, price: 420000, path: "" },
+];
+
+export const forkliftlar: innerCardTypes[] = [
+  { id: 1, image: Fork1, name: "Forklift Mitsubishi", min_order_time: 2, price: 300000, path: "" },
+  { id: 2, image: Fork2, name: "Forklift Lonking", min_order_time: 2, price: 310000, path: "" },
+  { id: 3, image: Fork3, name: "Forklift JCB", min_order_time: 2, price: 320000, path: "" },
+];
+
+//ekskavatorlar
+export const paletli_eks: innerCardTypes[] = [
+  { id: 1, image: Paletli1, name: "Paletli Ekskavator Hyundai", min_order_time: 4, price: 450000, path: "" },
+  { id: 2, image: Paletli2, name: "Paletli Ekskavator XCMG", min_order_time: 4, price: 470000, path: "" },
+];
+
+export const gildirakli_eks: innerCardTypes[] = [
+  { id: 1, image: Balon1, name: "G‘ildirakli Ekskavator GEHL", min_order_time: 4, price: 440000, path: "" },
+  { id: 2, image: Balon2, name: "G‘ildirakli Ekskavator Lonking", min_order_time: 4, price: 460000, path: "" },
+];
+
+export const mini_eks: innerCardTypes[] = [
+  { id: 1, image: Mini1, name: "Mini Ekskavator JCB", min_order_time: 3, price: 400000, path: "" },
+  { id: 2, image: Mini2, name: "Mini Ekskavator XCMG", min_order_time: 3, price: 410000, path: "" },
+];
+
+export const eks_yuklagichlar: innerCardTypes[] = [
+  { id: 1, image: Digger1, name: "Ekskavator Yuklagich Hyundai", min_order_time: 3, price: 420000, path: "" },
+  { id: 2, image: Digger2, name: "Ekskavator Yuklagich Gehl", min_order_time: 3, price: 430000, path: "" },
+];
+
+// yo'l tamiri
+export const avtogreyderlar: innerCardTypes[] = [
+  { id: 1, image: Grayder1, name: "Avtogreyder XCMG", min_order_time: 4, price: 500000, path: "" },
+];
+
+export const buldozerlar: innerCardTypes[] = [
+  { id: 1, image: Buldozer1, name: "Buldozer Lonking", min_order_time: 4, price: 520000, path: "" },
+  { id: 2, image: Buldozer2, name: "Buldozer XCMG", min_order_time: 4, price: 540000, path: "" },
+];
+
+export const katkalar: innerCardTypes[] = [
+  { id: 1, image: Katka1, name: "Katka JCB", min_order_time: 4, price: 490000, path: "" },
+  { id: 2, image: Katka2, name: "Katka Hyundai", min_order_time: 4, price: 510000, path: "" },
+];
+
+export const kompressorlar: innerCardTypes[] = [
+  { id: 1, image: Kampressor1, name: "Kompressor Mitsubishi", min_order_time: 3, price: 350000, path: "" },
+  { id: 2, image: Kampressor2, name: "Kompressor XCMG", min_order_time: 3, price: 370000, path: "" },
+  { id: 3, image: Kampressor3, name: "Kompressor Hyundai", min_order_time: 3, price: 390000, path: "" },
+];
+
+
+
+
+// slider data
 export const sliderData : ProductTypes[] = [
   {
   id: 1,

public/locales/ru/common.json

@@ -1,5 +1,5 @@
 {
-    "all":"Все машины",
+  "all": "Все машины",
   "home": "Главное",
   "products": "Продукты",
   "news": "Новости",
@@ -119,7 +119,7 @@
   "feature6": "Сервис в нужное время",
   "weight": "Вес",
   "contacts": "Контакты",
-    "rent-samosval" :"Аренда Самосвалов",
+  "rent-samosval": "Аренда Самосвалов",
   "rent-cement-trucks": "Аренда Автоцементовозов",
   "rent-avtocranes": "Аренда Автокранов",
   "rent-trailers": "Аренда Тягачов",
@@ -139,6 +139,7 @@
   "rent-compressor": "Аренда Компрессоров",
   "rent-katkas": "Аренда Катков",
   "cement-truck": "Автоцементовоз",
+  "cement-truck-howo": "Автоцементовоз HOWO",
   "tank-volume": "Объем бака",
   "intercooler": "Интеркулер",
   "yes": "Есть",
@@ -169,5 +170,9 @@
   "news-title2": "Новый погрузчик - это именно то, что вам нужно!",
   "news-title3": "Новый комплект компрессоров специально для вас",
   "news-title4": "С нашими мощными кранами ваша работа станет проще",
-    "tex-rent":"Аренда оборудования"
+  "tex-rent": "Аренда оборудования",
+  "wallet": "сумов",
+  "time": "часов",
+  "hour-price": "Цена за 1 час: ",
+  "min-time": "Минимальный заказ: "
 }

public/locales/uz/common.json

@@ -143,6 +143,7 @@
     "rent-katka": "Katkalar ijarasi",
     "intercooler": "Interkuler",
     "cement-truck": "Avtosementovoz",
+    "cement_truck_howo":"Avtosementovoz HOWO",
     "tank-volume": "Tank hajmi",
     "yes": "Bor",
     "turbo-dizel": "Turbo dizel",
@@ -171,5 +172,9 @@
     "news-title2": "Yangi yuklagich siz uchun eng yaxshi texnika!",
     "news-title3": "Yangi kompressorlar to'plami aynan siz uchun",
     "news-title4": "Bizning kuchli kranlarimiz bilan ishingiz yanada osonlashadi.",
-    "tex-rent":"Texnikalar ijarasi"
+    "tex-rent":"Texnikalar ijarasi",
+    "wallet":"so'm",
+    "time":"soat",
+    "hour-price":"1 soat uchun narx: ",
+    "min-time":"Minimal buyrtma: "
 }

types/index.ts

@@ -1,4 +1,5 @@
 import { StaticImageData } from "next/image";
+import { SetStateAction } from "react";
 
 //// ============ tool's types ============ //////
 export interface TitleType {
@@ -39,3 +40,12 @@ export interface ProductTypes {
   path: string;
   image: string | StaticImageData;
 }
+
+export interface innerCardTypes{
+  id:number;
+  image:StaticImageData | string;
+  name:string;
+  min_order_time:number;
+  price?:number;
+  path:string;
+}