Merge pull request #12 from redrockjs/dev
Dev
This commit was merged in pull request #12.
This commit is contained in:
Valeriy G.
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -6,13 +6,36 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
padding-left: 2vw;
|
|
||||||
|
@include iftablet{
|
||||||
|
}
|
||||||
|
@include iflaptop{
|
||||||
|
padding-left: rem(16px);
|
||||||
|
}
|
||||||
|
@include ifdesktop{
|
||||||
|
padding-left: rem(32px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.Button {
|
.Button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: rem(2px);
|
|
||||||
top: calc(50% - 1.6rem);
|
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
|
right: rem(2px);
|
||||||
|
top: calc(50% - 1.2rem);
|
||||||
min-height: calc(100% - .25rem);
|
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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -2,19 +2,26 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: rem(10px) rem(32px);
|
padding: rem(8px) rem(28px);
|
||||||
border-radius: rem(28px);
|
border-radius: rem(20px);
|
||||||
min-height: rem(54px);
|
min-height: rem(40px);
|
||||||
|
|
||||||
font-family: $font-open-sans;
|
font-family: $font-open-sans;
|
||||||
font-weight: $font-regular;
|
font-weight: $font-regular;
|
||||||
font-size: rem(24px);
|
font-size: rem(16px);
|
||||||
line-height: 100%;
|
line-height: 100%;
|
||||||
|
|
||||||
transition: all 0.15s linear;
|
transition: all 0.15s linear;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
width: max-content;
|
width: max-content;
|
||||||
|
|
||||||
|
@include ifdesktop{
|
||||||
|
font-size: rem(24px);
|
||||||
|
padding: rem(10px) rem(32px);
|
||||||
|
border-radius: rem(28px);
|
||||||
|
min-height: rem(54px);
|
||||||
|
}
|
||||||
|
|
||||||
&_fullWidth {
|
&_fullWidth {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,16 +3,29 @@
|
|||||||
background: $color-white;
|
background: $color-white;
|
||||||
border: 1px solid $color-darkgray;
|
border: 1px solid $color-darkgray;
|
||||||
border-radius: rem(28px);
|
border-radius: rem(28px);
|
||||||
padding: rem(10px) rem(24px);
|
padding: rem(8px) rem(20px);
|
||||||
transition: border ease .5s;
|
transition: border ease .5s;
|
||||||
|
|
||||||
font-family: $font-open-sans;
|
font-family: $font-open-sans;
|
||||||
font-weight: $font-regular;
|
font-weight: $font-regular;
|
||||||
font-size: rem(24px);
|
font-size: rem(18px);
|
||||||
line-height: 100%;
|
line-height: 100%;
|
||||||
color: $color-text;
|
color: $color-text;
|
||||||
width: max-content;
|
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 {
|
&:focus {
|
||||||
border-color: $color-orange;
|
border-color: $color-orange;
|
||||||
transition: border-color ease .5s;
|
transition: border-color ease .5s;
|
||||||
|
|||||||
@@ -20,7 +20,7 @@
|
|||||||
|
|
||||||
font-family: $font-open-sans;
|
font-family: $font-open-sans;
|
||||||
font-weight: $font-regular;
|
font-weight: $font-regular;
|
||||||
font-size: rem(24px);
|
font-size: rem(18px);
|
||||||
line-height: 100%;
|
line-height: 100%;
|
||||||
color: $color-text;
|
color: $color-text;
|
||||||
|
|
||||||
@@ -29,6 +29,19 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
flex-grow: 1;
|
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 */
|
/* scrollbar */
|
||||||
& {
|
& {
|
||||||
/* Arrow mouse cursor over the scrollbar */
|
/* Arrow mouse cursor over the scrollbar */
|
||||||
|
|||||||
@@ -1,21 +1,62 @@
|
|||||||
.Contacts {
|
.Container {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
background: $color-lightgray;
|
background: $color-lightgray;
|
||||||
border-radius: rem(28px);
|
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;
|
margin: 0 auto;
|
||||||
width: rem(1340px);
|
|
||||||
|
@include iftablet {
|
||||||
|
width: rem(712px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include iflaptop {
|
||||||
|
width: rem(930px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
width: rem(1340px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.Header {
|
.Header {
|
||||||
font-family: $font-open-sans;
|
font-family: $font-open-sans;
|
||||||
font-weight: $font-semi-bold;
|
font-weight: $font-semi-bold;
|
||||||
font-size: rem(60px);
|
font-size: rem(26px);
|
||||||
line-height: 100%;
|
line-height: 100%;
|
||||||
color: $color-text;
|
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 {
|
.Clients {
|
||||||
@@ -26,8 +67,25 @@
|
|||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: rem(40px);
|
gap: rem(40px);
|
||||||
max-width: rem(1200px);
|
padding: 0 0 rem(32px);
|
||||||
margin-bottom: rem(160px);
|
|
||||||
|
@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 {
|
.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 {
|
.Map {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
iframe {
|
iframe {
|
||||||
border-radius: rem(28px);
|
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 {
|
.Contacts {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 2;
|
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;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: 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 {
|
.Title {
|
||||||
position: relative;
|
position: relative;
|
||||||
font-family: $font-open-sans;
|
font-family: $font-open-sans;
|
||||||
font-weight: $font-semi-bold;
|
font-weight: $font-semi-bold;
|
||||||
font-size: rem(48px);
|
font-size: rem(28px);
|
||||||
line-height: 100%;
|
line-height: 100%;
|
||||||
color: $color-text;
|
color: $color-text;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
margin-bottom: rem(32px);
|
margin-bottom: rem(20px);
|
||||||
align-self: center;
|
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 {
|
.LedOn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: rem(6px);
|
bottom: -2px;
|
||||||
left: rem(6px);
|
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;
|
position: relative;
|
||||||
font-family: $font-open-sans;
|
font-family: $font-open-sans;
|
||||||
font-weight: $font-regular;
|
font-weight: $font-regular;
|
||||||
font-size: rem(32px);
|
font-size: rem(16px);
|
||||||
line-height: 130%;
|
line-height: 130%;
|
||||||
color: $color-text;
|
color: $color-text;
|
||||||
margin-bottom: rem(20px);
|
padding-bottom: rem(20px);
|
||||||
margin-left: rem(32px);
|
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 {
|
.Icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: rem(-48px);
|
top: 0;
|
||||||
top: rem(8px);
|
left: rem(-32px);
|
||||||
width: rem(32px);
|
width: rem(20px);
|
||||||
height: rem(32px);
|
height: rem(20px);
|
||||||
stroke: #E96526;
|
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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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';
|
||||||
@@ -15,8 +15,8 @@ import email from '@public/svg/email.svg';
|
|||||||
|
|
||||||
export default function Contacts() {
|
export default function Contacts() {
|
||||||
return (
|
return (
|
||||||
<section className={s.Contacts}>
|
<section className={s.Container}>
|
||||||
<div className={s.InnerContainer}>
|
<div className={s.Contacts}>
|
||||||
<h2 className={s.Header}>
|
<h2 className={s.Header}>
|
||||||
Клиенты, которые <Mark>нам доверяют</Mark>
|
Клиенты, которые <Mark>нам доверяют</Mark>
|
||||||
</h2>
|
</h2>
|
||||||
@@ -28,37 +28,13 @@ 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
|
||||||
src='https://yandex.ru/map-widget/v1/?um=constructor%3A7f1285c4f3e470bc9affa220323655ac72edd1be376c2579d421ca359ac46a7d&source=constructor'
|
src='https://yandex.ru/map-widget/v1/?um=constructor%3A7f1285c4f3e470bc9affa220323655ac72edd1be376c2579d421ca359ac46a7d&source=constructor'
|
||||||
width='100%'
|
// width='100%'
|
||||||
height='620'
|
// height='620'
|
||||||
frameBorder='0'
|
frameBorder='0'
|
||||||
></iframe>
|
></iframe>
|
||||||
|
|
||||||
|
|||||||
@@ -1,50 +1,62 @@
|
|||||||
.Footer {
|
.Container {
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: #1B1B25;
|
background-color: #1B1B25;
|
||||||
padding: rem(120px) 0 rem(40px);
|
padding: rem(120px) 0 rem(40px);
|
||||||
margin-top: rem(-24px);
|
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;
|
margin: 0 auto;
|
||||||
width: rem(1340px);
|
width: 90vw;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: rem(20px);
|
gap: rem(20px);
|
||||||
}
|
|
||||||
|
|
||||||
.Block {
|
@include iftablet {
|
||||||
display: flex;
|
margin: 0 auto;
|
||||||
flex-direction: column;
|
width: rem(712px);
|
||||||
gap: rem(20px);
|
}
|
||||||
max-width: 40vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.SendBtn {
|
@include iflaptop {
|
||||||
align-self: flex-end;
|
width: rem(930px);
|
||||||
max-width: 33%;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.Header {
|
@include ifdesktop {
|
||||||
font-family: $font-open-sans;
|
width: rem(1340px);
|
||||||
font-weight: $font-semi-bold;
|
}
|
||||||
font-size: rem(60px);
|
|
||||||
line-height: 100%;
|
|
||||||
color: $color-white;
|
|
||||||
margin-bottom: rem(40px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.Bottom {
|
.Bottom {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: rem(80px);
|
|
||||||
border-top: 1px solid $color-white;
|
border-top: 1px solid $color-white;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: rem(20px);
|
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 {
|
.Policy {
|
||||||
font-family: $font-open-sans;
|
font-family: $font-open-sans;
|
||||||
@@ -52,6 +64,9 @@
|
|||||||
font-size: rem(16px);
|
font-size: rem(16px);
|
||||||
line-height: 100%;
|
line-height: 100%;
|
||||||
color: $color-white;
|
color: $color-white;
|
||||||
margin-left: auto;
|
|
||||||
|
@include iftablet {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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.Footer}>
|
<section className={s.Container}>
|
||||||
<div className={s.InnerContainer}>
|
<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>
|
||||||
|
|||||||
@@ -1,87 +1,44 @@
|
|||||||
.License {
|
.License {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
width: rem(1340px);
|
padding: rem(32px) 0 rem(32px);
|
||||||
padding: rem(120px) 0 rem(160px);
|
|
||||||
|
@include iftablet {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: rem(712px);
|
||||||
|
padding: 0 0 rem(40px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include iflaptop {
|
||||||
|
width: rem(930px);
|
||||||
|
padding: 0 0 rem(60px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
width: rem(1340px);
|
||||||
|
padding: 0 0 rem(160px);
|
||||||
|
}
|
||||||
|
|
||||||
.Header {
|
.Header {
|
||||||
font-family: $font-open-sans;
|
font-family: $font-open-sans;
|
||||||
font-weight: $font-semi-bold;
|
font-weight: $font-semi-bold;
|
||||||
font-size: rem(60px);
|
font-size: rem(28px);
|
||||||
line-height: 100%;
|
line-height: 100%;
|
||||||
color: $color-text;
|
color: $color-text;
|
||||||
margin-bottom: rem(80px);
|
padding: 0 rem(20px) 0;
|
||||||
|
margin-bottom: rem(40px);
|
||||||
|
|
||||||
|
@include iftablet {
|
||||||
|
padding: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include iflaptop {
|
||||||
|
font-size: rem(36px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
font-size: rem(60px);
|
||||||
|
margin-bottom: rem(80px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.Slider {
|
|
||||||
margin-bottom: rem(80px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.Form {
|
|
||||||
position: relative;
|
|
||||||
background: #292E3D;
|
|
||||||
padding: rem(40px) rem(60px);
|
|
||||||
border-radius: rem(28px);
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
gap: rem(40px);
|
|
||||||
|
|
||||||
&: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(48px);
|
|
||||||
line-height: 110%;
|
|
||||||
color: $color-white;
|
|
||||||
margin: 0 0 rem(50px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.SubTitle {
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
font-family: $font-open-sans;
|
|
||||||
font-weight: $font-light;
|
|
||||||
font-size: rem(30px);
|
|
||||||
line-height: 100%;
|
|
||||||
color: $color-white;
|
|
||||||
margin-bottom: rem(16px);
|
|
||||||
max-width: rem(820px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.Inputs {
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
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>
|
||||||
|
<LicenseSlider images={slides} />
|
||||||
<div className={s.Slider}>
|
<LicenseForm />
|
||||||
<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>
|
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,20 @@
|
|||||||
.Main {
|
.Main {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
width: rem(1340px);
|
width: 90vw;
|
||||||
//padding: 0 rem(160px) 0;
|
|
||||||
|
@include iftablet {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: rem(712px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include iflaptop {
|
||||||
|
width: rem(930px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
width: rem(1340px);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
&_BgWrapper {
|
&_BgWrapper {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -38,17 +51,46 @@
|
|||||||
gap: rem(30px);
|
gap: rem(30px);
|
||||||
|
|
||||||
.Icon {
|
.Icon {
|
||||||
width: rem(60px);
|
display: none;
|
||||||
height: rem(60px);
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
@include iftablet {
|
||||||
|
display: block;
|
||||||
|
width: rem(40px);
|
||||||
|
height: rem(40px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
width: rem(60px);
|
||||||
|
height: rem(60px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.Button {
|
.Button {
|
||||||
display: flex;
|
display: none;
|
||||||
flex-direction: row;
|
|
||||||
gap: rem(16px);
|
@include iflaptop {
|
||||||
height: rem(48px);
|
display: flex;
|
||||||
padding: rem(24px);
|
flex-direction: row;
|
||||||
|
gap: rem(16px);
|
||||||
|
height: rem(40px);
|
||||||
|
padding: rem(20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
gap: rem(16px);
|
||||||
|
height: rem(48px);
|
||||||
|
padding: rem(24px);
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: rem(30px);
|
||||||
|
height: rem(30px);
|
||||||
|
@include ifdesktop {
|
||||||
|
width: rem(40px);
|
||||||
|
height: rem(40px);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -56,50 +98,134 @@
|
|||||||
.Info {
|
.Info {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: column;
|
||||||
padding: rem(160px) 0 rem(200px);
|
padding: rem(64px) 0 rem(160px);
|
||||||
|
gap: rem(100px);
|
||||||
|
|
||||||
|
@include iftablet {
|
||||||
|
flex-direction: row;
|
||||||
|
gap: unset;
|
||||||
|
padding: rem(130px) 0 rem(160px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include iflaptop {
|
||||||
|
padding: rem(130px) 0 rem(160px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
padding: rem(160px) 0 rem(120px);
|
||||||
|
}
|
||||||
|
|
||||||
.Content {
|
.Content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
gap: rem(60px);
|
gap: rem(50px);
|
||||||
|
|
||||||
|
@include iftablet {
|
||||||
|
gap: rem(40px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include iflaptop {
|
||||||
|
gap: rem(50px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
gap: rem(60px);
|
||||||
|
}
|
||||||
|
|
||||||
.Title {
|
.Title {
|
||||||
font-family: $font-open-sans;
|
font-family: $font-open-sans;
|
||||||
font-weight: $font-regular;
|
font-weight: $font-regular;
|
||||||
font-size: rem(60px);
|
font-size: rem(24px);
|
||||||
line-height: 1;
|
line-height: 120%;
|
||||||
color: $color-white;
|
color: $color-white;
|
||||||
max-width: rem(960px);
|
//max-width: rem(960px);
|
||||||
|
|
||||||
|
@include iftablet {
|
||||||
|
font-size: rem(28px);
|
||||||
|
max-width: rem(360px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include iflaptop {
|
||||||
|
font-size: rem(32px);
|
||||||
|
max-width: rem(508px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
font-size: rem(60px);
|
||||||
|
max-width: rem(960px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.List {
|
.List {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
gap: rem(16px);
|
gap: rem(18px);
|
||||||
|
|
||||||
|
@include iftablet {
|
||||||
|
gap: rem(20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
gap: rem(16px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ListItem {
|
.ListItem {
|
||||||
position: relative;
|
position: relative;
|
||||||
font-family: $font-open-sans;
|
font-family: $font-open-sans;
|
||||||
font-weight: $font-semi-bold;
|
font-weight: $font-semi-bold;
|
||||||
font-size: rem(26px);
|
font-size: rem(16px);
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
color: $color-white;
|
color: $color-white;
|
||||||
margin-left: rem(36px);
|
margin-left: rem(24px);
|
||||||
|
|
||||||
|
@include iftablet {
|
||||||
|
font-size: rem(18px);
|
||||||
|
margin-left: rem(36px);
|
||||||
|
max-width: rem(360px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include iflaptop {
|
||||||
|
font-size: rem(20px);
|
||||||
|
margin-left: rem(36px);
|
||||||
|
max-width: rem(400px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
font-size: rem(26px);
|
||||||
|
margin-left: rem(36px);
|
||||||
|
max-width: rem(730px);
|
||||||
|
}
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: rem(2px);
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
content: '';
|
content: '';
|
||||||
width: rem(24px);
|
width: rem(16px);
|
||||||
height: rem(24px);
|
height: rem(16px);
|
||||||
background: url("/svg/check.svg") no-repeat;
|
background: url("/svg/check.svg") no-repeat;
|
||||||
background-size: rem(24px) rem(24px);
|
background-size: rem(16px) rem(16px);
|
||||||
margin-left: rem(-36px);
|
margin-left: rem(-24px);
|
||||||
|
|
||||||
|
@include iftablet {
|
||||||
|
top: rem(2px);
|
||||||
|
width: rem(20px);
|
||||||
|
height: rem(20px);
|
||||||
|
background-size: rem(20px) rem(20px);
|
||||||
|
margin-left: rem(-36px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
top: rem(2px);
|
||||||
|
width: rem(24px);
|
||||||
|
height: rem(24px);
|
||||||
|
background-size: rem(24px) rem(24px);
|
||||||
|
margin-left: rem(-36px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -111,13 +237,38 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
flex-basis: 40%;
|
flex-basis: 40%;
|
||||||
gap: rem(40px);
|
gap: rem(40px);
|
||||||
|
text-wrap: nowrap;
|
||||||
|
|
||||||
|
@include iftablet {
|
||||||
|
gap: rem(40px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include iflaptop {
|
||||||
|
gap: rem(40px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
gap: rem(40px);
|
||||||
|
}
|
||||||
|
|
||||||
.Title {
|
.Title {
|
||||||
font-family: $font-open-sans;
|
font-family: $font-open-sans;
|
||||||
font-weight: $font-semi-bold;
|
font-weight: $font-semi-bold;
|
||||||
font-size: rem(60px);
|
font-size: rem(36px);
|
||||||
line-height: 1;
|
line-height: 100%;
|
||||||
color: $color-white;
|
color: $color-white;
|
||||||
|
|
||||||
|
@include iftablet {
|
||||||
|
font-size: rem(40px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include iflaptop {
|
||||||
|
font-size: rem(40px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
font-size: rem(60px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -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>
|
||||||
|
|||||||
@@ -1,91 +1,208 @@
|
|||||||
.Offer {
|
.Container {
|
||||||
background: $color-lightgray;
|
background: $color-lightgray;
|
||||||
border-radius: rem(28px);
|
border-radius: rem(28px);
|
||||||
padding: rem(160px) 0;
|
padding: rem(32px) 0 0;
|
||||||
}
|
|
||||||
|
|
||||||
.InnerContainer {
|
@include iftablet {
|
||||||
margin: 0 auto;
|
padding: rem(60px) 0 rem(40px);
|
||||||
width: rem(1340px);
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.Title {
|
@include iflaptop {
|
||||||
font-family: $font-open-sans;
|
padding: rem(60px) 0 rem(60px);
|
||||||
font-weight: $font-semi-bold;
|
}
|
||||||
font-size: rem(60px);
|
|
||||||
line-height: 100%;
|
|
||||||
color: $color-text;
|
|
||||||
max-width: rem(1330px);
|
|
||||||
margin-bottom: rem(80px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.Text {
|
@include ifdesktop {
|
||||||
font-family: $font-open-sans;
|
padding: rem(160px) 0;
|
||||||
font-weight: $font-regular;
|
|
||||||
font-size: rem(32px);
|
|
||||||
line-height: 100%;
|
|
||||||
color: $color-text;
|
|
||||||
margin-bottom: rem(20px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.List {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
max-width: rem(1330px);
|
|
||||||
margin-bottom: rem(60px);
|
|
||||||
|
|
||||||
.ListItem {
|
|
||||||
font-family: $font-open-sans;
|
|
||||||
font-weight: $font-regular;
|
|
||||||
font-size: rem(32px);
|
|
||||||
line-height: 160%;
|
|
||||||
color: $color-text;
|
|
||||||
list-style-type: decimal;
|
|
||||||
margin-left: rem(40px);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.RowForm {
|
.Offer {
|
||||||
display: flex;
|
margin: 0 auto;
|
||||||
flex-direction: row;
|
|
||||||
gap: rem(40px);
|
@include iftablet {
|
||||||
justify-content: center;
|
width: rem(712px);
|
||||||
margin-bottom: rem(80px);
|
}
|
||||||
|
|
||||||
|
@include iflaptop {
|
||||||
|
width: rem(930px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
width: rem(1340px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.Top {
|
||||||
|
padding: 0 rem(20px) rem(30px);
|
||||||
|
|
||||||
|
@include iftablet {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Header {
|
||||||
|
font-family: $font-open-sans;
|
||||||
|
font-weight: $font-semi-bold;
|
||||||
|
font-size: rem(26px);
|
||||||
|
line-height: 120%;
|
||||||
|
color: $color-text;
|
||||||
|
margin-bottom: rem(40px);
|
||||||
|
|
||||||
|
@include iftablet {
|
||||||
|
font-size: rem(28px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include iflaptop {
|
||||||
|
font-size: rem(32px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
font-size: rem(60px);
|
||||||
|
margin-bottom: rem(80px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.Text {
|
||||||
|
font-family: $font-open-sans;
|
||||||
|
font-weight: $font-regular;
|
||||||
|
font-size: rem(18px);
|
||||||
|
line-height: 100%;
|
||||||
|
color: $color-text;
|
||||||
|
margin-bottom: rem(20px);
|
||||||
|
|
||||||
|
@include iflaptop {
|
||||||
|
font-size: rem(20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
font-size: rem(32px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.List {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: rem(30px);
|
||||||
|
|
||||||
|
@include iftablet {
|
||||||
|
margin-bottom: rem(40px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
margin-bottom: rem(60px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ListItem {
|
||||||
|
font-family: $font-open-sans;
|
||||||
|
font-weight: $font-regular;
|
||||||
|
font-size: rem(18px);
|
||||||
|
line-height: 160%;
|
||||||
|
color: $color-text;
|
||||||
|
list-style-type: decimal;
|
||||||
|
margin-left: rem(40px);
|
||||||
|
|
||||||
|
@include iflaptop {
|
||||||
|
font-size: rem(20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
font-size: rem(32px);
|
||||||
|
margin-left: rem(40px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.Inner {
|
.Inner {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: center;
|
||||||
background-color: $color-white;
|
background-color: $color-white;
|
||||||
border-radius: rem(28px);
|
border-radius: rem(28px);
|
||||||
padding: rem(80px) rem(40px);
|
padding: rem(30px) rem(20px);
|
||||||
margin-bottom: rem(130px);
|
margin-bottom: rem(40px);
|
||||||
|
|
||||||
|
@include iftablet {
|
||||||
|
align-items: flex-start;
|
||||||
|
padding: rem(28px) rem(20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include iflaptop {
|
||||||
|
padding: rem(40px);
|
||||||
|
margin-bottom: rem(80px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
border-radius: rem(28px);
|
||||||
|
padding: rem(80px) rem(40px);
|
||||||
|
margin-bottom: rem(130px);
|
||||||
|
}
|
||||||
|
|
||||||
.Title {
|
.Title {
|
||||||
font-family: $font-open-sans;
|
font-family: $font-open-sans;
|
||||||
font-weight: $font-semi-bold;
|
font-weight: $font-semi-bold;
|
||||||
font-size: rem(60px);
|
font-size: rem(26px);
|
||||||
line-height: 100%;
|
line-height: 100%;
|
||||||
color: $color-text;
|
color: $color-text;
|
||||||
|
max-width: rem(320px);
|
||||||
|
|
||||||
|
@include iftablet {
|
||||||
|
font-size: rem(28px);
|
||||||
|
max-width: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include iflaptop {
|
||||||
|
font-size: rem(36px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
font-size: rem(60px);
|
||||||
|
margin-bottom: rem(40px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.Grid {
|
.Grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: repeat(2, 1fr);
|
grid-template-columns: rem(320px);
|
||||||
grid-template-columns: repeat(3, 1fr);
|
gap: rem(20px);
|
||||||
gap: rem(40px);
|
padding: rem(20px) 0;
|
||||||
padding: rem(40px) 0;
|
|
||||||
|
@include iftablet {
|
||||||
|
grid-template-rows: repeat(3, 1fr);
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: rem(25px);
|
||||||
|
padding: rem(20px) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include iflaptop {
|
||||||
|
gap: rem(30px);
|
||||||
|
padding: rem(40px) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
grid-template-rows: repeat(2, 1fr);
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: rem(40px);
|
||||||
|
padding: rem(40px) 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.Tile {
|
.Tile {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: rem(25px);
|
height: rem(220px);
|
||||||
height: rem(352px);
|
padding: rem(20px);
|
||||||
border-radius: rem(28px);
|
border-radius: rem(28px);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
|
@include iflaptop {
|
||||||
|
height: rem(260px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
height: rem(352px);
|
||||||
|
padding: rem(25px);
|
||||||
|
}
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
content: '';
|
content: '';
|
||||||
display: block;
|
display: block;
|
||||||
@@ -127,9 +244,21 @@
|
|||||||
z-index: 2;
|
z-index: 2;
|
||||||
font-family: $font-open-sans;
|
font-family: $font-open-sans;
|
||||||
font-weight: $font-regular;
|
font-weight: $font-regular;
|
||||||
font-size: rem(42px);
|
font-size: rem(24px);
|
||||||
line-height: 100%;
|
line-height: 100%;
|
||||||
color: $color-white;
|
color: $color-white;
|
||||||
|
|
||||||
|
@include iftablet {
|
||||||
|
font-size: rem(28px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include iflaptop {
|
||||||
|
font-size: rem(32px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
font-size: rem(42px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.Description {
|
.Description {
|
||||||
@@ -138,82 +267,48 @@
|
|||||||
display: none;
|
display: none;
|
||||||
font-family: $font-open-sans;
|
font-family: $font-open-sans;
|
||||||
font-weight: $font-regular;
|
font-weight: $font-regular;
|
||||||
font-size: rem(24px);
|
font-size: rem(18px);
|
||||||
line-height: 130%;
|
line-height: 130%;
|
||||||
color: $color-white;
|
color: $color-white;
|
||||||
|
|
||||||
|
@include iftablet {
|
||||||
|
font-size: rem(18px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include iflaptop {
|
||||||
|
font-size: rem(20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
font-size: rem(24px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.Arrow {
|
.Arrow {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
right: rem(25px);
|
right: rem(10px);
|
||||||
bottom: rem(25px);
|
bottom: rem(10px);
|
||||||
width: rem(64px);
|
width: rem(40px);
|
||||||
height: rem(64px);
|
height: rem(40px);
|
||||||
transform: rotate(-135deg);
|
transform: rotate(-135deg);
|
||||||
transition: transform 250ms ease-in-out;
|
transition: transform 250ms ease-in-out;
|
||||||
|
|
||||||
|
@include iflaptop {
|
||||||
|
right: rem(16px);
|
||||||
|
bottom: rem(16px);
|
||||||
|
width: rem(48px);
|
||||||
|
height: rem(48px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
right: rem(25px);
|
||||||
|
bottom: rem(25px);
|
||||||
|
width: rem(64px);
|
||||||
|
height: rem(64px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.Form {
|
|
||||||
position: relative;
|
|
||||||
padding: rem(40px) rem(60px);
|
|
||||||
background: #292E3D;
|
|
||||||
border-radius: rem(28px);
|
|
||||||
overflow: hidden;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
|
|
||||||
&: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 {
|
|
||||||
width: 100%;
|
|
||||||
place-self: end end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.SubTitle {
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
font-family: $font-open-sans;
|
|
||||||
font-weight: $font-light;
|
|
||||||
font-size: rem(30px);
|
|
||||||
line-height: 100%;
|
|
||||||
color: $color-white;
|
|
||||||
margin-bottom: rem(16px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.Title {
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
font-family: $font-open-sans;
|
|
||||||
font-weight: $font-regular;
|
|
||||||
font-size: rem(48px);
|
|
||||||
line-height: 130%;
|
|
||||||
color: $color-white;
|
|
||||||
max-width: rem(660px);
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -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,47 +10,38 @@ 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.Offer}>
|
<section className={s.Container}>
|
||||||
<div className={s.InnerContainer}>
|
<div className={s.Offer}>
|
||||||
<h2 className={s.Title}>
|
<div className={s.Top}>
|
||||||
Помогаем <Mark> выявить недостатки </Mark> и <Mark>привести</Mark>{' '}
|
<h2 className={s.Header}>
|
||||||
систему Охранно-Пожарной <br />
|
Помогаем <Mark> выявить недостатки </Mark> и <Mark>привести</Mark>{' '}
|
||||||
сигнализации <Mark> в соответствие </Mark> со всеми нормативами
|
систему Охранно-Пожарной <br />
|
||||||
</h2>
|
сигнализации <Mark> в соответствие </Mark> со всеми нормативами
|
||||||
<p className={s.Text}>Методика работы:</p>
|
</h2>
|
||||||
<ul className={s.List}>
|
<p className={s.Text}>Методика работы:</p>
|
||||||
<li className={s.ListItem}>
|
<ul className={s.List}>
|
||||||
Экспертиза (аудит) выявляет нарушения ОПС
|
<li className={s.ListItem}>
|
||||||
</li>
|
Экспертиза (аудит) выявляет нарушения ОПС
|
||||||
<li className={s.ListItem}>
|
</li>
|
||||||
На основании экспертизы оформляется заключение
|
<li className={s.ListItem}>
|
||||||
</li>
|
На основании экспертизы оформляется заключение
|
||||||
<li className={s.ListItem}>
|
</li>
|
||||||
На основании выявленных нарушений производится устранение
|
<li className={s.ListItem}>
|
||||||
недостатков
|
На основании выявленных нарушений производится устранение
|
||||||
</li>
|
недостатков
|
||||||
<li className={s.ListItem}>
|
</li>
|
||||||
Производится проверка проекта по замене старых пожарных систем на
|
<li className={s.ListItem}>
|
||||||
новые, что позволяет сократить стоимость сметы на модернизацию.
|
Производится проверка проекта по замене старых пожарных систем на
|
||||||
</li>
|
новые, что позволяет сократить стоимость сметы на модернизацию.
|
||||||
</ul>
|
</li>
|
||||||
<form className={s.RowForm}>
|
</ul>
|
||||||
<Input type='text' placeholder='+7 (999) 123 45 67' />
|
</div>
|
||||||
<Input
|
|
||||||
type='text'
|
<OfferForm />
|
||||||
placeholder='Ваше имя'
|
|
||||||
value={name}
|
|
||||||
onChange={(e) => setName(e.target.value)}
|
|
||||||
/>
|
|
||||||
<Button variant='orange'>Узнать подробности</Button>
|
|
||||||
</form>
|
|
||||||
<div className={s.Inner}>
|
<div className={s.Inner}>
|
||||||
<h2 className={s.Title}>
|
<h2 className={s.Title}>
|
||||||
Возьмем <Mark>на себя</Mark> все заботы
|
Возьмем <Mark>на себя</Mark> все заботы
|
||||||
@@ -75,29 +65,8 @@ export default function Offer() {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className={s.Form}>
|
|
||||||
<Image
|
<OfferRequestForm />
|
||||||
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
|
|
||||||
text='Получить консультацию'
|
|
||||||
placeholder={'+7 (999) 123 45 67'}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,58 +1,135 @@
|
|||||||
.Result {
|
.Result {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
width: rem(1340px);
|
width: rem(320px);
|
||||||
padding: rem(160px) 0 rem(80px);
|
padding: rem(60px) 0;
|
||||||
|
|
||||||
|
@include iftablet {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: rem(712px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include iflaptop {
|
||||||
|
width: rem(930px);
|
||||||
|
padding: rem(80px) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
width: rem(1340px);
|
||||||
|
padding: rem(160px) 0 rem(80px);
|
||||||
|
}
|
||||||
|
|
||||||
.Header {
|
.Header {
|
||||||
font-family: $font-open-sans;
|
font-family: $font-open-sans;
|
||||||
font-weight: $font-semi-bold;
|
font-weight: $font-semi-bold;
|
||||||
font-size: rem(60px);
|
font-size: rem(28px);
|
||||||
line-height: 100%;
|
line-height: 100%;
|
||||||
color: $color-text;
|
color: $color-text;
|
||||||
margin-bottom: rem(96px);
|
margin-bottom: rem(40px);
|
||||||
|
|
||||||
|
@include iftablet {
|
||||||
|
font-size: rem(36px);
|
||||||
|
margin-bottom: rem(60px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include iflaptop {
|
||||||
|
font-size: rem(36px);
|
||||||
|
margin-bottom: rem(80px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
font-size: rem(60px);
|
||||||
|
margin-bottom: rem(96px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.Row {
|
.Row {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: column-reverse;
|
||||||
justify-content: space-between;
|
gap: rem(20px);
|
||||||
gap: rem(48px);
|
margin-bottom: rem(40px);
|
||||||
margin-bottom: rem(80px);
|
|
||||||
|
@include iftablet {
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: rem(80px);
|
||||||
|
margin-bottom: rem(80px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
gap: rem(60px);
|
||||||
|
margin-bottom: rem(160px);
|
||||||
|
}
|
||||||
|
|
||||||
&:nth-child(odd) {
|
&:nth-child(odd) {
|
||||||
flex-direction: row-reverse;
|
flex-direction: column-reverse;
|
||||||
|
|
||||||
|
@include iftablet {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.Review {
|
.Review {
|
||||||
flex: 1;
|
flex: 1 0;
|
||||||
|
|
||||||
.Title {
|
.Title {
|
||||||
font-family: $font-open-sans;
|
font-family: $font-open-sans;
|
||||||
font-weight: $font-regular;
|
font-weight: $font-regular;
|
||||||
font-size: rem(48px);
|
font-size: rem(28px);
|
||||||
line-height: 100%;
|
line-height: 100%;
|
||||||
color: $color-text;
|
color: $color-text;
|
||||||
margin-bottom: rem(40px);
|
margin-bottom: rem(20px);
|
||||||
|
|
||||||
|
@include iftablet {
|
||||||
|
margin-bottom: rem(36px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include iflaptop {
|
||||||
|
font-size: rem(32px);
|
||||||
|
margin-bottom: rem(40px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
font-size: rem(48px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.Description {
|
.Description {
|
||||||
font-family: $font-open-sans;
|
font-family: $font-open-sans;
|
||||||
font-weight: $font-regular;
|
font-weight: $font-regular;
|
||||||
font-size: 24px;
|
font-size: rem(18px);
|
||||||
line-height: 100%;
|
line-height: 100%;
|
||||||
color: $color-text;
|
color: $color-text;
|
||||||
|
|
||||||
|
@include iflaptop {
|
||||||
|
font-size: rem(20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
font-size: rem(24px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.Picture {
|
.Picture {
|
||||||
flex: 1;
|
flex: 1 rem(220px);
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
|
||||||
border-radius: rem(28px);
|
border-radius: rem(28px);
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
max-width: rem(720px);
|
max-width: rem(320px);
|
||||||
height: rem(540px);
|
height: rem(220px);
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
@include iflaptop {
|
||||||
|
flex: 1 0;
|
||||||
|
max-width: rem(440px);
|
||||||
|
height: rem(260px);
|
||||||
|
}
|
||||||
|
@include ifdesktop {
|
||||||
|
max-width: rem(720px);
|
||||||
|
height: rem(540px);
|
||||||
|
}
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
content: '';
|
content: '';
|
||||||
display: block;
|
display: block;
|
||||||
|
|||||||
@@ -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,9 +0,0 @@
|
|||||||
.Slider {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Slide {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
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,13 +1,15 @@
|
|||||||
'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 'swiper/css';
|
import 'swiper/css';
|
||||||
|
import 'swiper/css/navigation';
|
||||||
|
import 'swiper/css/grid';
|
||||||
|
|
||||||
type LicenseSliderProps = {
|
type LicenseSliderProps = {
|
||||||
className?: string;
|
className?: string;
|
||||||
@@ -20,16 +22,33 @@ type LicenseSliderProps = {
|
|||||||
|
|
||||||
const mockFullSizeImage = 'images/empty-image.jpg';
|
const mockFullSizeImage = 'images/empty-image.jpg';
|
||||||
|
|
||||||
export default function LicenseSlider({
|
const swiperBreakpoints = {
|
||||||
className,
|
360: {
|
||||||
images,
|
slidesPerView: 1,
|
||||||
}: LicenseSliderProps) {
|
spaceBetween: 10,
|
||||||
|
},
|
||||||
|
768: {
|
||||||
|
slidesPerView: 2,
|
||||||
|
spaceBetween: 30,
|
||||||
|
},
|
||||||
|
1024: {
|
||||||
|
slidesPerView: 3,
|
||||||
|
spaceBetween: 30,
|
||||||
|
},
|
||||||
|
1440: {
|
||||||
|
slidesPerView: 3,
|
||||||
|
spaceBetween: 30,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function Ui({ className, images }: LicenseSliderProps) {
|
||||||
return (
|
return (
|
||||||
<Swiper
|
<Swiper
|
||||||
className={clsx(s.Slider, className)}
|
className={clsx(s.Slider, className)}
|
||||||
slidesPerView={3}
|
modules={[Grid]}
|
||||||
onSlideChange={() => console.log('slide change')}
|
breakpoints={swiperBreakpoints}
|
||||||
onSwiper={(swiper) => console.log(swiper)}
|
// onSlideChange={() => console.log('slide change')}
|
||||||
|
// onSwiper={(swiper) => console.log(swiper)}
|
||||||
>
|
>
|
||||||
{images.map(({ id, name, image }) => (
|
{images.map(({ id, name, image }) => (
|
||||||
<SwiperSlide key={id}>
|
<SwiperSlide key={id}>
|
||||||
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