fix: footer

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() {
-  return <footer className={s.Footer}>footer</footer>;
+function 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() {
-  return <header className={s.Header}>header</header>;
+function 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';