feat: add main page and content
This commit is contained in:
BIN
public/images/bg-lines.png
Normal file
BIN
public/images/bg-lines.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
public/images/bg-main.jpg
Normal file
BIN
public/images/bg-main.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
@@ -282,6 +282,38 @@ const MailBulk = (props: SVGIcon) => (
|
||||
</svg>
|
||||
);
|
||||
|
||||
//LaWeixin
|
||||
const Consultation = (props: SVGIcon) => (
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={96}
|
||||
height={96}
|
||||
viewBox='0 0 32 32'
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill='currentColor'
|
||||
d='M14 5C8.578 5 4 8.71 4 13.5c0 1.617.594 3.102 1.5 4.375l-.375 2.906l-.219 1.75l1.594-.687L9 20.812a11.4 11.4 0 0 0 4.156 1.125C13.886 24.892 16.976 27 20.5 27c1.453 0 2.781-.41 3.938-1.031l1.187.687l1.719.938l-.25-1.938l-.219-1.812C27.539 22.89 28 21.8 28 20.594c0-2.559-1.707-4.703-4.125-5.75c.086-.438.125-.875.125-1.344C24 8.71 19.422 5 14 5m0 2c4.52 0 8 3.008 8 6.5q0 .4-.063.781a8.3 8.3 0 0 0-1.437-.125c-3.8 0-7.09 2.461-7.469 5.781c-1.32-.132-2.531-.511-3.562-1.093l-.438-.219l-.437.188l-1.281.53l.218-1.53l.032-.438l-.25-.313C6.473 16.023 6 14.806 6 13.5C6 10.008 9.48 7 14 7m-3.438 2.156c-.777 0-1.406.63-1.406 1.406c0 .778.63 1.438 1.406 1.438c.778 0 1.407-.66 1.407-1.438s-.63-1.406-1.406-1.406zm6.688 0c-.777 0-1.438.63-1.438 1.406c0 .778.66 1.438 1.438 1.438s1.406-.66 1.406-1.438s-.629-1.406-1.406-1.406m3.25 7c3.14 0 5.5 2.094 5.5 4.438c0 .886-.32 1.691-.906 2.406l-.282.344l.063.406l.031.188l-.468-.25l-.5.343c-.934.606-2.125.969-3.438.969c-3.14 0-5.5-2.063-5.5-4.406c0-2.344 2.36-4.438 5.5-4.438M18 17.438c-.59 0-1.094.472-1.094 1.062s.504 1.063 1.094 1.063c.586 0 1.063-.473 1.063-1.063S18.59 17.437 18 17.437zm5.031 0a1.06 1.06 0 0 0-1.062 1.062c0 .59.472 1.063 1.062 1.063s1.063-.473 1.063-1.063s-.473-1.063-1.063-1.063z'
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
//RiMapPinLine
|
||||
const MapOutline = (props: SVGProps<SVGSVGElement>) => (
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={96}
|
||||
height={96}
|
||||
viewBox='0 0 24 24'
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill='currentColor'
|
||||
d='m12 20.9l4.95-4.95a7 7 0 1 0-9.9 0zm0 2.828l-6.364-6.364a9 9 0 1 1 12.728 0zM12 13a2 2 0 1 0 0-4a2 2 0 0 0 0 4m0 2a4 4 0 1 1 0-8a4 4 0 0 1 0 8'
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const Icons = Object.assign(
|
||||
{},
|
||||
{
|
||||
@@ -300,6 +332,8 @@ const Icons = Object.assign(
|
||||
ContactWhatsapp,
|
||||
CloudScale,
|
||||
MailBulk,
|
||||
Consultation,
|
||||
MapOutline,
|
||||
},
|
||||
);
|
||||
|
||||
|
||||
@@ -4,3 +4,4 @@ export * from './button';
|
||||
export * from './modal';
|
||||
export * from './text-area';
|
||||
export * from './partners-slider';
|
||||
export * from './icon';
|
||||
|
||||
@@ -1,15 +1,168 @@
|
||||
.Main {
|
||||
height: 600px;
|
||||
position: relative;
|
||||
|
||||
.BgWrapper {
|
||||
position: absolute;
|
||||
top: -200px;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
z-index: -1;
|
||||
|
||||
.Background {
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.Header {
|
||||
position: absolute;
|
||||
top: 180px;
|
||||
left: 300px;
|
||||
font-family: $font-roboto;
|
||||
font-weight: 500;
|
||||
font-size: 48px;
|
||||
line-height: 130%;
|
||||
color: $color-text;
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.Lines {
|
||||
position: absolute;
|
||||
top: 420px;
|
||||
left: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.Container {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
max-width: rem(1540px);
|
||||
padding: 40px 10px;
|
||||
|
||||
@include iftablet{
|
||||
@include iftablet {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
@include iflaptop{
|
||||
@include iflaptop {
|
||||
padding: 40px 28px;
|
||||
}
|
||||
@include ifdesktop{
|
||||
@include ifdesktop {
|
||||
padding: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.Row {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
gap: 0;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
background-image: linear-gradient(300deg, #009283 46%, #58c644 57%);
|
||||
|
||||
@include iftablet {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.LeftBlock {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
|
||||
.Rounded {
|
||||
border-radius: 60px;
|
||||
border: 1px solid $color-white;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
font-family: $font-roboto;
|
||||
font-weight: 400;
|
||||
font-size: 30px;
|
||||
line-height: 150%;
|
||||
color: $color-white;
|
||||
text-transform: uppercase;
|
||||
width: 260px;
|
||||
}
|
||||
}
|
||||
|
||||
.RightBlock {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 20px 40px;
|
||||
|
||||
.SubBlock {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
.Text {
|
||||
font-family: $font-roboto;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 130%;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.BottomRow {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
gap: 0;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
background-image: linear-gradient(300deg, #009283 46%, #58c644 57%);
|
||||
|
||||
@include iftablet {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.LeftBlock {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
gap: 10px;
|
||||
padding: 20px 40px;
|
||||
|
||||
.LineTitle {
|
||||
font-family: $font-roboto;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
line-height: 130%;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.LineText {
|
||||
font-family: $font-roboto;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 100%;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
.RightBlock {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 50px;
|
||||
padding: 20px 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.Slider {
|
||||
padding: 60px 0;
|
||||
|
||||
.Title {
|
||||
font-family: $font-roboto;
|
||||
font-weight: 500;
|
||||
font-size: 32px;
|
||||
line-height: 100%;
|
||||
color: $color-text;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@@ -1,118 +1,65 @@
|
||||
import s from './styles.module.scss';
|
||||
import Image from 'next/image';
|
||||
import { Button, Icons, PartnersSlider } from '@shared/ui';
|
||||
import bg from '@public/images/bg-main.jpg';
|
||||
import lines from '@public/images/bg-lines.png';
|
||||
|
||||
export default function Main() {
|
||||
return (
|
||||
<section className={s.Container}>
|
||||
<div>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores
|
||||
cupiditate delectus dicta dignissimos eius esse est eum harum minus
|
||||
omnis perspiciatis quaerat, quasi quia, quod ratione tempora vel velit
|
||||
voluptates.
|
||||
</div>
|
||||
<div>
|
||||
Accusamus aliquam cumque dignissimos quasi repudiandae suscipit veniam!
|
||||
Accusamus atque commodi distinctio dolorum esse exercitationem
|
||||
explicabo, facilis in mollitia neque nostrum officia praesentium quod
|
||||
ratione, repudiandae, tempora totam ut vel?
|
||||
</div>
|
||||
<div>
|
||||
Atque corporis dignissimos dolorem enim et eum fuga fugiat fugit
|
||||
inventore iure iusto minima, nesciunt odio sed soluta vel voluptates. A
|
||||
accusamus dolor earum excepturi odit quaerat repudiandae sed tempore!
|
||||
</div>
|
||||
<div>
|
||||
Commodi cumque ducimus incidunt, nam numquam quo tempora voluptas?
|
||||
Debitis iure, vero. Aperiam atque beatae delectus dolores enim facilis
|
||||
fuga, ipsam laborum minus, molestiae obcaecati odio pariatur quis
|
||||
reiciendis voluptate?
|
||||
</div>
|
||||
<div>
|
||||
Adipisci aspernatur consequatur cum distinctio ea error ex explicabo
|
||||
fuga harum hic itaque molestiae nesciunt, omnis placeat reprehenderit
|
||||
rerum sed temporibus vel! Doloribus facilis id labore quia quisquam
|
||||
sequi voluptate.
|
||||
</div>
|
||||
<div>
|
||||
Adipisci atque dolorem ducimus enim facere fugit incidunt ipsam ipsum
|
||||
laudantium magni minima mollitia neque nesciunt nostrum odio officia
|
||||
perferendis quam, qui quia quisquam similique sunt temporibus vel
|
||||
veritatis vitae?
|
||||
</div>
|
||||
<div>
|
||||
Culpa fuga incidunt magni nemo porro quas quia quod sunt voluptas
|
||||
voluptate. Blanditiis ducimus eos eum facere fuga hic laborum minus,
|
||||
mollitia necessitatibus officiis perspiciatis recusandae, rerum saepe,
|
||||
temporibus ut?
|
||||
</div>
|
||||
<div>
|
||||
Consequatur ducimus eius, illo ipsa laborum magnam nesciunt numquam
|
||||
officia porro provident quasi reprehenderit sapiente sed temporibus unde
|
||||
vel veniam voluptatem. Amet commodi illum minus optio praesentium quis
|
||||
repellat, repudiandae.
|
||||
</div>
|
||||
<div>
|
||||
A ad aperiam architecto aut autem consequuntur cumque dolor ducimus ea
|
||||
eligendi ipsa iste laudantium magni maxime minima nostrum officia
|
||||
pariatur quae quasi quia quo, reiciendis repudiandae, saepe ullam
|
||||
voluptatum!
|
||||
</div>
|
||||
<div>
|
||||
Aperiam, aut commodi corporis dignissimos, eaque enim eos harum ipsa
|
||||
optio quia quos reiciendis, repellat. Architecto dolores error minus
|
||||
nihil non numquam, omnis optio porro tempora! Error eveniet nisi quod?
|
||||
</div>
|
||||
<div>
|
||||
Ab ad adipisci alias amet consequatur delectus deserunt dignissimos
|
||||
distinctio dolor eius id ipsa, laboriosam libero nam natus non numquam
|
||||
quidem quis quod rem saepe, tempora tenetur unde vel velit?
|
||||
</div>
|
||||
<div>
|
||||
Aliquam at consectetur culpa debitis doloribus ducimus eligendi eveniet
|
||||
facere fugiat ipsam itaque, laudantium maiores maxime molestiae
|
||||
molestias mollitia necessitatibus nisi numquam obcaecati quaerat quidem
|
||||
quis recusandae rerum, vel voluptas?
|
||||
</div>
|
||||
<div>
|
||||
Ab ad alias aliquam, amet corporis cumque doloribus ducimus ea error et
|
||||
excepturi exercitationem, explicabo impedit iste iure laudantium
|
||||
necessitatibus optio pariatur quia quidem ratione, rem similique sint
|
||||
totam voluptatem?
|
||||
</div>
|
||||
<div>
|
||||
Eius ipsa nihil odio perspiciatis sed sequi tempora, ullam? Consequuntur
|
||||
enim ex illo laborum nam, repellat tempore totam ut voluptatibus! Ad
|
||||
assumenda blanditiis distinctio dolorem, ex illum iusto magnam tempore.
|
||||
</div>
|
||||
<div>
|
||||
Aspernatur consequatur delectus deleniti est fugit laborum minima nisi
|
||||
quos suscipit vero. Accusantium ex illum maxime numquam obcaecati
|
||||
perspiciatis, quod reiciendis temporibus vitae. Eos laboriosam nostrum
|
||||
odit quidem reiciendis vitae.
|
||||
</div>
|
||||
<div>
|
||||
Animi at libero minima necessitatibus obcaecati, officia perferendis
|
||||
quo! Ab ad dolorum excepturi laborum libero, officia quibusdam sapiente!
|
||||
Accusamus adipisci consectetur cumque debitis dolore id impedit nesciunt
|
||||
nisi omnis voluptas.
|
||||
</div>
|
||||
<div>
|
||||
Accusantium animi debitis ducimus, iste molestias quos rem. Consectetur
|
||||
dicta, doloremque error eveniet excepturi fugit in, incidunt natus nulla
|
||||
omnis, quia quidem quisquam sint soluta voluptatibus. Eveniet maxime
|
||||
quae recusandae.
|
||||
</div>
|
||||
<div>
|
||||
Ad aliquam architecto distinctio eius eos maxime minima optio porro quis
|
||||
voluptatem. Accusantium atque debitis eligendi esse hic ipsam ipsum,
|
||||
nihil officia perspiciatis quasi rerum soluta, tempora vel voluptas
|
||||
voluptatibus.
|
||||
</div>
|
||||
<div>
|
||||
Aperiam dolor exercitationem expedita illum labore modi molestias
|
||||
repudiandae saepe velit voluptas. Accusamus consequuntur, dignissimos
|
||||
eius eligendi fuga harum illo illum nam, nulla, odit officia quaerat
|
||||
quis reiciendis sit tempore!
|
||||
</div>
|
||||
</section>
|
||||
<>
|
||||
<section className={s.Main}>
|
||||
<div className={s.BgWrapper}>
|
||||
<Image className={s.Background} src={bg} alt={''} />
|
||||
</div>
|
||||
<h2 className={s.Header}>
|
||||
Независимая оценка и экспертиза в <br /> Краснодарском крае
|
||||
</h2>
|
||||
<Image className={s.Lines} src={lines} alt={''} />
|
||||
</section>
|
||||
|
||||
<section className={s.Row}>
|
||||
<div className={s.LeftBlock}>
|
||||
<div className={s.Rounded}>
|
||||
<p> 3300 </p>
|
||||
<p>оценок</p>
|
||||
</div>
|
||||
<div className={s.Rounded}>
|
||||
<p>2800</p>
|
||||
<p>экспертиз</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={s.RightBlock}>
|
||||
<div className={s.SubBlock}>
|
||||
<Icons.MapOutline width={64} height={64} color={'#FFFFFF'} />
|
||||
<p className={s.Text}>
|
||||
Мы производим независимую оценку и экспертизу на всей территории
|
||||
Краснодарского края и города Сочи
|
||||
</p>
|
||||
</div>
|
||||
<div className={s.SubBlock}>
|
||||
<Icons.Consultation width={64} height={64} color={'#FFFFFF'} />
|
||||
<p className={s.Text}>
|
||||
Клиентам предоставляется бесплатная юридическая консультация
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className={s.BottomRow}>
|
||||
<div className={s.LeftBlock}>
|
||||
<p className={s.LineTitle}>Остались вопросы?</p>
|
||||
<p className={s.LineText}>Свяжитесь с нами любым удобным способом</p>
|
||||
</div>
|
||||
<div className={s.RightBlock}>
|
||||
<Button>Написать в чат</Button>
|
||||
<Button>Бесплатный звонок</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className={s.Slider}>
|
||||
<h3 className={s.Title}>Наши клиенты и партнеры</h3>
|
||||
<PartnersSlider />
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,2 +1,3 @@
|
||||
.Header {
|
||||
background: $color-white;
|
||||
}
|
||||
Reference in New Issue
Block a user