diff --git a/package-lock.json b/package-lock.json index 59440c8..df7ece4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "next": "15.3.2", "react": "^19.0.0", "react-dom": "^19.0.0", + "react-hot-toast": "^2.5.2", "swiper": "^11.2.8" }, "devDependencies": { @@ -2101,7 +2102,6 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true, "license": "MIT" }, "node_modules/damerau-levenshtein": { @@ -3227,6 +3227,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/goober": { + "version": "2.1.16", + "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.16.tgz", + "integrity": "sha512-erjk19y1U33+XAMe1VTvIONHYoSqE4iS7BYUZfHaqeohLmnC0FdxEh7rQU+6MZ4OajItzjZFSRtVANrQwNq6/g==", + "license": "MIT", + "peerDependencies": { + "csstype": "^3.0.10" + } + }, "node_modules/gopd": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz", @@ -4759,6 +4768,23 @@ "react": "^19.1.0" } }, + "node_modules/react-hot-toast": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.5.2.tgz", + "integrity": "sha512-Tun3BbCxzmXXM7C+NI4qiv6lT0uwGh4oAfeJyNOjYUejTsm35mK9iCaYLGv8cBz9L5YxZLx/2ii7zsIwPtPUdw==", + "license": "MIT", + "dependencies": { + "csstype": "^3.1.3", + "goober": "^2.1.16" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">=16", + "react-dom": ">=16" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index b17420c..b7dc14a 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "next": "15.3.2", "react": "^19.0.0", "react-dom": "^19.0.0", + "react-hot-toast": "^2.5.2", "swiper": "^11.2.8" }, "devDependencies": { diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 97409e4..ed599af 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -2,6 +2,7 @@ import type { Metadata } from 'next'; import { Open_Sans } from 'next/font/google'; import '@core/styles/reset.scss'; import '@core/styles/globals.scss'; +import { Toaster } from 'react-hot-toast'; const openSans = Open_Sans({ subsets: ['cyrillic'], @@ -32,7 +33,10 @@ export default function RootLayout({ }: Readonly<{ children: React.ReactNode }>) { return ( - {children} + + {children} + + ); } diff --git a/src/entities/home/ConsultationOrder/index.ts b/src/entities/home/ConsultationOrder/index.ts new file mode 100644 index 0000000..dac7ffd --- /dev/null +++ b/src/entities/home/ConsultationOrder/index.ts @@ -0,0 +1 @@ +export { default as ConsultationOrder } from './ui'; diff --git a/src/entities/home/ConsultationOrder/ui.tsx b/src/entities/home/ConsultationOrder/ui.tsx new file mode 100644 index 0000000..5a410bb --- /dev/null +++ b/src/entities/home/ConsultationOrder/ui.tsx @@ -0,0 +1,13 @@ +'use client'; +import { Button } from '@shared/ui'; +import toast from 'react-hot-toast'; + +export default function ConsultationOrder() { + const notify = () => toast.success('Заявка на консультацию принята'); + + return ( + + ); +} diff --git a/src/shared/ui/advanced-phone-input/advancedPhoneInput.module.scss b/src/shared/ui/advanced-phone-input/advancedPhoneInput.module.scss index c5e6429..9789c8a 100644 --- a/src/shared/ui/advanced-phone-input/advancedPhoneInput.module.scss +++ b/src/shared/ui/advanced-phone-input/advancedPhoneInput.module.scss @@ -6,13 +6,36 @@ width: 100%; position: relative; z-index: 2; - padding-left: 2vw; + + @include iftablet{ + } + @include iflaptop{ + padding-left: rem(16px); + } + @include ifdesktop{ + padding-left: rem(32px); + } } .Button { position: absolute; - right: rem(2px); - top: calc(50% - 1.6rem); z-index: 3; + right: rem(2px); + top: calc(50% - 1.2rem); min-height: calc(100% - .25rem); + + @include iftablet{ + top: calc(50% - 1.2rem); + right: rem(3px); + } + + @include iflaptop{ + top: calc(50% - 1.4rem); + right: rem(4px); + } + + @include ifdesktop{ + top: calc(50% - 1.6rem); + right: rem(2px); + } } \ 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 84e8fec..9bbc039 100644 --- a/src/shared/ui/button/button.module.scss +++ b/src/shared/ui/button/button.module.scss @@ -2,19 +2,26 @@ display: flex; align-items: center; justify-content: center; - padding: rem(10px) rem(32px); - border-radius: rem(28px); - min-height: rem(54px); + padding: rem(8px) rem(28px); + border-radius: rem(20px); + min-height: rem(40px); font-family: $font-open-sans; font-weight: $font-regular; - font-size: rem(24px); + font-size: rem(16px); line-height: 100%; transition: all 0.15s linear; white-space: nowrap; width: max-content; + @include ifdesktop{ + font-size: rem(24px); + padding: rem(10px) rem(32px); + border-radius: rem(28px); + min-height: rem(54px); + } + &_fullWidth { width: 100%; } diff --git a/src/shared/ui/input/input.module.scss b/src/shared/ui/input/input.module.scss index 62e14de..7e436c5 100644 --- a/src/shared/ui/input/input.module.scss +++ b/src/shared/ui/input/input.module.scss @@ -3,16 +3,29 @@ background: $color-white; border: 1px solid $color-darkgray; border-radius: rem(28px); - padding: rem(10px) rem(24px); + padding: rem(8px) rem(20px); transition: border ease .5s; font-family: $font-open-sans; font-weight: $font-regular; - font-size: rem(24px); + font-size: rem(18px); line-height: 100%; color: $color-text; width: max-content; + @include iftablet{ + font-size: rem(18px); + } + + @include iflaptop{ + font-size: rem(20px); + padding: rem(10px) rem(20px); + } + + @include ifdesktop{ + font-size: rem(24px); + } + &:focus { border-color: $color-orange; transition: border-color ease .5s; 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..e25a581 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 { @@ -38,112 +96,114 @@ } } -.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: 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 { - 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); + 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 +211,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..3bbc273 100644 --- a/src/views/home/ui/contacts/contacts.tsx +++ b/src/views/home/ui/contacts/contacts.tsx @@ -1,5 +1,6 @@ import s from './contacts.module.scss'; -import { Button, Input, Mark } from '@shared/ui'; +import { Mark } from '@shared/ui'; +import { ContactsForm } from '@/widgets'; import Image from 'next/image'; import bogatyrLogo from '@public/images/logo-bogatyr.png'; @@ -7,7 +8,6 @@ import sochiparkLogo from '@public/images/logo-sochipark.png'; import chateauLogo from '@public/images/logo-chateau-de-talu.png'; import gazpromLogo from '@public/images/logo-gazprom.png'; import kraspolLogo from '@public/images/logo-kraspol.png'; -import bgForm from '@public/images/bg-form.jpg'; import ledOn from '@public/svg/led-on.svg'; import phoneCall from '@public/svg/phone-call.svg'; import map from '@public/svg/map.svg'; @@ -15,8 +15,8 @@ import email from '@public/svg/email.svg'; export default function Contacts() { return ( -
-
+
+

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

@@ -28,37 +28,13 @@ 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..d476492 100644 --- a/src/views/home/ui/footer/footer.module.scss +++ b/src/views/home/ui/footer/footer.module.scss @@ -1,50 +1,62 @@ -.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); -} -.Block { - display: flex; - flex-direction: column; - gap: rem(20px); - max-width: 40vw; -} + @include iftablet { + margin: 0 auto; + width: rem(712px); + } -.SendBtn { - align-self: flex-end; - max-width: 33%; -} + @include iflaptop { + width: rem(930px); + } -.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); + @include ifdesktop { + width: rem(1340px); + } } .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 +64,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..d4de59d 100644 --- a/src/views/home/ui/footer/footer.tsx +++ b/src/views/home/ui/footer/footer.tsx @@ -1,29 +1,14 @@ import s from './footer.module.scss'; -import { Button, Input, Mark, TextArea } from '@shared/ui'; +import { Button } from '@shared/ui'; +import { FooterForm } from '@/widgets'; import Link from 'next/link'; export default function Footer() { return ( -
-
-
-

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

- - -