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

fix(home): add adaptive to sections

Browse Source
This commit is contained in:
Valery Grunenko
2025-12-02 16:11:00 +03:00
parent de017bdfef
commit 7a7a466886
27 changed files with 691 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
.idea/workspace.xml generated
View File

@@ -5,12 +5,33 @@
</component>
<component name="ChangeListManager">
<list default="true" id="2a96f817-9dc2-4f3c-893a-c4974c750774" name="Changes" comment="">
<change afterPath="$PROJECT_DIR$/src/widgets/service-grid/data.tsx" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/views/home/about/index.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/views/home/about/styles.module.scss" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/views/home/about/ui.tsx" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/views/home/call-us/index.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/views/home/call-us/styles.module.scss" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/views/home/call-us/ui.tsx" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/views/home/experience/index.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/views/home/experience/styles.module.scss" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/views/home/experience/ui.tsx" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/views/home/main/index.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/views/home/main/styles.module.scss" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/views/home/main/ui.tsx" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/views/home/partners/index.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/views/home/partners/styles.module.scss" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/views/home/partners/ui.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/shared/ui/icon/service-grid.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/shared/ui/icon/service-grid.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/shared/ui/icon/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/shared/ui/icon/ui.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/widgets/service-grid/styles.module.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/widgets/service-grid/styles.module.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/widgets/service-grid/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/widgets/service-grid/ui.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/core/styles/variables.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/core/styles/variables.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/entities/base-menu/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/entities/base-menu/ui.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/shared/ui/partners-slider/styles.module.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/shared/ui/partners-slider/styles.module.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/views/home/styles.module.scss" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/views/home/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/home/ui.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/widgets/footer/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/widgets/footer/ui.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/widgets/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/widgets/index.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/widgets/service-grid/data.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/home/services/data.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/widgets/service-grid/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/home/services/index.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/widgets/service-grid/styles.module.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/home/services/styles.module.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/widgets/service-grid/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/home/services/ui.tsx" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -18,21 +39,25 @@
<option name="LAST_RESOLUTION" value="IGNORE" />
</component>
<component name="DarkyenusTimeTracker">
<option name="totalTimeSeconds" value="169880" />
<option name="totalTimeSeconds" value="180029" />
<option name="gitIntegration" value="true" />
<option name="naggedAbout" value="1" />
</component>
<component name="FileTemplateManagerImpl">
<option name="RECENT_TEMPLATES">
<list>
<option value="SCSS File" />
<option value="TypeScript File" />
<option value="TypeScript JSX File" />
<option value="SCSS File" />
</list>
</option>
</component>
<component name="Git.Settings">
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
</component>
<component name="ProblemsViewState">
<option name="selectedTabId" value="CurrentFile" />
</component>
<component name="ProjectColorInfo">{
&quot;customColor&quot;: &quot;&quot;,
&quot;associatedIndex&quot;: 4
@@ -68,6 +93,11 @@
"vue.rearranger.settings.migration": "true"
}
}]]></component>
<component name="RecentsManager">
<key name="MoveFile.RECENT_KEYS">
<recent name="C:\dev-personal\ocenka-web\src\views\home" />
</key>
</component>
<component name="RunManager" selected="npm.Next.js: server-side">
<configuration name="Next.js: debug client-side" type="JavascriptDebugType" uri="http://localhost:3000/">
<method v="2" />
@@ -101,7 +131,7 @@
<workItem from="1764586916122" duration="32000" />
<workItem from="1764590282382" duration="1201000" />
<workItem from="1764591867512" duration="4332000" />
<workItem from="1764657017067" duration="6387000" />
<workItem from="1764657017067" duration="21236000" />
</task>
<servers />
</component>

3
src/core/styles/variables.scss
View File

@@ -29,4 +29,5 @@ $color-link: #333333;
$color-link-hover: #009283;
$color-error: #ff0000;
$color-error-light: #ff9191;
$color-gray-border: #555555;
$color-gray-border: #555555;
$color-title: #555555;

7
src/entities/base-menu/ui.tsx
View File

@@ -1,11 +1,12 @@
import s from './styles.module.scss';
import Image from 'next/image';
import Link from 'next/link';
import { ROUTES } from '@shared/const/route';
import { Icons } from '@shared/ui/icon';
import { baseMenu } from '@shared/const/menu';
import { TMenu } from '@shared/types/menu';
import dtrLogo from '@public/images/dtr-logo-eagle.png';
import { BeautyButton } from '@/entities';
import dtrLogo from '@public/images/dtr-logo-eagle.png';
function BaseMenu() {
const phone = '+7 (900) 241-34-34';
@@ -46,7 +47,9 @@ function BaseMenu() {
return (
<section className={s.ContainerNavbar}>
<div className={s.Navbar}>
<Image src={dtrLogo} alt={'ДиТрасо'} quality={75} priority />
<Link href={ROUTES.HOME}>
<Image src={dtrLogo} alt={'ДиТрасо'} quality={75} priority />
</Link>
<Menu list={baseMenu} />
<div className={s.Invite}>
<BeautyButton>{phone}</BeautyButton>

6
src/shared/ui/partners-slider/styles.module.scss
View File

@@ -1,14 +1,12 @@
.Slider {
display: block;
padding: 0 20px;
//flex-direction: row;
//justify-content: space-between;
padding: 0 rem(20px);
}
.Slide {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
width: rem(200px);
height: auto;
}

0
src/widgets/service-grid/index.ts → src/views/home/about/index.ts
View File

148
src/views/home/about/styles.module.scss Normal file
View File

@@ -0,0 +1,148 @@
.About{
background: #f7f7f7;
}
.Inner{
margin: 0 auto;
max-width: rem(1540px);
padding: rem(80px) rem(10px);
display: flex;
flex-direction: column;
}
.Title {
font-family: $font-roboto;
font-weight: 500;
font-size: rem(32px);
line-height: 100%;
color: $color-title;
text-align: center;
margin-bottom: rem(80px);
}
.Block{
display: flex;
flex-direction: column;
align-items: center;
gap: rem(40px);
@include iflaptop{
flex-direction: row;
}
}
.Card {
flex: 1;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: rem(40px) rem(20px);
grid-template-areas:
"left right"
"bottom bottom";
margin: 0;
padding: rem(20px);
border-radius: rem(28px);
background-color: #FFFFFF;
background-image: linear-gradient(185deg, #58c644 55%, #ffffff 0%);
box-shadow: rem(15px) 0 rem(40px) 0 rgba(0, 0, 0, 0.5);
transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
@include iftablet{
gap: rem(80px) rem(20px);
margin: 0 rem(40px);
padding: rem(40px);
max-width: rem(760px);
}
@include iflaptop{
max-width: unset;
}
.Left{
grid-area: left;
display: flex;
flex-direction: column;
align-items: center;
font-family: $font-roboto;
font-weight: 300;
font-size: rem(16px);
line-height: 130%;
color: $color-white;
text-align: center;
@include iftablet{
font-size: rem(20px);
}
& p:first-child{
font-weight: 500;
font-size: rem(20px);
margin-bottom: rem(16px);
@include iftablet{
font-size: rem(28px);
margin-bottom: rem(16px);
}
}
}
.Right{
grid-area: right;
display: flex;
flex-direction: column;
align-items: center;
font-family: $font-roboto;
font-weight: 300;
font-size: rem(16px);
line-height: 130%;
color: $color-white;
text-align: center;
@include iftablet{
font-size: rem(20px);
}
& p:first-child{
font-weight: 500;
font-size: rem(20px);
margin-bottom: rem(16px);
@include iftablet{
font-size: rem(28px);
margin-bottom: rem(16px);
}
}
}
.Bottom{
grid-area: bottom;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
.Slider {
display: block;
padding: rem(20px) rem(20px);
width: 100%;
@include iftablet{
flex: 1;
display: block;
padding: 0 rem(20px);
}
}
.Slide {
display: flex;
justify-content: center;
align-items: center;
}

112
src/views/home/about/ui.tsx Normal file
View File

@@ -0,0 +1,112 @@
'use client';
import s from './styles.module.scss';
import { Button } from '@shared/ui';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/grid';
import 'swiper/css/autoplay';
import Image from 'next/image';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Grid } from 'swiper/modules';
import lic0 from '@public/images/licence/dtr-strahovka.png';
import lic1 from '@public/images/licence/dtr-eac-0.png';
import lic2 from '@public/images/licence/dtr-eac-1.png';
import lic3 from '@public/images/licence/dtr-eac-2.png';
import lic4 from '@public/images/licence/dtr-eac-3.png';
const slidesData = [
{
id: 0,
name: 'Страховое свидетельство',
image: lic0,
},
{
id: 1,
name: 'Сертификат соответствия',
image: lic1,
},
{
id: 2,
name: 'Разрешение система качества ЕАС',
image: lic2,
},
{
id: 3,
name: 'Приложение к разрешению ЕАС',
image: lic3,
},
{
id: 4,
name: 'Приложение к разрешению ЕАС',
image: lic4,
},
];
const swiperBreakpoints = {
360: {
slidesPerView: 1,
spaceBetween: 10,
},
768: {
slidesPerView: 2,
spaceBetween: 30,
},
1024: {
slidesPerView: 2,
spaceBetween: 30,
},
1440: {
slidesPerView: 2,
spaceBetween: 30,
},
};
function About() {
return (
<section className={s.About}>
<div className={s.Inner}>
<h2 className={s.Title}>О компании</h2>
<div className={s.Block}>
<div className={s.Card}>
<div className={s.Left}>
<p>5.000.000 руб.</p>
<p>
Страхование компании <br />
<strong>&#34;ДИ ТРАСО&#34;</strong>
</p>
</div>
<div className={s.Right}>
<p> 300.000 руб. </p>
<p>
Индивидуальное страхование <br />
<strong>специалиста</strong>
</p>
</div>
<div className={s.Bottom}>
<Button>Посмотреть видео о нас</Button>
</div>
</div>
<Swiper
className={s.Slider}
modules={[Grid, Autoplay]}
breakpoints={swiperBreakpoints}
autoplay={{
delay: 5000,
disableOnInteraction: false,
}}
loop={true}
>
{slidesData.map(({ id, name, image }) => (
<SwiperSlide key={id} className={s.Slide}>
<Image src={image} alt={name} quality={75} width={200} />
</SwiperSlide>
))}
</Swiper>
</div>
</div>
</section>
);
}
export { About };

0
src/views/home/call-us/index.ts Normal file
View File

47
src/views/home/call-us/styles.module.scss Normal file
View File

@@ -0,0 +1,47 @@
.CallUs {
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;
padding: rem(20px) 0;
}
.LeftBlock {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
gap: rem(10px);
padding: rem(20px) rem(40px);
.LineTitle {
font-family: $font-roboto;
font-weight: 500;
font-size: rem(24px);
line-height: 130%;
color: $color-white;
}
.LineText {
font-family: $font-roboto;
font-weight: 400;
font-size: rem(16px);
line-height: 100%;
color: $color-white;
}
}
.RightBlock {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: rem(40px);
padding: rem(20px) rem(40px);
}
}

19
src/views/home/call-us/ui.tsx Normal file
View File

@@ -0,0 +1,19 @@
import s from './styles.module.scss';
import { Button } from '@shared/ui';
function CallUs() {
return (
<section className={s.CallUs}>
<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>
);
}
export { CallUs };

1
src/views/home/experience/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './ui';

86
src/views/home/experience/styles.module.scss Normal file
View File

@@ -0,0 +1,86 @@
.Experience {
display: grid;
grid-template-columns: auto;
gap: 0;
width: 100%;
background-color: transparent;
background-image: linear-gradient(300deg, #009283 46%, #58c644 57%);
padding: rem(40px) 0 rem(20px);
@include iftablet {
grid-template-columns: 1fr 1fr;
padding: rem(20px) 0;
}
.LeftBlock {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: rem(20px);
@include iftablet{
gap: rem(40px);
}
.Rounded {
font-family: $font-roboto;
font-weight: 400;
font-size: rem(24px);
line-height: 130%;
color: $color-white;
border-radius: rem(28px);
border: 1px solid $color-white;
padding: rem(20px);
text-align: center;
@include iftablet{
font-size: rem(24px);
line-height: 130%;
width: rem(160px);
padding: rem(20px) rem(20px);
border-radius: rem(60px);
}
@include iflaptop{
font-size: rem(30px);
line-height: 130%;
width: rem(260px);
padding: rem(10px) rem(20px);
border-radius: rem(60px);
}
}
}
.RightBlock {
display: flex;
flex-direction: column;
gap: rem(10px);
padding: rem(20px) rem(40px);
.SubBlock {
display: flex;
flex-direction: row;
align-items: center;
gap: rem(16px);
.Icon {
width: rem(32px);
flex-shrink: 0;
@include iftablet{
width: rem(64px);
}
}
.Text {
flex-shrink: 1;
font-family: $font-roboto;
font-weight: 400;
font-size: rem(16px);
line-height: 130%;
color: $color-white;
}
}
}
}

46
src/views/home/experience/ui.tsx Normal file
View File

@@ -0,0 +1,46 @@
import { Icons } from '@/shared/ui';
import s from './styles.module.scss';
export default function Experience() {
return (
<section className={s.Experience}>
<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
className={s.Icon}
// width={64}
// height={64}
color={'#FFFFFF'}
/>
<p className={s.Text}>
Мы производим независимую оценку и экспертизу на всей территории
Краснодарского края и города Сочи
</p>
</div>
<div className={s.SubBlock}>
<Icons.Consultation
className={s.Icon}
// width={64}
// height={64}
color={'#FFFFFF'}
/>
<p className={s.Text}>
Клиентам предоставляется бесплатная юридическая консультация
</p>
</div>
</div>
</section>
);
}
export { Experience };

1
src/views/home/main/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './ui';

82
src/views/home/main/styles.module.scss Normal file
View File

@@ -0,0 +1,82 @@
.Main {
height: rem(600px);
position: relative;
.BgWrapper {
position: absolute;
top: rem(-200px);
left: rem(-880px);
width: 100vw;
z-index: -1;
@include iftablet{
top: rem(-200px);
left: rem(-600px);
}
@include iflaptop{
top: rem(-200px);
left: rem(-360px);
}
@include ifdesktop{
top: rem(-200px);
left: 0;
}
.Background {
object-fit: cover;
}
}
.Header {
position: absolute;
top: rem(180px);
left: rem(20px);
font-family: $font-roboto;
font-weight: 500;
font-size: rem(32px);
line-height: 130%;
color: $color-title;
max-width: rem(360px);
@include iftablet{
top: rem(180px);
left: rem(60px);
font-size: rem(42px);
max-width: rem(660px);
}
@include iflaptop{
top: rem(180px);
left: rem(140px);
font-size: rem(42px);
max-width: rem(660px);
}
@include ifdesktop{
top: rem(180px);
left: rem(300px);
font-size: rem(48px);
max-width: rem(720px);
}
}
.Lines {
position: absolute;
top: rem(420px);
left: rem(-80px);
@include iftablet{
left: rem(0px);
}
@include iflaptop{
left: rem(120px);
}
@include ifdesktop{
left: rem(200px);
}
}
}

20
src/views/home/main/ui.tsx Normal file
View File

@@ -0,0 +1,20 @@
import s from './styles.module.scss';
import Image from 'next/image';
import bg from '@public/images/bg-main.jpg';
import lines from '@public/images/bg-lines.png';
function Main() {
return (
<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>
);
}
export { Main };

1
src/views/home/partners/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './ui';

13
src/views/home/partners/styles.module.scss Normal file
View File

@@ -0,0 +1,13 @@
.Slider {
padding: rem(80px) 0;
.Title {
font-family: $font-roboto;
font-weight: 500;
font-size: rem(32px);
line-height: 100%;
color: $color-title;
text-align: center;
margin-bottom: rem(40px);
}
}

13
src/views/home/partners/ui.tsx Normal file
View File

@@ -0,0 +1,13 @@
import s from './styles.module.scss';
import { PartnersSlider } from '@shared/ui';
function Partners() {
return (
<section className={s.Slider}>
<h2 className={s.Title}>Наши клиенты и партнеры</h2>
<PartnersSlider />
</section>
);
}
export { Partners };

0
src/widgets/service-grid/data.tsx → src/views/home/services/data.tsx
View File

1
src/views/home/services/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './ui';

51
src/widgets/service-grid/styles.module.scss → src/views/home/services/styles.module.scss
View File

@@ -12,7 +12,7 @@
padding: rem(40px) rem(28px);
}
@include ifdesktop {
padding: rem(40px);
padding: rem(80px) rem(40px);
}
.Title {
@@ -20,9 +20,13 @@
font-weight: 500;
font-size: rem(32px);
line-height: 100%;
color: $color-text;
color: $color-title;
text-align: center;
margin-bottom: rem(20px);
margin-bottom: rem(40px);
@include iftablet{
margin-bottom: rem(60px);
}
}
.Switcher {
@@ -34,7 +38,11 @@
width: 100%;
border: 1px solid $color-green;
border-radius: rem(20px);
margin-bottom: rem(40px);
margin-bottom: rem(20px);
@include iftablet{
margin-bottom: rem(40px);
}
.Button {
box-sizing: border-box;
@@ -44,15 +52,20 @@
font-family: $font-roboto;
font-weight: 400;
font-size: rem(16px);
font-size: rem(14px);
line-height: 100%;
padding: rem(20px);
padding: rem(16px) rem(10px);
border-radius: rem(18px);
color: $color-green;
text-transform: uppercase;
cursor: pointer;
border: 1px solid transparent;
@include iftablet{
font-size: rem(16px);
padding: rem(20px);
}
&_active {
background-color: $color-green;
color: $color-white;
@@ -67,11 +80,14 @@
.Grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: rem(20px);
gap: rem(10px);
@include iflaptop{
gap: rem(20px);
}
@include iflaptop{
grid-template-columns: repeat(4, 1fr);
gap: rem(20px);
}
.Tile {
@@ -79,27 +95,27 @@
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: rem(40px);
gap: rem(20px);
border: 1px solid $color-green;
padding: rem(20px) rem(20px);
padding: rem(10px);
border-radius: rem(20px);
//box-shadow: 4px 0px 10px 0px rgba(0,146,131,0.5);
cursor: pointer;
height: 100%;
font-family: $font-roboto;
font-weight: 400;
font-size: rem(16px);
font-size: rem(14px);
line-height: 100%;
color: $color-green;
text-align: center;
@include iftablet{
font-size: rem(16px);
padding: rem(20px) rem(20px);
}
@include iflaptop{
padding: rem(20px) rem(40px);
min-height: 220px;
min-height: rem(220px);
font-size: rem(18px);
}
@include ifdesktop{
@@ -111,8 +127,13 @@
}
svg {
width: 64px;
height: 64px;
width: rem(48px);
height: rem(48px);
@include iftablet{
width: rem(64px);
height: rem(64px);
}
}
}
}

4
src/widgets/service-grid/ui.tsx → src/views/home/services/ui.tsx
View File

@@ -12,7 +12,7 @@ enum SwitcherOption {
JURIST = 'jurist',
}
function ServiceGrid() {
function Services() {
const [switcher, setSwitcher] = useState<SwitcherOption>(
SwitcherOption.EXPERTISE,
);
@@ -69,4 +69,4 @@ function ServiceGrid() {
);
}
export { ServiceGrid };
export { Services };

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

@@ -1,151 +0,0 @@
.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;
}
}
.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;
}
}

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

@@ -1,68 +1,19 @@
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';
import { ServiceGrid } from '@/widgets';
import { Services } from './services';
import { Partners } from './partners';
import { Experience } from './experience';
import { About } from './about';
import { CallUs } from './call-us/ui';
import { Main } from './main';
export default function Main() {
export default function Home() {
return (
<>
<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>
<ServiceGrid />
<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}>
<h2 className={s.Title}>Наши клиенты и партнеры</h2>
<PartnersSlider />
</section>
<Main />
<Experience />
<Services />
<About />
<CallUs />
<Partners />
</>
);
}

4
src/widgets/footer/ui.tsx
View File

@@ -11,7 +11,9 @@ function Footer() {
<div className={s.Container_green}>
<div className={s.Grid}>
<div className={s.About}>
<Image className={s.Image} src={dtrLogo} alt='ДиТрасо' />
<Link href={ROUTES.HOME}>
<Image className={s.Image} src={dtrLogo} alt='ДиТрасо' />
</Link>
<p className={s.Description}>
В соответствии с п.5.1 ст.18 №128-фз лицензия для оценочной
деятельности не требуется с 01.07.2006г.

1
src/widgets/index.ts
View File

@@ -1,4 +1,3 @@
export * from './header';
export * from './footer';
export * from './breadcrumbs';
export * from './service-grid';