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

feat: add main page and content

Browse Source
This commit is contained in:
Valery Grunenko
2025-07-11 15:19:20 +03:00
parent e4f898961c
commit dd0dc9f2f8
7 changed files with 251 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
src/views/home/styles.module.scss
View File

@@ -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;
}
}

171
src/views/home/ui.tsx
View File

@@ -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>
</>
);
}