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/cards/productCard.tsx

@@ -6,14 +6,14 @@ 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]">
+    <Link href={`/${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}
           width={200}
           height={200}
-          className="object-contain h-auto"
+          className="object-contain max-h-[200px] h-full"
         />
       </div>
       <div className="bg-[#fafafa] w-full py-5 rounded-b-lg flex flex-col items-center justify-center ">

components/cards/sliderCard.tsx

@@ -0,0 +1,22 @@
+import Image, { StaticImageData } from "next/image";
+import Link from "next/link";
+
+interface typePropData{
+    id:number;
+    image:StaticImageData | string;
+    text:string;
+    title:string;
+    path:string;
+}
+
+export default function SliderCard({data}:{data:typePropData}) {
+  return (
+    <Link href={data.path} id="news_slider_card" className="group" >
+        <Image src={data.image} alt="slider image" width={1} height={1} />
+        <div className="relative border flex flex-col items-start justify-start">
+            <div>{data.title}</div>
+            <div>{data.text}</div>
+        </div>
+    </Link>
+  )
+}

components/nav_foot/footer.tsx

@@ -23,9 +23,9 @@ export default function Footer() {
               <Image src={logoImg} alt="logo image" width={100} height={100} />
               <p className="text-white text-2xl font-bold">SPES-TEXNIKA</p>
             </div>
-            <p className="leading-[28px] text-white text-xl max-w-[430px] w-full mt-8">
+            <div className="leading-[28px] text-white text-xl max-w-[430px] w-full mt-8">
               <Text txt="footer-p" />
-            </p>
+            </div>
             <div className="flex flex-col items-start gap-4 mt-10 ">
               <div className="text-white text-xl font-semibold">
                 <Text txt="subscribe" />
@@ -63,18 +63,18 @@ export default function Footer() {
             <div className="text-white text-2xl font-bold">
               <Text txt="links" />
             </div>
-            <p className="flex items-center gap-2 text-white hover:text-secondary hover:cursor-pointer ">
+            <div className="flex items-center gap-2 text-white hover:text-secondary hover:cursor-pointer ">
               <span className="w-[10px] h-[10px] bg-secondary rounded-[50%] "></span>
               <Text txt="products" />
-            </p>
-            <p className="flex items-center gap-2 text-white hover:text-secondary hover:cursor-pointer ">
+            </div>
+            <div className="flex items-center gap-2 text-white hover:text-secondary hover:cursor-pointer ">
               <span className="w-[10px] h-[10px] bg-secondary rounded-[50%] "></span>
               <Text txt="news" />
-            </p>
-            <p className="flex items-center gap-2 text-white hover:text-secondary hover:cursor-pointer ">
+            </div>
+            <div className="flex items-center gap-2 text-white hover:text-secondary hover:cursor-pointer ">
               <span className="w-[10px] h-[10px] bg-secondary rounded-[50%] "></span>
               <Text txt="contact" />
-            </p>
+            </div>
           </div>
 
           <div className="flex flex-col justify-start">

components/nav_foot/navbar.tsx

@@ -33,7 +33,7 @@ export default function Navbar() {
 
   return (
     <div
-      className={`w-[100%] bg-white  border-gray shadow-lg shadow-gray-200 z-[1000] top-0`}
+      className={`w-[100%] bg-white  border-gray shadow-md shadow-gray-500 z-[1000] top-0`}
     >
       <div className="container max-w-[1500px] w-full px-[10px] mx-auto items-center justify-between ">
         <div

components/pageParts/newsSlider.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Navigation } from "swiper/modules";
+import "swiper/css";
+import "swiper/css/navigation";
+import Image from "next/image";
+import Title from "../title";
+import SliderCard from "../cards/sliderCard";
+
+// The custom CSS selectors for navigation
+const navigationPrevEl = ".custom-swiper-prev";
+const navigationNextEl = ".custom-swiper-next";
+
+const data = [
+  {
+    id: 1,
+    image: "/images/yuklagich.jpg",
+    title: "Old Yuklagich",
+    text: "Yangi yuklagich siz uchun eng yaxshi texnika!",
+    path: "",
+  },
+  {
+    id: 2,
+    image: "/images/kompressor.jpg",
+    title: "Kompressor",
+    text: "Yangi kompressorlar to'plami aynan siz uchun",
+    path: "",
+  },
+  {
+    id: 3,
+    image: "/images/avtokran.jpg",
+    title: "Avtokran",
+    text: "Bizning kuchli kranlarimiz bilan ishingiz yanada osonlashadi.",
+    path: "",
+  },
+];
+
+export default function CustomSlider() {
+  return (
+    <div dir="ltr" className="w-full relative">
+      {/* Title */}
+      <div className="my-10 mb-20 flex items-center justify-between">
+        <Title text="news-h2" />
+      </div>
+
+      {/* Swiper */}
+      <Swiper
+        modules={[Navigation]}
+        slidesPerView={3}
+        spaceBetween={30}
+        loop={true}
+        navigation={{
+          // Pass the class selectors here
+          prevEl: navigationPrevEl,
+          nextEl: navigationNextEl,
+        }}
+        breakpoints={{
+          0: { slidesPerView: 1 },
+          768: { slidesPerView: 2 },
+          1024: { slidesPerView: 3 },
+        }}
+      >
+        {data.map((item, index) => (
+          <SwiperSlide key={index}>
+            <SliderCard data={item} />
+          </SwiperSlide>
+        ))}
+      </Swiper>
+
+      {/* Custom buttons */}
+      <div className="absolute top-1/2 right-4 flex gap-2 -translate-y-1/2">
+        <button
+          className={`${navigationPrevEl.replace('.', '')} w-10 h-10 bg-blue-900 text-white flex items-center justify-center rounded hover:bg-blue-700 transition`}
+        >
+          ‹
+        </button>
+        <button
+          className={`${navigationNextEl.replace('.', '')} w-10 h-10 bg-blue-900 text-white flex items-center justify-center rounded hover:bg-blue-700 transition`}
+        >
+          ›
+        </button>
+      </div>
+    </div>
+  );
+}

components/pageParts/products.tsx

@@ -5,9 +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, ProductTypes}  from "@/types";
+import type { productFilterTypes, ProductTypes } from "@/types";
 import { allProducts } from "@/data";
-import ProductCard from "../carPageParts/productCard";
+import ProductCard from "../cards/productCard";
 
 const productFilterTypes: productFilterTypes[] = [
   { name: "trucks", image: Truck },
@@ -58,9 +58,11 @@ export default function Products() {
       </div>
 
       {/* products */}
-      <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 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, index: number) => (
+          <div key={index} >
+            <ProductCard data={item} />
+          </div>
         ))}
       </div>
     </div>