Dev #12
28
package-lock.json
generated
28
package-lock.json
generated
@@ -11,6 +11,7 @@
|
|||||||
"next": "15.3.2",
|
"next": "15.3.2",
|
||||||
"react": "^19.0.0",
|
"react": "^19.0.0",
|
||||||
"react-dom": "^19.0.0",
|
"react-dom": "^19.0.0",
|
||||||
|
"react-hot-toast": "^2.5.2",
|
||||||
"swiper": "^11.2.8"
|
"swiper": "^11.2.8"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
@@ -2101,7 +2102,6 @@
|
|||||||
"version": "3.1.3",
|
"version": "3.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
||||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
||||||
"dev": true,
|
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/damerau-levenshtein": {
|
"node_modules/damerau-levenshtein": {
|
||||||
@@ -3227,6 +3227,15 @@
|
|||||||
"url": "https://github.com/sponsors/ljharb"
|
"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": {
|
"node_modules/gopd": {
|
||||||
"version": "1.2.0",
|
"version": "1.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
|
||||||
@@ -4759,6 +4768,23 @@
|
|||||||
"react": "^19.1.0"
|
"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": {
|
"node_modules/react-is": {
|
||||||
"version": "16.13.1",
|
"version": "16.13.1",
|
||||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||||
|
|||||||
@@ -14,6 +14,7 @@
|
|||||||
"next": "15.3.2",
|
"next": "15.3.2",
|
||||||
"react": "^19.0.0",
|
"react": "^19.0.0",
|
||||||
"react-dom": "^19.0.0",
|
"react-dom": "^19.0.0",
|
||||||
|
"react-hot-toast": "^2.5.2",
|
||||||
"swiper": "^11.2.8"
|
"swiper": "^11.2.8"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|||||||
@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
|
|||||||
import { Open_Sans } from 'next/font/google';
|
import { Open_Sans } from 'next/font/google';
|
||||||
import '@core/styles/reset.scss';
|
import '@core/styles/reset.scss';
|
||||||
import '@core/styles/globals.scss';
|
import '@core/styles/globals.scss';
|
||||||
|
import { Toaster } from 'react-hot-toast';
|
||||||
|
|
||||||
const openSans = Open_Sans({
|
const openSans = Open_Sans({
|
||||||
subsets: ['cyrillic'],
|
subsets: ['cyrillic'],
|
||||||
@@ -32,7 +33,10 @@ export default function RootLayout({
|
|||||||
}: Readonly<{ children: React.ReactNode }>) {
|
}: Readonly<{ children: React.ReactNode }>) {
|
||||||
return (
|
return (
|
||||||
<html lang='en'>
|
<html lang='en'>
|
||||||
<body className={`${openSans.variable}`}>{children}</body>
|
<body className={`${openSans.variable}`}>
|
||||||
|
{children}
|
||||||
|
<Toaster />
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
1
src/entities/home/ConsultationOrder/index.ts
Normal file
1
src/entities/home/ConsultationOrder/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export { default as ConsultationOrder } from './ui';
|
||||||
13
src/entities/home/ConsultationOrder/ui.tsx
Normal file
13
src/entities/home/ConsultationOrder/ui.tsx
Normal file
@@ -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 (
|
||||||
|
<Button variant='orange' onClick={notify}>
|
||||||
|
Получить консультацию
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -96,127 +96,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.Form {
|
|
||||||
position: relative;
|
|
||||||
background: #292E3D;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: rem(40px);
|
|
||||||
overflow: hidden;
|
|
||||||
padding: rem(60px) rem(50px);
|
|
||||||
border-radius: rem(28px);
|
|
||||||
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;
|
|
||||||
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(26px);
|
|
||||||
line-height: 100%;
|
|
||||||
color: $color-white;
|
|
||||||
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 {
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
font-family: $font-open-sans;
|
|
||||||
font-weight: $font-light;
|
|
||||||
font-size: rem(16px);
|
|
||||||
line-height: 100%;
|
|
||||||
color: $color-white;
|
|
||||||
|
|
||||||
@include iftablet {
|
|
||||||
font-size: rem(18px);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include iflaptop {
|
|
||||||
font-size: rem(20px);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include ifdesktop {
|
|
||||||
font-size: rem(32px);
|
|
||||||
max-width: rem(720px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.Inputs {
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-self: center;
|
|
||||||
gap: rem(20px);
|
|
||||||
|
|
||||||
@include iftablet {
|
|
||||||
align-self: unset;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.Map {
|
.Map {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import s from './contacts.module.scss';
|
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 Image from 'next/image';
|
||||||
|
|
||||||
import bogatyrLogo from '@public/images/logo-bogatyr.png';
|
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 chateauLogo from '@public/images/logo-chateau-de-talu.png';
|
||||||
import gazpromLogo from '@public/images/logo-gazprom.png';
|
import gazpromLogo from '@public/images/logo-gazprom.png';
|
||||||
import kraspolLogo from '@public/images/logo-kraspol.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 ledOn from '@public/svg/led-on.svg';
|
||||||
import phoneCall from '@public/svg/phone-call.svg';
|
import phoneCall from '@public/svg/phone-call.svg';
|
||||||
import map from '@public/svg/map.svg';
|
import map from '@public/svg/map.svg';
|
||||||
@@ -28,31 +28,7 @@ export default function Contacts() {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={s.Form}>
|
<ContactsForm />
|
||||||
<Image
|
|
||||||
className={s.Background}
|
|
||||||
src={bgForm}
|
|
||||||
placeholder='blur'
|
|
||||||
alt={''}
|
|
||||||
quality={75}
|
|
||||||
fill
|
|
||||||
priority
|
|
||||||
/>
|
|
||||||
<div className={s.Offer}>
|
|
||||||
<h3 className={s.Title}>Остались вопросы?</h3>
|
|
||||||
<p className={s.SubTitle}>
|
|
||||||
Наш эксперт свяжется с вами для уточнения подробностей и
|
|
||||||
определения точной стоимости работ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className={s.Inputs}>
|
|
||||||
<Input placeholder='Ваше имя' fullWidth />
|
|
||||||
<Input type='text' placeholder='+79991234567' fullWidth />
|
|
||||||
<Button variant='orange' fullWidth>
|
|
||||||
Получить консультацию
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={s.Map}>
|
<div className={s.Map}>
|
||||||
<iframe
|
<iframe
|
||||||
|
|||||||
@@ -41,50 +41,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.Block {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: rem(20px);
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
@include iftablet {
|
|
||||||
width: unset;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include iflaptop {
|
|
||||||
max-width: 60%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include ifdesktop {
|
|
||||||
max-width: 60%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.SendBtn {
|
|
||||||
align-self: flex-end;
|
|
||||||
max-width: 33%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Header {
|
|
||||||
font-family: $font-open-sans;
|
|
||||||
font-weight: $font-semi-bold;
|
|
||||||
font-size: rem(28px);
|
|
||||||
line-height: 100%;
|
|
||||||
color: $color-white;
|
|
||||||
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 {
|
.Bottom {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-top: 1px solid $color-white;
|
border-top: 1px solid $color-white;
|
||||||
|
|||||||
@@ -1,29 +1,14 @@
|
|||||||
import s from './footer.module.scss';
|
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';
|
import Link from 'next/link';
|
||||||
|
|
||||||
export default function Footer() {
|
export default function Footer() {
|
||||||
return (
|
return (
|
||||||
<section className={s.Container}>
|
<section className={s.Container}>
|
||||||
<div className={s.Footer}>
|
<div className={s.Footer}>
|
||||||
<div className={s.Block}>
|
<FooterForm />
|
||||||
<h2 className={s.Header}>
|
|
||||||
Давайте <Mark>обсудим</Mark> ваши задачи
|
|
||||||
</h2>
|
|
||||||
<Input variant='ghost' placeholder={'Ваше имя'} fullWidth />
|
|
||||||
<Input variant='ghost' placeholder={'+7 999 1234567'} fullWidth />
|
|
||||||
<TextArea
|
|
||||||
variant='ghost'
|
|
||||||
placeholder={'Кратко опишите вашу задачу'}
|
|
||||||
fullWidth
|
|
||||||
id='story'
|
|
||||||
name='story'
|
|
||||||
rows={6}
|
|
||||||
/>
|
|
||||||
<Button className={s.SendBtn} variant={'orange'} fullWidth>
|
|
||||||
Отправить
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div className={s.Bottom}>
|
<div className={s.Bottom}>
|
||||||
<Button variant='ghost'>Telegram</Button>
|
<Button variant='ghost'>Telegram</Button>
|
||||||
<Button variant='ghost'>WhatsApp</Button>
|
<Button variant='ghost'>WhatsApp</Button>
|
||||||
|
|||||||
@@ -41,130 +41,4 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.Slider {
|
|
||||||
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(20px) rem(20px);
|
|
||||||
border-radius: rem(28px);
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
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;
|
|
||||||
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;
|
|
||||||
|
|
||||||
.Title {
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
font-family: $font-open-sans;
|
|
||||||
font-weight: $font-regular;
|
|
||||||
font-size: rem(26px);
|
|
||||||
line-height: 110%;
|
|
||||||
color: $color-white;
|
|
||||||
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 {
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
font-family: $font-open-sans;
|
|
||||||
font-weight: $font-light;
|
|
||||||
font-size: rem(16px);
|
|
||||||
line-height: 100%;
|
|
||||||
color: $color-white;
|
|
||||||
|
|
||||||
@include iftablet {
|
|
||||||
font-size: rem(20px);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include ifdesktop {
|
|
||||||
font-size: rem(30px);
|
|
||||||
margin-bottom: rem(16px);
|
|
||||||
max-width: rem(820px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.Inputs {
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-self: center;
|
|
||||||
gap: rem(16px);
|
|
||||||
|
|
||||||
@include iftablet {
|
|
||||||
}
|
|
||||||
|
|
||||||
@include ifdesktop {
|
|
||||||
gap: rem(20px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -1,10 +1,7 @@
|
|||||||
import s from './license.module.scss';
|
import s from './license.module.scss';
|
||||||
|
import { Mark } from '@shared/ui';
|
||||||
|
import { LicenseForm, LicenseSlider } from '@/widgets';
|
||||||
|
|
||||||
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 emptyPaper from '@public/svg/empty-paper.svg';
|
import emptyPaper from '@public/svg/empty-paper.svg';
|
||||||
|
|
||||||
export default function License() {
|
export default function License() {
|
||||||
@@ -13,39 +10,8 @@ export default function License() {
|
|||||||
<h2 className={s.Header}>
|
<h2 className={s.Header}>
|
||||||
Наши услуги <Mark>подтверждены лицензиями</Mark> и сертификатами
|
Наши услуги <Mark>подтверждены лицензиями</Mark> и сертификатами
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<div className={s.Slider}>
|
|
||||||
<LicenseSlider images={slides} />
|
<LicenseSlider images={slides} />
|
||||||
</div>
|
<LicenseForm />
|
||||||
|
|
||||||
<div className={s.Form}>
|
|
||||||
<div className={s.Offer}>
|
|
||||||
<Image
|
|
||||||
className={s.Background}
|
|
||||||
src={bgForm}
|
|
||||||
placeholder='blur'
|
|
||||||
alt={''}
|
|
||||||
quality={75}
|
|
||||||
fill
|
|
||||||
priority
|
|
||||||
/>
|
|
||||||
<h3 className={s.Title}>
|
|
||||||
Заключите договор до 1 июля и получите скидку на проведение пожарной
|
|
||||||
экспертизы 15 %
|
|
||||||
</h3>
|
|
||||||
<p className={s.SubTitle}>
|
|
||||||
Оставьте свои контактные данные и мы закрепим скидку до 1 июля за
|
|
||||||
вами
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className={s.Inputs}>
|
|
||||||
<Input placeholder={'Ваше имя'} fullWidth />
|
|
||||||
<Input placeholder={'+7 (999) 123 45 67'} fullWidth />
|
|
||||||
<Button variant='orange' fullWidth>
|
|
||||||
Получить консультацию
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import s from './main.module.scss';
|
import s from './main.module.scss';
|
||||||
|
|
||||||
import { Button } from '@shared/ui';
|
import { Button } from '@shared/ui';
|
||||||
|
import { ConsultationOrder } from '@/entities/home/ConsultationOrder';
|
||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
|
|
||||||
import bgStart from '@public/images/bg-start-desktop.jpg';
|
import bgStart from '@public/images/bg-start-desktop.jpg';
|
||||||
@@ -51,7 +52,7 @@ export default function Main() {
|
|||||||
</div>
|
</div>
|
||||||
<div className={s.Phone}>
|
<div className={s.Phone}>
|
||||||
<p className={s.Title}>+7 988 400 93 93</p>
|
<p className={s.Title}>+7 988 400 93 93</p>
|
||||||
<Button variant='orange'>Получить консультацию</Button>
|
<ConsultationOrder />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -113,38 +113,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.RowForm {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: center;
|
|
||||||
gap: rem(10px);
|
|
||||||
margin-bottom: rem(80px);
|
|
||||||
|
|
||||||
@include iftablet {
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
gap: rem(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include iflaptop {
|
|
||||||
justify-content: center;
|
|
||||||
gap: rem(20px);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include ifdesktop {
|
|
||||||
justify-content: center;
|
|
||||||
gap: rem(40px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.Unit {
|
|
||||||
width: 300px;
|
|
||||||
@include iftablet {
|
|
||||||
width: unset;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.Inner {
|
.Inner {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -343,131 +311,4 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.Form {
|
|
||||||
position: relative;
|
|
||||||
background: #292E3D;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
display: grid;
|
|
||||||
grid-template-rows: auto 1fr;
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: rem(20px);
|
|
||||||
padding: rem(25px) rem(20px);
|
|
||||||
border-radius: rem(28px);
|
|
||||||
|
|
||||||
@include iftablet {
|
|
||||||
padding: rem(30px);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include iflaptop {
|
|
||||||
grid-template-rows: 1fr;
|
|
||||||
grid-template-columns: auto rem(400px);
|
|
||||||
padding: rem(40px);
|
|
||||||
}
|
|
||||||
@include ifdesktop {
|
|
||||||
grid-template-columns: auto rem(550px);
|
|
||||||
padding: rem(40px) rem(60px);
|
|
||||||
}
|
|
||||||
|
|
||||||
&: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 {
|
|
||||||
place-self: center center;
|
|
||||||
|
|
||||||
@include iftablet{
|
|
||||||
width: rem(400px);
|
|
||||||
place-self: end end;
|
|
||||||
}
|
|
||||||
@include iflaptop{
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.AdvPhoneInput{
|
|
||||||
display: none;
|
|
||||||
@include iftablet{
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.MobileBtns {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: rem(12px);
|
|
||||||
z-index: 2;
|
|
||||||
max-width: rem(400px);
|
|
||||||
@include iftablet{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.SubTitle {
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
font-family: $font-open-sans;
|
|
||||||
font-weight: $font-light;
|
|
||||||
font-size: rem(22px);
|
|
||||||
line-height: 100%;
|
|
||||||
color: $color-white;
|
|
||||||
margin-bottom: rem(16px);
|
|
||||||
|
|
||||||
@include iftablet {
|
|
||||||
margin-bottom: rem(20px);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include iflaptop {
|
|
||||||
font-size: rem(24px);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include ifdesktop {
|
|
||||||
font-size: rem(30px);
|
|
||||||
margin-bottom: rem(16px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.Title {
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
font-family: $font-open-sans;
|
|
||||||
font-weight: $font-regular;
|
|
||||||
font-size: rem(26px);
|
|
||||||
line-height: 130%;
|
|
||||||
color: $color-white;
|
|
||||||
max-width: rem(660px);
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
@include iftablet {
|
|
||||||
font-size: rem(28px);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include iflaptop {
|
|
||||||
font-size: rem(32px);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include ifdesktop {
|
|
||||||
font-size: rem(48px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
'use client';
|
|
||||||
import s from './offer.module.scss';
|
import s from './offer.module.scss';
|
||||||
|
import { Mark } from '@shared/ui';
|
||||||
import { Button, Mark, Input, AdvancedPhoneInput } from '@shared/ui';
|
import { OfferForm, OfferRequestForm } from '@/widgets';
|
||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
|
|
||||||
import arrow from '@public/svg/arrow-tile.svg';
|
import arrow from '@public/svg/arrow-tile.svg';
|
||||||
@@ -11,12 +10,8 @@ import gridThree from '@public/images/grid-3.png';
|
|||||||
import gridFour from '@public/images/grid-4.png';
|
import gridFour from '@public/images/grid-4.png';
|
||||||
import gridFive from '@public/images/grid-5.png';
|
import gridFive from '@public/images/grid-5.png';
|
||||||
import gridSix from '@public/images/grid-6.png';
|
import gridSix from '@public/images/grid-6.png';
|
||||||
import bgForm from '@public/images/bg-form.jpg';
|
|
||||||
import { useState } from 'react';
|
|
||||||
|
|
||||||
export default function Offer() {
|
export default function Offer() {
|
||||||
const [name, setName] = useState('');
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className={s.Container}>
|
<section className={s.Container}>
|
||||||
<div className={s.Offer}>
|
<div className={s.Offer}>
|
||||||
@@ -45,23 +40,7 @@ export default function Offer() {
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form className={s.RowForm}>
|
<OfferForm />
|
||||||
<Input
|
|
||||||
className={s.Unit}
|
|
||||||
type='text'
|
|
||||||
placeholder='+7 (999) 123 45 67'
|
|
||||||
/>
|
|
||||||
<Input
|
|
||||||
className={s.Unit}
|
|
||||||
type='text'
|
|
||||||
placeholder='Ваше имя'
|
|
||||||
value={name}
|
|
||||||
onChange={(e) => setName(e.target.value)}
|
|
||||||
/>
|
|
||||||
<Button className={s.Unit} variant='orange'>
|
|
||||||
Получить консультацию
|
|
||||||
</Button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div className={s.Inner}>
|
<div className={s.Inner}>
|
||||||
<h2 className={s.Title}>
|
<h2 className={s.Title}>
|
||||||
@@ -87,38 +66,7 @@ export default function Offer() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={s.Form}>
|
<OfferRequestForm />
|
||||||
<Image
|
|
||||||
className={s.Background}
|
|
||||||
src={bgForm}
|
|
||||||
placeholder='blur'
|
|
||||||
alt={''}
|
|
||||||
quality={75}
|
|
||||||
fill
|
|
||||||
priority
|
|
||||||
/>
|
|
||||||
<div className={s.PanelLeft}>
|
|
||||||
<p className={s.SubTitle}>Нужна помощь?</p>
|
|
||||||
<h3 className={s.Title}>
|
|
||||||
Оставьте заявку на бесплатную консультацию
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div className={s.PanelRight}>
|
|
||||||
<AdvancedPhoneInput
|
|
||||||
containerClassName={s.AdvPhoneInput}
|
|
||||||
text='Отправить заявку'
|
|
||||||
placeholder={'+7 (999) 123 45 67'}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className={s.MobileBtns}>
|
|
||||||
<Input placeholder='Ваше имя' fullWidth />
|
|
||||||
<Input placeholder='+7 999 123 45 67' fullWidth />
|
|
||||||
<Button variant='orange' fullWidth>
|
|
||||||
Отправить заявку
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
import s from './result.module.scss';
|
import s from './result.module.scss';
|
||||||
import { Mark } from '@shared/ui';
|
import { Mark } from '@shared/ui';
|
||||||
|
|
||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
|
|
||||||
import bogatyrImg from '@public/images/bogatyr.png';
|
import bogatyrImg from '@public/images/bogatyr.png';
|
||||||
|
|||||||
1
src/widgets/contacts-form/index.ts
Normal file
1
src/widgets/contacts-form/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export { default as ContactsForm } from './ui';
|
||||||
120
src/widgets/contacts-form/styles.module.scss
Normal file
120
src/widgets/contacts-form/styles.module.scss
Normal file
@@ -0,0 +1,120 @@
|
|||||||
|
.Form {
|
||||||
|
position: relative;
|
||||||
|
background: #292E3D;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: rem(40px);
|
||||||
|
overflow: hidden;
|
||||||
|
padding: rem(60px) rem(50px);
|
||||||
|
border-radius: rem(28px);
|
||||||
|
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;
|
||||||
|
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(26px);
|
||||||
|
line-height: 100%;
|
||||||
|
color: $color-white;
|
||||||
|
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 {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
font-family: $font-open-sans;
|
||||||
|
font-weight: $font-light;
|
||||||
|
font-size: rem(16px);
|
||||||
|
line-height: 100%;
|
||||||
|
color: $color-white;
|
||||||
|
|
||||||
|
@include iftablet {
|
||||||
|
font-size: rem(18px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include iflaptop {
|
||||||
|
font-size: rem(20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
font-size: rem(32px);
|
||||||
|
max-width: rem(720px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.Inputs {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-self: center;
|
||||||
|
gap: rem(20px);
|
||||||
|
|
||||||
|
@include iftablet {
|
||||||
|
align-self: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
40
src/widgets/contacts-form/ui.tsx
Normal file
40
src/widgets/contacts-form/ui.tsx
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import s from './styles.module.scss';
|
||||||
|
import { Button, Input } from '@shared/ui';
|
||||||
|
import Image from 'next/image';
|
||||||
|
import toast from 'react-hot-toast';
|
||||||
|
|
||||||
|
import bgForm from '@public/images/bg-form.jpg';
|
||||||
|
|
||||||
|
export default function ContactsForm() {
|
||||||
|
const notify = () => toast.success('Заявка на консультацию принята');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={s.Form}>
|
||||||
|
<Image
|
||||||
|
className={s.Background}
|
||||||
|
src={bgForm}
|
||||||
|
placeholder='blur'
|
||||||
|
alt={''}
|
||||||
|
quality={75}
|
||||||
|
fill
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
<div className={s.Offer}>
|
||||||
|
<h3 className={s.Title}>Остались вопросы?</h3>
|
||||||
|
<p className={s.SubTitle}>
|
||||||
|
Наш эксперт свяжется с вами для уточнения подробностей и определения
|
||||||
|
точной стоимости работ
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<form className={s.Inputs}>
|
||||||
|
<Input placeholder='Ваше имя' fullWidth />
|
||||||
|
<Input type='text' placeholder='+7 (999) 123 45 67' fullWidth />
|
||||||
|
<Button variant='orange' fullWidth onClick={notify}>
|
||||||
|
Получить консультацию
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
1
src/widgets/footer-form/index.ts
Normal file
1
src/widgets/footer-form/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export { default as FooterForm } from './ui';
|
||||||
45
src/widgets/footer-form/styles.module.scss
Normal file
45
src/widgets/footer-form/styles.module.scss
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
.Form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: rem(20px);
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
@include iftablet {
|
||||||
|
width: unset;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include iflaptop {
|
||||||
|
max-width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
max-width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Header {
|
||||||
|
font-family: $font-open-sans;
|
||||||
|
font-weight: $font-semi-bold;
|
||||||
|
font-size: rem(28px);
|
||||||
|
line-height: 100%;
|
||||||
|
color: $color-white;
|
||||||
|
margin-bottom: rem(30px);
|
||||||
|
|
||||||
|
@include iflaptop {
|
||||||
|
font-size: rem(42px);
|
||||||
|
margin-bottom: rem(30px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
font-size: rem(60px);
|
||||||
|
margin-bottom: rem(40px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.SendBtn {
|
||||||
|
align-self: flex-end;
|
||||||
|
max-width: 33%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
30
src/widgets/footer-form/ui.tsx
Normal file
30
src/widgets/footer-form/ui.tsx
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import s from './styles.module.scss';
|
||||||
|
import { Button, Input, Mark, TextArea } from '@shared/ui';
|
||||||
|
import toast from 'react-hot-toast';
|
||||||
|
|
||||||
|
export default function FooterForm() {
|
||||||
|
const notify = () => toast.success('Заявка на консультацию принята');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form className={s.Form}>
|
||||||
|
<h2 className={s.Header}>
|
||||||
|
Давайте <Mark>обсудим</Mark> ваши задачи
|
||||||
|
</h2>
|
||||||
|
<Input variant='ghost' placeholder={'Ваше имя'} fullWidth />
|
||||||
|
<Input variant='ghost' placeholder={'+7 999 1234567'} fullWidth />
|
||||||
|
<TextArea
|
||||||
|
variant='ghost'
|
||||||
|
placeholder={'Кратко опишите вашу задачу'}
|
||||||
|
fullWidth
|
||||||
|
id='story'
|
||||||
|
name='story'
|
||||||
|
rows={6}
|
||||||
|
/>
|
||||||
|
<Button className={s.SendBtn} variant='orange' fullWidth onClick={notify}>
|
||||||
|
Отправить
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1 +1,6 @@
|
|||||||
|
export { ContactsForm } from './contacts-form';
|
||||||
|
export { FooterForm } from './footer-form';
|
||||||
|
export { LicenseForm } from './license-form';
|
||||||
export { LicenseSlider } from './license-slider';
|
export { LicenseSlider } from './license-slider';
|
||||||
|
export { OfferForm } from './offer-form';
|
||||||
|
export { OfferRequestForm } from './offer-request';
|
||||||
|
|||||||
1
src/widgets/license-form/index.ts
Normal file
1
src/widgets/license-form/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export { default as LicenseForm } from './ui';
|
||||||
113
src/widgets/license-form/styles.module.scss
Normal file
113
src/widgets/license-form/styles.module.scss
Normal file
@@ -0,0 +1,113 @@
|
|||||||
|
.Form {
|
||||||
|
position: relative;
|
||||||
|
background: #292E3D;
|
||||||
|
padding: rem(20px) rem(20px);
|
||||||
|
border-radius: rem(28px);
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
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;
|
||||||
|
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;
|
||||||
|
|
||||||
|
.Title {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
font-family: $font-open-sans;
|
||||||
|
font-weight: $font-regular;
|
||||||
|
font-size: rem(26px);
|
||||||
|
line-height: 110%;
|
||||||
|
color: $color-white;
|
||||||
|
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 {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
font-family: $font-open-sans;
|
||||||
|
font-weight: $font-light;
|
||||||
|
font-size: rem(16px);
|
||||||
|
line-height: 100%;
|
||||||
|
color: $color-white;
|
||||||
|
|
||||||
|
@include iftablet {
|
||||||
|
font-size: rem(20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
font-size: rem(30px);
|
||||||
|
margin-bottom: rem(16px);
|
||||||
|
max-width: rem(820px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.Inputs {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-self: center;
|
||||||
|
gap: rem(16px);
|
||||||
|
|
||||||
|
@include iftablet {
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
gap: rem(20px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
42
src/widgets/license-form/ui.tsx
Normal file
42
src/widgets/license-form/ui.tsx
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import s from './styles.module.scss';
|
||||||
|
import { Button, Input } from '@shared/ui';
|
||||||
|
import Image from 'next/image';
|
||||||
|
import toast from 'react-hot-toast';
|
||||||
|
|
||||||
|
import bgForm from '@public/images/bg-form.jpg';
|
||||||
|
|
||||||
|
export default function LicenseForm() {
|
||||||
|
const notify = () => toast.success('Заявка на консультацию принята');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={s.Form}>
|
||||||
|
<div className={s.Offer}>
|
||||||
|
<Image
|
||||||
|
className={s.Background}
|
||||||
|
src={bgForm}
|
||||||
|
placeholder='blur'
|
||||||
|
alt={''}
|
||||||
|
quality={75}
|
||||||
|
fill
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
<h3 className={s.Title}>
|
||||||
|
Заключите договор до 1 июля и получите скидку на проведение пожарной
|
||||||
|
экспертизы 15 %
|
||||||
|
</h3>
|
||||||
|
<p className={s.SubTitle}>
|
||||||
|
Оставьте свои контактные данные и мы закрепим скидку до 1 июля за вами
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<form className={s.Inputs}>
|
||||||
|
<Input placeholder={'Ваше имя'} fullWidth />
|
||||||
|
<Input placeholder={'+7 (999) 123 45 67'} fullWidth />
|
||||||
|
<Button variant='orange' fullWidth onClick={notify}>
|
||||||
|
Получить консультацию
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1 +1 @@
|
|||||||
export { default as LicenseSlider } from './license-slider';
|
export { default as LicenseSlider } from './ui';
|
||||||
|
|||||||
@@ -1,10 +0,0 @@
|
|||||||
.Slider {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Slide {
|
|
||||||
cursor: pointer;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
20
src/widgets/license-slider/styles.module.scss
Normal file
20
src/widgets/license-slider/styles.module.scss
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
.Slider {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: rem(40px);
|
||||||
|
padding: 0 rem(20px) 0;
|
||||||
|
|
||||||
|
@include iftablet {
|
||||||
|
padding: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
margin-bottom: rem(80px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.Slide {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
@@ -1,11 +1,10 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import s from './license-slider.module.scss';
|
import s from './styles.module.scss';
|
||||||
|
|
||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
import { StaticImport } from 'next/dist/shared/lib/get-img-props';
|
import { StaticImport } from 'next/dist/shared/lib/get-img-props';
|
||||||
import { clsx } from 'clsx';
|
import { clsx } from 'clsx';
|
||||||
|
|
||||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||||
import { Grid } from 'swiper/modules';
|
import { Grid } from 'swiper/modules';
|
||||||
import 'swiper/css';
|
import 'swiper/css';
|
||||||
@@ -42,10 +41,7 @@ const swiperBreakpoints = {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function LicenseSlider({
|
export default function Ui({ className, images }: LicenseSliderProps) {
|
||||||
className,
|
|
||||||
images,
|
|
||||||
}: LicenseSliderProps) {
|
|
||||||
return (
|
return (
|
||||||
<Swiper
|
<Swiper
|
||||||
className={clsx(s.Slider, className)}
|
className={clsx(s.Slider, className)}
|
||||||
1
src/widgets/offer-form/index.ts
Normal file
1
src/widgets/offer-form/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export { default as OfferForm } from './ui';
|
||||||
31
src/widgets/offer-form/styles.module.scss
Normal file
31
src/widgets/offer-form/styles.module.scss
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
.RowForm {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
gap: rem(10px);
|
||||||
|
margin-bottom: rem(80px);
|
||||||
|
|
||||||
|
@include iftablet {
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
gap: rem(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include iflaptop {
|
||||||
|
justify-content: center;
|
||||||
|
gap: rem(20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
justify-content: center;
|
||||||
|
gap: rem(40px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.Unit {
|
||||||
|
width: 300px;
|
||||||
|
@include iftablet {
|
||||||
|
width: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
27
src/widgets/offer-form/ui.tsx
Normal file
27
src/widgets/offer-form/ui.tsx
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import s from './styles.module.scss';
|
||||||
|
import { Button, Input } from '@shared/ui';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import toast from 'react-hot-toast';
|
||||||
|
|
||||||
|
export default function OfferForm() {
|
||||||
|
const [name, setName] = useState('');
|
||||||
|
const notify = () => toast.success('Заявка на консультацию принята');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form className={s.RowForm}>
|
||||||
|
<Input className={s.Unit} type='text' placeholder='+7 (999) 123 45 67' />
|
||||||
|
<Input
|
||||||
|
className={s.Unit}
|
||||||
|
type='text'
|
||||||
|
placeholder='Ваше имя'
|
||||||
|
value={name}
|
||||||
|
onChange={(e) => setName(e.target.value)}
|
||||||
|
/>
|
||||||
|
<Button className={s.Unit} variant='orange' onClick={notify}>
|
||||||
|
Получить консультацию
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
}
|
||||||
1
src/widgets/offer-request/index.ts
Normal file
1
src/widgets/offer-request/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export { default as OfferRequestForm } from './ui';
|
||||||
129
src/widgets/offer-request/styles.module.scss
Normal file
129
src/widgets/offer-request/styles.module.scss
Normal file
@@ -0,0 +1,129 @@
|
|||||||
|
.Form {
|
||||||
|
position: relative;
|
||||||
|
background: #292E3D;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: auto 1fr;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: rem(20px);
|
||||||
|
padding: rem(25px) rem(20px);
|
||||||
|
border-radius: rem(28px);
|
||||||
|
|
||||||
|
@include iftablet {
|
||||||
|
padding: rem(30px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include iflaptop {
|
||||||
|
grid-template-rows: 1fr;
|
||||||
|
grid-template-columns: auto rem(400px);
|
||||||
|
padding: rem(40px);
|
||||||
|
}
|
||||||
|
@include ifdesktop {
|
||||||
|
grid-template-columns: auto rem(550px);
|
||||||
|
padding: rem(40px) rem(60px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&: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 {
|
||||||
|
place-self: center center;
|
||||||
|
|
||||||
|
@include iftablet{
|
||||||
|
width: rem(400px);
|
||||||
|
place-self: end end;
|
||||||
|
}
|
||||||
|
@include iflaptop{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.AdvPhoneInput{
|
||||||
|
display: none;
|
||||||
|
@include iftablet{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.MobileBtns {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: rem(12px);
|
||||||
|
z-index: 2;
|
||||||
|
max-width: rem(400px);
|
||||||
|
@include iftablet{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.SubTitle {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
font-family: $font-open-sans;
|
||||||
|
font-weight: $font-light;
|
||||||
|
font-size: rem(22px);
|
||||||
|
line-height: 100%;
|
||||||
|
color: $color-white;
|
||||||
|
margin-bottom: rem(16px);
|
||||||
|
|
||||||
|
@include iftablet {
|
||||||
|
margin-bottom: rem(20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include iflaptop {
|
||||||
|
font-size: rem(24px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
font-size: rem(30px);
|
||||||
|
margin-bottom: rem(16px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.Title {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
font-family: $font-open-sans;
|
||||||
|
font-weight: $font-regular;
|
||||||
|
font-size: rem(26px);
|
||||||
|
line-height: 130%;
|
||||||
|
color: $color-white;
|
||||||
|
max-width: rem(660px);
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
@include iftablet {
|
||||||
|
font-size: rem(28px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include iflaptop {
|
||||||
|
font-size: rem(32px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
font-size: rem(48px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
46
src/widgets/offer-request/ui.tsx
Normal file
46
src/widgets/offer-request/ui.tsx
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import s from './styles.module.scss';
|
||||||
|
import { AdvancedPhoneInput, Button, Input } from '@shared/ui';
|
||||||
|
import Image from 'next/image';
|
||||||
|
import toast from 'react-hot-toast';
|
||||||
|
|
||||||
|
import bgForm from '@public/images/bg-form.jpg';
|
||||||
|
|
||||||
|
export default function OfferRequest() {
|
||||||
|
const notify = () => toast.success('Заявка на консультацию принята');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={s.Form}>
|
||||||
|
<Image
|
||||||
|
className={s.Background}
|
||||||
|
src={bgForm}
|
||||||
|
placeholder='blur'
|
||||||
|
alt={''}
|
||||||
|
quality={75}
|
||||||
|
fill
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
<div className={s.PanelLeft}>
|
||||||
|
<p className={s.SubTitle}>Нужна помощь?</p>
|
||||||
|
<h3 className={s.Title}>Оставьте заявку на бесплатную консультацию</h3>
|
||||||
|
</div>
|
||||||
|
<div className={s.PanelRight}>
|
||||||
|
<AdvancedPhoneInput
|
||||||
|
containerClassName={s.AdvPhoneInput}
|
||||||
|
text='Отправить заявку'
|
||||||
|
placeholder={'+7 (999) 123 45 67'}
|
||||||
|
onClick={notify}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className={s.MobileBtns}>
|
||||||
|
<Input placeholder='Ваше имя' fullWidth />
|
||||||
|
<Input placeholder='+7 999 123 45 67' fullWidth />
|
||||||
|
<Button variant='orange' fullWidth onClick={notify}>
|
||||||
|
Отправить заявку
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user