product data

components/carTypePageParts/carType_head.tsx

@@ -0,0 +1,10 @@
+"use client"
+
+import { useParams } from "next/navigation"
+
+export default function CarType_Header() {
+  const router = useParams();
+  return (
+    <div>Header</div>
+  )
+}

components/carTypePageParts/productCard.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { ProductTypes } from "@/types";
+import Image from "next/image";
+import Link from "next/link";
+
+export default function ProductCard({data}:{data: ProductTypes}) {
+    return (
+    <Link href={`/${data.path}`} 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 py-15 px-2" >
+        <Image
+          src={data.image}
+          alt={data.truck_name}
+          width={200}
+          className="object-contain h-auto"
+        />
+      </div>
+      <div className="bg-[#fafafa] w-full py-5 rounded-b-lg flex flex-col items-center justify-center ">
+        <p>{data.truck_name}</p>
+        <p className="text-secondary">{data.desc}</p>
+      </div>
+    </Link>
+  );
+}

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>
   );
 }