product data

components/pageParts/products.tsx

@@ -5,7 +5,9 @@ import Title from "../title";
 import Text from "../text";
 import { Asphalt, Ekskavator, Forklift, Kran, Truck } from "@/assets";
 import Image from "next/image";
-import type {productFilterTypes}  from "@/types";
+import type {productFilterTypes, ProductTypes}  from "@/types";
+import { allProducts } from "@/data";
+import ProductCard from "../carTypePageParts/productCard";
 
 const productFilterTypes: productFilterTypes[] = [
   { name: "trucks", image: Truck },
@@ -19,7 +21,7 @@ export default function Products() {
   //product type togle states
   const [productFilter, setProductFilter] = useState<string | null>(null);
   return (
-    <div>
+    <div className="max-w-[1200px] w-full mx-auto">
       {/* title part */}
       <div className="flex flex-col md:gap-8 gap-4">
         <div className="flex items-center justify-center w-full ">
@@ -55,7 +57,11 @@ export default function Products() {
       </div>
 
       {/* products */}
-      <div></div>
+      <div className="grid gap-5 grid-cols-1 min-sm:grid-cols-2 min-lg:grid-cols-4 min-[1210px]:grid-cols-4" >
+        {allProducts.map((item:ProductTypes)=>(
+          <ProductCard data={item} />
+        ))}
+      </div>
     </div>
   );
 }