diff --git a/public/images/bg-lines.png b/public/images/bg-lines.png new file mode 100644 index 0000000..adca4cf Binary files /dev/null and b/public/images/bg-lines.png differ diff --git a/public/images/bg-main.jpg b/public/images/bg-main.jpg new file mode 100644 index 0000000..abf3e54 Binary files /dev/null and b/public/images/bg-main.jpg differ diff --git a/src/shared/ui/icon/ui.tsx b/src/shared/ui/icon/ui.tsx index 4dd0fa6..b8466cb 100644 --- a/src/shared/ui/icon/ui.tsx +++ b/src/shared/ui/icon/ui.tsx @@ -282,6 +282,38 @@ const MailBulk = (props: SVGIcon) => ( ); +//LaWeixin +const Consultation = (props: SVGIcon) => ( + + + +); + +//RiMapPinLine +const MapOutline = (props: SVGProps) => ( + + + +); + const Icons = Object.assign( {}, { @@ -300,6 +332,8 @@ const Icons = Object.assign( ContactWhatsapp, CloudScale, MailBulk, + Consultation, + MapOutline, }, ); diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts index e678b34..6838db0 100644 --- a/src/shared/ui/index.ts +++ b/src/shared/ui/index.ts @@ -4,3 +4,4 @@ export * from './button'; export * from './modal'; export * from './text-area'; export * from './partners-slider'; +export * from './icon'; diff --git a/src/views/home/styles.module.scss b/src/views/home/styles.module.scss index 7325cc7..6cafbdf 100644 --- a/src/views/home/styles.module.scss +++ b/src/views/home/styles.module.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/views/home/ui.tsx b/src/views/home/ui.tsx index 11736bc..f8bae81 100644 --- a/src/views/home/ui.tsx +++ b/src/views/home/ui.tsx @@ -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 ( -
-
- 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. -
-
- 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? -
-
- 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! -
-
- 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? -
-
- 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. -
-
- 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? -
-
- 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? -
-
- 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. -
-
- 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! -
-
- 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? -
-
- 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? -
-
- 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? -
-
- 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? -
-
- 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. -
-
- 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. -
-
- 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. -
-
- 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. -
-
- 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. -
-
- 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! -
-
+ <> +
+
+ {''} +
+

+ Независимая оценка и экспертиза в
Краснодарском крае +

+ {''} +
+ +
+
+
+

3300

+

оценок

+
+
+

2800

+

экспертиз

+
+
+
+
+ +

+ Мы производим независимую оценку и экспертизу на всей территории + Краснодарского края и города Сочи +

+
+
+ +

+ Клиентам предоставляется бесплатная юридическая консультация +

+
+
+
+ +
+
+

Остались вопросы?

+

Свяжитесь с нами любым удобным способом

+
+
+ + +
+
+ +
+

Наши клиенты и партнеры

+ +
+ ); } diff --git a/src/widgets/header/styles.module.scss b/src/widgets/header/styles.module.scss index 5c8eb59..b7d8897 100644 --- a/src/widgets/header/styles.module.scss +++ b/src/widgets/header/styles.module.scss @@ -1,2 +1,3 @@ .Header { + background: $color-white; } \ No newline at end of file