responsive bug fixing

app/globals.css

@@ -63,3 +63,24 @@ 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;
+}
+}

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" />

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><Text txt={data.truck_name}/></p>
-        <p className="text-secondary">{data.desc}</p>
+        <p className="text-secondary"><Text txt={data.desc}/></p>
       </div>
     </Link>
   );

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="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-8 text-[16px] font-semibold left-5 bg-secondary py-1 px-3 clip-trapezoid">
+            <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>

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="max-w-[1200px] flex items-start w-full mx-auto pt-10 px-5">
-        <div className="flex items-start justify-around">
+        <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,6 +108,7 @@ export default function Footer() {
               </div>
             </div>
           </div>
+        </div>
         <div className="group flex flex-col items-end justify-end pt-15">
             <div className="group relative">
               <div
@@ -167,7 +168,6 @@ export default function Footer() {
             />
         </div>
       </div>
-      </div>
 
       <div className=" py-5 text-white border-t-[1px] text-center border-gray-500 mt-20">
         Ismoiljon Mirabdullayev © 2025. All rights reserved.

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;
+    position: fixed; /* ✅ absolute emas */
-    z-index: 1;
+    z-index: 1001; /* yuqoriroq bo‘lsin */
-    top: 0vh;
+    top: 0;
     left: 0;
-    bottom: 0;
     height: 100vh;
-    width: calc(40% + 100px);
+    width: 80%; /* ✅ width: calc(40% + 100px) o‘rniga */
-    max-width: 100%;
+    max-width: 400px; /* qo‘shimcha himoya */
-    background-color: white;
     background: white;
     display: flex;
     flex-direction: column;
     justify-content: start;
     align-items: start;
     gap: 20px;
-    padding: 0 10px 10px 10px;
+    padding: 10px;
-    transform: translate(-100%);
+    transform: translateX(-100%);
-    transition: 0.4s ease-in-out;
+    transition: transform 0.4s ease-in-out;
+    box-sizing: border-box; /* ✅ scrollni oldini olish */
   }
 
   .overflow {

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">
+    <section dir="ltr" className="relative w-full bg-primary py-20 flex justify-center mt-40 px-4">
-      <div className=" absolute z-20 -top-25 bg-secondary max-w-[1200px] w-full py-10 flex flex-col items-center clip-trapezoid">
+      <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>

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>

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="">

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>

components/pageParts/partners.tsx

@@ -27,35 +27,33 @@ 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">
+            <div className="my-20">
               <Swiper
                 autoplay={{
                   reverseDirection: true,
                   delay: 2500,
                   disableOnInteraction: false,
                 }}
+                loop={true}
                 modules={[Autoplay]}
                 slidesPerView={4}
-          breakpoints={{
+                className="mySwiper flex items-center justify-around"
-            320: { slidesPerView: 1 },
-            640: { slidesPerView: 2 },
-            1024: { slidesPerView: 4 },
-          }}
-          className="mySwiper flex items-center justify-center"
               >
                 {images.map((item, index) => (
-            <SwiperSlide key={index}>
+                  <SwiperSlide key={index} className="!w-[200px] mx-10 " >
                     <Image
                       src={item}
                       alt="Partner images"
-                className="w-[200px] h-[200px] object-contain"
+                      width={200}
+                      height={200}
+                      className="object-contain mx-auto max-w-[200px] h-auto"
                     />
                   </SwiperSlide>
                 ))}

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} />

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>