feat: add main page and content

src/shared/ui/icon/ui.tsx

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

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';

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

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 (
-    <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.
+    <>
+      <section className={s.Main}>
+        <div className={s.BgWrapper}>
+          <Image className={s.Background} src={bg} alt={''} />
         </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?
+        <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>
-        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 className={s.Rounded}>
+            <p>2800</p>
+            <p>экспертиз</p>
           </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 className={s.RightBlock}>
+          <div className={s.SubBlock}>
+            <Icons.MapOutline width={64} height={64} color={'#FFFFFF'} />
+            <p className={s.Text}>
+              Мы производим независимую оценку и экспертизу на всей территории
+              Краснодарского края и города Сочи
+            </p>
           </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 className={s.SubBlock}>
+            <Icons.Consultation width={64} height={64} color={'#FFFFFF'} />
+            <p className={s.Text}>
+              Клиентам предоставляется бесплатная юридическая консультация
+            </p>
           </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.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>
+    </>
   );
 }

src/widgets/header/styles.module.scss

@@ -1,2 +1,3 @@
 .Header {
+  background: $color-white;
 }