Dev #12
28
package-lock.json
generated
28
package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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": {
|
||||
|
||||
@@ -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 (
|
||||
<html lang='en'>
|
||||
<body className={`${openSans.variable}`}>{children}</body>
|
||||
<body className={`${openSans.variable}`}>
|
||||
{children}
|
||||
<Toaster />
|
||||
</body>
|
||||
</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 {
|
||||
position: relative;
|
||||
|
||||
|
||||
@@ -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';
|
||||
@@ -28,31 +28,7 @@ export default function Contacts() {
|
||||
))}
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<div className={s.Inputs}>
|
||||
<Input placeholder='Ваше имя' fullWidth />
|
||||
<Input type='text' placeholder='+79991234567' fullWidth />
|
||||
<Button variant='orange' fullWidth>
|
||||
Получить консультацию
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<ContactsForm />
|
||||
|
||||
<div className={s.Map}>
|
||||
<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 {
|
||||
width: 100%;
|
||||
border-top: 1px solid $color-white;
|
||||
|
||||
@@ -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 (
|
||||
<section className={s.Container}>
|
||||
<div className={s.Footer}>
|
||||
<div className={s.Block}>
|
||||
<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>
|
||||
<FooterForm />
|
||||
|
||||
<div className={s.Bottom}>
|
||||
<Button variant='ghost'>Telegram</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 { 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';
|
||||
|
||||
export default function License() {
|
||||
@@ -13,39 +10,8 @@ export default function License() {
|
||||
<h2 className={s.Header}>
|
||||
Наши услуги <Mark>подтверждены лицензиями</Mark> и сертификатами
|
||||
</h2>
|
||||
|
||||
<div className={s.Slider}>
|
||||
<LicenseSlider images={slides} />
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<LicenseForm />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import s from './main.module.scss';
|
||||
|
||||
import { Button } from '@shared/ui';
|
||||
import { ConsultationOrder } from '@/entities/home/ConsultationOrder';
|
||||
import Image from 'next/image';
|
||||
|
||||
import bgStart from '@public/images/bg-start-desktop.jpg';
|
||||
@@ -51,7 +52,7 @@ export default function Main() {
|
||||
</div>
|
||||
<div className={s.Phone}>
|
||||
<p className={s.Title}>+7 988 400 93 93</p>
|
||||
<Button variant='orange'>Получить консультацию</Button>
|
||||
<ConsultationOrder />
|
||||
</div>
|
||||
</div>
|
||||
</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 {
|
||||
display: flex;
|
||||
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 { Button, Mark, Input, AdvancedPhoneInput } from '@shared/ui';
|
||||
import { Mark } from '@shared/ui';
|
||||
import { OfferForm, OfferRequestForm } from '@/widgets';
|
||||
import Image from 'next/image';
|
||||
|
||||
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 gridFive from '@public/images/grid-5.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() {
|
||||
const [name, setName] = useState('');
|
||||
|
||||
return (
|
||||
<section className={s.Container}>
|
||||
<div className={s.Offer}>
|
||||
@@ -45,23 +40,7 @@ export default function Offer() {
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<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'>
|
||||
Получить консультацию
|
||||
</Button>
|
||||
</form>
|
||||
<OfferForm />
|
||||
|
||||
<div className={s.Inner}>
|
||||
<h2 className={s.Title}>
|
||||
@@ -87,38 +66,7 @@ export default function Offer() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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'}
|
||||
/>
|
||||
|
||||
<div className={s.MobileBtns}>
|
||||
<Input placeholder='Ваше имя' fullWidth />
|
||||
<Input placeholder='+7 999 123 45 67' fullWidth />
|
||||
<Button variant='orange' fullWidth>
|
||||
Отправить заявку
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<OfferRequestForm />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import s from './result.module.scss';
|
||||
import { Mark } from '@shared/ui';
|
||||
|
||||
import Image from 'next/image';
|
||||
|
||||
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 { 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';
|
||||
|
||||
import s from './license-slider.module.scss';
|
||||
import s from './styles.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 { Grid } from 'swiper/modules';
|
||||
import 'swiper/css';
|
||||
@@ -42,10 +41,7 @@ const swiperBreakpoints = {
|
||||
},
|
||||
};
|
||||
|
||||
export default function LicenseSlider({
|
||||
className,
|
||||
images,
|
||||
}: LicenseSliderProps) {
|
||||
export default function Ui({ className, images }: LicenseSliderProps) {
|
||||
return (
|
||||
<Swiper
|
||||
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