Dev #11
@@ -1,165 +1,170 @@
|
||||
.Contacts {
|
||||
background: $color-lightgray;
|
||||
border-radius: rem(28px);
|
||||
padding: rem(160px);
|
||||
padding: rem(160px) 0;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
.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: rem(40px);
|
||||
max-width: rem(1200px);
|
||||
margin-bottom: rem(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: rem(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: rem(60px) rem(50px);
|
||||
border-radius: rem(28px);
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
|
||||
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 {
|
||||
.Title {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: rem(20px);
|
||||
}
|
||||
}
|
||||
|
||||
.Map {
|
||||
position: relative;
|
||||
|
||||
iframe {
|
||||
border-radius: rem(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: rem(-40px);
|
||||
right: rem(180px);
|
||||
border-radius: rem(28px);
|
||||
background: $color-white;
|
||||
width: rem(440px);
|
||||
padding: rem(40px) rem(35px) rem(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: rem(48px);
|
||||
line-height: 100%;
|
||||
color: $color-text;
|
||||
text-align: right;
|
||||
margin-bottom: rem(32px);
|
||||
align-self: center;
|
||||
.Map {
|
||||
position: relative;
|
||||
|
||||
.LedOn {
|
||||
position: absolute;
|
||||
bottom: rem(6px);
|
||||
left: rem(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: rem(32px);
|
||||
line-height: 130%;
|
||||
color: $color-text;
|
||||
margin-bottom: rem(20px);
|
||||
margin-left: rem(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: rem(-48px);
|
||||
top: rem(8px);
|
||||
width: rem(32px);
|
||||
height: rem(32px);
|
||||
stroke: #E96526;
|
||||
}
|
||||
.Icon {
|
||||
position: absolute;
|
||||
left: rem(-48px);
|
||||
top: rem(8px);
|
||||
width: rem(32px);
|
||||
height: rem(32px);
|
||||
stroke: #E96526;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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&source=constructor'
|
||||
width='100%'
|
||||
height='620'
|
||||
frameBorder='0'
|
||||
></iframe>
|
||||
<div className={s.Map}>
|
||||
<iframe
|
||||
src='https://yandex.ru/map-widget/v1/?um=constructor%3A7f1285c4f3e470bc9affa220323655ac72edd1be376c2579d421ca359ac46a7d&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>
|
||||
|
||||
@@ -1,49 +1,57 @@
|
||||
.Footer {
|
||||
position: relative;
|
||||
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;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: rem(20px);
|
||||
}
|
||||
|
||||
.Block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: rem(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: rem(60px);
|
||||
font-weight: $font-regular;
|
||||
font-size: rem(16px);
|
||||
line-height: 100%;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
.License {
|
||||
padding: rem(160px);
|
||||
|
||||
margin: 0 auto;
|
||||
width: rem(1340px);
|
||||
padding: rem(120px) 0 rem(160px);
|
||||
|
||||
.Header {
|
||||
font-family: $font-open-sans;
|
||||
|
||||
@@ -30,11 +30,11 @@ export default function License() {
|
||||
priority
|
||||
/>
|
||||
<h3 className={s.Title}>
|
||||
Заключите договор до 1 июня и получите скидку на проведение пожарной
|
||||
Заключите договор до 1 июля и получите скидку на проведение пожарной
|
||||
экспертизы 15 %
|
||||
</h3>
|
||||
<p className={s.SubTitle}>
|
||||
Оставьте свои контактные данные и мы закрепим скидку до 1 июня за
|
||||
Оставьте свои контактные данные и мы закрепим скидку до 1 июля за
|
||||
вами
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
.Main {
|
||||
padding: 0 rem(160px) 0;
|
||||
margin: 0 auto;
|
||||
width: rem(1340px);
|
||||
//padding: 0 rem(160px) 0;
|
||||
|
||||
&_BgWrapper {
|
||||
position: absolute;
|
||||
|
||||
@@ -1,7 +1,67 @@
|
||||
.Offer {
|
||||
background: $color-lightgray;
|
||||
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 {
|
||||
font-family: $font-open-sans;
|
||||
@@ -9,155 +69,22 @@
|
||||
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;
|
||||
.Grid {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: rem(40px);
|
||||
justify-content: center;
|
||||
margin-bottom: rem(80px);
|
||||
padding: rem(40px) 0;
|
||||
}
|
||||
|
||||
.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: 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 {
|
||||
.Tile {
|
||||
position: relative;
|
||||
padding: rem(40px) rem(60px);
|
||||
background: #292E3D;
|
||||
padding: rem(25px);
|
||||
height: rem(352px);
|
||||
border-radius: rem(28px);
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
@@ -168,35 +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: rem(30px);
|
||||
line-height: 100%;
|
||||
color: $color-white;
|
||||
margin-bottom: rem(16px);
|
||||
}
|
||||
|
||||
.Title {
|
||||
@@ -204,11 +127,93 @@
|
||||
z-index: 2;
|
||||
font-family: $font-open-sans;
|
||||
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%;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
.Result {
|
||||
padding: rem(160px);
|
||||
margin: 0 auto;
|
||||
width: rem(1340px);
|
||||
padding: rem(160px) 0 rem(80px);
|
||||
|
||||
.Header {
|
||||
font-family: $font-open-sans;
|
||||
@@ -15,7 +17,7 @@
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
gap: 10vw;
|
||||
gap: rem(48px);
|
||||
margin-bottom: rem(80px);
|
||||
|
||||
&:nth-child(odd) {
|
||||
|
||||
Reference in New Issue
Block a user