everything

app/globals.css

@@ -52,6 +52,20 @@ body {
   clip-path: polygon(100% 0, 55% 100%, 88% 100%);
 }
 
+#contactClip{
+  position: relative;
+}
+
+#contactClip::before{
+content:'';
+position: absolute;
+top:-40px;
+left: -50px;
+z-index: 1000;
+padding: 50px;
+background-color: #d38307;
+clip-path: polygon(100% 0, 55% 100%, 88% 100%);
+}
 
 /* footer ekxkavator icon animation */
 @keyframes icon_animatsion_tool {

assets/index.ts

@@ -185,3 +185,9 @@ export {default as Ekxkavator_vektor} from './excavator-vector.jpg';
 // opacity back image
 export {default as backOne} from './changeImg/jcb.avif';
 export {default as backTwo} from './changeImg/4.jpg';
+
+// slider image declare
+export {default as ekskavatorSlider} from './changeImg/2.jpg';
+export {default as oldYuklagich} from './details/loaders/1-5.webp'
+export {default as kompressorSlider} from './details/roaders/4-1.png';
+export {default as AvtokranSlider} from './details/cranes/2-1.png'

components/cards/sliderCard.tsx

@@ -1,21 +1,23 @@
+import { ProductTypes } from "@/types";
 import Image, { StaticImageData } from "next/image";
 import Link from "next/link";
+import Text from "../text";
 
-interface typePropData{
+export default function SliderCard({data}:{data:ProductTypes}) {
-    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 hover:cursor-pointer" >
-        <Image src={data.image} alt="slider image" width={100} height={100} />
+        <Image 
-        <div className="relative border flex flex-col items-start justify-start">
+        src={data.image} 
-            <div>{data.title}</div>
+        alt="slider image" 
-            <div>{data.text}</div>
+        width={600} 
+        height={600} 
+        className="object-cover max-w-[600px] w-full h-[300px]" 
+        />
+        <div className="relative mt-6 text-primary flex flex-col items-start p-4 justify-start bg-gray-50 border-b-6 border-gray-400 group hover:border-b-secondary">
+            <div className="absolute -top-8 text-[16px] font-semibold left-5 bg-secondary py-1 px-3 clip-trapezoid">
+              <Text txt={data.truck_name}/>
+            </div>
+            <div className="text-xl font-bold flex items-center h-[60px] hover:text-secondary"><Text txt={data.desc}/></div>
         </div>
     </Link>
   )

components/pageParts/contact.tsx

@@ -3,6 +3,7 @@ export default function Contact() {
   return (
     <section dir="ltr" className="relative w-full bg-primary py-20 flex justify-center mt-40">
       <div className=" absolute z-20 -top-25 bg-secondary max-w-[1200px] w-full py-10 flex flex-col items-center clip-trapezoid">
+        <div id="contactClip" className="w-full flex flex-col items-center justify-center">
           <h2 className="text-2xl md:text-3xl font-bold text-primary mb-5 text-center">
           Qo'ng'iroqni buyurtma qiling
         </h2>
@@ -19,7 +20,8 @@ export default function Contact() {
           </button>
         </div>
         </div>
-      <div className="bg-[#d38307] clip-part absolute -top-25 py-[50px] px-18 left-[97px] z-10" ></div>
+      </div>
+      {/* <div className="bg-[#d38307] clip-part absolute -top-25 py-[50px] px-18 left-[97px] z-10" ></div> */}
     </section>
   );
 }

components/pageParts/newsSlider.tsx

@@ -4,44 +4,37 @@ 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";
+import { sliderData } from "@/data";
 
 // 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">
+    <div dir="ltr" className="max-w-[1400px] w-full mx-auto relative my-20">
       {/* Title */}
       <div className="my-10 mb-20 flex items-center justify-between ">
+        <div className="">
           <Title text="news-h2" />
+        </div>
+
+         {/* Custom buttons */}
+      <div className="flex gap-2 items-center justify-center">
+        <button
+          className={`${navigationPrevEl.replace('.', '')} w-10 h-10  p-0 bg-primary text-[30px] text-center text-white flex items-center justify-center hover:bg-secondary hover:cursor-pointer transition`}
+        >
+          ‹
+        </button>
+        <button
+          className={`${navigationNextEl.replace('.', '')} w-10 h-10 bg-primary text-[30px] text-center text-white flex items-center justify-center hover:bg-secondary hover:cursor-pointer transition `}
+        >
+          ›
+        </button>
+      </div>
+
       </div>
 
       {/* Swiper */}
@@ -61,26 +54,13 @@ export default function CustomSlider() {
           1024: { slidesPerView: 3 },
         }}
       >
-        {data.map((item, index) => (
+        {sliderData.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/offer.tsx

@@ -32,8 +32,11 @@ export default function Offer() {
             <Text txt="about-block-quote" />
             <span className="mt-2">"</span>
           </div>
-          <button className="group relative text-white hover:text-primary">
+          <button className="w-[200px] h-[50px] flex items-center justify-center group relative text-white hover:text-primary bg-primary text-lg font-bold py-2 px-5 hover:cursor-pointer">
+            <div className="w-full h-full flex items-center justify-center z-20 absolute">
               <Text txt="contact-us" />
+            </div>
+            <span className="w-[15px] h-[15px] bg-secondary absolute z-10 bottom-0 right-0 group-hover:w-full group-hover:h-full "></span>
           </button>
         </div>
 

components/pageParts/products.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 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 { allProducts } from "@/data";
+import { allProducts, cranes, excavators, forklift, road_repairs, trucks } from "@/data";
 import ProductCard from "../cards/productCard";
 
 const productFilterTypesMainPage: productFilterTypes[] = [
@@ -15,13 +15,33 @@ const productFilterTypesMainPage: productFilterTypes[] = [
   { name: "forklift-trucks", image: Ekskavator },
   { name: "excavators", image: Forklift },
   { name: "road-repairs", image: Asphalt },
+  { name: "all", image: '' },
 ];
 
 export default function Products() {
-  //product type togle states
+ 
   const [productFilter, setProductFilter] = useState<string | null>(null);
+
+  const [cars,setCars] = useState(allProducts)
+
+  // execute filetr function 
+  useEffect(()=>{
+    if(productFilter === 'trucks'){
+      setCars(trucks);
+    }else if(productFilter === 'cranes'){
+      setCars(cranes);
+    }else if(productFilter === 'forklift-trucks'){
+      setCars(forklift);
+    } else if(productFilter === 'excavators'){
+      setCars(excavators);
+    }else if(productFilter === 'road-repairs'){
+      setCars(road_repairs)
+    }else {
+      setCars(allProducts)
+    }
+  },[productFilter])
   return (
-    <div className="max-w-[1200px] w-full mx-auto">
+    <div dir="ltr" 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 ">
@@ -36,7 +56,7 @@ export default function Products() {
       </div>
 
       {/* product filters */}
-      <div className="flex flex-wrap gap-1 items-center justify-center mb-10 ">
+      <div className="flex flex-wrap gap-1 gap-y-4 items-center justify-center mb-10 ">
         {productFilterTypesMainPage.map((item, index) => (
           <button
             key={index}
@@ -46,20 +66,20 @@ export default function Products() {
             } flex items-center gap-2 h-[58px] hover:bg-secondary border-gray-300 hover:border-secondary border-[1px] px-7 text-2xl rounded-tr-full rounded-bl-full `}
           >
             <Text txt={item.name} />
-            <Image
+            {item.image && (<Image
               src={item.image}
               alt="Truck images"
               width={50}
               height={50}
               className="object-cover"
-            />
+            />)}
           </button> 
         ))}
       </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">
+      <div className="grid gap-5 grid-cols-1 place-content-center min-sm:grid-cols-2 min-lg:grid-cols-4 min-[1210px]:grid-cols-4">
-        {allProducts.map((item: ProductTypes, index: number) => (
+        {cars.map((item: ProductTypes, index: number) => (
           <div key={index} >
             <ProductCard data={item} />
           </div>

data/index.ts

@@ -1,12 +1,15 @@
 import {
+  AvtokranSlider,
   Balon,
   Buldozer,
   Digger,
+  ekskavatorSlider,
   Forkliftlar,
   Gazel,
   Grayder,
   Kat,
   Kompressor,
+  kompressorSlider,
   Kran1,
   Kran2,
   Kran3,
@@ -15,6 +18,7 @@ import {
   Mikser,
   Mini,
   Old,
+  oldYuklagich,
   Paletli,
   Samasval,
   Teleskop,
@@ -185,3 +189,36 @@ export const allProducts : ProductTypes[] = [
   ...excavators,
   ...road_repairs,
 ];
+
+
+
+export const sliderData : ProductTypes[] = [
+  {
+  id: 1,
+  truck_name: 'excavators',
+  desc: 'news-title1',
+  path: 'crawler-excavators',
+  image: ekskavatorSlider,
+},
+{
+  id: 2,
+  truck_name: 'front-loaders',
+  desc: 'news-title2',
+  path: 'front-loaders',
+  image: oldYuklagich,
+},
+{
+  id: 3,
+  truck_name: 'compressors',
+  desc: 'news-title3',
+  path: 'compressors',
+  image: kompressorSlider,
+},
+{
+  id: 4,
+  truck_name: 'compressors',
+  desc: 'news-title3',
+  path: 'compressors',
+  image: AvtokranSlider,
+},
+]

i18n/index.ts

@@ -5,7 +5,7 @@ import LanguageDetector from "i18next-browser-languagedetector";
 
 // import lanaguage files
 import uzWords from "../public/locales/uz/common.json";
-import enWords from "../public/locales/ru/common.json";
+import ruWords from "../public/locales/ru/common.json";
 
 i18n
   .use(Backend)
@@ -14,7 +14,7 @@ i18n
   .init({
     resources: {
       uz: { translation: uzWords },
-      en: { translation: enWords },
+      ru: { translation: ruWords },
     },
     lng: "uz",
     fallbackLng: "uz",

i18n/settings.ts

@@ -1 +0,0 @@
-export const languages = ["uz", "ru"] as const;

public/locales/ru/common.json

@@ -1,4 +1,5 @@
 {
+    "all":"Все машины",
     "home": "Главное",
     "products": "Продукты",
     "news": "Новости",

public/locales/uz/common.json

@@ -1,4 +1,5 @@
 {
+    "all":"Barcha mashinalar",
     "home": "Asosiy",
     "products": "Maxsulotlar",
     "news": "Yangiliklar",

types/index.ts

@@ -7,7 +7,7 @@ export interface TitleType {
 
 export interface productFilterTypes {
   name: string;
-  image: StaticImageData;
+  image: StaticImageData|string;
 }
 
 export interface MainProductCard{