From dd452a950d619ca01ddfd44cb9737e33d0895866 Mon Sep 17 00:00:00 2001 From: RedrockJS Date: Fri, 6 Jun 2025 13:00:19 +0300 Subject: [PATCH] fix: fotter --- src/shared/ui/text-area/text-area.module.scss | 15 +- .../home/ui/contacts/contacts.module.scss | 279 +++++++++++++++--- src/views/home/ui/contacts/contacts.tsx | 8 +- src/views/home/ui/footer/footer.module.scss | 77 ++++- src/views/home/ui/footer/footer.tsx | 4 +- src/views/home/ui/home.tsx | 8 +- src/views/home/ui/license/license.module.scss | 2 +- src/views/home/ui/offer/offer.module.scss | 4 +- src/views/home/ui/offer/offer.tsx | 6 +- 9 files changed, 344 insertions(+), 59 deletions(-) diff --git a/src/shared/ui/text-area/text-area.module.scss b/src/shared/ui/text-area/text-area.module.scss index af84452..dbcb201 100644 --- a/src/shared/ui/text-area/text-area.module.scss +++ b/src/shared/ui/text-area/text-area.module.scss @@ -20,7 +20,7 @@ font-family: $font-open-sans; font-weight: $font-regular; - font-size: rem(24px); + font-size: rem(18px); line-height: 100%; color: $color-text; @@ -29,6 +29,19 @@ width: 100%; flex-grow: 1; + @include iftablet{ + font-size: rem(18px); + } + + @include iflaptop{ + font-size: rem(20px); + padding: rem(10px) rem(20px); + } + + @include ifdesktop{ + font-size: rem(24px); + } + /* scrollbar */ & { /* Arrow mouse cursor over the scrollbar */ diff --git a/src/views/home/ui/contacts/contacts.module.scss b/src/views/home/ui/contacts/contacts.module.scss index 1e1a901..a1e480c 100644 --- a/src/views/home/ui/contacts/contacts.module.scss +++ b/src/views/home/ui/contacts/contacts.module.scss @@ -1,21 +1,62 @@ -.Contacts { +.Container { + position: relative; + z-index: 2; background: $color-lightgray; border-radius: rem(28px); - padding: rem(160px) 0; + padding: rem(32px) 0 0; + + @include iftablet { + padding: rem(60px) 0 rem(40px); + } + + @include iflaptop { + padding: rem(60px) 0 rem(60px); + } + + @include ifdesktop { + padding: rem(160px) 0; + } } -.InnerContainer { +.Contacts { margin: 0 auto; - width: rem(1340px); + + @include iftablet { + width: rem(712px); + } + + @include iflaptop { + width: rem(930px); + } + + @include ifdesktop { + width: rem(1340px); + } } .Header { font-family: $font-open-sans; font-weight: $font-semi-bold; - font-size: rem(60px); + font-size: rem(26px); line-height: 100%; color: $color-text; - margin-bottom: rem(80px); + margin-bottom: rem(40px); + padding: 0 rem(20px); + + @include iftablet { + font-size: rem(28px); + padding: unset; + } + + @include iflaptop { + font-size: rem(36px); + margin-bottom: rem(60px); + } + + @include ifdesktop { + font-size: rem(60px); + margin-bottom: rem(80px); + } } .Clients { @@ -26,8 +67,25 @@ justify-content: space-around; align-items: center; gap: rem(40px); - max-width: rem(1200px); - margin-bottom: rem(160px); + padding: 0 0 rem(32px); + + @include iftablet { + gap: rem(40px); + max-width: rem(1200px); + margin-bottom: rem(160px); + } + + @include iflaptop { + gap: rem(40px); + max-width: rem(1200px); + margin-bottom: rem(160px); + } + + @include ifdesktop { + gap: rem(40px); + max-width: rem(1200px); + margin-bottom: rem(160px); + } .Client { @@ -42,13 +100,33 @@ position: relative; background: #292E3D; display: flex; - flex-direction: row; + flex-direction: column; + gap: rem(40px); + overflow: hidden; padding: rem(60px) rem(50px); border-radius: rem(28px); - overflow: hidden; - margin-bottom: rem(80px); + @include iftablet { + flex-direction: row; + gap: unset; + padding: rem(60px) rem(50px); + border-radius: rem(28px); + margin-bottom: rem(120px); + } + + @include iflaptop { + padding: rem(60px) rem(50px); + border-radius: rem(28px); + margin-bottom: rem(100px); + } + + @include ifdesktop { + padding: rem(60px) rem(50px); + border-radius: rem(28px); + margin-bottom: rem(160px); + } + &:after { content: ''; display: block; @@ -78,10 +156,25 @@ z-index: 2; font-family: $font-open-sans; font-weight: $font-semi-bold; - font-size: rem(48px); + font-size: rem(26px); line-height: 100%; color: $color-white; - margin-bottom: rem(80px); + margin-bottom: rem(16px); + + @include iftablet { + font-size: rem(28px); + margin-bottom: rem(60px); + } + + @include iflaptop { + font-size: rem(36px); + margin-bottom: rem(80px); + } + + @include ifdesktop { + font-size: rem(48px); + margin-bottom: rem(80px); + } } .SubTitle { @@ -89,10 +182,22 @@ z-index: 2; font-family: $font-open-sans; font-weight: $font-light; - font-size: rem(32px); + font-size: rem(16px); line-height: 100%; color: $color-white; - max-width: rem(720px); + + @include iftablet { + font-size: rem(18px); + } + + @include iflaptop { + font-size: rem(20px); + } + + @include ifdesktop { + font-size: rem(32px); + max-width: rem(720px); + } } } @@ -103,7 +208,12 @@ display: flex; flex-direction: column; justify-content: center; + align-self: center; gap: rem(20px); + + @include iftablet { + align-self: unset; + } } } @@ -112,38 +222,109 @@ iframe { border-radius: rem(28px); + width: 100%; + height: rem(820px); + + @include iftablet { + height: rem(300px); + } + + @include iflaptop { + height: rem(400px); + } + + @include ifdesktop { + height: rem(620px); + } } .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; + background: $color-white; + + bottom: 0; + border-radius: rem(28px); + width: 100%; + height: fit-content; + padding: rem(40px) rem(35px) rem(20px); + + @include iftablet { + top: rem(-60px); + right: rem(60px); + border-radius: rem(28px); + width: rem(240px); + padding: rem(20px) rem(20px) rem(10px); + } + + @include iflaptop { + top: rem(-30px); + right: rem(100px); + border-radius: rem(28px); + width: rem(260px); + padding: rem(40px) rem(20px) rem(20px); + } + + @include ifdesktop { + top: rem(-40px); + right: rem(180px); + border-radius: rem(28px); + width: rem(440px); + padding: rem(40px) rem(35px) rem(40px); + } .Title { position: relative; font-family: $font-open-sans; font-weight: $font-semi-bold; - font-size: rem(48px); + font-size: rem(28px); line-height: 100%; color: $color-text; text-align: right; - margin-bottom: rem(32px); + margin-bottom: rem(20px); align-self: center; + @include iftablet { + font-size: rem(28px); + align-self: center; + margin-bottom: rem(40px); + } + + @include iflaptop { + font-size: rem(32px); + } + + @include ifdesktop { + font-size: rem(48px); + margin-bottom: rem(32px); + } + .LedOn { position: absolute; - bottom: rem(6px); - left: rem(6px); + bottom: -2px; + left: 0; + width: rem(20px); + + @include iftablet { + bottom: -1px; + width: rem(20px); + } + + @include iflaptop { + bottom: 1px; + left: 1px; + width: rem(24px); + } + + @include ifdesktop { + bottom: rem(6px); + left: rem(6px); + width: unset; + } } } @@ -151,19 +332,51 @@ position: relative; font-family: $font-open-sans; font-weight: $font-regular; - font-size: rem(32px); + font-size: rem(16px); line-height: 130%; color: $color-text; - margin-bottom: rem(20px); - margin-left: rem(32px); + padding-bottom: rem(20px); + margin: 0 auto; + width: rem(180px); + + @include iftablet { + width: unset; + margin: unset; + margin-left: rem(32px); + margin-bottom: rem(20px); + padding-bottom: unset; + } + + @include iflaptop { + + } + + @include ifdesktop { + font-size: rem(32px); + margin-bottom: rem(20px); + margin-left: rem(42px); + } .Icon { position: absolute; - left: rem(-48px); - top: rem(8px); - width: rem(32px); - height: rem(32px); + top: 0; + left: rem(-32px); + width: rem(20px); + height: rem(20px); stroke: #E96526; + + @include iftablet { + left: rem(-36px); + width: rem(20px); + height: rem(20px); + } + + @include ifdesktop { + top: rem(6px); + left: rem(-48px); + width: rem(32px); + height: rem(32px); + } } } } diff --git a/src/views/home/ui/contacts/contacts.tsx b/src/views/home/ui/contacts/contacts.tsx index b6dd9ed..f55aad6 100644 --- a/src/views/home/ui/contacts/contacts.tsx +++ b/src/views/home/ui/contacts/contacts.tsx @@ -15,8 +15,8 @@ import email from '@public/svg/email.svg'; export default function Contacts() { return ( -
-
+
+

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

@@ -57,8 +57,8 @@ export default function Contacts() {
diff --git a/src/views/home/ui/footer/footer.module.scss b/src/views/home/ui/footer/footer.module.scss index 6ffdb27..770ec2c 100644 --- a/src/views/home/ui/footer/footer.module.scss +++ b/src/views/home/ui/footer/footer.module.scss @@ -1,26 +1,64 @@ -.Footer { +.Container { position: relative; background-color: #1B1B25; padding: rem(120px) 0 rem(40px); margin-top: rem(-24px); - z-index: -1; + + @include iftablet { + padding: rem(120px) 0 rem(40px); + } + + @include iflaptop { + padding: rem(120px) 0 rem(40px); + } + + @include ifdesktop { + padding: rem(120px) 0 rem(40px); + } } -.InnerContainer { +.Footer { + position: relative; margin: 0 auto; - width: rem(1340px); + width: 90vw; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: rem(20px); + + @include iftablet { + margin: 0 auto; + width: rem(712px); + } + + @include iflaptop { + width: rem(930px); + } + + @include ifdesktop { + width: rem(1340px); + } } .Block { display: flex; flex-direction: column; gap: rem(20px); - max-width: 40vw; + width: 100%; + + @include iftablet { + width: unset; + max-width: 100%; + } + + @include iflaptop { + max-width: 60%; + } + + @include ifdesktop { + max-width: 60%; + } } .SendBtn { @@ -31,20 +69,38 @@ .Header { font-family: $font-open-sans; font-weight: $font-semi-bold; - font-size: rem(60px); + font-size: rem(28px); line-height: 100%; color: $color-white; - margin-bottom: rem(40px); + margin-bottom: rem(30px); + + @include iflaptop { + font-size: rem(42px); + margin-bottom: rem(30px); + } + + @include ifdesktop { + font-size: rem(60px); + 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); + flex-wrap: wrap; + padding-top: rem(20px); + + @include iftablet { + height: rem(80px); + gap: rem(20px); + flex-wrap: nowrap; + padding-top: unset; + } .Policy { font-family: $font-open-sans; @@ -52,6 +108,9 @@ font-size: rem(16px); line-height: 100%; color: $color-white; - margin-left: auto; + + @include iftablet { + margin-left: auto; + } } } diff --git a/src/views/home/ui/footer/footer.tsx b/src/views/home/ui/footer/footer.tsx index 7da55a2..0a0b21c 100644 --- a/src/views/home/ui/footer/footer.tsx +++ b/src/views/home/ui/footer/footer.tsx @@ -4,8 +4,8 @@ import Link from 'next/link'; export default function Footer() { return ( -
-
+
+

Давайте обсудим ваши задачи diff --git a/src/views/home/ui/home.tsx b/src/views/home/ui/home.tsx index 61f5f74..f5ac30d 100644 --- a/src/views/home/ui/home.tsx +++ b/src/views/home/ui/home.tsx @@ -2,8 +2,8 @@ import Main from './main/main'; import Offer from './offer/offer'; import Result from './result/result'; import License from './license/license'; -// import Contacts from './contacts/contacts'; -// import Footer from './footer/footer'; +import Contacts from './contacts/contacts'; +import Footer from './footer/footer'; export default function HomePage() { return ( @@ -12,8 +12,8 @@ export default function HomePage() { - {/**/} - {/*