products

components/carPageParts/carType_head.tsx

@@ -1,10 +1,57 @@
-"use client"
+"use client";
 
-import { useParams } from "next/navigation"
+import { backOne } from "@/assets";
+import Image from "next/image";
+import { useParams } from "next/navigation";
+import Text from "../text";
+import Link from "next/link";
 
 export default function CarType_Header() {
-  const router = useParams();
+  const params = useParams();
+  console.log(params);
   return (
-    <div>Header</div>
-  )
+    <div
+      dir="ltr"
+      className="w-full h-[300px] relative flex items-center justify-center "
+    >
+      {/* back image */}
+      <Image
+        alt="CarTypeImage"
+        src={backOne}
+        className="w-full h-full object-center object-cover absolute top-0 left-0 -z-20"
+      />
+
+      {/* opacity */}
+      <div className="absolute top-0 left-0 w-full h-full -z-10 bg-black opacity-70"></div>
+
+      {/* title */}
+      <div
+        id="title-Part"
+        className="flex flex-col items-center justify-center gap-4"
+      >
+        <div
+          id="title"
+          className="text-white font-bold text-[50px] tracking-[2px]"
+        >
+          <Text txt={`${params.carType}`} />
+        </div>
+
+        <div
+          id="under-title"
+          className="text-white flex items-center justify-center gap-3"
+        >
+          <Link
+            href={"/"}
+            className="hover:cursor-pointer hover:text-secondary  "
+          >
+            <Text txt="home" />
+          </Link>
+          /
+          <div className="text-secondary" >
+            <Text txt={`${params.carType}`} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 }

components/carPageParts/productCard.tsx

@@ -1,25 +0,0 @@
-"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}
-          height={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>
-  );
-}