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

Dev #11

Merged
redrockjs merged 3 commits from dev into main 2025-06-05 09:04:44 +00:00
Conversation 0 Commits 3 Files Changed 27 +540 -510
10 changed files with 540 additions and 510 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7d0fb5638e - Show all commits

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

@@ -1,165 +1,170 @@
.Contacts { .Contacts {
background: $color-lightgray; background: $color-lightgray;
border-radius: rem(28px); border-radius: rem(28px);
padding: rem(160px); padding: rem(160px) 0;
}
.Header { .InnerContainer {
font-family: $font-open-sans; margin: 0 auto;
font-weight: $font-semi-bold; width: rem(1340px);
font-size: rem(60px); }
line-height: 100%;
color: $color-text;
margin-bottom: rem(80px);
}
.Clients { .Header {
margin: 0 auto; font-family: $font-open-sans;
display: flex; font-weight: $font-semi-bold;
flex-direction: row; font-size: rem(60px);
flex-wrap: wrap; line-height: 100%;
justify-content: space-around; color: $color-text;
align-items: center; margin-bottom: rem(80px);
gap: rem(40px); }
max-width: rem(1200px);
margin-bottom: rem(160px);
.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 { .Client {
width: rem(300px);
height: auto; img {
} width: rem(300px);
height: auto;
} }
} }
}
.Form { .Form {
position: relative; position: relative;
background: #292E3D; 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; display: flex;
flex-direction: row; flex-direction: column;
padding: rem(60px) rem(50px);
border-radius: rem(28px);
overflow: hidden;
margin-bottom: rem(80px); .Title {
&: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; position: relative;
z-index: 2; z-index: 2;
flex: 1; font-family: $font-open-sans;
display: flex; font-weight: $font-semi-bold;
flex-direction: column; font-size: rem(48px);
justify-content: center; line-height: 100%;
gap: rem(20px); color: $color-white;
} margin-bottom: rem(80px);
}
.Map {
position: relative;
iframe {
border-radius: rem(28px);
} }
.Contacts { .SubTitle {
position: absolute; position: relative;
z-index: 2; z-index: 2;
top: rem(-40px); font-family: $font-open-sans;
right: rem(180px); font-weight: $font-light;
border-radius: rem(28px); font-size: rem(32px);
background: $color-white; line-height: 100%;
width: rem(440px); color: $color-white;
padding: rem(40px) rem(35px) rem(20px); max-width: rem(720px);
}
}
display: flex; .Inputs {
flex-direction: column; position: relative;
justify-content: flex-start; z-index: 2;
align-items: flex-start; flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: rem(20px);
}
}
.Title { .Map {
position: relative; 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 { iframe {
position: absolute; border-radius: rem(28px);
bottom: rem(6px); }
left: rem(6px);
} .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 { .Address {
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(32px);
line-height: 130%; line-height: 130%;
color: $color-text; color: $color-text;
margin-bottom: rem(20px); margin-bottom: rem(20px);
margin-left: rem(32px); margin-left: rem(32px);
.Icon { .Icon {
position: absolute; position: absolute;
left: rem(-48px); left: rem(-48px);
top: rem(8px); top: rem(8px);
width: rem(32px); width: rem(32px);
height: rem(32px); height: rem(32px);
stroke: #E96526; 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() { export default function Contacts() {
return ( return (
<section className={s.Contacts}> <section className={s.Contacts}>
<h2 className={s.Header}> <div className={s.InnerContainer}>
Клиенты, которые <Mark>нам доверяют</Mark> <h2 className={s.Header}>
</h2> Клиенты, которые <Mark>нам доверяют</Mark>
<div className={s.Clients}> </h2>
{clientsLogos.map(({ logo }, idx) => ( <div className={s.Clients}>
<div key={idx} className={s.Client}> {clientsLogos.map(({ logo }, idx) => (
<Image src={logo} alt='' /> <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>
<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>
<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&amp;source=constructor' src='https://yandex.ru/map-widget/v1/?um=constructor%3A7f1285c4f3e470bc9affa220323655ac72edd1be376c2579d421ca359ac46a7d&amp;source=constructor'
width='100%' width='100%'
height='620' height='620'
frameBorder='0' frameBorder='0'
></iframe> ></iframe>
<div className={s.Contacts}> <div className={s.Contacts}>
<h3 className={s.Title}> <h3 className={s.Title}>
<Image className={s.LedOn} src={ledOn} alt={''} /> <Image className={s.LedOn} src={ledOn} alt={''} />
Мы <Mark>всегда</Mark> <br /> на связи Мы <Mark>всегда</Mark> <br /> на связи
</h3> </h3>
<p className={s.Address}> <p className={s.Address}>
<Image className={s.Icon} src={map} alt='' /> <Image className={s.Icon} src={map} alt='' />
Краснодарский край <br /> Краснодарский край <br />
г.Сочи <br /> г.Сочи <br />
ТЦ «Атриум» <br /> ТЦ «Атриум» <br />
ул. Навагинская д.9«Д» <br /> ул. Навагинская д.9«Д» <br />
этаж 3, офис 35 этаж 3, офис 35
</p> </p>
<p className={s.Address}> <p className={s.Address}>
<Image className={s.Icon} src={phoneCall} alt='' /> <Image className={s.Icon} src={phoneCall} alt='' />
+7 (988) 400 93 93 +7 (988) 400 93 93
</p> </p>
<p className={s.Address}> <p className={s.Address}>
<Image className={s.Icon} src={email} alt='' /> <Image className={s.Icon} src={email} alt='' />
office@firecheck.ru office@firecheck.ru
</p> </p>
</div>
</div> </div>
</div> </div>
</section> </section>

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

@@ -1,49 +1,57 @@
.Footer { .Footer {
position: relative;
background-color: #1B1B25; background-color: #1B1B25;
padding: rem(80px) rem(160px); padding: rem(120px) 0 rem(40px);
margin-top: rem(-24px);
z-index: -1;
}
.InnerContainer {
margin: 0 auto;
width: rem(1340px);
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 { .Block {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: rem(20px); gap: rem(20px);
max-width: 40vw; max-width: 40vw;
} }
.SendBtn { .SendBtn {
align-self: flex-end; align-self: flex-end;
max-width: 33%; 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-family: $font-open-sans;
font-weight: $font-semi-bold; font-weight: $font-regular;
font-size: rem(60px); font-size: rem(16px);
line-height: 100%; line-height: 100%;
color: $color-white; color: $color-white;
margin-bottom: rem(40px); margin-left: auto;
} }
}
.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-regular;
font-size: rem(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() { export default function Footer() {
return ( return (
<section className={s.Footer}> <section className={s.Footer}>
<div className={s.Block}> <div className={s.InnerContainer}>
<h2 className={s.Header}> <div className={s.Block}>
Давайте <Mark>обсудим</Mark> ваши задачи <h2 className={s.Header}>
</h2> Давайте <Mark>обсудим</Mark> ваши задачи
<Input variant='ghost' placeholder={'Ваше имя'} fullWidth /> </h2>
<Input variant='ghost' placeholder={'+7 999 1234567'} fullWidth /> <Input variant='ghost' placeholder={'Ваше имя'} fullWidth />
<TextArea <Input variant='ghost' placeholder={'+7 999 1234567'} fullWidth />
variant='ghost' <TextArea
placeholder={'Кратко опишите вашу задачу'} variant='ghost'
fullWidth placeholder={'Кратко опишите вашу задачу'}
id='story' fullWidth
name='story' id='story'
rows={6} name='story'
/> rows={6}
<Button className={s.SendBtn} variant={'orange'} fullWidth> />
Отправить <Button className={s.SendBtn} variant={'orange'} fullWidth>
</Button> Отправить
</div> </Button>
<div className={s.Bottom}> </div>
<Button variant='ghost'>Telegram</Button> <div className={s.Bottom}>
<Button variant='ghost'>WhatsApp</Button> <Button variant='ghost'>Telegram</Button>
<Button variant='ghost'>+7 (999) 123 45 67</Button> <Button variant='ghost'>WhatsApp</Button>
<p className={s.Policy}> <Button variant='ghost'>+7 (999) 123 45 67</Button>
<Link href='#'>Политика конфиденциальности</Link> <p className={s.Policy}>
</p> <Link href='#'>Политика конфиденциальности</Link>
</p>
</div>
</div> </div>
</section> </section>
); );

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

@@ -1,6 +1,7 @@
.License { .License {
padding: rem(160px); margin: 0 auto;
width: rem(1340px);
padding: rem(120px) 0 rem(160px);
.Header { .Header {
font-family: $font-open-sans; font-family: $font-open-sans;

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

@@ -30,11 +30,11 @@ export default function License() {
priority priority
/> />
<h3 className={s.Title}> <h3 className={s.Title}>
Заключите договор до 1 июня и получите скидку на проведение пожарной Заключите договор до 1 июля и получите скидку на проведение пожарной
экспертизы 15 % экспертизы 15 %
</h3> </h3>
<p className={s.SubTitle}> <p className={s.SubTitle}>
Оставьте свои контактные данные и мы закрепим скидку до 1 июня за Оставьте свои контактные данные и мы закрепим скидку до 1 июля за
вами вами
</p> </p>
</div> </div>

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

@@ -1,5 +1,7 @@
.Main { .Main {
padding: 0 rem(160px) 0; margin: 0 auto;
width: rem(1340px);
//padding: 0 rem(160px) 0;
&_BgWrapper { &_BgWrapper {
position: absolute; position: absolute;

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

@@ -1,7 +1,67 @@
.Offer { .Offer {
background: $color-lightgray; background: $color-lightgray;
border-radius: rem(28px); border-radius: rem(28px);
padding: rem(160px); 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 { .Title {
font-family: $font-open-sans; font-family: $font-open-sans;
@@ -9,155 +69,22 @@
font-size: rem(60px); font-size: rem(60px);
line-height: 100%; line-height: 100%;
color: $color-text; color: $color-text;
max-width: rem(1330px);
margin-bottom: rem(80px);
} }
.Text { .Grid {
font-family: $font-open-sans; display: grid;
font-weight: $font-regular; grid-template-rows: repeat(2, 1fr);
font-size: rem(32px); grid-template-columns: repeat(3, 1fr);
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); gap: rem(40px);
justify-content: center; padding: rem(40px) 0;
margin-bottom: rem(80px);
} }
.Inner { .Tile {
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: rem(60px);
line-height: 100%;
color: $color-text;
}
.Grid {
display: grid;
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: '';
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: 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;
}
.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; position: relative;
padding: rem(40px) rem(60px); padding: rem(25px);
background: #292E3D; height: rem(352px);
border-radius: rem(28px); border-radius: rem(28px);
overflow: hidden; overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
&:after { &:after {
content: ''; content: '';
@@ -168,35 +95,31 @@
z-index: 1; z-index: 1;
left: 0; left: 0;
top: 0; top: 0;
background-color: rgba(#163055, .6); background-color: rgba(#292E3D, .7);
transition: 250ms background-color; 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 { .Background {
position: absolute; 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 { .Title {
@@ -204,11 +127,93 @@
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(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%; line-height: 130%;
color: $color-white; color: $color-white;
max-width: rem(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 ( return (
<section className={s.Offer}> <section className={s.Offer}>
<h2 className={s.Title}> <div className={s.InnerContainer}>
Помогаем <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}>
<h2 className={s.Title}> <h2 className={s.Title}>
Возьмем <Mark>на себя</Mark> все заботы Помогаем <Mark> выявить недостатки </Mark> и <Mark>привести</Mark>{' '}
систему Охранно-Пожарной <br />
сигнализации <Mark> в соответствие </Mark> со всеми нормативами
</h2> </h2>
<div className={s.Grid}> <p className={s.Text}>Методика работы:</p>
{tileList.map(({ title, description, image }, idx) => ( <ul className={s.List}>
<div key={idx} className={s.Tile}> <li className={s.ListItem}>
<Image Экспертиза (аудит) выявляет нарушения ОПС
className={s.Background} </li>
src={image} <li className={s.ListItem}>
placeholder='blur' На основании экспертизы оформляется заключение
alt={''} </li>
quality={75} <li className={s.ListItem}>
fill На основании выявленных нарушений производится устранение
priority недостатков
/> </li>
<h3 className={s.Title}> {title} </h3> <li className={s.ListItem}>
<p className={s.Description}> {description} </p> Производится проверка проекта по замене старых пожарных систем на
<Image className={s.Arrow} src={arrow} alt='' /> новые, что позволяет сократить стоимость сметы на модернизацию.
</div> </li>
))} </ul>
</div> <form className={s.RowForm}>
</div> <Input type='text' placeholder='+7 (999) 123 45 67' />
<div className={s.Form}> <Input
<Image type='text'
className={s.Background} placeholder='Ваше имя'
src={bgForm} value={name}
placeholder='blur' onChange={(e) => setName(e.target.value)}
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'}
/> />
<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>
</div> </div>
</section> </section>

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

@@ -1,5 +1,7 @@
.Result { .Result {
padding: rem(160px); margin: 0 auto;
width: rem(1340px);
padding: rem(160px) 0 rem(80px);
.Header { .Header {
font-family: $font-open-sans; font-family: $font-open-sans;
@@ -15,7 +17,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
gap: 10vw; gap: rem(48px);
margin-bottom: rem(80px); margin-bottom: rem(80px);
&:nth-child(odd) { &:nth-child(odd) {