From 0527b4bb20e8c81088caaef35218c876a135da53 Mon Sep 17 00:00:00 2001
From: "nabijonovdavronbek619@gmail.com" <nabijonovdavronbek619@gmail.com>
Date: Tue, 4 Nov 2025 15:19:47 +0500
Subject: [PATCH] responsive bug fixing

---
 app/globals.css                          | 21 +++++++++
 components/carPageParts/carType_head.tsx |  2 +-
 components/cards/productCard.tsx         |  9 ++--
 components/cards/sliderCard.tsx          |  4 +-
 components/nav_foot/footer.tsx           |  8 ++--
 components/nav_foot/navbar.css           | 20 ++++-----
 components/pageParts/contact.tsx         |  8 ++--
 components/pageParts/faq.tsx             | 10 ++---
 components/pageParts/newsSlider.tsx      |  2 +-
 components/pageParts/offer.tsx           |  4 +-
 components/pageParts/partners.tsx        | 54 ++++++++++++------------
 components/pageParts/products.tsx        |  2 +-
 components/pageParts/texnika.tsx         |  2 +-
 13 files changed, 83 insertions(+), 63 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index c312b2e..b5de9cd 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -62,4 +62,25 @@ body {
 }
 .icon_animation{
   animation: icon_animatsion_tool 2s infinite alternate-reverse ;
+}
+
+@media(max-width:640px){
+  /* 🟠 Sariq blok trapezoid shakl */
+.clip-trapezoid {
+  clip-path: none;
+}
+
+/* Input blokining shakli */
+.clip-input {
+  clip-path: none;
+}
+
+/* Tugma blokining shakli */
+.clip-button {
+  clip-path: none;
+}
+
+.clip-part{
+clip-path: none;
+}
 }
\ No newline at end of file
diff --git a/components/carPageParts/carType_head.tsx b/components/carPageParts/carType_head.tsx
index 39b42ce..553fbde 100644
--- a/components/carPageParts/carType_head.tsx
+++ b/components/carPageParts/carType_head.tsx
@@ -41,7 +41,7 @@ export default function CarType_Header() {
           className="text-white flex items-center justify-center gap-3"
         >
           <Link
-            href={"/"}
+            href='/'
             className="hover:cursor-pointer hover:text-secondary  "
           >
             <Text txt="home" />
diff --git a/components/cards/productCard.tsx b/components/cards/productCard.tsx
index 06c6d77..0752d53 100644
--- a/components/cards/productCard.tsx
+++ b/components/cards/productCard.tsx
@@ -3,10 +3,13 @@
 import { ProductTypes } from "@/types";
 import Image from "next/image";
 import Link from "next/link";
+import Text from "../text";
+import { useParams } from "next/navigation";
 
 export default function ProductCard({data}:{data: ProductTypes}) {
+  const {lang} = useParams();
     return (
-    <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]">
+    <Link href={`/${lang}/${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}
@@ -17,8 +20,8 @@ export default function ProductCard({data}:{data: ProductTypes}) {
         />
       </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>
+        <p><Text txt={data.truck_name}/></p>
+        <p className="text-secondary"><Text txt={data.desc}/></p>
       </div>
     </Link>
   );
diff --git a/components/cards/sliderCard.tsx b/components/cards/sliderCard.tsx
index 1d8368c..e494244 100644
--- a/components/cards/sliderCard.tsx
+++ b/components/cards/sliderCard.tsx
@@ -13,8 +13,8 @@ export default function SliderCard({data}:{data:ProductTypes}) {
         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">
+        <div className="relative overflow-visible 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-10 sm:-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>
diff --git a/components/nav_foot/footer.tsx b/components/nav_foot/footer.tsx
index ed9c7dd..6d6d1ab 100644
--- a/components/nav_foot/footer.tsx
+++ b/components/nav_foot/footer.tsx
@@ -15,8 +15,8 @@ import { FaLocationDot } from "react-icons/fa6";
 export default function Footer() {
   return (
     <div dir="ltr" className="bg-primary">
-      <div className="max-w-[1200px] w-full mx-auto pt-10 ">
-        <div className="flex items-start justify-around">
+      <div className="max-w-[1200px] flex items-start w-full mx-auto pt-10 px-5">
+        <div className="flex flex-wrap items-start justify-between gap-5 max-sm:gap-10">
           <div>
             {/* logo */}
             <div className="flex items-center gap-4">
@@ -108,7 +108,8 @@ export default function Footer() {
               </div>
             </div>
           </div>
-            <div className="group flex flex-col items-end justify-end pt-15">
+        </div>
+        <div className="group flex flex-col items-end justify-end pt-15">
             <div className="group relative">
               <div
                 className="
@@ -165,7 +166,6 @@ export default function Footer() {
               className="mt-3 hover:cursor-pointer icon_animation rounded-[50%] object-cover"
               alt="icon image"
             />
-            </div>
         </div>
       </div>
 
diff --git a/components/nav_foot/navbar.css b/components/nav_foot/navbar.css
index bde3af1..52f1347 100644
--- a/components/nav_foot/navbar.css
+++ b/components/nav_foot/navbar.css
@@ -31,7 +31,6 @@
   background-color: rgba(66, 64, 64, 0.199);
 }
 
-
 @media (max-width: 580px) {
   .overflow.active {
     display: block;
@@ -66,24 +65,23 @@
   }
 
   .nav_link_group_phone {
-    position: absolute;
-    z-index: 1;
-    top: 0vh;
+    position: fixed; /* ✅ absolute emas */
+    z-index: 1001; /* yuqoriroq bo‘lsin */
+    top: 0;
     left: 0;
-    bottom: 0;
     height: 100vh;
-    width: calc(40% + 100px);
-    max-width: 100%;
-    background-color: white;
+    width: 80%; /* ✅ width: calc(40% + 100px) o‘rniga */
+    max-width: 400px; /* qo‘shimcha himoya */
     background: white;
     display: flex;
     flex-direction: column;
     justify-content: start;
     align-items: start;
     gap: 20px;
-    padding: 0 10px 10px 10px;
-    transform: translate(-100%);
-    transition: 0.4s ease-in-out;
+    padding: 10px;
+    transform: translateX(-100%);
+    transition: transform 0.4s ease-in-out;
+    box-sizing: border-box; /* ✅ scrollni oldini olish */
   }
 
   .overflow {
diff --git a/components/pageParts/contact.tsx b/components/pageParts/contact.tsx
index a30d5f2..1364b0e 100644
--- a/components/pageParts/contact.tsx
+++ b/components/pageParts/contact.tsx
@@ -1,21 +1,21 @@
 
 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">
+    <section dir="ltr" className="relative w-full bg-primary py-20 flex justify-center mt-40 px-4">
+      <div className="mx-auto 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>
 
         {/* Input va Button bloki */}
-        <div className="flex w-full max-w-2xl">
+        <div className="flex w-full max-w-2xl px-4">
           <input
             type="text"
             placeholder="Your phone number"
             className="flex-1 py-3 px-5 bg-white text-gray-600 placeholder-gray-400 text-lg clip-input focus:outline-none"
           />
-          <button className="bg-primary -ml-5 text-white px-6 py-3 text-lg font-medium clip-button">
+          <button className="bg-primary -ml-5 text-white sm:px-6 sm:py-3 p-2 text-lg font-medium clip-button">
             Menga qo'ng'iroq qiling
           </button>
         </div>
diff --git a/components/pageParts/faq.tsx b/components/pageParts/faq.tsx
index ef6785a..8ea0aa0 100644
--- a/components/pageParts/faq.tsx
+++ b/components/pageParts/faq.tsx
@@ -7,7 +7,7 @@ const FaqTexts: CollapseProps["items"] = [
   {
     key: "1",
     showArrow: false,
-    className: "!border-[3px] !border-secondary !rounded-[15px] p-5 mb-10",
+    className: "!border-[3px] !border-secondary !rounded-[15px] sm:p-5 mb-10",
     label: (
       <div className="text-black text-2xl font-[600]">
         <Text txt="faq1" />
@@ -22,7 +22,7 @@ const FaqTexts: CollapseProps["items"] = [
   {
     key: "2",
     showArrow: false,
-    className: "!border-[3px] !border-secondary !rounded-[15px] p-5 mb-10",
+    className: "!border-[3px] !border-secondary !rounded-[15px] sm:p-5 mb-10",
     label: (
       <div className="text-black text-2xl font-[600]">
         <Text txt="faq2" />
@@ -37,7 +37,7 @@ const FaqTexts: CollapseProps["items"] = [
   {
     key: "3",
     showArrow: false,
-    className: "!border-[3px] !border-secondary !rounded-[15px] p-5 mb-10",
+    className: "!border-[3px] !border-secondary !rounded-[15px] sm:p-5 mb-10",
     label: (
       <div className="text-black text-2xl font-[600]">
         <Text txt="faq3" />
@@ -68,7 +68,7 @@ const FaqTexts: CollapseProps["items"] = [
   {
     key: "4",
     showArrow: false,
-    className: "!border-[3px] !border-secondary !rounded-[15px] p-5 mb-5",
+    className: "!border-[3px] !border-secondary !rounded-[15px] sm:p-5 mb-5",
     label: (
       <div className="text-black text-2xl font-[600]">
         <Text txt="faq4" />
@@ -84,7 +84,7 @@ const FaqTexts: CollapseProps["items"] = [
 
 export default function Faq() {
   return (
-    <div className="max-w-[1200px] w-full mx-auto text-left  mb-30">
+    <div className="max-w-[1200px] w-full mx-auto text-left  mb-30 px-4">
       <div className="mb-10">
         <Title text="faq-h2" />
       </div>
diff --git a/components/pageParts/newsSlider.tsx b/components/pageParts/newsSlider.tsx
index d74d52f..f165d05 100644
--- a/components/pageParts/newsSlider.tsx
+++ b/components/pageParts/newsSlider.tsx
@@ -14,7 +14,7 @@ const navigationNextEl = ".custom-swiper-next";
 
 export default function CustomSlider() {
   return (
-    <div dir="ltr" className="max-w-[1400px] w-full mx-auto relative my-20">
+    <div dir="ltr" className="max-w-[1400px] w-full mx-auto relative my-20 px-4">
       {/* Title */}
       <div className="my-10 mb-20 flex items-center justify-between ">
         <div className="">
diff --git a/components/pageParts/offer.tsx b/components/pageParts/offer.tsx
index fc4c567..0466fbf 100644
--- a/components/pageParts/offer.tsx
+++ b/components/pageParts/offer.tsx
@@ -12,14 +12,14 @@ export default function Offer() {
       </div>
 
       {/* body */}
-      <div className="flex max-[1200px]:flex-wrap items-start justify-end max-w-[1200px] w-full mx-auto">
+      <div className="flex max-[1200px]:flex-wrap max-[1200px]:justify-center items-start justify-end max-w-[1200px] w-full mx-auto">
         <Image
           src={Ekskavator_offer}
           alt="Ekskavator image"
           className="max-[1200px]:flex hidden w-[700px] "
         />
 
-        <div className="flex flex-col items-end text-left justify-end gap-5 text-gray-500 max-w-[500px] w-full min-w-[600px] ">
+        <div className="flex flex-col px-4 items-end text-left justify-end gap-5 text-gray-500 max-w-[1000px] w-full ">
           <div className="text-[16px] leading-[30px]">
             <Text txt="about-p" />
           </div>
diff --git a/components/pageParts/partners.tsx b/components/pageParts/partners.tsx
index 9ae6932..de0ab94 100644
--- a/components/pageParts/partners.tsx
+++ b/components/pageParts/partners.tsx
@@ -27,40 +27,38 @@ const images: StaticImageData[] = [
 
 export default function Partners() {
   return (
-    <div className="my-5 max-w-[1200px] w-full mx-auto ">
+    <div className="my-5 max-w-[1000px] w-full mx-auto ">
       {/* title */}
       <div className="mb-4">
         <Title text="partner-h2" />
       </div>
 
       {/* slider */}
-      <div className="my-10">
-        <Swiper
-          autoplay={{
-            reverseDirection: true,
-            delay: 2500,
-            disableOnInteraction: false,
-          }}
-          modules={[Autoplay]}
-          slidesPerView={4}
-          breakpoints={{
-            320: { slidesPerView: 1 },
-            640: { slidesPerView: 2 },
-            1024: { slidesPerView: 4 },
-          }}
-          className="mySwiper flex items-center justify-center"
-        >
-          {images.map((item, index) => (
-            <SwiperSlide key={index}>
-              <Image
-                src={item}
-                alt="Partner images"
-                className="w-[200px] h-[200px] object-contain"
-              />
-            </SwiperSlide>
-          ))}
-        </Swiper>
-      </div>
+            <div className="my-20">
+              <Swiper
+                autoplay={{
+                  reverseDirection: true,
+                  delay: 2500,
+                  disableOnInteraction: false,
+                }}
+                loop={true}
+                modules={[Autoplay]}
+                slidesPerView={4}
+                className="mySwiper flex items-center justify-around"
+              >
+                {images.map((item, index) => (
+                  <SwiperSlide key={index} className="!w-[200px] mx-10 " >
+                    <Image
+                      src={item}
+                      alt="Partner images"
+                      width={200}
+                      height={200}
+                      className="object-contain mx-auto max-w-[200px] h-auto"
+                    />
+                  </SwiperSlide>
+                ))}
+              </Swiper>
+            </div>
     </div>
   );
 }
diff --git a/components/pageParts/products.tsx b/components/pageParts/products.tsx
index e4e81ee..f608057 100644
--- a/components/pageParts/products.tsx
+++ b/components/pageParts/products.tsx
@@ -78,7 +78,7 @@ export default function Products() {
       </div>
 
       {/* products */}
-      <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">
+      <div className="px-4 grid gap-5 grid-cols-1 place-content-center min-[500px]:grid-cols-2 min-lg:grid-cols-4 min-[1210px]:grid-cols-4">
         {cars.map((item: ProductTypes, index: number) => (
           <div key={index} >
             <ProductCard data={item} />
diff --git a/components/pageParts/texnika.tsx b/components/pageParts/texnika.tsx
index b04ea8e..570ea90 100644
--- a/components/pageParts/texnika.tsx
+++ b/components/pageParts/texnika.tsx
@@ -30,7 +30,7 @@ export default function Texnika() {
   return (
     <div className="my-20 max-w-[1100px] w-full mx-auto">
       {/* title */}
-      <div className="mb-4">
+      <div className="mb-4 px-2">
         <Title text="brand-h2" />
       </div>