package.json

@@ -18,7 +18,6 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
-    "@iconify-icon/react": "^3.0.0",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",

src/core/constants/route.ts

@@ -0,0 +1,12 @@
+export const ROUTES = {
+  EMPTY: '#',
+  HOME: '/home',
+} as const;
+
+export const ROUTES_EXTERNAL = {
+  YANDEX_MAP: '#',
+  WHATSAPP: '#',
+  TELEGRAM: '#',
+  VK: '#',
+  YOUTUBE: '#',
+} as const;

src/entities/top-menu/ui.tsx

@@ -1,29 +1,23 @@
 import s from './styles.module.scss';
-import {
+import { Icons } from '@shared/ui/icon';
-  CiPhoneIcon,
-  EnvelopeIcon,
-  MapIcon,
-  TgIcon,
-  WaIcon,
-} from '@shared/ui/icon';
 
 function TopMenu() {
   return (
     <section className={s.Container}>
       <div className={s.Top}>
         <div className={s.Icons}>
-          <WaIcon className={s.Icon} />
+          <Icons.Whatsapp className={s.Icon} />
-          <TgIcon className={s.Icon} />
+          <Icons.Telegram className={s.Icon} />
-          <CiPhoneIcon className={s.Icon} />
+          <Icons.Phone className={s.Icon} />
         </div>
         <div className={s.Contacts}>
           <p className={s.Item}>
-            <EnvelopeIcon className={s.IconBox} />
+            <Icons.Envelope className={s.IconBox} />
             spo-71@yandex.ru
           </p>
 
           <p className={s.Item}>
-            <MapIcon className={s.IconBox} />
+            <Icons.Map className={s.IconBox} />
             г. Сочи, Навагинская д. 9д, оф. 35
           </p>
         </div>

src/shared/ui/icon/ui.tsx

@@ -6,7 +6,7 @@ import type { SVGProps } from 'react';
 type SVGIcon = SVGProps<SVGSVGElement>;
 
 //RiMapPinLine
-function MapIcon(props: SVGIcon) {
+function Map(props: SVGIcon) {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
@@ -24,7 +24,7 @@ function MapIcon(props: SVGIcon) {
 }
 
 //MynauiEnvelope
-function EnvelopeIcon(props: SVGIcon) {
+function Envelope(props: SVGIcon) {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
@@ -46,7 +46,7 @@ function EnvelopeIcon(props: SVGIcon) {
 }
 
 //IcBaselineWhatsapp
-function WaIcon(props: SVGIcon) {
+function Whatsapp(props: SVGIcon) {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
@@ -64,7 +64,7 @@ function WaIcon(props: SVGIcon) {
 }
 
 //IcBaselineTelegram
-function TgIcon(props: SVGIcon) {
+function Telegram(props: SVGIcon) {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
@@ -82,7 +82,7 @@ function TgIcon(props: SVGIcon) {
 }
 
 // CiPhone
-function CiPhoneIcon(props: SVGIcon) {
+function Phone(props: SVGIcon) {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
@@ -103,4 +103,50 @@ function CiPhoneIcon(props: SVGIcon) {
   );
 }
 
-export { MapIcon, EnvelopeIcon, WaIcon, TgIcon, CiPhoneIcon };
+//HugeiconsVk
+function Vk(props: SVGIcon) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={24}
+      height={24}
+      viewBox='0 0 24 24'
+      {...props}
+    >
+      <path
+        fill='none'
+        stroke='#80beb7'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth={1.5}
+        d='M14 10.749V7.053c0-.833-.151-1-.98-1L10.67 6c-.732 0-1.098 0-1.246.237s.016.562.343 1.21c.182.36.28.621.28 1.025v2.66c0 .84 0 1.261-.32 1.386c-.32.124-.585-.158-1.117-.722c-1.3-1.384-1.978-3.112-2.423-4.996c-.092-.39-.138-.585-.276-.693S5.576 6 5.184 6h-2.2c-.482 0-.723 0-.874.17c-.15.171-.121.389-.063.824c.528 3.927 3.981 10.366 10.36 10.98c1.13.108 1.593-.197 1.593-1.435c0-.702-.015-1.836.868-1.985c.463-.078.774.087 1.291.52c.896.752 1.366 1.67 1.693 2.367c.217.462.378.559.888.559h2.074c1.048 0 1.333-.256.866-1.24a9 9 0 0 0-2.196-2.893c-.636-.547-.953-.82-.97-1.022c-.019-.201.214-.486.68-1.056c.9-1.102 2.126-2.831 2.698-4.666c.284-.91.017-1.123-.904-1.123h-1.863c-.903 0-.902-.031-1.115.993c-.346 1.661-1.478 3.258-2.542 4.345c-.505.516-.81.827-1.125.7S14 11.524 14 10.748'
+        color='#19bb3f'
+      ></path>
+    </svg>
+  );
+}
+
+//MdiYoutube
+function Youtube(props: SVGIcon) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={24}
+      height={24}
+      viewBox='0 0 24 24'
+      {...props}
+    >
+      <path
+        fill='#80beb7'
+        d='m10 15l5.19-3L10 9zm11.56-7.83c.13.47.22 1.1.28 1.9c.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83c-.25.9-.83 1.48-1.73 1.73c-.47.13-1.33.22-2.65.28c-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44c-.9-.25-1.48-.83-1.73-1.73c-.13-.47-.22-1.1-.28-1.9c-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83c.25-.9.83-1.48 1.73-1.73c.47-.13 1.33-.22 2.65-.28c1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44c.9.25 1.48.83 1.73 1.73'
+      ></path>
+    </svg>
+  );
+}
+
+const Icons = Object.assign(
+  {},
+  { Map, Envelope, Whatsapp, Telegram, Phone, Vk, Youtube },
+);
+
+export { Icons };

src/views/home/ui.tsx

@@ -1,14 +1,10 @@
 import s from './styles.module.scss';
-import { BaseMenu, TopMenu } from '@/entities';
+import { Footer, Header } from '@/widgets';
 
 export default function Main() {
   return (
     <main>
-      <header className={s.Header}>
+      <Header />
-        <TopMenu />
-        <BaseMenu />
-      </header>
-
       <section className={s.Container}>
         <div>
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores
@@ -122,158 +118,8 @@ export default function Main() {
           eius eligendi fuga harum illo illum nam, nulla, odit officia quaerat
           quis reiciendis sit tempore!
         </div>
-        <div>
-          A aliquam asperiores consequatur cum dignissimos distinctio dolorem
-          eius eos eum excepturi expedita impedit laborum molestiae mollitia,
-          natus quam quidem quis quo reprehenderit similique tempore unde
-          veritatis voluptatem, voluptatibus voluptatum?
-        </div>
-        <div>
-          Accusamus adipisci assumenda beatae consequatur, eum exercitationem
-          explicabo maxime obcaecati officiis porro quae qui ratione sapiente
-          sequi suscipit velit veritatis? Harum molestiae quis quod? Et harum
-          neque quam reprehenderit voluptates!
-        </div>
-        <div>
-          Aspernatur deleniti distinctio, illum, inventore iure labore maiores
-          nemo quod sapiente sit voluptas, voluptatem! Minus nobis perspiciatis
-          rem velit. Delectus, dolores natus? Eos laborum laudantium molestiae,
-          nobis perferendis unde. Animi.
-        </div>
-        <div>
-          Dolores magni nulla quasi? Accusamus aliquam animi aperiam corporis
-          distinctio eligendi explicabo illo ipsum laboriosam laborum maiores
-          molestias obcaecati optio provident, quae, quaerat quas quisquam rerum
-          saepe voluptatum? Asperiores, unde.
-        </div>
-        <div>
-          Dignissimos distinctio dolore, ea error fugiat ipsum modi pariatur
-          praesentium quia velit. Aliquam aut consequuntur corporis, debitis
-          esse hic iste laboriosam magni mollitia natus non obcaecati placeat
-          quia recusandae veniam?
-        </div>
-        <div>
-          Accusantium aliquam corporis debitis distinctio dolore dolorem earum
-          eligendi fugiat harum impedit ipsam, libero magni minus molestias nisi
-          odit officiis possimus quae, quaerat quia quibusdam sit sunt totam ut
-          vel?
-        </div>
-        <div>
-          Animi assumenda dicta dignissimos itaque, nesciunt quo. Aliquam
-          asperiores aspernatur delectus deleniti dolorem, dolorum eaque ex
-          exercitationem expedita fugit id, iusto mollitia nesciunt officia quam
-          suscipit temporibus ullam ut voluptates.
-        </div>
-        <div>
-          Ad, at consequuntur dicta dolor, eius ex excepturi, fugit ipsum nisi
-          nostrum numquam qui reprehenderit sint suscipit tempora unde
-          voluptatibus. Dicta doloremque eaque est in nemo perspiciatis quae
-          quisquam, similique?
-        </div>
-        <div>
-          Accusantium culpa eaque eius id incidunt ipsam ipsum, laboriosam
-          nesciunt recusandae, repellendus temporibus vel voluptates voluptatum.
-          Aliquid consectetur dolores in praesentium voluptate? Accusamus
-          consequuntur delectus facilis fuga nulla saepe veritatis?
-        </div>
-        <div>
-          A aliquid animi commodi dolor est in, iure magnam molestias nesciunt
-          numquam quam, repellat sunt, veniam! Consectetur facere neque nulla
-          quos saepe! Dicta eum impedit molestias officiis temporibus tenetur
-          vitae?
-        </div>
-        <div>
-          Animi dignissimos fugiat nihil odit perspiciatis soluta! Commodi
-          consectetur cupiditate iusto, possimus veritatis voluptas voluptatem.
-          Adipisci, alias consequuntur cum impedit itaque, minima modi natus
-          nulla quaerat quam quidem sed unde!
-        </div>
-        <div>
-          Accusantium ad aliquid animi aspernatur corporis cumque cupiditate
-          delectus dolore ea expedita id iste, iure laudantium maiores modi odio
-          quae quas quis quod quos recusandae rerum sunt totam veniam
-          voluptatibus?
-        </div>
-        <div>
-          Aperiam, aspernatur cum dolorum error exercitationem fuga id
-          necessitatibus nisi quo rem repudiandae soluta veniam? A architecto
-          commodi consequuntur culpa deserunt ducimus est et fugit, iusto nihil
-          odio quo rem?
-        </div>
-        <div>
-          Alias distinctio dolorem ducimus eaque, eligendi error eveniet harum
-          iste iure modi mollitia odit perspiciatis praesentium quaerat quam
-          quidem rem repudiandae rerum sed sequi sit soluta ut veniam veritatis
-          voluptate.
-        </div>
-        <div>
-          Cumque debitis eaque, error fugiat hic molestias placeat unde?
-          Accusamus, ad, amet architecto at beatae culpa deleniti expedita
-          labore magni maiores maxime odio quos repudiandae soluta voluptate?
-          Esse, nisi, provident.
-        </div>
-        <div>
-          A aperiam autem eius error expedita id incidunt ipsum molestias nulla
-          porro reprehenderit, velit, vero voluptatem voluptatibus voluptatum!
-          Doloremque ducimus eum expedita molestias numquam porro quisquam
-          ratione repellendus tenetur voluptatibus.
-        </div>
-        <div>
-          A accusamus architecto asperiores consectetur, consequuntur culpa cum
-          error est, explicabo illum impedit ipsum magnam, molestias nulla
-          obcaecati officiis pariatur possimus quia recusandae reprehenderit
-          tempora tempore ullam vitae voluptatem voluptatibus!
-        </div>
-        <div>
-          A accusantium alias aliquam aut blanditiis consequatur cumque delectus
-          distinctio doloremque eligendi error et inventore ipsa ipsum iste
-          laborum neque odit qui quia, quo repudiandae saepe sit, totam vitae
-          voluptatem!
-        </div>
-        <div>
-          Alias, aliquam animi aspernatur blanditiis consectetur consequatur
-          corporis cupiditate, dolorum error esse impedit laudantium magni
-          maiores natus non nulla odit perferendis quam, similique soluta
-          suscipit tenetur totam vel veniam voluptatem!
-        </div>
-        <div>
-          Consequatur corporis cumque, dolore earum esse et fuga itaque laborum
-          magni maiores modi nihil odit officia officiis omnis praesentium, quae
-          quo quod ratione repellendus soluta suscipit, ullam! Accusamus, est,
-          reprehenderit!
-        </div>
-        <div>
-          At consectetur debitis dolores, dolorum et expedita laboriosam minus
-          nemo nihil numquam perspiciatis quas quibusdam repellendus repudiandae
-          sint tenetur, voluptatibus. Alias dignissimos, labore laudantium nemo
-          numquam reprehenderit repudiandae similique vero?
-        </div>
-        <div>
-          Architecto dignissimos enim et laboriosam quibusdam quisquam
-          reprehenderit rerum vel veniam voluptatum. Delectus facere modi
-          veritatis. A ad eaque eligendi enim fugiat harum maiores mollitia nisi
-          optio quibusdam sint, voluptate.
-        </div>
-        <div>
-          Ab commodi iste laboriosam laudantium maiores maxime non odit placeat
-          quaerat quas reiciendis, sequi temporibus, totam vel veritatis!
-          Doloremque eveniet expedita, fuga quam quis recusandae veniam?
-          Exercitationem repellendus veniam voluptates?
-        </div>
-        <div>
-          Animi aperiam asperiores autem delectus dignissimos illo impedit
-          ipsam, iusto natus numquam pariatur quae qui quis quisquam ratione
-          sequi sit suscipit ullam unde vel! Alias autem nemo odit quod
-          voluptate.
-        </div>
-        <div>
-          Accusamus aspernatur consectetur culpa cum cumque cupiditate doloribus
-          ducimus explicabo hic, id ipsa laboriosam maiores, molestiae nobis
-          quasi quia quod rem tempora tempore, voluptatem. Alias atque labore
-          maiores quia reprehenderit.
-        </div>
       </section>
-      <footer className={s.Footer}>footer</footer>
+      <Footer />
     </main>
   );
 }

src/widgets/footer/index.ts

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

src/widgets/footer/styles.module.scss

@@ -1,3 +1,210 @@
 .Footer {
+  display: flex;
+  flex-direction: column;
+}
 
+.Container {
+  &_green {
+    background: #007c6f;
+  }
+
+  &_gray {
+    background: #3d3d3d;
+  }
+}
+
+.Grid {
+  margin: 0 auto;
+  width: 1540px;
+  padding: 40px 0 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  ///grid-template-rows: 1fr 1fr;
+  grid-auto-columns: 1fr;
+  gap: 0px 0px;
+  grid-auto-flow: row;
+  grid-template-areas:
+    "about linksa linksb linksc"
+    "contacts contacts social social";
+
+  .About {
+    grid-area: about;
+
+    .Image {
+      margin-bottom: 20px;
+    }
+
+    .Description {
+      font-family: $font-roboto;
+      font-weight: $font-regular;
+      font-size: 20px;
+      line-height: 160%;
+      color: $color-white;
+    }
+  }
+
+  .LinksA {
+    grid-area: linksa;
+    padding: 10px;
+
+    .Title {
+      @extend %title;
+    }
+
+    .List {
+      @extend %list;
+    }
+
+    .ListItem {
+      @extend %list-item;
+    }
+  }
+
+  .LinksB {
+    grid-area: linksb;
+    padding: 10px;
+
+    .Title {
+      @extend %title;
+    }
+
+    .List {
+      @extend %list;
+    }
+
+    .ListItem {
+      @extend %list-item;
+    }
+  }
+
+  .LinksC {
+    grid-area: linksc;
+    padding: 10px;
+
+    .Title {
+      @extend %title;
+    }
+
+    .List {
+      @extend %list;
+    }
+
+    .ListItem {
+      @extend %list-item;
+    }
+  }
+
+  .Contacts {
+    grid-area: contacts;
+
+    .Title {
+      @extend %title;
+    }
+
+    .Icons {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      gap: 24px;
+
+      .IconBox {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 16px;
+
+        .Icon {
+          border-radius: 50%;
+          width: 48px;
+          height: 48px;
+          padding: 8px;
+          background: $color-white;
+        }
+
+        .Text {
+          @extend %icon-desc;
+        }
+      }
+    }
+  }
+
+  .Social {
+    grid-area: social;
+    padding-left: 200px;
+
+    .Title {
+      @extend %title;
+    }
+
+    .Row {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 20px;
+    }
+
+    .Icon {
+
+    }
+  }
+}
+
+.Bottom {
+  margin: 0 auto;
+  width: 1540px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 16px 0;
+
+  font-family: $font-roboto;
+  font-weight: $font-regular;
+  font-size: 16px;
+  line-height: 100%;
+  color: $color-white;
+
+  & a {
+    text-decoration: none;
+    color: $color-link-hover;
+    margin: 0 8px;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+%title {
+  font-family: $font-roboto;
+  font-weight: $font-regular;
+  font-size: 20px;
+  line-height: 100%;
+  color: $color-white;
+  margin-bottom: 20px;
+}
+
+%list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  list-style: disc;
+}
+
+%list-item {
+  font-family: $font-roboto;
+  font-weight: $font-regular;
+  font-size: 16px;
+  line-height: 130%;
+  color: $color-white;
+  margin-left: 20px;
+}
+
+%icon-desc {
+  font-family: $font-roboto;
+  font-weight: $font-regular;
+  font-size: 18px;
+  line-height: 100%;
+  color: $color-white;
+  margin-bottom: 20px;
 }

src/widgets/footer/ui.tsx

@@ -1,5 +1,119 @@
 import s from './styles.module.scss';
+import Link from 'next/link';
+import Image from 'next/image';
+import { ROUTES, ROUTES_EXTERNAL } from '@core/constants/route';
+import dtrLogo from '@public/images/logo-dtr-white.png';
+import { Icons } from '@shared/ui/icon';
 
-export default function Footer() {
+function Footer() {
-  return <footer className={s.Footer}>footer</footer>;
+  return (
+    <footer className={s.Footer}>
+      <div className={s.Container_green}>
+        <div className={s.Grid}>
+          <div className={s.About}>
+            <Image className={s.Image} src={dtrLogo} alt='ДиТрасо' />
+            <p className={s.Description}>
+              В соответствии с п.5.1 ст.18 №128-фз лицензия для оценочной
+              деятельности не требуется с 01.07.2006г.
+            </p>
+          </div>
+          <div className={s.LinksA}>
+            <h3 className={s.Title}>Оценка имущества</h3>
+            <ol className={s.List}>
+              <li className={s.ListItem}>Оценка жилой недвижимости</li>
+              <li className={s.ListItem}>Оценка коммерческой недвижимости</li>
+              <li className={s.ListItem}>Оценка ущерба недвижимости</li>
+              <li className={s.ListItem}>Оценка сооружений</li>
+              <li className={s.ListItem}>Оценка машин и оборудования</li>
+              <li className={s.ListItem}>
+                Оценка стоимости предприятия (бизнеса)
+              </li>
+            </ol>
+          </div>
+          <div className={s.LinksB}>
+            <h3 className={s.Title}>Экспертиза</h3>
+            <ol className={s.List}>
+              <li className={s.ListItem}>Автотехническая экспертиза</li>
+              <li className={s.ListItem}>Товароведческая экспертиза</li>
+              <li className={s.ListItem}>Трасологическая экспертиза</li>
+              <li className={s.ListItem}>Кадастровая экспертиза</li>
+              <li className={s.ListItem}>Строительно-техническая экспертиза</li>
+              <li className={s.ListItem}>Оценочная экспертиза</li>
+            </ol>
+          </div>
+          <div className={s.LinksC}>
+            <h3 className={s.Title}>Юриспруденция</h3>
+            <ol className={s.List}>
+              <li className={s.ListItem}>Семейные и наследственные споры</li>
+              <li className={s.ListItem}>Земельные и имущественные споры</li>
+              <li className={s.ListItem}>Взыскание долгов с юридических лиц</li>
+              <li className={s.ListItem}>Страховые споры</li>
+              <li className={s.ListItem}>
+                Сопровождение сделок и составление договоров
+              </li>
+              <li className={s.ListItem}>Представительство в суде</li>
+            </ol>
+          </div>
+          <div className={s.Contacts}>
+            <h3 className={s.Title}>Контакты и адреса</h3>
+            <div className={s.Icons}>
+              <div className={s.IconBox}>
+                <a href='mailto: spo-71@yandex.ru'>
+                  <Icons.Envelope className={s.Icon} />
+                </a>
+                <p className={s.Text}>
+                  <a href='mailto: spo-71@yandex.ru'>spo-71@yandex.ru</a>
+                </p>
+              </div>
+              <div className={s.IconBox}>
+                <a href={ROUTES_EXTERNAL.YANDEX_MAP}>
+                  <Icons.Map className={s.Icon} />
+                </a>
+                <p className={s.Text}>
+                  <a href={ROUTES_EXTERNAL.YANDEX_MAP}>
+                    Сочи, ул. Навагинская д.9д, офис 35
+                  </a>
+                </p>
+              </div>
+              <div className={s.IconBox}>
+                <a href='tel:+79002413434'>
+                  <Icons.Phone className={s.Icon} />
+                </a>
+                <p className={s.Text}>
+                  <a href='tel:+79002413434'>+7 (900) 241-34-34</a>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className={s.Social}>
+            <h3 className={s.Title}>Социальные сети:</h3>
+            <div className={s.Row}>
+              <a href={ROUTES_EXTERNAL.WHATSAPP}>
+                <Icons.Whatsapp className={s.Icon} width={48} height={48} />
+              </a>
+              <a href={ROUTES_EXTERNAL.TELEGRAM}>
+                <Icons.Telegram className={s.Icon} width={48} height={48} />
+              </a>
+              <a href={ROUTES_EXTERNAL.VK}>
+                <Icons.Vk className={s.Icon} width={48} height={48} />
+              </a>
+              <a href={ROUTES_EXTERNAL.YOUTUBE}>
+                <Icons.Youtube className={s.Icon} width={48} height={48} />
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className={s.Container_gray}>
+        <div className={s.Bottom}>
+          © ООО “ДИ ТРАСО” |
+          <Link href={ROUTES.EMPTY}>Политика конфиденциальности</Link> |
+          <Link href={ROUTES.EMPTY}>Карта сайта</Link>
+        </div>
+      </div>
+    </footer>
+  );
 }
+
+export { Footer };

src/widgets/header/index.ts

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

src/widgets/header/ui.tsx

@@ -1,5 +1,13 @@
 import s from './styles.module.scss';
+import { BaseMenu, TopMenu } from '@/entities';
 
-export default function Header() {
+function Header() {
-  return <header className={s.Header}>header</header>;
+  return (
+    <header className={s.Header}>
+      <TopMenu />
+      <BaseMenu />
+    </header>
+  );
 }
+
+export { Header };

src/widgets/index.ts

@@ -0,0 +1,2 @@
+export * from './header';
+export * from './footer';