responsive bug fixing

2025-11-04 15:19:47 +05:00
parent 9720f1a6d3
commit 0527b4bb20
13 changed files with 83 additions and 63 deletions
--- 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>
--- 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>
--- 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="">
--- 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>
--- 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>
  );
 }
--- 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} />
--- 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>