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() {
- {/**/}
+
{/**/}
{/**/}
>
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 (
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 }) => (