redrockjs/fire-exam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #11 from redrockjs/dev

Browse Source 
Dev
This commit was merged in pull request #11.
This commit is contained in:
Valeriy G.
2025-06-05 12:04:44 +03:00
committed by GitHub
parent b81ac9ddea 7d0fb5638e
commit 6d0146ffef
27 changed files with 784 additions and 583 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
package-lock.json generated
View File

@@ -10,7 +10,8 @@
"dependencies": {
"next": "15.3.2",
"react": "^19.0.0",
"react-dom": "^19.0.0"
"react-dom": "^19.0.0",
"swiper": "^11.2.8"
},
"devDependencies": {
"@eslint/eslintrc": "^3",
@@ -5517,6 +5518,25 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/swiper": {
"version": "11.2.8",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.8.tgz",
"integrity": "sha512-S5FVf6zWynPWooi7pJ7lZhSUe2snTzqLuUzbd5h5PHUOhzgvW0bLKBd2wv0ixn6/5o9vwc/IkQT74CRcLJQzeg==",
"funding": [
{
"type": "patreon",
"url": "https://www.patreon.com/swiperjs"
},
{
"type": "open_collective",
"url": "http://opencollective.com/swiper"
}
],
"license": "MIT",
"engines": {
"node": ">= 4.7.0"
}
},
"node_modules/tinyglobby": {
"version": "0.2.14",
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",

3
package.json
View File

@@ -13,7 +13,8 @@
"dependencies": {
"next": "15.3.2",
"react": "^19.0.0",
"react-dom": "^19.0.0"
"react-dom": "^19.0.0",
"swiper": "^11.2.8"
},
"devDependencies": {
"@eslint/eslintrc": "^3",

BIN
public/images/empty-image.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

4
public/svg/check.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="32" height="23" viewBox="0 0 32 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.5 12L9.75 18.25C10.9004 19.4004 12.7662 19.4004 13.9167 18.25L28.5 3.66666" stroke="#00FF1E"
stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 288 B

50
public/svg/empty-paper.svg Normal file
View File

@@ -0,0 +1,50 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 400 450" style="enable-background:new 0 0 400 450;" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="57.9286" y1="-32.737" x2="342.1984" y2="482.9674">
<stop offset="0.6888" style="stop-color:#B1B1B1"/>
<stop offset="0.7285" style="stop-color:#B6B6B7"/>
<stop offset="0.7792" style="stop-color:#C5C6C6"/>
<stop offset="0.8356" style="stop-color:#DEDFE0"/>
<stop offset="0.8564" style="stop-color:#E9EAEC"/>
</linearGradient>
<rect style="fill:url(#SVGID_1_);" width="400" height="450"/>
<linearGradient id="SVGID_00000092431468075801409100000001785422653880840880_" gradientUnits="userSpaceOnUse" x1="-1.2847" y1="381.6029" x2="311.3088" y2="2.6513" gradientTransform="matrix(-1 0 0 1 328.1064 0)">
<stop offset="0" style="stop-color:#D6D6D6"/>
<stop offset="0.0286" style="stop-color:#E3E3E3"/>
<stop offset="0.0797" style="stop-color:#F3F3F3"/>
<stop offset="0.1376" style="stop-color:#FCFCFC"/>
<stop offset="0.2157" style="stop-color:#FFFFFF"/>
<stop offset="0.4066" style="stop-color:#F9FAFA"/>
<stop offset="0.5936" style="stop-color:#EEEFF1"/>
</linearGradient>
<path style="fill:url(#SVGID_00000092431468075801409100000001785422653880840880_);" d="M0,0h399.991
C400,85.167,400,195.667,400,267.482c0,40.935-10.167,57.018-30.941,77.621c-39.216,38.894-175.393,83.521-228.69,92.004
C98.403,443.788,63.291,449.474,0,449.478V0z"/>
<path style="fill:#B6B6B6;" d="M140.369,437.107C98.403,443.788,63.624,449.474,0,449.478V450c63.791,0,98.403-5.69,140.369-12.371
c7.205-1.147,15.985-3.103,25.855-5.72C156.354,434.197,147.574,435.961,140.369,437.107z"/>
<path style="fill:#EBEBEB;" d="M285.738,393.981c-52.481,21.401-113.877,38.113-145.367,43.126
C195,424.566,244.894,392.766,284.99,332.044L285.738,393.981z"/>
<linearGradient id="SVGID_00000088827454265147082520000018364783835286127748_" gradientUnits="userSpaceOnUse" x1="-0.2559" y1="376.5401" x2="26.9199" y2="325.43" gradientTransform="matrix(-0.9999 0.0125 0.0125 0.9999 325.0059 -3.0947)">
<stop offset="0.1061" style="stop-color:#828282"/>
<stop offset="0.4697" style="stop-color:#CBCBCB"/>
<stop offset="1" style="stop-color:#858585"/>
</linearGradient>
<path style="fill:url(#SVGID_00000088827454265147082520000018364783835286127748_);" d="M284.99,332.044
c27.121,14.806,65.801,29.605,81.623,14.697c0.913-0.864,2.121-1.362,2.979-2.322c-0.177,0.225-0.352,0.476-0.533,0.684
c-14.903,16.99-46.976,34.06-83.322,48.879L284.99,332.044z"/>
<linearGradient id="SVGID_00000160896986531897257690000003598917995091685003_" gradientUnits="userSpaceOnUse" x1="66.4041" y1="407.0864" x2="87.9274" y2="354.5603" gradientTransform="matrix(-0.9999 0.0125 0.0125 0.9999 325.0059 -3.0947)">
<stop offset="0" style="stop-color:#C8C8C8"/>
<stop offset="0.2454" style="stop-color:#ADADAD"/>
<stop offset="0.3301" style="stop-color:#B7B7B7"/>
<stop offset="0.7764" style="stop-color:#E5E5E5"/>
<stop offset="1" style="stop-color:#F7F7F7"/>
</linearGradient>
<path style="fill:url(#SVGID_00000160896986531897257690000003598917995091685003_);" d="M374.459,340.525
c-36.689,48.121-179.686,87.854-233.912,96.73c-0.399,0.065-0.718-0.062-1.108,0c56.186-10.63,105.481-42.467,145.574-103.187
c26.545,12.035,65.786,32.856,83.486,10.868C368.323,345.162,374.626,340.306,374.459,340.525z"/>
<path style="fill:#828282;" d="M359.061,351.22c13.189-5.533,40.126-35.387,40.355-73.845c0.417-70,0.507-189.88-0.139-277.375
h0.691C399.99,93.933,400,207,400,277.083c0,31.571-16.633,57.537-33.147,70.268C366.392,347.869,360.724,351.539,359.061,351.22z"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

1
src/core/.gitkeep
View File

@@ -1 +0,0 @@
reusable components

3
src/core/styles/index.scss
View File

@@ -1,2 +1,3 @@
@import './variables.scss';
@import './mixins.scss';
@import './mixins.scss';
@import './functions.scss';

2
src/core/styles/variables.scss
View File

@@ -8,6 +8,8 @@ $desktop: 1440px;
//fonts
$font-open-sans: var(--open-sans), sans-serif;
$base-font-size: 16px;
$font-light: 300;
$font-regular: 400;
$font-medium: 500;

7
src/shared/ui/advanced-phone-input/advancedPhoneInput.module.scss
View File

@@ -1,6 +1,5 @@
.Container {
position: relative;
//width: 100%;
}
.Phone {
@@ -12,8 +11,8 @@
.Button {
position: absolute;
right: 4px;
top: calc(50% - 25px);
right: rem(2px);
top: calc(50% - 1.6rem);
z-index: 3;
min-height: calc(100% - 4px);
min-height: calc(100% - .25rem);
}

14
src/shared/ui/button/button.module.scss
View File

@@ -2,13 +2,13 @@
display: flex;
align-items: center;
justify-content: center;
padding: 10px 32px;
border-radius: 28px;
min-height: 55px;
padding: rem(10px) rem(32px);
border-radius: rem(28px);
min-height: rem(54px);
font-family: $font-open-sans;
font-weight: $font-regular;
font-size: 24px;
font-size: rem(24px);
line-height: 100%;
transition: all 0.15s linear;
@@ -20,11 +20,11 @@
}
svg {
width: 18px;
height: 18px;
width: rem(18px);
height: rem(18px);
//fill: var(--text-primary);
margin-right: 18px;
margin-right: rem(18px);
}
&:hover {

6
src/shared/ui/input/input.module.scss
View File

@@ -2,13 +2,13 @@
display: flex;
background: $color-white;
border: 1px solid $color-darkgray;
border-radius: 28px;
padding: 10px 24px;
border-radius: rem(28px);
padding: rem(10px) rem(24px);
transition: border ease .5s;
font-family: $font-open-sans;
font-weight: $font-regular;
font-size: 24px;
font-size: rem(24px);
line-height: 100%;
color: $color-text;
width: max-content;

14
src/shared/ui/text-area/text-area.module.scss
View File

@@ -14,13 +14,13 @@
.Area {
background: $color-white;
border: 1px solid $color-darkgray;
border-radius: 20px;
padding: 10px 24px;
border-radius: rem(20px);
padding: rem(10px) rem(24px);
transition: border ease .5s;
font-family: $font-open-sans;
font-weight: $font-regular;
font-size: 24px;
font-size: rem(24px);
line-height: 100%;
color: $color-text;
@@ -35,14 +35,14 @@
cursor: auto;
}
&::-webkit-scrollbar {
width: 12px;
height: 12px;
width: rem(12px);
height: rem(12px);
}
&::-webkit-scrollbar-track,
&::-webkit-scrollbar-thumb {
background-clip: content-box;
border: 4px solid transparent;
border-radius: 12px;
border: rem(4px) solid transparent;
border-radius: rem(12px);
}
&::-webkit-scrollbar-track {
background-color: #333; // цвет дорожки

286
src/views/home/ui/contacts/contacts.module.scss
View File

@@ -1,166 +1,170 @@
.Contacts {
background: $color-lightgray;
border-radius: 28px;
padding: 160px;
border-radius: rem(28px);
padding: rem(160px) 0;
}
.Header {
font-family: $font-open-sans;
font-weight: $font-semi-bold;
font-size: 60px;
line-height: 100%;
color: $color-text;
margin-bottom: 80px;
}
.InnerContainer {
margin: 0 auto;
width: rem(1340px);
}
.Clients {
margin: 0 auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
gap: 40px;
max-width: 1200px;
margin-bottom: 160px;
.Header {
font-family: $font-open-sans;
font-weight: $font-semi-bold;
font-size: rem(60px);
line-height: 100%;
color: $color-text;
margin-bottom: rem(80px);
}
.Client {
.Clients {
margin: 0 auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
gap: rem(40px);
max-width: rem(1200px);
margin-bottom: rem(160px);
img {
width: 300px;
height: auto;
}
.Client {
img {
width: rem(300px);
height: auto;
}
}
}
.Form {
position: relative;
background: #292E3D;
.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: row;
padding: 60px 50px;
border-radius: 28px;
overflow: hidden;
flex-direction: column;
margin-bottom: 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: 48px;
line-height: 100%;
color: $color-white;
margin-bottom: 80px;
}
.SubTitle {
position: relative;
z-index: 2;
font-family: $font-open-sans;
font-weight: $font-light;
font-size: 32px;
line-height: 100%;
color: $color-white;
max-width: 720px;
}
}
.Inputs {
.Title {
position: relative;
z-index: 2;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
}
}
.Map {
position: relative;
iframe {
border-radius: 28px;
font-family: $font-open-sans;
font-weight: $font-semi-bold;
font-size: rem(48px);
line-height: 100%;
color: $color-white;
margin-bottom: rem(80px);
}
.Contacts {
position: absolute;
.SubTitle {
position: relative;
z-index: 2;
top: -40px;
right: 180px;
border-radius: 28px;
background: $color-white;
width: 440px;
//height: 540px;
padding: 40px 35px 20px;
font-family: $font-open-sans;
font-weight: $font-light;
font-size: rem(32px);
line-height: 100%;
color: $color-white;
max-width: rem(720px);
}
}
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
.Inputs {
position: relative;
z-index: 2;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: rem(20px);
}
}
.Title {
position: relative;
font-family: $font-open-sans;
font-weight: $font-semi-bold;
font-size: 48px;
line-height: 100%;
color: $color-text;
text-align: right;
margin-bottom: 32px;
align-self: center;
.Map {
position: relative;
.LedOn {
position: absolute;
bottom: 6px;
left: 6px;
}
iframe {
border-radius: rem(28px);
}
.Contacts {
position: absolute;
z-index: 2;
top: rem(-40px);
right: rem(180px);
border-radius: rem(28px);
background: $color-white;
width: rem(440px);
padding: rem(40px) rem(35px) rem(20px);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
.Title {
position: relative;
font-family: $font-open-sans;
font-weight: $font-semi-bold;
font-size: rem(48px);
line-height: 100%;
color: $color-text;
text-align: right;
margin-bottom: rem(32px);
align-self: center;
.LedOn {
position: absolute;
bottom: rem(6px);
left: rem(6px);
}
}
.Address {
position: relative;
font-family: $font-open-sans;
font-weight: $font-regular;
font-size: 32px;
line-height: 130%;
color: $color-text;
margin-bottom: 20px;
margin-left: 32px;
.Address {
position: relative;
font-family: $font-open-sans;
font-weight: $font-regular;
font-size: rem(32px);
line-height: 130%;
color: $color-text;
margin-bottom: rem(20px);
margin-left: rem(32px);
.Icon {
position: absolute;
left: -48px;
top: 8px;
width: 32px;
height: 32px;
stroke: #E96526;
}
.Icon {
position: absolute;
left: rem(-48px);
top: rem(8px);
width: rem(32px);
height: rem(32px);
stroke: #E96526;
}
}
}
}
}

126
src/views/home/ui/contacts/contacts.tsx
View File

@@ -16,72 +16,74 @@ import email from '@public/svg/email.svg';
export default function Contacts() {
return (
<section className={s.Contacts}>
<h2 className={s.Header}>
Клиенты, которые <Mark>нам доверяют</Mark>
</h2>
<div className={s.Clients}>
{clientsLogos.map(({ logo }, idx) => (
<div key={idx} className={s.Client}>
<Image src={logo} alt='' />
<div className={s.InnerContainer}>
<h2 className={s.Header}>
Клиенты, которые <Mark>нам доверяют</Mark>
</h2>
<div className={s.Clients}>
{clientsLogos.map(({ logo }, idx) => (
<div key={idx} className={s.Client}>
<Image src={logo} alt='' />
</div>
))}
</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>
<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>
<div className={s.Map}>
<iframe
src='https://yandex.ru/map-widget/v1/?um=constructor%3A7f1285c4f3e470bc9affa220323655ac72edd1be376c2579d421ca359ac46a7d&amp;source=constructor'
width='100%'
height='620'
frameBorder='0'
></iframe>
<div className={s.Map}>
<iframe
src='https://yandex.ru/map-widget/v1/?um=constructor%3A7f1285c4f3e470bc9affa220323655ac72edd1be376c2579d421ca359ac46a7d&amp;source=constructor'
width='100%'
height='620'
frameBorder='0'
></iframe>
<div className={s.Contacts}>
<h3 className={s.Title}>
<Image className={s.LedOn} src={ledOn} alt={''} />
Мы <Mark>всегда</Mark> <br /> на связи
</h3>
<p className={s.Address}>
<Image className={s.Icon} src={map} alt='' />
Краснодарский край <br />
г.Сочи <br />
ТЦ «Атриум» <br />
ул. Навагинская д.9«Д» <br />
этаж 3, офис 35
</p>
<p className={s.Address}>
<Image className={s.Icon} src={phoneCall} alt='' />
+7 (988) 400 93 93
</p>
<p className={s.Address}>
<Image className={s.Icon} src={email} alt='' />
office@firecheck.ru
</p>
<div className={s.Contacts}>
<h3 className={s.Title}>
<Image className={s.LedOn} src={ledOn} alt={''} />
Мы <Mark>всегда</Mark> <br /> на связи
</h3>
<p className={s.Address}>
<Image className={s.Icon} src={map} alt='' />
Краснодарский край <br />
г.Сочи <br />
ТЦ «Атриум» <br />
ул. Навагинская д.9«Д» <br />
этаж 3, офис 35
</p>
<p className={s.Address}>
<Image className={s.Icon} src={phoneCall} alt='' />
+7 (988) 400 93 93
</p>
<p className={s.Address}>
<Image className={s.Icon} src={email} alt='' />
office@firecheck.ru
</p>
</div>
</div>
</div>
</section>

80
src/views/home/ui/footer/footer.module.scss
View File

@@ -1,49 +1,57 @@
.Footer {
position: relative;
background-color: #1B1B25;
padding: 80px 160px;
padding: rem(120px) 0 rem(40px);
margin-top: rem(-24px);
z-index: -1;
}
.InnerContainer {
margin: 0 auto;
width: rem(1340px);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 20px;
gap: rem(20px);
}
.Block{
display: flex;
flex-direction: column;
gap: 20px;
max-width: 40vw;
}
.Block {
display: flex;
flex-direction: column;
gap: rem(20px);
max-width: 40vw;
}
.SendBtn {
align-self: flex-end;
max-width: 33%;
}
.SendBtn {
align-self: flex-end;
max-width: 33%;
}
.Header {
.Header {
font-family: $font-open-sans;
font-weight: $font-semi-bold;
font-size: rem(60px);
line-height: 100%;
color: $color-white;
margin-bottom: rem(40px);
}
.Bottom {
width: 100%;
height: rem(80px);
border-top: 1px solid $color-white;
display: flex;
flex-direction: row;
align-items: center;
gap: rem(20px);
.Policy {
font-family: $font-open-sans;
font-weight: $font-semi-bold;
font-size: 60px;
font-weight: $font-regular;
font-size: rem(16px);
line-height: 100%;
color: $color-white;
margin-bottom: 40px;
margin-left: auto;
}
.Bottom {
width: 100%;
height: 80px;
border-top: 1px solid $color-white;
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
.Policy {
font-family: $font-open-sans;
font-weight: $font-regular;
font-size: 16px;
line-height: 100%;
color: $color-white;
margin-left: auto;
}
}
}
}

52
src/views/home/ui/footer/footer.tsx
View File

@@ -5,31 +5,33 @@ import Link from 'next/link';
export default function Footer() {
return (
<section 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>
<div className={s.Bottom}>
<Button variant='ghost'>Telegram</Button>
<Button variant='ghost'>WhatsApp</Button>
<Button variant='ghost'>+7 (999) 123 45 67</Button>
<p className={s.Policy}>
<Link href='#'>Политика конфиденциальности</Link>
</p>
<div className={s.InnerContainer}>
<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>
<div className={s.Bottom}>
<Button variant='ghost'>Telegram</Button>
<Button variant='ghost'>WhatsApp</Button>
<Button variant='ghost'>+7 (999) 123 45 67</Button>
<p className={s.Policy}>
<Link href='#'>Политика конфиденциальности</Link>
</p>
</div>
</div>
</section>
);

29
src/views/home/ui/license/license.module.scss
View File

@@ -1,30 +1,31 @@
.License {
padding: 160px;
margin: 0 auto;
width: rem(1340px);
padding: rem(120px) 0 rem(160px);
.Header {
font-family: $font-open-sans;
font-weight: $font-semi-bold;
font-size: 60px;
font-size: rem(60px);
line-height: 100%;
color: $color-text;
margin-bottom: 80px;
margin-bottom: rem(80px);
}
.Slider {
margin-bottom: 80px;
margin-bottom: rem(80px);
}
.Form {
position: relative;
background: #292E3D;
padding: 40px 60px;
border-radius: 28px;
padding: rem(40px) rem(60px);
border-radius: rem(28px);
overflow: hidden;
display: flex;
flex-direction: row;
gap: 40px;
gap: rem(40px);
&:after {
content: '';
@@ -53,10 +54,10 @@
z-index: 2;
font-family: $font-open-sans;
font-weight: $font-regular;
font-size: 48px;
font-size: rem(48px);
line-height: 110%;
color: $color-white;
margin: 0 0 50px;
margin: 0 0 rem(50px);
}
.SubTitle {
@@ -64,11 +65,11 @@
z-index: 2;
font-family: $font-open-sans;
font-weight: $font-light;
font-size: 30px;
font-size: rem(30px);
line-height: 100%;
color: $color-white;
margin-bottom: 16px;
max-width: 820px;
margin-bottom: rem(16px);
max-width: rem(820px);
}
}
@@ -79,7 +80,7 @@
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
gap: rem(20px);
}
}

35
src/views/home/ui/license/license.tsx
View File

@@ -1,9 +1,11 @@
import s from './license.module.scss';
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 Image from 'next/image';
import emptyPaper from '@public/svg/empty-paper.svg';
export default function License() {
return (
@@ -12,7 +14,9 @@ export default function License() {
Наши услуги <Mark>подтверждены лицензиями</Mark> и сертификатами
</h2>
<div className={s.Slider}>Slider here</div>
<div className={s.Slider}>
<LicenseSlider images={slides} />
</div>
<div className={s.Form}>
<div className={s.Offer}>
@@ -26,11 +30,11 @@ export default function License() {
priority
/>
<h3 className={s.Title}>
Заключите договор до 1 июня и получите скидку на проведение пожарной
Заключите договор до 1 июля и получите скидку на проведение пожарной
экспертизы 15 %
</h3>
<p className={s.SubTitle}>
Оставьте свои контактные данные и мы закрепим скидку до 1 июня за
Оставьте свои контактные данные и мы закрепим скидку до 1 июля за
вами
</p>
</div>
@@ -45,3 +49,26 @@ export default function License() {
</section>
);
}
const slides = [
{
id: '0',
name: '',
image: emptyPaper,
},
{
id: '1',
name: '',
image: emptyPaper,
},
{
id: '2',
name: '',
image: emptyPaper,
},
{
id: '3',
name: '',
image: emptyPaper,
},
];

51
src/views/home/ui/main/main.module.scss
View File

@@ -1,12 +1,14 @@
.Main {
padding: 0px 160px 0px;
margin: 0 auto;
width: rem(1340px);
//padding: 0 rem(160px) 0;
&_BgWrapper {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 900px;
height: rem(900px);
z-index: -1;
& img {
@@ -22,7 +24,8 @@
justify-content: space-between;
align-items: center;
border-bottom: 1px solid $color-white;
height: 80px;
height: rem(80px);
.Logo {
color: $color-white;
}
@@ -32,20 +35,20 @@
display: flex;
flex-direction: row;
align-items: center;
gap: 30px;
gap: rem(30px);
.Icon {
width: 60px;
height: 60px;
width: rem(60px);
height: rem(60px);
cursor: pointer;
}
.Button {
display: flex;
flex-direction: row;
gap: 16px;
height: 48px;
padding: 24px;
gap: rem(16px);
height: rem(48px);
padding: rem(24px);
}
}
}
@@ -54,36 +57,50 @@
margin: 0 auto;
display: flex;
flex-direction: row;
padding: 160px 0 200px;
padding: rem(160px) 0 rem(200px);
.Content {
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 60px;
gap: rem(60px);
.Title {
font-family: $font-open-sans;
font-weight: $font-regular;
font-size: 60px;
font-size: rem(60px);
line-height: 1;
color: $color-white;
max-width: 960px;
max-width: rem(960px);
}
.List {
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 16px;
gap: rem(16px);
}
.ListItem {
position: relative;
font-family: $font-open-sans;
font-weight: $font-semi-bold;
font-size: 26px;
font-size: rem(26px);
line-height: 1;
color: $color-white;
margin-left: rem(36px);
&:after {
position: absolute;
top: rem(2px);
left: 0;
content: '';
width: rem(24px);
height: rem(24px);
background: url("/svg/check.svg") no-repeat;
background-size: rem(24px) rem(24px);
margin-left: rem(-36px);
}
}
}
@@ -93,12 +110,12 @@
justify-content: center;
align-items: center;
flex-basis: 40%;
gap: 40px;
gap: rem(40px);
.Title {
font-family: $font-open-sans;
font-weight: $font-semi-bold;
font-size: 60px;
font-size: rem(60px);
line-height: 1;
color: $color-white;
}

358
src/views/home/ui/offer/offer.module.scss
View File

@@ -1,163 +1,90 @@
.Offer {
background: $color-lightgray;
border-radius: 28px;
padding: 160px;
border-radius: rem(28px);
padding: rem(160px) 0;
}
.InnerContainer {
margin: 0 auto;
width: rem(1340px);
}
.Title {
font-family: $font-open-sans;
font-weight: $font-semi-bold;
font-size: rem(60px);
line-height: 100%;
color: $color-text;
max-width: rem(1330px);
margin-bottom: rem(80px);
}
.Text {
font-family: $font-open-sans;
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 {
display: flex;
flex-direction: row;
gap: rem(40px);
justify-content: center;
margin-bottom: rem(80px);
}
.Inner {
display: flex;
flex-direction: column;
align-items: flex-start;
background-color: $color-white;
border-radius: rem(28px);
padding: rem(80px) rem(40px);
margin-bottom: rem(130px);
.Title {
font-family: $font-open-sans;
font-weight: $font-semi-bold;
font-size: 60px;
font-size: rem(60px);
line-height: 100%;
color: $color-text;
max-width: 1330px;
margin-bottom: 80px;
}
.Text {
font-family: $font-open-sans;
font-weight: $font-regular;
font-size: 32px;
line-height: 100%;
color: $color-text;
margin-bottom: 20px;
}
.List {
display: flex;
flex-direction: column;
align-items: flex-start;
max-width: 1330px;
margin-bottom: 60px;
.ListItem {
font-family: $font-open-sans;
font-weight: $font-regular;
font-size: 32px;
line-height: 160%;
color: $color-text;
list-style-type: decimal;
margin-left: 40px;
}
}
.RowForm {
display: flex;
flex-direction: row;
gap: 40px;
justify-content: center;
margin-bottom: 80px;
}
.Inner {
display: flex;
flex-direction: column;
align-items: flex-start;
background-color: $color-white;
border-radius: 28px;
padding: 80px 40px;
margin-bottom: 130px;
.Title {
font-family: $font-open-sans;
font-weight: $font-semi-bold;
font-size: 60px;
line-height: 1;
color: $color-text;
}
.Grid {
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
gap: 40px;
padding: 40px 0;
}
.Tile {
position: relative;
padding: 25px;
height: 352px;
border-radius: 28px;
overflow: hidden;
&:after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
left: 0;
top: 0;
background-color: rgba(#292E3D, .7);
transition: 250ms background-color;
}
&:hover {
&:after {
background-color: rgba(#292E3D, .5);
}
.Title {
display: none;
}
.Description {
display: block;
}
.Arrow {
transform: rotate(45deg);
transition: transform 250ms ease-in-out;
}
}
.Background {
position: absolute;
}
.Title {
position: relative;
z-index: 2;
font-family: $font-open-sans;
font-weight: $font-regular;
font-size: 42px;
line-height: 100%;
color: $color-white;
}
.Description {
position: relative;
z-index: 2;
display: none;
font-family: $font-open-sans;
font-weight: $font-regular;
font-size: 24px;
line-height: 130%;
color: $color-white;
}
.Arrow {
position: absolute;
z-index: 2;
right: 25px;
bottom: 25px;
width: 64px;
height: 64px;
transform: rotate(-135deg);
transition: transform 250ms ease-in-out;
}
}
}
.Form {
position: relative;
padding: 40px 60px;
background: #292E3D;
border-radius: 28px;
overflow: hidden;
.Grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
gap: rem(40px);
padding: rem(40px) 0;
}
.Tile {
position: relative;
padding: rem(25px);
height: rem(352px);
border-radius: rem(28px);
overflow: hidden;
&:after {
content: '';
@@ -168,34 +95,31 @@
z-index: 1;
left: 0;
top: 0;
background-color: rgba(#163055, .6);
background-color: rgba(#292E3D, .7);
transition: 250ms background-color;
}
&:hover {
&:after {
background-color: rgba(#292E3D, .5);
}
.Title {
display: none;
}
.Description {
display: block;
}
.Arrow {
transform: rotate(45deg);
transition: transform 250ms ease-in-out;
}
}
.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: 30px;
line-height: 100%;
color: $color-white;
margin-bottom: 16px;
}
.Title {
@@ -203,11 +127,93 @@
z-index: 2;
font-family: $font-open-sans;
font-weight: $font-regular;
font-size: 48px;
font-size: rem(42px);
line-height: 100%;
color: $color-white;
}
.Description {
position: relative;
z-index: 2;
display: none;
font-family: $font-open-sans;
font-weight: $font-regular;
font-size: rem(24px);
line-height: 130%;
color: $color-white;
max-width: 660px;
margin: 0;
}
.Arrow {
position: absolute;
z-index: 2;
right: rem(25px);
bottom: rem(25px);
width: rem(64px);
height: rem(64px);
transform: rotate(-135deg);
transition: transform 250ms ease-in-out;
}
}
}
}
.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;
}
}

147
src/views/home/ui/offer/offer.tsx
View File

@@ -19,81 +19,84 @@ export default function Offer() {
return (
<section className={s.Offer}>
<h2 className={s.Title}>
Помогаем <Mark> выявить недостатки </Mark> и <Mark>привести</Mark>{' '}
систему Охранно-Пожарной <br />
сигнализации <Mark> в соответствие </Mark> со всеми нормативами
</h2>
<p className={s.Text}>Методика работы:</p>
<ul className={s.List}>
<li className={s.ListItem}>
Экспертиза (аудит) выявляет нарушения ОПС
</li>
<li className={s.ListItem}>
На основании экспертизы оформляется заключение
</li>
<li className={s.ListItem}>
На основании выявленных нарушений производится устранение недостатков
</li>
<li className={s.ListItem}>
Производится проверка проекта по замене старых пожарных систем на
новые, что позволяет сократить стоимость сметы на модернизацию.
</li>
</ul>
<form className={s.RowForm}>
<Input type='text' placeholder='+7 (999) 123 45 67' />
<Input
type='text'
placeholder='Ваше имя'
value={name}
onChange={(e) => setName(e.target.value)}
/>
<Button variant='orange'>Узнать подробности</Button>
</form>
<div className={s.Inner}>
<div className={s.InnerContainer}>
<h2 className={s.Title}>
Возьмем <Mark>на себя</Mark> все заботы
Помогаем <Mark> выявить недостатки </Mark> и <Mark>привести</Mark>{' '}
систему Охранно-Пожарной <br />
сигнализации <Mark> в соответствие </Mark> со всеми нормативами
</h2>
<div className={s.Grid}>
{tileList.map(({ title, description, image }, idx) => (
<div key={idx} className={s.Tile}>
<Image
className={s.Background}
src={image}
placeholder='blur'
alt={''}
quality={75}
fill
priority
/>
<h3 className={s.Title}> {title} </h3>
<p className={s.Description}> {description} </p>
<Image className={s.Arrow} src={arrow} alt='' />
</div>
))}
</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
text='Получить консультацию'
placeholder={'+7 (999) 123 45 67'}
<p className={s.Text}>Методика работы:</p>
<ul className={s.List}>
<li className={s.ListItem}>
Экспертиза (аудит) выявляет нарушения ОПС
</li>
<li className={s.ListItem}>
На основании экспертизы оформляется заключение
</li>
<li className={s.ListItem}>
На основании выявленных нарушений производится устранение
недостатков
</li>
<li className={s.ListItem}>
Производится проверка проекта по замене старых пожарных систем на
новые, что позволяет сократить стоимость сметы на модернизацию.
</li>
</ul>
<form className={s.RowForm}>
<Input type='text' placeholder='+7 (999) 123 45 67' />
<Input
type='text'
placeholder='Ваше имя'
value={name}
onChange={(e) => setName(e.target.value)}
/>
<Button variant='orange'>Узнать подробности</Button>
</form>
<div className={s.Inner}>
<h2 className={s.Title}>
Возьмем <Mark>на себя</Mark> все заботы
</h2>
<div className={s.Grid}>
{tileList.map(({ title, description, image }, idx) => (
<div key={idx} className={s.Tile}>
<Image
className={s.Background}
src={image}
placeholder='blur'
alt={''}
quality={75}
fill
priority
/>
<h3 className={s.Title}> {title} </h3>
<p className={s.Description}> {description} </p>
<Image className={s.Arrow} src={arrow} alt='' />
</div>
))}
</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
text='Получить консультацию'
placeholder={'+7 (999) 123 45 67'}
/>
</div>
</div>
</div>
</section>

22
src/views/home/ui/result/result.module.scss
View File

@@ -1,13 +1,15 @@
.Result {
padding: 160px;
margin: 0 auto;
width: rem(1340px);
padding: rem(160px) 0 rem(80px);
.Header {
font-family: $font-open-sans;
font-weight: $font-semi-bold;
font-size: 60px;
font-size: rem(60px);
line-height: 100%;
color: $color-text;
margin-bottom: 96px;
margin-bottom: rem(96px);
}
.Row {
@@ -15,8 +17,8 @@
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 10vw;
margin-bottom: 80px;
gap: rem(48px);
margin-bottom: rem(80px);
&:nth-child(odd) {
flex-direction: row-reverse;
@@ -28,10 +30,10 @@
.Title {
font-family: $font-open-sans;
font-weight: $font-regular;
font-size: 48px;
font-size: rem(48px);
line-height: 100%;
color: $color-text;
margin-bottom: 40px;
margin-bottom: rem(40px);
}
.Description {
@@ -47,10 +49,10 @@
flex: 1;
position: relative;
overflow: hidden;
border-radius: 28px;
border-radius: rem(28px);
object-fit: contain;
max-width: 720px;
height: 540px;
max-width: rem(720px);
height: rem(540px);
&:after {
content: '';
display: block;

1
src/widgets/.gitkeep
View File

@@ -1 +0,0 @@
reusable components

1
src/widgets/index.ts Normal file
View File

@@ -0,0 +1 @@
export { LicenseSlider } from './license-slider';

1
src/widgets/license-slider/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default as LicenseSlider } from './license-slider';

9
src/widgets/license-slider/license-slider.module.scss Normal file
View File

@@ -0,0 +1,9 @@
.Slider {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.Slide {
cursor: pointer;
}

43
src/widgets/license-slider/license-slider.tsx Normal file
View File

@@ -0,0 +1,43 @@
'use client';
import s from './license-slider.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 'swiper/css';
type LicenseSliderProps = {
className?: string;
images: {
id: string;
name: string;
image: string | StaticImport;
}[];
};
const mockFullSizeImage = 'images/empty-image.jpg';
export default function LicenseSlider({
className,
images,
}: LicenseSliderProps) {
return (
<Swiper
className={clsx(s.Slider, className)}
slidesPerView={3}
onSlideChange={() => console.log('slide change')}
onSwiper={(swiper) => console.log(swiper)}
>
{images.map(({ id, name, image }) => (
<SwiperSlide key={id}>
<a href={mockFullSizeImage} target='_blank'>
<Image className={s.Slide} src={image} alt={name} />
</a>
</SwiperSlide>
))}
</Swiper>
);
}