From 0ba1538520d18f771f0487ac7c0b84c75f9fa872 Mon Sep 17 00:00:00 2001 From: RedrockJS Date: Thu, 5 Jun 2025 09:23:35 +0300 Subject: [PATCH 1/3] feat: add slider --- package-lock.json | 22 +++++++- package.json | 3 +- public/images/empty-image.jpg | Bin 0 -> 19291 bytes public/svg/empty-paper.svg | 50 ++++++++++++++++++ src/core/.gitkeep | 1 - src/views/home/ui/license/license.tsx | 31 ++++++++++- src/widgets/.gitkeep | 1 - src/widgets/index.ts | 1 + src/widgets/license-slider/index.ts | 1 + .../license-slider/license-slider.module.scss | 9 ++++ src/widgets/license-slider/license-slider.tsx | 43 +++++++++++++++ 11 files changed, 156 insertions(+), 6 deletions(-) create mode 100644 public/images/empty-image.jpg create mode 100644 public/svg/empty-paper.svg delete mode 100644 src/core/.gitkeep delete mode 100644 src/widgets/.gitkeep create mode 100644 src/widgets/index.ts create mode 100644 src/widgets/license-slider/index.ts create mode 100644 src/widgets/license-slider/license-slider.module.scss create mode 100644 src/widgets/license-slider/license-slider.tsx diff --git a/package-lock.json b/package-lock.json index fb3554a..59440c8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,8 @@ "dependencies": { "next": "15.3.2", "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "swiper": "^11.2.8" }, "devDependencies": { "@eslint/eslintrc": "^3", @@ -5517,6 +5518,25 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/swiper": { + "version": "11.2.8", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.8.tgz", + "integrity": "sha512-S5FVf6zWynPWooi7pJ7lZhSUe2snTzqLuUzbd5h5PHUOhzgvW0bLKBd2wv0ixn6/5o9vwc/IkQT74CRcLJQzeg==", + "funding": [ + { + "type": "patreon", + "url": "https://www.patreon.com/swiperjs" + }, + { + "type": "open_collective", + "url": "http://opencollective.com/swiper" + } + ], + "license": "MIT", + "engines": { + "node": ">= 4.7.0" + } + }, "node_modules/tinyglobby": { "version": "0.2.14", "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz", diff --git a/package.json b/package.json index 7b1b1da..b17420c 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,8 @@ "dependencies": { "next": "15.3.2", "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "swiper": "^11.2.8" }, "devDependencies": { "@eslint/eslintrc": "^3", diff --git a/public/images/empty-image.jpg b/public/images/empty-image.jpg new file mode 100644 index 0000000000000000000000000000000000000000..7b2c271c03651a61cca3cef051698541ef5acfb0 GIT binary patch literal 19291 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 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/core/.gitkeep b/src/core/.gitkeep deleted file mode 100644 index c710e69..0000000 --- a/src/core/.gitkeep +++ /dev/null @@ -1 +0,0 @@ -reusable components \ No newline at end of file diff --git a/src/views/home/ui/license/license.tsx b/src/views/home/ui/license/license.tsx index 4602bd8..ae8d8b9 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() { Наши услуги подтверждены лицензиями и сертификатами -
Slider here
+
+ +
@@ -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/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 }) => ( + + + {name} + + + ))} + + ); +} -- 2.49.1 From 6c653aa19698d9121133fafe7a1efc7fd1b7e392 Mon Sep 17 00:00:00 2001 From: RedrockJS Date: Thu, 5 Jun 2025 11:31:49 +0300 Subject: [PATCH 2/3] fix: convert px to rem --- public/svg/check.svg | 4 ++ src/core/styles/index.scss | 3 +- src/core/styles/variables.scss | 2 + .../advancedPhoneInput.module.scss | 7 +- src/shared/ui/button/button.module.scss | 14 ++-- src/shared/ui/input/input.module.scss | 6 +- src/shared/ui/text-area/text-area.module.scss | 14 ++-- .../home/ui/contacts/contacts.module.scss | 67 +++++++++-------- src/views/home/ui/footer/footer.module.scss | 18 ++--- src/views/home/ui/license/license.module.scss | 26 +++---- src/views/home/ui/main/main.module.scss | 49 ++++++++----- src/views/home/ui/offer/offer.module.scss | 71 ++++++++++--------- src/views/home/ui/result/result.module.scss | 18 ++--- 13 files changed, 160 insertions(+), 139 deletions(-) create mode 100644 public/svg/check.svg diff --git a/public/svg/check.svg b/public/svg/check.svg new file mode 100644 index 0000000..9ea7b38 --- /dev/null +++ b/public/svg/check.svg @@ -0,0 +1,4 @@ + + + diff --git a/src/core/styles/index.scss b/src/core/styles/index.scss index e682ecd..2b78af2 100644 --- a/src/core/styles/index.scss +++ b/src/core/styles/index.scss @@ -1,2 +1,3 @@ @import './variables.scss'; -@import './mixins.scss'; \ No newline at end of file +@import './mixins.scss'; +@import './functions.scss'; \ No newline at end of file diff --git a/src/core/styles/variables.scss b/src/core/styles/variables.scss index 331471b..c518824 100644 --- a/src/core/styles/variables.scss +++ b/src/core/styles/variables.scss @@ -8,6 +8,8 @@ $desktop: 1440px; //fonts $font-open-sans: var(--open-sans), sans-serif; +$base-font-size: 16px; + $font-light: 300; $font-regular: 400; $font-medium: 500; diff --git a/src/shared/ui/advanced-phone-input/advancedPhoneInput.module.scss b/src/shared/ui/advanced-phone-input/advancedPhoneInput.module.scss index 01434a0..c5e6429 100644 --- a/src/shared/ui/advanced-phone-input/advancedPhoneInput.module.scss +++ b/src/shared/ui/advanced-phone-input/advancedPhoneInput.module.scss @@ -1,6 +1,5 @@ .Container { position: relative; - //width: 100%; } .Phone { @@ -12,8 +11,8 @@ .Button { position: absolute; - right: 4px; - top: calc(50% - 25px); + right: rem(2px); + top: calc(50% - 1.6rem); z-index: 3; - min-height: calc(100% - 4px); + min-height: calc(100% - .25rem); } \ No newline at end of file diff --git a/src/shared/ui/button/button.module.scss b/src/shared/ui/button/button.module.scss index 1202bdd..84e8fec 100644 --- a/src/shared/ui/button/button.module.scss +++ b/src/shared/ui/button/button.module.scss @@ -2,13 +2,13 @@ display: flex; align-items: center; justify-content: center; - padding: 10px 32px; - border-radius: 28px; - min-height: 55px; + padding: rem(10px) rem(32px); + border-radius: rem(28px); + min-height: rem(54px); font-family: $font-open-sans; font-weight: $font-regular; - font-size: 24px; + font-size: rem(24px); line-height: 100%; transition: all 0.15s linear; @@ -20,11 +20,11 @@ } svg { - width: 18px; - height: 18px; + width: rem(18px); + height: rem(18px); //fill: var(--text-primary); - margin-right: 18px; + margin-right: rem(18px); } &:hover { diff --git a/src/shared/ui/input/input.module.scss b/src/shared/ui/input/input.module.scss index 7b7e2f8..62e14de 100644 --- a/src/shared/ui/input/input.module.scss +++ b/src/shared/ui/input/input.module.scss @@ -2,13 +2,13 @@ display: flex; background: $color-white; border: 1px solid $color-darkgray; - border-radius: 28px; - padding: 10px 24px; + border-radius: rem(28px); + padding: rem(10px) rem(24px); transition: border ease .5s; font-family: $font-open-sans; font-weight: $font-regular; - font-size: 24px; + font-size: rem(24px); line-height: 100%; color: $color-text; width: max-content; diff --git a/src/shared/ui/text-area/text-area.module.scss b/src/shared/ui/text-area/text-area.module.scss index e8ab19f..af84452 100644 --- a/src/shared/ui/text-area/text-area.module.scss +++ b/src/shared/ui/text-area/text-area.module.scss @@ -14,13 +14,13 @@ .Area { background: $color-white; border: 1px solid $color-darkgray; - border-radius: 20px; - padding: 10px 24px; + border-radius: rem(20px); + padding: rem(10px) rem(24px); transition: border ease .5s; font-family: $font-open-sans; font-weight: $font-regular; - font-size: 24px; + font-size: rem(24px); line-height: 100%; color: $color-text; @@ -35,14 +35,14 @@ cursor: auto; } &::-webkit-scrollbar { - width: 12px; - height: 12px; + width: rem(12px); + height: rem(12px); } &::-webkit-scrollbar-track, &::-webkit-scrollbar-thumb { background-clip: content-box; - border: 4px solid transparent; - border-radius: 12px; + border: rem(4px) solid transparent; + border-radius: rem(12px); } &::-webkit-scrollbar-track { background-color: #333; // цвет дорожки diff --git a/src/views/home/ui/contacts/contacts.module.scss b/src/views/home/ui/contacts/contacts.module.scss index 27bf5c3..8f25284 100644 --- a/src/views/home/ui/contacts/contacts.module.scss +++ b/src/views/home/ui/contacts/contacts.module.scss @@ -1,15 +1,15 @@ .Contacts { background: $color-lightgray; - border-radius: 28px; - padding: 160px; + border-radius: rem(28px); + padding: 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); } .Clients { @@ -19,14 +19,14 @@ flex-wrap: wrap; justify-content: space-around; align-items: center; - gap: 40px; - max-width: 1200px; - margin-bottom: 160px; + gap: rem(40px); + max-width: rem(1200px); + margin-bottom: rem(160px); .Client { img { - width: 300px; + width: rem(300px); height: auto; } } @@ -37,11 +37,11 @@ background: #292E3D; display: flex; flex-direction: row; - padding: 60px 50px; - border-radius: 28px; + padding: rem(60px) rem(50px); + border-radius: rem(28px); overflow: hidden; - margin-bottom: 80px; + margin-bottom: rem(80px); &:after { content: ''; @@ -72,10 +72,10 @@ z-index: 2; font-family: $font-open-sans; font-weight: $font-semi-bold; - font-size: 48px; + font-size: rem(48px); line-height: 100%; color: $color-white; - margin-bottom: 80px; + margin-bottom: rem(80px); } .SubTitle { @@ -83,10 +83,10 @@ z-index: 2; font-family: $font-open-sans; font-weight: $font-light; - font-size: 32px; + font-size: rem(32px); line-height: 100%; color: $color-white; - max-width: 720px; + max-width: rem(720px); } } @@ -97,7 +97,7 @@ display: flex; flex-direction: column; justify-content: center; - gap: 20px; + gap: rem(20px); } } @@ -105,19 +105,18 @@ position: relative; iframe { - border-radius: 28px; + border-radius: rem(28px); } .Contacts { position: absolute; z-index: 2; - top: -40px; - right: 180px; - border-radius: 28px; + top: rem(-40px); + right: rem(180px); + border-radius: rem(28px); background: $color-white; - width: 440px; - //height: 540px; - padding: 40px 35px 20px; + width: rem(440px); + padding: rem(40px) rem(35px) rem(20px); display: flex; flex-direction: column; @@ -128,17 +127,17 @@ position: relative; font-family: $font-open-sans; font-weight: $font-semi-bold; - font-size: 48px; + font-size: rem(48px); line-height: 100%; color: $color-text; text-align: right; - margin-bottom: 32px; + margin-bottom: rem(32px); align-self: center; .LedOn { position: absolute; - bottom: 6px; - left: 6px; + bottom: rem(6px); + left: rem(6px); } } @@ -146,18 +145,18 @@ position: relative; font-family: $font-open-sans; font-weight: $font-regular; - font-size: 32px; + font-size: rem(32px); line-height: 130%; color: $color-text; - margin-bottom: 20px; - margin-left: 32px; + margin-bottom: rem(20px); + margin-left: rem(32px); .Icon { position: absolute; - left: -48px; - top: 8px; - width: 32px; - height: 32px; + left: rem(-48px); + top: rem(8px); + width: rem(32px); + height: rem(32px); stroke: #E96526; } } diff --git a/src/views/home/ui/footer/footer.module.scss b/src/views/home/ui/footer/footer.module.scss index 163bdaa..9d6009d 100644 --- a/src/views/home/ui/footer/footer.module.scss +++ b/src/views/home/ui/footer/footer.module.scss @@ -1,16 +1,16 @@ .Footer { background-color: #1B1B25; - padding: 80px 160px; + padding: rem(80px) rem(160px); display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; - gap: 20px; + gap: rem(20px); - .Block{ + .Block { display: flex; flex-direction: column; - gap: 20px; + gap: rem(20px); max-width: 40vw; } @@ -22,25 +22,25 @@ .Header { font-family: $font-open-sans; font-weight: $font-semi-bold; - font-size: 60px; + font-size: rem(60px); line-height: 100%; color: $color-white; - margin-bottom: 40px; + margin-bottom: rem(40px); } .Bottom { width: 100%; - height: 80px; + height: rem(80px); border-top: 1px solid $color-white; display: flex; flex-direction: row; align-items: center; - gap: 20px; + gap: rem(20px); .Policy { font-family: $font-open-sans; font-weight: $font-regular; - font-size: 16px; + font-size: rem(16px); line-height: 100%; color: $color-white; margin-left: auto; diff --git a/src/views/home/ui/license/license.module.scss b/src/views/home/ui/license/license.module.scss index 2de070b..10bc6e4 100644 --- a/src/views/home/ui/license/license.module.scss +++ b/src/views/home/ui/license/license.module.scss @@ -1,30 +1,30 @@ .License { - padding: 160px; + padding: 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 +53,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 +64,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 +79,7 @@ display: flex; flex-direction: column; justify-content: center; - gap: 20px; + gap: rem(20px); } } diff --git a/src/views/home/ui/main/main.module.scss b/src/views/home/ui/main/main.module.scss index 1892a1b..0fbc6f4 100644 --- a/src/views/home/ui/main/main.module.scss +++ b/src/views/home/ui/main/main.module.scss @@ -1,12 +1,12 @@ .Main { - padding: 0px 160px 0px; + 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 +22,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 +33,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 +55,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 +108,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..5139bb9 100644 --- a/src/views/home/ui/offer/offer.module.scss +++ b/src/views/home/ui/offer/offer.module.scss @@ -1,51 +1,51 @@ .Offer { background: $color-lightgray; - border-radius: 28px; - padding: 160px; + border-radius: rem(28px); + padding: rem(160px); .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; + max-width: rem(1330px); + margin-bottom: rem(80px); } .Text { font-family: $font-open-sans; font-weight: $font-regular; - font-size: 32px; + font-size: rem(32px); line-height: 100%; color: $color-text; - margin-bottom: 20px; + margin-bottom: rem(20px); } .List { display: flex; flex-direction: column; align-items: flex-start; - max-width: 1330px; - margin-bottom: 60px; + max-width: rem(1330px); + margin-bottom: rem(60px); .ListItem { font-family: $font-open-sans; font-weight: $font-regular; - font-size: 32px; + font-size: rem(32px); line-height: 160%; color: $color-text; list-style-type: decimal; - margin-left: 40px; + margin-left: rem(40px); } } .RowForm { display: flex; flex-direction: row; - gap: 40px; + gap: rem(40px); justify-content: center; - margin-bottom: 80px; + margin-bottom: rem(80px); } .Inner { @@ -53,15 +53,15 @@ flex-direction: column; align-items: flex-start; background-color: $color-white; - border-radius: 28px; - padding: 80px 40px; - margin-bottom: 130px; + 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; - line-height: 1; + font-size: rem(60px); + line-height: 100%; color: $color-text; } @@ -69,15 +69,15 @@ display: grid; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(3, 1fr); - gap: 40px; - padding: 40px 0; + gap: rem(40px); + padding: rem(40px) 0; } .Tile { position: relative; - padding: 25px; - height: 352px; - border-radius: 28px; + padding: rem(25px); + height: rem(352px); + border-radius: rem(28px); overflow: hidden; &:after { @@ -121,7 +121,7 @@ z-index: 2; font-family: $font-open-sans; font-weight: $font-regular; - font-size: 42px; + font-size: rem(42px); line-height: 100%; color: $color-white; } @@ -132,7 +132,7 @@ display: none; font-family: $font-open-sans; font-weight: $font-regular; - font-size: 24px; + font-size: rem(24px); line-height: 130%; color: $color-white; } @@ -140,10 +140,10 @@ .Arrow { position: absolute; z-index: 2; - right: 25px; - bottom: 25px; - width: 64px; - height: 64px; + right: rem(25px); + bottom: rem(25px); + width: rem(64px); + height: rem(64px); transform: rotate(-135deg); transition: transform 250ms ease-in-out; } @@ -152,9 +152,9 @@ .Form { position: relative; - padding: 40px 60px; + padding: rem(40px) rem(60px); background: #292E3D; - border-radius: 28px; + border-radius: rem(28px); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; @@ -182,6 +182,7 @@ display: flex; flex-direction: column; } + .PanelRight { width: 100%; place-self: end end; @@ -192,10 +193,10 @@ 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; + margin-bottom: rem(16px); } .Title { @@ -203,10 +204,10 @@ z-index: 2; font-family: $font-open-sans; font-weight: $font-regular; - font-size: 48px; + font-size: rem(48px); line-height: 130%; color: $color-white; - max-width: 660px; + max-width: rem(660px); margin: 0; } } diff --git a/src/views/home/ui/result/result.module.scss b/src/views/home/ui/result/result.module.scss index afb42db..3542273 100644 --- a/src/views/home/ui/result/result.module.scss +++ b/src/views/home/ui/result/result.module.scss @@ -1,13 +1,13 @@ .Result { - padding: 160px; + padding: 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: 96px; + margin-bottom: rem(96px); } .Row { @@ -16,7 +16,7 @@ flex-direction: row; justify-content: space-between; gap: 10vw; - margin-bottom: 80px; + margin-bottom: rem(80px); &:nth-child(odd) { flex-direction: row-reverse; @@ -28,10 +28,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 +47,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; -- 2.49.1 From 7d0fb5638ef1cd415d638a4697065e083cd0675e Mon Sep 17 00:00:00 2001 From: RedrockJS Date: Thu, 5 Jun 2025 12:02:03 +0300 Subject: [PATCH 3/3] fix: add width container --- .../home/ui/contacts/contacts.module.scss | 283 +++++++------- src/views/home/ui/contacts/contacts.tsx | 126 +++---- src/views/home/ui/footer/footer.module.scss | 78 ++-- src/views/home/ui/footer/footer.tsx | 52 +-- src/views/home/ui/license/license.module.scss | 5 +- src/views/home/ui/license/license.tsx | 4 +- src/views/home/ui/main/main.module.scss | 4 +- src/views/home/ui/offer/offer.module.scss | 345 +++++++++--------- src/views/home/ui/offer/offer.tsx | 147 ++++---- src/views/home/ui/result/result.module.scss | 6 +- 10 files changed, 540 insertions(+), 510 deletions(-) diff --git a/src/views/home/ui/contacts/contacts.module.scss b/src/views/home/ui/contacts/contacts.module.scss index 8f25284..1e1a901 100644 --- a/src/views/home/ui/contacts/contacts.module.scss +++ b/src/views/home/ui/contacts/contacts.module.scss @@ -1,165 +1,170 @@ .Contacts { background: $color-lightgray; border-radius: rem(28px); - padding: rem(160px); + padding: rem(160px) 0; +} - .Header { - font-family: $font-open-sans; - font-weight: $font-semi-bold; - font-size: rem(60px); - line-height: 100%; - color: $color-text; - margin-bottom: rem(80px); - } +.InnerContainer { + margin: 0 auto; + width: rem(1340px); +} - .Clients { - margin: 0 auto; - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-around; - align-items: center; - gap: rem(40px); - max-width: rem(1200px); - margin-bottom: rem(160px); +.Header { + font-family: $font-open-sans; + font-weight: $font-semi-bold; + font-size: rem(60px); + line-height: 100%; + color: $color-text; + margin-bottom: rem(80px); +} - .Client { +.Clients { + margin: 0 auto; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; + align-items: center; + gap: rem(40px); + max-width: rem(1200px); + margin-bottom: rem(160px); - img { - width: rem(300px); - height: auto; - } + .Client { + + img { + width: rem(300px); + height: auto; } } +} - .Form { - position: relative; - background: #292E3D; +.Form { + position: relative; + background: #292E3D; + display: flex; + flex-direction: row; + padding: rem(60px) rem(50px); + border-radius: rem(28px); + overflow: hidden; + + margin-bottom: rem(80px); + + &: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; + } + + .Offer { + flex: 2; display: flex; - flex-direction: row; - padding: rem(60px) rem(50px); - border-radius: rem(28px); - overflow: hidden; + flex-direction: column; - margin-bottom: rem(80px); - - &: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; - } - - .Offer { - flex: 2; - display: flex; - flex-direction: column; - - .Title { - position: relative; - z-index: 2; - font-family: $font-open-sans; - font-weight: $font-semi-bold; - font-size: rem(48px); - line-height: 100%; - color: $color-white; - margin-bottom: rem(80px); - } - - .SubTitle { - position: relative; - z-index: 2; - font-family: $font-open-sans; - font-weight: $font-light; - font-size: rem(32px); - line-height: 100%; - color: $color-white; - max-width: rem(720px); - } - } - - .Inputs { + .Title { position: relative; z-index: 2; - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - gap: rem(20px); - } - } - - .Map { - position: relative; - - iframe { - border-radius: rem(28px); + font-family: $font-open-sans; + font-weight: $font-semi-bold; + font-size: rem(48px); + line-height: 100%; + color: $color-white; + margin-bottom: rem(80px); } - .Contacts { - position: absolute; + .SubTitle { + position: relative; z-index: 2; - top: rem(-40px); - right: rem(180px); - border-radius: rem(28px); - background: $color-white; - width: rem(440px); - padding: rem(40px) rem(35px) rem(20px); + font-family: $font-open-sans; + font-weight: $font-light; + font-size: rem(32px); + line-height: 100%; + color: $color-white; + max-width: rem(720px); + } + } - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: flex-start; + .Inputs { + position: relative; + z-index: 2; + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + gap: rem(20px); + } +} - .Title { - position: relative; - font-family: $font-open-sans; - font-weight: $font-semi-bold; - font-size: rem(48px); - line-height: 100%; - color: $color-text; - text-align: right; - margin-bottom: rem(32px); - align-self: center; +.Map { + position: relative; - .LedOn { - position: absolute; - bottom: rem(6px); - left: rem(6px); - } + iframe { + border-radius: rem(28px); + } + + .Contacts { + position: absolute; + z-index: 2; + top: rem(-40px); + right: rem(180px); + border-radius: rem(28px); + background: $color-white; + width: rem(440px); + padding: rem(40px) rem(35px) rem(20px); + + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + + .Title { + position: relative; + font-family: $font-open-sans; + font-weight: $font-semi-bold; + font-size: rem(48px); + line-height: 100%; + color: $color-text; + text-align: right; + margin-bottom: rem(32px); + align-self: center; + + .LedOn { + position: absolute; + bottom: rem(6px); + left: rem(6px); } + } - .Address { - position: relative; - font-family: $font-open-sans; - font-weight: $font-regular; - font-size: rem(32px); - line-height: 130%; - color: $color-text; - margin-bottom: rem(20px); - margin-left: rem(32px); + .Address { + position: relative; + font-family: $font-open-sans; + font-weight: $font-regular; + font-size: rem(32px); + line-height: 130%; + color: $color-text; + margin-bottom: rem(20px); + margin-left: rem(32px); - .Icon { - position: absolute; - left: rem(-48px); - top: rem(8px); - width: rem(32px); - height: rem(32px); - stroke: #E96526; - } + .Icon { + position: absolute; + left: rem(-48px); + top: rem(8px); + width: rem(32px); + height: rem(32px); + stroke: #E96526; } } } -} \ No newline at end of file +} diff --git a/src/views/home/ui/contacts/contacts.tsx b/src/views/home/ui/contacts/contacts.tsx index e628d5f..b6dd9ed 100644 --- a/src/views/home/ui/contacts/contacts.tsx +++ b/src/views/home/ui/contacts/contacts.tsx @@ -16,72 +16,74 @@ import email from '@public/svg/email.svg'; export default function Contacts() { return (
-

- Клиенты, которые нам доверяют -

-
- {clientsLogos.map(({ logo }, idx) => ( -
- +
+

+ Клиенты, которые нам доверяют +

+
+ {clientsLogos.map(({ logo }, idx) => ( +
+ +
+ ))} +
+ +
+ {''} +
+

Остались вопросы?

+

+ Наш эксперт свяжется с вами для уточнения подробностей и + определения точной стоимости работ +

+
+
+ + +
- ))} -
- -
- {''} -
-

Остались вопросы?

-

- Наш эксперт свяжется с вами для уточнения подробностей и определения - точной стоимости работ -

-
- - - -
-
-
- +
+ -
-

- {''} - Мы всегда
на связи -

-

- - Краснодарский край
- г.Сочи
- ТЦ «Атриум»
- ул. Навагинская д.9«Д»
- этаж 3, офис 35 -

-

- - +7 (988) 400 93 93 -

-

- - office@firecheck.ru -

+
+

+ {''} + Мы всегда
на связи +

+

+ + Краснодарский край
+ г.Сочи
+ ТЦ «Атриум»
+ ул. Навагинская д.9«Д»
+ этаж 3, офис 35 +

+

+ + +7 (988) 400 93 93 +

+

+ + office@firecheck.ru +

+
diff --git a/src/views/home/ui/footer/footer.module.scss b/src/views/home/ui/footer/footer.module.scss index 9d6009d..6ffdb27 100644 --- a/src/views/home/ui/footer/footer.module.scss +++ b/src/views/home/ui/footer/footer.module.scss @@ -1,49 +1,57 @@ .Footer { + position: relative; background-color: #1B1B25; - padding: rem(80px) rem(160px); + padding: rem(120px) 0 rem(40px); + margin-top: rem(-24px); + z-index: -1; +} + +.InnerContainer { + margin: 0 auto; + width: rem(1340px); display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: rem(20px); +} - .Block { - display: flex; - flex-direction: column; - gap: rem(20px); - max-width: 40vw; - } +.Block { + display: flex; + flex-direction: column; + gap: rem(20px); + max-width: 40vw; +} - .SendBtn { - align-self: flex-end; - max-width: 33%; - } +.SendBtn { + align-self: flex-end; + max-width: 33%; +} - .Header { +.Header { + font-family: $font-open-sans; + font-weight: $font-semi-bold; + font-size: rem(60px); + line-height: 100%; + color: $color-white; + margin-bottom: rem(40px); +} + +.Bottom { + width: 100%; + height: rem(80px); + border-top: 1px solid $color-white; + display: flex; + flex-direction: row; + align-items: center; + gap: rem(20px); + + .Policy { font-family: $font-open-sans; - font-weight: $font-semi-bold; - font-size: rem(60px); + font-weight: $font-regular; + font-size: rem(16px); line-height: 100%; color: $color-white; - margin-bottom: rem(40px); + margin-left: auto; } - - .Bottom { - width: 100%; - height: rem(80px); - border-top: 1px solid $color-white; - display: flex; - flex-direction: row; - align-items: center; - gap: rem(20px); - - .Policy { - font-family: $font-open-sans; - font-weight: $font-regular; - font-size: rem(16px); - line-height: 100%; - color: $color-white; - margin-left: auto; - } - } -} \ No newline at end of file +} diff --git a/src/views/home/ui/footer/footer.tsx b/src/views/home/ui/footer/footer.tsx index ef81551..7da55a2 100644 --- a/src/views/home/ui/footer/footer.tsx +++ b/src/views/home/ui/footer/footer.tsx @@ -5,31 +5,33 @@ import Link from 'next/link'; export default function Footer() { return (
-
-

- Давайте обсудим ваши задачи -

- - -