prapered for build product data

assets/index.ts

@@ -9,3 +9,169 @@ export {default as ruFlag} from './ru.svg';
 export { default as ekskavatorImage} from './excavator-vector.jpg';
 
 export {default as ekskovator} from './excavator.png'
+
+// product filter images
+export {default as Truck} from './pricing/truck.png';
+export {default as Kran} from './pricing/crane.png';
+export {default as Ekskavator} from './pricing/excavator.png';
+export {default as Forklift} from './pricing/loader.png';
+export {default as Asphalt} from './pricing/asphalt.png';
+
+// product trucks 
+export {default as Mikser} from './trucks/mikser.png';
+export {default as Samasval} from './trucks/samosval.png';
+export {default as Treyler} from './trucks/trailer.png';
+export {default as Gazel} from './trucks/gazel.png';
+
+// product inner trucks images
+export {default as Howo1 } from './details/trucks/1-1.png';
+export {default as Howo2} from './details/trucks/1-2.webp';
+export {default as Howo3} from './details/trucks/1-3.webp';
+export {default as Howo2_1} from './details/trucks/1-4.webp';
+export {default as Howo2_2} from './details/trucks/1-5.webp';
+export {default as Howo2_3} from './details/trucks/1-6.webp';
+export {default as Howo3_1} from './details/trucks/1-7.webp'; 
+export {default as Howo3_2} from './details/trucks/1-8.webp'; 
+export {default as Howo3_3} from './details/trucks/1-9.webp'; 
+
+// products inner Samasval images
+export {default as Kaimei1} from './details/trucks/2-1.png';
+export {default as Kaimei2} from './details/trucks/2-2.webp';
+export {default as Kaimei3} from './details/trucks/2-3.webp';
+export {default as Chakman1} from './details/trucks/2-4.webp';
+export {default as Chakman2} from './details/trucks/2-6.jpg';
+export {default as Isuzu1} from './details/trucks/2-8.webp';
+export {default as Isuzu2} from './details/trucks/2-9.webp';
+
+// product treyler images
+export {default as Treyler1} from './details/trucks/3-1.webp';
+export {default as Treyler2} from './details/trucks/3-2.png';
+export {default as Treyler3} from './details/trucks/3-3.webp';
+export {default as Treyler4} from './details/trucks/3-4.webp';
+export {default as Treyler5} from './details/trucks/3-5.webp';
+export {default as Treyler6} from './details/trucks/3-6.webp';
+export {default as Treyler7} from './details/trucks/3-7.png';
+export {default as Treyler8} from './details/trucks/3-8.webp';
+export {default as Treyler9} from './details/trucks/3-9.webp';
+export {default as Treyler10} from './details/trucks/3-10.webp';
+
+// products gazel images
+export {default as Gazel1} from './details/trucks/4-1.png';
+export {default as Gazel2} from './details/trucks/4-2.png';
+export {default as Gazel3} from './details/trucks/4-3.png';
+export {default as Gazel4} from './details/trucks/4-4.png';
+export {default as Gazel5} from './details/trucks/4-5.png';
+export {default as Gazel6} from './details/trucks/4-6.png';
+
+// products kran
+export {default as Kran1} from './cranes/avtocrane.png';
+export {default as Kran2} from './cranes/avtokran.png';
+export {default as Kran3} from './cranes/dizel.png';
+export {default as Kran4} from './cranes/crane.png';
+export {default as Kran5} from './cranes/zoomlion.png';
+
+// products kranlar avtominora images
+export {default as Kranminora1} from './details/cranes/1-1.png';
+export {default as Kranminora2} from './details/cranes/1-4.png';
+export {default as Kranminora3} from './details/cranes/1-3.png';
+export {default as Kranmexanik1} from './details/cranes/1-2.png';
+
+// products avtokranlar images
+export {default as Avtokran1} from './details/cranes/2-1.png';
+export {default as Avtokran2} from './details/cranes/2-2.png';
+export {default as Avtokran3} from './details/cranes/2-3.webp';
+export {default as Avtokran4} from './details/cranes/2-4.webp';
+
+// products paletli kran images
+export {default as Palet1} from './details/cranes/3-1.png';
+export {default as Palet2} from './details/cranes/3-2.png';
+export {default as Palet3} from './details/cranes/3-3.png';
+
+// products minora images
+export {default as Minora1} from './details/cranes/4-1.png';
+export {default as Minora2} from './details/cranes/4-3.png';
+export {default as Minora3} from './details/cranes/4-5.jpg';
+export {default as Minora4} from './details/cranes/4-6.jpg';
+
+// products dizel kotargich images
+export {default as Dizel1} from './details/cranes/5-1.png';
+export {default as Dizel2} from './details/cranes/5-2.jpg';
+export {default as Dizel3} from './details/cranes/5-4.png';
+
+// products forkliftlar
+export {default as Old} from './loaders/loader.png';
+export {default as Teleskop} from './loaders/loader2.png';
+export {default as Forkliftlar} from './loaders/loader3.png';
+
+// products forkflit loaders images
+export {default as Old1} from './details/loaders/1-1.png';
+export {default as Old2} from './details/loaders/1-2.png';
+export {default as Old3} from './details/loaders/1-3.jpg';
+export {default as Old4} from './details/loaders/1-4.png';
+export {default as Old5} from './details/loaders/1-5.webp';
+export {default as Old6} from './details/loaders/1-6.webp';
+export {default as Old7} from './details/loaders/1-7.webp';
+export {default as Tel1} from './details/loaders/2-1.png';
+export {default as Tel2} from './details/loaders/2-2.jpg';
+export {default as Tel3} from './details/loaders/2-4.png';
+export {default as Fork1} from './details/loaders/3-1.png';
+export {default as Fork2} from './details/loaders/3-2.jpeg';
+export {default as Fork3} from './details/loaders/3-3.webp';
+export {default as Fork4} from './details/loaders/3-4.jpg';
+export {default as Fork5} from './details/loaders/3-5.jpg';
+export {default as Fork6} from './details/loaders/3-6.jpg';
+export {default as Fork7} from './details/loaders/3-7.png';
+export {default as Fork8} from './details/loaders/3-8.jpg';
+export {default as Fork9} from './details/loaders/3-9.png';
+
+// product ekskavators images 
+export {default as Paletli} from './excavators/excavator.png';
+export {default as Balon} from './excavators/excavator2.png';
+export {default as Mini} from './excavators/mini.png';
+export {default as Digger} from './excavators/digger.png';
+
+// products Paletli of ekskavator images
+export {default as Paletli1} from './details/excavators/1-1.png';
+export {default as Paletli2} from './details/excavators/1-2.png';
+export {default as Balon1} from './details/excavators/2-1.png';
+export {default as Balon2} from './details/excavators/2-2.png';
+export {default as Mini1} from './details/excavators/3-1.png';
+export {default as Mini2} from './details/excavators/3-2.png';
+export {default as Digger1} from './details/excavators/4-1.png';
+export {default as Digger2} from './details/excavators/4-2.png';
+export {default as Digger3} from './details/excavators/4-3.png';
+
+// products asphalt images
+export {default as Grayder} from './roders/avtogreyder.png';
+export {default as Buldozer} from './roders/buldozer.png';
+export {default as Kat} from './roders/kat.png';
+export {default as Kompressor} from './roders/kompressor.png';
+
+//  avtograyder , buldozer , katka , kampressor
+export {default as Grayder1} from './details/roaders/1-1.png';
+export {default as Grayder2} from './details/roaders/1-2.png';
+export {default as Grayder3} from './details/roaders/1-3.png';
+export {default as Buldozer1} from './details/roaders/2-1.png';
+export {default as Buldozer2} from './details/roaders/2-2.png';
+export {default as Buldozer3} from './details/roaders/2-3.png';
+export {default as Katka1} from './details/roaders/3-1.png';
+export {default as Katka2} from './details/roaders/3-2.png';
+export {default as Kampressor1} from './details/roaders/4-1.png';
+export {default as Kampressor2} from './details/roaders/4-3.png';
+export {default as Kampressor3} from './details/roaders/4-5.png';
+
+// avto brands
+export {default as Gehl} from './brands/gehl.png'
+export {default as Hyundai} from './brands/hyundai.png'
+export {default as JCB} from './brands/jcb.png'
+export {default as Lonking} from './brands/lonking.png'
+export {default as Mitsubishi} from './brands/mitsubishi.png'
+export {default as XCMG} from './brands/xcmg.png'
+
+// Partners
+export {default as Ezgu } from './partners/ezgu.png';
+export {default as Fidokor} from './partners/fidokor.png';
+export {default as Kohota } from './partners/kohota.png';
+export {default as Minerva } from './partners/minerva.png';
+export {default as NRG } from './partners/nrg.png';
+export {default as ToshCity } from './partners/tashkentcity.png';

components/pageParts/products.tsx

@@ -3,17 +3,19 @@
 import React, { useState } from "react";
 import Title from "../tools/title";
 import Text from "../text";
+import { Asphalt, Ekskavator, Forklift, Kran, Truck } from "@/assets";
+import Image from "next/image";
+import type {productFilterTypes}  from "@/types";
 
-const productsTypes: string[] = [
-  "trucks",
-  "cranes",
-  "forklift-trucks",
-  "excavators",
-  "road-repairs",
+const productFilterTypes: productFilterTypes[] = [
+  { name: "trucks", image: Truck },
+  { name: "cranes", image: Kran },
+  { name: "forklift-trucks", image: Ekskavator },
+  { name: "excavators", image: Forklift },
+  { name: "road-repairs", image: Asphalt },
 ];
 
 export default function Products() {
-
   //product type togle states
   const [productFilter, setProductFilter] = useState<string | null>(null);
   return (
@@ -33,13 +35,21 @@ export default function Products() {
 
       {/* product filters */}
       <div className="flex flex-wrap gap-3 items-center justify-center">
-        {productsTypes.map((item, index) => (
+        {productFilterTypes.map((item, index) => (
           <button
             key={index}
-            onClick={()=>setProductFilter(item)}
-            className={`${productFilter === item ?'bg-secondary' : ''} hover:bg-secondary border-gray-300 hover:border-secondary border-[1px] px-10 py-3 text-2xl rounded-tr-full rounded-bl-full `}
+            onClick={() => setProductFilter(item.name)}
+            className={`${
+              productFilter === item.name ? "bg-secondary" : ""
+            } flex items-center gap-2 hover:bg-secondary border-gray-300 hover:border-secondary border-[1px] px-8 py-3 text-2xl rounded-tr-full rounded-bl-full `}
           >
-            <Text txt={item} />
+            <Text txt={item.name} />
+            <Image
+              src={item.image}
+              alt="Truck images"
+              width={50}
+              height={50}
+            />
           </button>
         ))}
       </div>

types/index.ts

@@ -1,6 +1,33 @@
-
+import { StaticImageData } from "next/image";
 
 //// ============ tool's types ============ //////
 export interface TitleType {
   text: string;
 }
+
+export interface productFilterTypes {
+  name: string;
+  image: StaticImageData;
+}
+
+export interface MainProductCard{
+    uzunlik?:string;
+    kenglik?:string;
+    balandlik?:String;
+    yukqob?:String;
+    makBalandlik?:string;
+}
+
+export interface ProductCardType extends MainProductCard{
+    image?:StaticImageData[];
+    title?:string;
+    y_turi?:string;
+    hajmi?:string;
+    tezlik?:string;
+    interkuler?:string;
+    quvvat?:string;
+    quti?:string;
+    turboDizel?:string;
+    ogirlig?:string;
+    bomUzunlik?:string;
+}