From e861d2e02500c6c2a08f0234edcf486b1bcd149b Mon Sep 17 00:00:00 2001
From: RedrockJS <smb.sochi@gmail.com>
Date: Fri, 6 Jun 2025 09:37:54 +0300
Subject: [PATCH] fix: add responsive to license section

---
 src/views/home/ui/home.tsx                    |   4 +-
 src/views/home/ui/license/license.module.scss | 109 +++++++++++++++---
 src/views/home/ui/main/main.module.scss       |  11 +-
 src/views/home/ui/offer/offer.module.scss     |   1 -
 .../license-slider/license-slider.module.scss |   1 +
 src/widgets/license-slider/license-slider.tsx |  29 ++++-
 6 files changed, 127 insertions(+), 28 deletions(-)

diff --git a/src/views/home/ui/home.tsx b/src/views/home/ui/home.tsx
index 63ade2b..61f5f74 100644
--- a/src/views/home/ui/home.tsx
+++ b/src/views/home/ui/home.tsx
@@ -1,7 +1,7 @@
 import Main from './main/main';
 import Offer from './offer/offer';
 import Result from './result/result';
-// import License from './license/license';
+import License from './license/license';
 // import Contacts from './contacts/contacts';
 // import Footer from './footer/footer';
 
@@ -11,7 +11,7 @@ export default function HomePage() {
       <Main />
       <Offer />
       <Result />
-      {/*<License />*/}
+      <License />
       {/*<Contacts />*/}
       {/*<Footer />*/}
     </>
diff --git a/src/views/home/ui/license/license.module.scss b/src/views/home/ui/license/license.module.scss
index 2c6e2dc..2e3e559 100644
--- a/src/views/home/ui/license/license.module.scss
+++ b/src/views/home/ui/license/license.module.scss
@@ -1,32 +1,84 @@
 .License {
   margin: 0 auto;
-  width: rem(1340px);
-  padding: rem(120px) 0 rem(160px);
+  padding: rem(32px) 0 0;
+
+  @include iftablet {
+    margin: 0 auto;
+    width: rem(712px);
+    padding: 0 0 rem(40px);
+  }
+
+  @include iflaptop {
+    width: rem(930px);
+    padding: 0 0 rem(60px);
+  }
+
+  @include ifdesktop {
+    width: rem(1340px);
+    padding: 0 0 rem(160px);
+  }
 
   .Header {
     font-family: $font-open-sans;
     font-weight: $font-semi-bold;
-    font-size: rem(60px);
+    font-size: rem(28px);
     line-height: 100%;
     color: $color-text;
-    margin-bottom: rem(80px);
+    padding: 0 rem(20px) 0;
+    margin-bottom: rem(40px);
+
+    @include iftablet {
+      padding: unset;
+    }
+
+    @include iflaptop {
+      font-size: rem(36px);
+    }
+
+    @include ifdesktop {
+      font-size: rem(60px);
+      margin-bottom: rem(80px);
+    }
   }
 
   .Slider {
-    margin-bottom: rem(80px);
+    margin-bottom: rem(40px);
+    padding: 0 rem(20px) 0;
+
+    @include iftablet {
+      padding: unset;
+    }
+
+    @include ifdesktop {
+      margin-bottom: rem(80px);
+    }
   }
 
   .Form {
     position: relative;
     background: #292E3D;
-    padding: rem(40px) rem(60px);
+    padding: rem(20px) rem(20px);
     border-radius: rem(28px);
     overflow: hidden;
 
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     gap: rem(40px);
 
+    @include iftablet {
+      flex-direction: row;
+      padding: rem(40px) rem(40px);
+      gap: rem(20px);
+    }
+
+    @include iflaptop {
+      padding: rem(40px) rem(60px);
+      gap: rem(40px);
+    }
+
+    @include ifdesktop {
+    }
+
     &:after {
       content: '';
       display: block;
@@ -54,10 +106,25 @@
         z-index: 2;
         font-family: $font-open-sans;
         font-weight: $font-regular;
-        font-size: rem(48px);
+        font-size: rem(26px);
         line-height: 110%;
         color: $color-white;
-        margin: 0 0 rem(50px);
+        margin: 0 0 rem(20px);
+
+        @include iftablet {
+          font-size: rem(28px);
+          margin: 0 0 rem(36px);
+        }
+
+        @include iflaptop {
+          font-size: rem(32px);
+          margin: 0 0 rem(40px);
+        }
+
+        @include ifdesktop {
+          font-size: rem(48px);
+          margin: 0 0 rem(50px);
+        }
       }
 
       .SubTitle {
@@ -65,11 +132,19 @@
         z-index: 2;
         font-family: $font-open-sans;
         font-weight: $font-light;
-        font-size: rem(30px);
+        font-size: rem(16px);
         line-height: 100%;
         color: $color-white;
-        margin-bottom: rem(16px);
-        max-width: rem(820px);
+
+        @include iftablet {
+          font-size: rem(20px);
+        }
+
+        @include ifdesktop {
+          font-size: rem(30px);
+          margin-bottom: rem(16px);
+          max-width: rem(820px);
+        }
       }
     }
 
@@ -80,7 +155,15 @@
       display: flex;
       flex-direction: column;
       justify-content: center;
-      gap: rem(20px);
+      align-self: center;
+      gap: rem(16px);
+
+      @include iftablet {
+      }
+
+      @include ifdesktop {
+        gap: rem(20px);
+      }
     }
 
   }
diff --git a/src/views/home/ui/main/main.module.scss b/src/views/home/ui/main/main.module.scss
index bf2fc00..904c847 100644
--- a/src/views/home/ui/main/main.module.scss
+++ b/src/views/home/ui/main/main.module.scss
@@ -102,16 +102,9 @@
   padding: rem(64px) 0 rem(160px);
   gap: rem(100px);
 
-  @include iftablet {
+    @include iftablet {
     flex-direction: row;
     gap: unset;
-  }
-  @include iflaptop {
-  }
-  @include ifdesktop {
-  }
-
-  @include iftablet {
     padding: rem(130px) 0 rem(160px);
   }
 
@@ -120,7 +113,7 @@
   }
 
   @include ifdesktop {
-    padding: rem(160px) 0 rem(200px);
+    padding: rem(160px) 0 rem(120px);
   }
 
   .Content {
diff --git a/src/views/home/ui/offer/offer.module.scss b/src/views/home/ui/offer/offer.module.scss
index e53300d..3965616 100644
--- a/src/views/home/ui/offer/offer.module.scss
+++ b/src/views/home/ui/offer/offer.module.scss
@@ -20,7 +20,6 @@
   margin: 0 auto;
 
   @include iftablet {
-    margin: 0 auto;
     width: rem(712px);
   }
 
diff --git a/src/widgets/license-slider/license-slider.module.scss b/src/widgets/license-slider/license-slider.module.scss
index e1541b7..6f1e61d 100644
--- a/src/widgets/license-slider/license-slider.module.scss
+++ b/src/widgets/license-slider/license-slider.module.scss
@@ -6,4 +6,5 @@
 
 .Slide {
   cursor: pointer;
+  width: 100%;
 }
\ No newline at end of file
diff --git a/src/widgets/license-slider/license-slider.tsx b/src/widgets/license-slider/license-slider.tsx
index f5869df..c70d249 100644
--- a/src/widgets/license-slider/license-slider.tsx
+++ b/src/widgets/license-slider/license-slider.tsx
@@ -7,7 +7,10 @@ import { StaticImport } from 'next/dist/shared/lib/get-img-props';
 import { clsx } from 'clsx';
 
 import { Swiper, SwiperSlide } from 'swiper/react';
+import { Grid } from 'swiper/modules';
 import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/grid';
 
 type LicenseSliderProps = {
   className?: string;
@@ -20,6 +23,25 @@ type LicenseSliderProps = {
 
 const mockFullSizeImage = 'images/empty-image.jpg';
 
+const swiperBreakpoints = {
+  360: {
+    slidesPerView: 1,
+    spaceBetween: 10,
+  },
+  768: {
+    slidesPerView: 2,
+    spaceBetween: 30,
+  },
+  1024: {
+    slidesPerView: 3,
+    spaceBetween: 30,
+  },
+  1440: {
+    slidesPerView: 3,
+    spaceBetween: 30,
+  },
+};
+
 export default function LicenseSlider({
   className,
   images,
@@ -27,9 +49,10 @@ export default function LicenseSlider({
   return (
     <Swiper
       className={clsx(s.Slider, className)}
-      slidesPerView={3}
-      onSlideChange={() => console.log('slide change')}
-      onSwiper={(swiper) => console.log(swiper)}
+      modules={[Grid]}
+      breakpoints={swiperBreakpoints}
+      // onSlideChange={() => console.log('slide change')}
+      // onSwiper={(swiper) => console.log(swiper)}
     >
       {images.map(({ id, name, image }) => (
         <SwiperSlide key={id}>