);
diff --git a/src/views/home/ui/license/license.module.scss b/src/views/home/ui/license/license.module.scss
index 2de070b..2c6e2dc 100644
--- a/src/views/home/ui/license/license.module.scss
+++ b/src/views/home/ui/license/license.module.scss
@@ -1,30 +1,31 @@
.License {
- padding: 160px;
-
+ margin: 0 auto;
+ width: rem(1340px);
+ padding: rem(120px) 0 rem(160px);
.Header {
font-family: $font-open-sans;
font-weight: $font-semi-bold;
- font-size: 60px;
+ font-size: rem(60px);
line-height: 100%;
color: $color-text;
- margin-bottom: 80px;
+ margin-bottom: rem(80px);
}
.Slider {
- margin-bottom: 80px;
+ margin-bottom: rem(80px);
}
.Form {
position: relative;
background: #292E3D;
- padding: 40px 60px;
- border-radius: 28px;
+ padding: rem(40px) rem(60px);
+ border-radius: rem(28px);
overflow: hidden;
display: flex;
flex-direction: row;
- gap: 40px;
+ gap: rem(40px);
&:after {
content: '';
@@ -53,10 +54,10 @@
z-index: 2;
font-family: $font-open-sans;
font-weight: $font-regular;
- font-size: 48px;
+ font-size: rem(48px);
line-height: 110%;
color: $color-white;
- margin: 0 0 50px;
+ margin: 0 0 rem(50px);
}
.SubTitle {
@@ -64,11 +65,11 @@
z-index: 2;
font-family: $font-open-sans;
font-weight: $font-light;
- font-size: 30px;
+ font-size: rem(30px);
line-height: 100%;
color: $color-white;
- margin-bottom: 16px;
- max-width: 820px;
+ margin-bottom: rem(16px);
+ max-width: rem(820px);
}
}
@@ -79,7 +80,7 @@
display: flex;
flex-direction: column;
justify-content: center;
- gap: 20px;
+ gap: rem(20px);
}
}
diff --git a/src/views/home/ui/license/license.tsx b/src/views/home/ui/license/license.tsx
index 4602bd8..82502dd 100644
--- a/src/views/home/ui/license/license.tsx
+++ b/src/views/home/ui/license/license.tsx
@@ -1,9 +1,11 @@
import s from './license.module.scss';
import { Button, Input, Mark } from '@shared/ui';
+import { LicenseSlider } from '@/widgets';
+import Image from 'next/image';
import bgForm from '@public/images/bg-form.jpg';
-import Image from 'next/image';
+import emptyPaper from '@public/svg/empty-paper.svg';
export default function License() {
return (
@@ -12,7 +14,9 @@ export default function License() {
Наши услуги
@@ -26,11 +30,11 @@ export default function License() {
priority
/>
- Заключите договор до 1 июня и получите скидку на проведение пожарной
+ Заключите договор до 1 июля и получите скидку на проведение пожарной
экспертизы 15 %
- Оставьте свои контактные данные и мы закрепим скидку до 1 июня за
+ Оставьте свои контактные данные и мы закрепим скидку до 1 июля за
вами
@@ -45,3 +49,26 @@ export default function License() {
);
}
+
+const slides = [
+ {
+ id: '0',
+ name: '',
+ image: emptyPaper,
+ },
+ {
+ id: '1',
+ name: '',
+ image: emptyPaper,
+ },
+ {
+ id: '2',
+ name: '',
+ image: emptyPaper,
+ },
+ {
+ id: '3',
+ name: '',
+ image: emptyPaper,
+ },
+];
diff --git a/src/views/home/ui/main/main.module.scss b/src/views/home/ui/main/main.module.scss
index 1892a1b..da8eef0 100644
--- a/src/views/home/ui/main/main.module.scss
+++ b/src/views/home/ui/main/main.module.scss
@@ -1,12 +1,14 @@
.Main {
- padding: 0px 160px 0px;
+ margin: 0 auto;
+ width: rem(1340px);
+ //padding: 0 rem(160px) 0;
&_BgWrapper {
position: absolute;
top: 0;
left: 0;
width: 100vw;
- height: 900px;
+ height: rem(900px);
z-index: -1;
& img {
@@ -22,7 +24,8 @@
justify-content: space-between;
align-items: center;
border-bottom: 1px solid $color-white;
- height: 80px;
+ height: rem(80px);
+
.Logo {
color: $color-white;
}
@@ -32,20 +35,20 @@
display: flex;
flex-direction: row;
align-items: center;
- gap: 30px;
+ gap: rem(30px);
.Icon {
- width: 60px;
- height: 60px;
+ width: rem(60px);
+ height: rem(60px);
cursor: pointer;
}
.Button {
display: flex;
flex-direction: row;
- gap: 16px;
- height: 48px;
- padding: 24px;
+ gap: rem(16px);
+ height: rem(48px);
+ padding: rem(24px);
}
}
}
@@ -54,36 +57,50 @@
margin: 0 auto;
display: flex;
flex-direction: row;
- padding: 160px 0 200px;
+ padding: rem(160px) 0 rem(200px);
.Content {
display: flex;
flex-direction: column;
justify-content: flex-start;
- gap: 60px;
+ gap: rem(60px);
.Title {
font-family: $font-open-sans;
font-weight: $font-regular;
- font-size: 60px;
+ font-size: rem(60px);
line-height: 1;
color: $color-white;
- max-width: 960px;
+ max-width: rem(960px);
}
.List {
display: flex;
flex-direction: column;
justify-content: flex-start;
- gap: 16px;
+ gap: rem(16px);
}
.ListItem {
+ position: relative;
font-family: $font-open-sans;
font-weight: $font-semi-bold;
- font-size: 26px;
+ font-size: rem(26px);
line-height: 1;
color: $color-white;
+ margin-left: rem(36px);
+
+ &:after {
+ position: absolute;
+ top: rem(2px);
+ left: 0;
+ content: '';
+ width: rem(24px);
+ height: rem(24px);
+ background: url("/svg/check.svg") no-repeat;
+ background-size: rem(24px) rem(24px);
+ margin-left: rem(-36px);
+ }
}
}
@@ -93,12 +110,12 @@
justify-content: center;
align-items: center;
flex-basis: 40%;
- gap: 40px;
+ gap: rem(40px);
.Title {
font-family: $font-open-sans;
font-weight: $font-semi-bold;
- font-size: 60px;
+ font-size: rem(60px);
line-height: 1;
color: $color-white;
}
diff --git a/src/views/home/ui/offer/offer.module.scss b/src/views/home/ui/offer/offer.module.scss
index f6cf422..0fc4b37 100644
--- a/src/views/home/ui/offer/offer.module.scss
+++ b/src/views/home/ui/offer/offer.module.scss
@@ -1,163 +1,90 @@
.Offer {
background: $color-lightgray;
- border-radius: 28px;
- padding: 160px;
+ border-radius: rem(28px);
+ padding: rem(160px) 0;
+}
+
+.InnerContainer {
+ margin: 0 auto;
+ width: rem(1340px);
+}
+
+.Title {
+ font-family: $font-open-sans;
+ font-weight: $font-semi-bold;
+ font-size: rem(60px);
+ line-height: 100%;
+ color: $color-text;
+ max-width: rem(1330px);
+ margin-bottom: rem(80px);
+}
+
+.Text {
+ font-family: $font-open-sans;
+ font-weight: $font-regular;
+ font-size: rem(32px);
+ line-height: 100%;
+ color: $color-text;
+ margin-bottom: rem(20px);
+}
+
+.List {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ max-width: rem(1330px);
+ margin-bottom: rem(60px);
+
+ .ListItem {
+ font-family: $font-open-sans;
+ font-weight: $font-regular;
+ font-size: rem(32px);
+ line-height: 160%;
+ color: $color-text;
+ list-style-type: decimal;
+ margin-left: rem(40px);
+ }
+}
+
+.RowForm {
+ display: flex;
+ flex-direction: row;
+ gap: rem(40px);
+ justify-content: center;
+ margin-bottom: rem(80px);
+}
+
+.Inner {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ background-color: $color-white;
+ border-radius: rem(28px);
+ padding: rem(80px) rem(40px);
+ margin-bottom: rem(130px);
.Title {
font-family: $font-open-sans;
font-weight: $font-semi-bold;
- font-size: 60px;
+ font-size: rem(60px);
line-height: 100%;
color: $color-text;
- max-width: 1330px;
- margin-bottom: 80px;
}
- .Text {
- font-family: $font-open-sans;
- font-weight: $font-regular;
- font-size: 32px;
- line-height: 100%;
- color: $color-text;
- margin-bottom: 20px;
- }
-
- .List {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- max-width: 1330px;
- margin-bottom: 60px;
-
- .ListItem {
- font-family: $font-open-sans;
- font-weight: $font-regular;
- font-size: 32px;
- line-height: 160%;
- color: $color-text;
- list-style-type: decimal;
- margin-left: 40px;
- }
- }
-
- .RowForm {
- display: flex;
- flex-direction: row;
- gap: 40px;
- justify-content: center;
- margin-bottom: 80px;
- }
-
- .Inner {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- background-color: $color-white;
- border-radius: 28px;
- padding: 80px 40px;
- margin-bottom: 130px;
-
- .Title {
- font-family: $font-open-sans;
- font-weight: $font-semi-bold;
- font-size: 60px;
- line-height: 1;
- color: $color-text;
- }
-
- .Grid {
- display: grid;
- grid-template-rows: repeat(2, 1fr);
- grid-template-columns: repeat(3, 1fr);
- gap: 40px;
- padding: 40px 0;
- }
-
- .Tile {
- position: relative;
- padding: 25px;
- height: 352px;
- border-radius: 28px;
- overflow: hidden;
-
- &:after {
- content: '';
- display: block;
- width: 100%;
- height: 100%;
- position: absolute;
- z-index: 1;
- left: 0;
- top: 0;
- background-color: rgba(#292E3D, .7);
- transition: 250ms background-color;
- }
-
- &:hover {
- &:after {
- background-color: rgba(#292E3D, .5);
- }
-
- .Title {
- display: none;
- }
-
- .Description {
- display: block;
- }
-
- .Arrow {
- transform: rotate(45deg);
- transition: transform 250ms ease-in-out;
- }
- }
-
- .Background {
- position: absolute;
- }
-
- .Title {
- position: relative;
- z-index: 2;
- font-family: $font-open-sans;
- font-weight: $font-regular;
- font-size: 42px;
- line-height: 100%;
- color: $color-white;
- }
-
- .Description {
- position: relative;
- z-index: 2;
- display: none;
- font-family: $font-open-sans;
- font-weight: $font-regular;
- font-size: 24px;
- line-height: 130%;
- color: $color-white;
- }
-
- .Arrow {
- position: absolute;
- z-index: 2;
- right: 25px;
- bottom: 25px;
- width: 64px;
- height: 64px;
- transform: rotate(-135deg);
- transition: transform 250ms ease-in-out;
- }
- }
- }
-
- .Form {
- position: relative;
- padding: 40px 60px;
- background: #292E3D;
- border-radius: 28px;
- overflow: hidden;
+ .Grid {
display: grid;
- grid-template-columns: 1fr 1fr;
+ grid-template-rows: repeat(2, 1fr);
+ grid-template-columns: repeat(3, 1fr);
+ gap: rem(40px);
+ padding: rem(40px) 0;
+ }
+
+ .Tile {
+ position: relative;
+ padding: rem(25px);
+ height: rem(352px);
+ border-radius: rem(28px);
+ overflow: hidden;
&:after {
content: '';
@@ -168,34 +95,31 @@
z-index: 1;
left: 0;
top: 0;
- background-color: rgba(#163055, .6);
+ background-color: rgba(#292E3D, .7);
transition: 250ms background-color;
}
+ &:hover {
+ &:after {
+ background-color: rgba(#292E3D, .5);
+ }
+
+ .Title {
+ display: none;
+ }
+
+ .Description {
+ display: block;
+ }
+
+ .Arrow {
+ transform: rotate(45deg);
+ transition: transform 250ms ease-in-out;
+ }
+ }
+
.Background {
position: absolute;
- object-fit: cover;
- z-index: 1;
- }
-
- .PanelLeft {
- display: flex;
- flex-direction: column;
- }
- .PanelRight {
- width: 100%;
- place-self: end end;
- }
-
- .SubTitle {
- position: relative;
- z-index: 2;
- font-family: $font-open-sans;
- font-weight: $font-light;
- font-size: 30px;
- line-height: 100%;
- color: $color-white;
- margin-bottom: 16px;
}
.Title {
@@ -203,11 +127,93 @@
z-index: 2;
font-family: $font-open-sans;
font-weight: $font-regular;
- font-size: 48px;
+ font-size: rem(42px);
+ line-height: 100%;
+ color: $color-white;
+ }
+
+ .Description {
+ position: relative;
+ z-index: 2;
+ display: none;
+ font-family: $font-open-sans;
+ font-weight: $font-regular;
+ font-size: rem(24px);
line-height: 130%;
color: $color-white;
- max-width: 660px;
- margin: 0;
+ }
+
+ .Arrow {
+ position: absolute;
+ z-index: 2;
+ right: rem(25px);
+ bottom: rem(25px);
+ width: rem(64px);
+ height: rem(64px);
+ transform: rotate(-135deg);
+ transition: transform 250ms ease-in-out;
}
}
-}
\ No newline at end of file
+}
+
+.Form {
+ position: relative;
+ padding: rem(40px) rem(60px);
+ background: #292E3D;
+ border-radius: rem(28px);
+ overflow: hidden;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+
+ &:after {
+ content: '';
+ display: block;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ z-index: 1;
+ left: 0;
+ top: 0;
+ background-color: rgba(#163055, .6);
+ transition: 250ms background-color;
+ }
+
+ .Background {
+ position: absolute;
+ object-fit: cover;
+ z-index: 1;
+ }
+
+ .PanelLeft {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .PanelRight {
+ width: 100%;
+ place-self: end end;
+ }
+
+ .SubTitle {
+ position: relative;
+ z-index: 2;
+ font-family: $font-open-sans;
+ font-weight: $font-light;
+ font-size: rem(30px);
+ line-height: 100%;
+ color: $color-white;
+ margin-bottom: rem(16px);
+ }
+
+ .Title {
+ position: relative;
+ z-index: 2;
+ font-family: $font-open-sans;
+ font-weight: $font-regular;
+ font-size: rem(48px);
+ line-height: 130%;
+ color: $color-white;
+ max-width: rem(660px);
+ margin: 0;
+ }
+}
diff --git a/src/views/home/ui/offer/offer.tsx b/src/views/home/ui/offer/offer.tsx
index c43eaf0..b3d24e1 100644
--- a/src/views/home/ui/offer/offer.tsx
+++ b/src/views/home/ui/offer/offer.tsx
@@ -19,81 +19,84 @@ export default function Offer() {
return (
-
- Помогаем выявить недостатки и привести{' '}
- систему Охранно-Пожарной
- сигнализации в соответствие со всеми нормативами
-
- Методика работы:
-
- -
- Экспертиза (аудит) выявляет нарушения ОПС
-
- -
- На основании экспертизы оформляется заключение
-
- -
- На основании выявленных нарушений производится устранение недостатков
-
- -
- Производится проверка проекта по замене старых пожарных систем на
- новые, что позволяет сократить стоимость сметы на модернизацию.
-
-
-
-
+
- Возьмем на себя все заботы
+ Помогаем выявить недостатки и привести{' '}
+ систему Охранно-Пожарной
+ сигнализации в соответствие со всеми нормативами
-
- {tileList.map(({ title, description, image }, idx) => (
-
-
-
{title}
-
{description}
-
-
- ))}
-
-
-
-
-
-
Нужна помощь?
-
- Оставьте заявку на бесплатную консультацию
-
-
-
-
Методика работы:
+
+ -
+ Экспертиза (аудит) выявляет нарушения ОПС
+
+ -
+ На основании экспертизы оформляется заключение
+
+ -
+ На основании выявленных нарушений производится устранение
+ недостатков
+
+ -
+ Производится проверка проекта по замене старых пожарных систем на
+ новые, что позволяет сократить стоимость сметы на модернизацию.
+
+
+
+
+
+ Возьмем на себя все заботы
+
+
+ {tileList.map(({ title, description, image }, idx) => (
+
+
+
{title}
+
{description}
+
+
+ ))}
+
+
+
+
+
Нужна помощь?
+
+ Оставьте заявку на бесплатную консультацию
+
+
+
diff --git a/src/views/home/ui/result/result.module.scss b/src/views/home/ui/result/result.module.scss
index afb42db..719c026 100644
--- a/src/views/home/ui/result/result.module.scss
+++ b/src/views/home/ui/result/result.module.scss
@@ -1,13 +1,15 @@
.Result {
- padding: 160px;
+ margin: 0 auto;
+ width: rem(1340px);
+ padding: rem(160px) 0 rem(80px);
.Header {
font-family: $font-open-sans;
font-weight: $font-semi-bold;
- font-size: 60px;
+ font-size: rem(60px);
line-height: 100%;
color: $color-text;
- margin-bottom: 96px;
+ margin-bottom: rem(96px);
}
.Row {
@@ -15,8 +17,8 @@
display: flex;
flex-direction: row;
justify-content: space-between;
- gap: 10vw;
- margin-bottom: 80px;
+ gap: rem(48px);
+ margin-bottom: rem(80px);
&:nth-child(odd) {
flex-direction: row-reverse;
@@ -28,10 +30,10 @@
.Title {
font-family: $font-open-sans;
font-weight: $font-regular;
- font-size: 48px;
+ font-size: rem(48px);
line-height: 100%;
color: $color-text;
- margin-bottom: 40px;
+ margin-bottom: rem(40px);
}
.Description {
@@ -47,10 +49,10 @@
flex: 1;
position: relative;
overflow: hidden;
- border-radius: 28px;
+ border-radius: rem(28px);
object-fit: contain;
- max-width: 720px;
- height: 540px;
+ max-width: rem(720px);
+ height: rem(540px);
&:after {
content: '';
display: block;
diff --git a/src/widgets/.gitkeep b/src/widgets/.gitkeep
deleted file mode 100644
index c710e69..0000000
--- a/src/widgets/.gitkeep
+++ /dev/null
@@ -1 +0,0 @@
-reusable components
\ No newline at end of file
diff --git a/src/widgets/index.ts b/src/widgets/index.ts
new file mode 100644
index 0000000..3b69a03
--- /dev/null
+++ b/src/widgets/index.ts
@@ -0,0 +1 @@
+export { LicenseSlider } from './license-slider';
diff --git a/src/widgets/license-slider/index.ts b/src/widgets/license-slider/index.ts
new file mode 100644
index 0000000..99b8748
--- /dev/null
+++ b/src/widgets/license-slider/index.ts
@@ -0,0 +1 @@
+export { default as LicenseSlider } from './license-slider';
diff --git a/src/widgets/license-slider/license-slider.module.scss b/src/widgets/license-slider/license-slider.module.scss
new file mode 100644
index 0000000..e1541b7
--- /dev/null
+++ b/src/widgets/license-slider/license-slider.module.scss
@@ -0,0 +1,9 @@
+.Slider {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+.Slide {
+ cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/widgets/license-slider/license-slider.tsx b/src/widgets/license-slider/license-slider.tsx
new file mode 100644
index 0000000..f5869df
--- /dev/null
+++ b/src/widgets/license-slider/license-slider.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+import s from './license-slider.module.scss';
+
+import Image from 'next/image';
+import { StaticImport } from 'next/dist/shared/lib/get-img-props';
+import { clsx } from 'clsx';
+
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/css';
+
+type LicenseSliderProps = {
+ className?: string;
+ images: {
+ id: string;
+ name: string;
+ image: string | StaticImport;
+ }[];
+};
+
+const mockFullSizeImage = 'images/empty-image.jpg';
+
+export default function LicenseSlider({
+ className,
+ images,
+}: LicenseSliderProps) {
+ return (
+
console.log('slide change')}
+ onSwiper={(swiper) => console.log(swiper)}
+ >
+ {images.map(({ id, name, image }) => (
+
+
+
+
+
+ ))}
+
+ );
+}