feat: add license section
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import Main from './main/main';
|
||||
import Offer from './offer/offer';
|
||||
import Result from './result/result';
|
||||
// import License from './license/license';
|
||||
import License from './license/license';
|
||||
// import Contacts from './contacts/contacts';
|
||||
// import Footer from './footer/footer';
|
||||
|
||||
@@ -11,7 +11,7 @@ export default function HomePage() {
|
||||
<Main />
|
||||
<Offer />
|
||||
<Result />
|
||||
{/*<License />*/}
|
||||
<License />
|
||||
{/*<Contacts />*/}
|
||||
{/*<Footer />*/}
|
||||
</>
|
||||
|
||||
@@ -1,2 +1,82 @@
|
||||
.License {
|
||||
padding: 160px;
|
||||
|
||||
|
||||
.Header {
|
||||
font-family: $font-open-sans;
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: 60px;
|
||||
line-height: 100%;
|
||||
color: $color-text;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.Slider {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.Form {
|
||||
position: relative;
|
||||
padding: 40px 60px;
|
||||
background: #292E3D;
|
||||
border-radius: 28px;
|
||||
overflow: hidden;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 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: 48px;
|
||||
line-height: 110%;
|
||||
color: $color-white;
|
||||
margin: 0 0 50px;
|
||||
}
|
||||
|
||||
.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;
|
||||
max-width: 820px;
|
||||
}
|
||||
}
|
||||
|
||||
.Inputs {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,45 @@
|
||||
import s from './license.module.scss';
|
||||
|
||||
import { Button, Mark } from '@shared/ui';
|
||||
|
||||
import bgForm from '@public/images/bg-form.jpg';
|
||||
import Image from 'next/image';
|
||||
|
||||
export default function License() {
|
||||
return <section className={s.License}>License</section>;
|
||||
return (
|
||||
<section className={s.License}>
|
||||
<h2 className={s.Header}>
|
||||
Наши услуги <Mark>подтверждены лицензиями</Mark> и сертификатами
|
||||
</h2>
|
||||
|
||||
<div className={s.Slider}>Slider here</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 type='text' placeholder='Ваше имя' />
|
||||
<input type='text' placeholder='+79991234567' />
|
||||
<Button variant='orange'>Получить консультацию</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user