fix(footer): update styles

2025-12-03 09:23:47 +03:00
parent 7a7a466886
commit 18ebfa734a
3 changed files with 155 additions and 108 deletions
--- a/src/widgets/footer/styles.module.scss
+++ b/src/widgets/footer/styles.module.scss
@@ -15,12 +15,12 @@

 .Grid {
  margin: 0 auto;
-  max-width: 1540px;
-  padding: 20px 10px 20px;
+  max-width: rem(1540px);
+  padding: rem(20px) rem(10px) rem(20px);
  display: grid;
  grid-template-columns: auto;
  grid-auto-columns: 1fr;
-  gap: 40px 20px;
+  gap: rem(40px) rem(20px);
  grid-auto-flow: row;
  grid-template-areas:
    "about"
@@ -32,32 +32,32 @@
    grid-template-areas:
    "about about"
    "contacts social";
-    padding: 40px 20px 0;
-    gap: 20px 2px;
+    padding: rem(40px) rem(20px) 0;
+    gap: rem(20px) 0;
  }
  @include iflaptop {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:
    "about linksa linksb linksc"
    "contacts contacts social social";
-    padding: 40px 28px 0;
-    gap: 0px 0px;
+    padding: rem(40px) rem(28px) 0;
+    gap: 0 0;
  }
  @include ifdesktop {
-    padding: 40px 40px 0;
+    padding: rem(40px) rem(40px) 0;
  }

  .About {
    grid-area: about;

    .Image {
-      margin-bottom: 20px;
+      margin-bottom: rem(20px);
    }

    .Description {
      font-family: $font-roboto;
-      font-weight: $font-regular;
-      font-size: 20px;
+      font-weight: 400;
+      font-size: rem(20px);
      line-height: 160%;
      color: $color-white;
    }
@@ -65,7 +65,7 @@

  .LinksA {
    grid-area: linksa;
-    padding: 10px;
+    padding: rem(10px);
    display: none;
    @include iftablet {
    }
@@ -90,7 +90,7 @@

  .LinksB {
    grid-area: linksb;
-    padding: 10px;
+    padding: rem(10px);
    display: none;

    @include iflaptop {
@@ -112,7 +112,7 @@

  .LinksC {
    grid-area: linksc;
-    padding: 10px;
+    padding: rem(10px);
    display: none;

    @include iflaptop {
@@ -134,6 +134,9 @@

  .Contacts {
    grid-area: contacts;
+    border-top: 1px solid #4da49a;
+    margin-top: rem(20px);
+    padding-top: rem(20px);

    .Title {
      @extend %title;
@@ -143,7 +146,7 @@
      display: flex;
      flex-direction: column;
      justify-content: center;
-      gap: 24px;
+      gap: rem(24px);

      @include iflaptop {
        flex-direction: row;
@@ -154,7 +157,7 @@
        display: flex;
        flex-direction: row;
        align-items: center;
-        gap: 16px;
+        gap: rem(16px);

        @include iftablet {
        }
@@ -167,9 +170,9 @@

        .Icon {
          border-radius: 50%;
-          width: 48px;
-          height: 48px;
-          padding: 8px;
+          width: rem(48px);
+          height: rem(48px);
+          padding: rem(8px);
          background: $color-white;
        }

@@ -182,12 +185,15 @@

  .Social {
    grid-area: social;
+    border-top: 1px solid #4da49a;
+    margin-top: rem(20px);
+    padding-top: rem(20px);

    @include iflaptop {
-      padding-left: 100px;
+      padding-left: rem(100px);
    }
    @include ifdesktop {
-      padding-left: 200px;
+      padding-left: rem(200px);
    }

    .Title {
@@ -198,7 +204,7 @@
      display: flex;
      flex-direction: row;
      align-items: center;
-      gap: 20px;
+      gap: rem(20px);
    }

    .Icon {
@@ -209,27 +215,27 @@

 .Bottom {
  margin: 0 auto;
-  max-width: 1540px;
+  max-width: rem(1540px);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
-  padding: 16px 10px;
+  padding: rem(16px) rem(10px);

  font-family: $font-roboto;
-  font-weight: $font-regular;
-  font-size: 16px;
+  font-weight: 400;
+  font-size: rem(16px);
  line-height: 100%;
  color: $color-white;

  @include iftablet {
-    padding: 16px 20px;
+    padding: rem(16px) rem(20px);
  }
  @include iflaptop {
-    padding: 16px 28px;
+    padding: rem(16px) rem(28px);
  }
  @include ifdesktop {
-    padding: 16px 40px;
+    padding: rem(16px) rem(40px);
  }

  .List {
@@ -259,7 +265,7 @@
  & a {
    text-decoration: none;
    color: $color-link-hover;
-    margin: 0 8px;
+    margin: 0 rem(8px);

    &:hover {
      text-decoration: underline;
@@ -269,11 +275,11 @@

 %title {
  font-family: $font-roboto;
-  font-weight: $font-regular;
+  font-weight: 400;
  font-size: 20px;
  line-height: 100%;
  color: $color-white;
-  margin-bottom: 20px;
+  margin-bottom: rem(20px);
 }

 %list {
@@ -281,22 +287,24 @@
  flex-direction: column;
  gap: 10px;
  list-style: disc;
+  margin-left: rem(40px);
 }

 %list-item {
  font-family: $font-roboto;
-  font-weight: $font-regular;
-  font-size: 16px;
+  font-weight: 300;
+  font-size: rem(16px);
  line-height: 130%;
  color: $color-white;
-  margin-left: 20px;
+  &:hover{
+    text-decoration: underline;
+  }
 }

 %icon-desc {
  font-family: $font-roboto;
-  font-weight: $font-regular;
-  font-size: 18px;
+  font-size: rem(18px);
  line-height: 100%;
  color: $color-white;
-  margin-bottom: 20px;
+  margin-bottom: rem(20px);
 }
--- a/src/widgets/footer/ui.tsx
+++ b/src/widgets/footer/ui.tsx
@@ -22,38 +22,100 @@ function Footer() {
          <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}>
-                Оценка стоимости предприятия (бизнеса)
+                <Link href={ROUTES.OCENKA_NEDVIGA}>
+                  Оценка жилой недвижимости
+                </Link>
+              </li>
+              <li className={s.ListItem}>
+                <Link href={ROUTES.OCENKA_ZDANIE}>
+                  Оценка коммерческой недвижимости
+                </Link>
+              </li>
+              <li className={s.ListItem}>
+                <Link href={ROUTES.OCENKA_USCHERB_NEDVIGI}>
+                  Оценка ущерба недвижимости
+                </Link>
+              </li>
+              <li className={s.ListItem}>
+                <Link href={ROUTES.OCENKA_SOORUZHENIE}>Оценка сооружений</Link>
+              </li>
+              <li className={s.ListItem}>
+                <Link href={ROUTES.OCENKA_MASHINES}>
+                  Оценка машин и оборудования
+                </Link>
+              </li>
+              <li className={s.ListItem}>
+                <Link href={ROUTES.OCENKA_BUSINESS}>
+                  Оценка стоимости предприятия (бизнеса)
+                </Link>
              </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>
+              <li className={s.ListItem}>
+                <Link href={ROUTES.EXPERTIZA_AUTOTECH}>
+                  Автотехническая экспертиза
+                </Link>
+              </li>
+              <li className={s.ListItem}>
+                <Link href={ROUTES.EXPERTIZA_TOVAR}>
+                  Товароведческая экспертиза
+                </Link>
+              </li>
+              <li className={s.ListItem}>
+                <Link href={ROUTES.EXPERTIZA_TRASOLOGIA}>
+                  Трасологическая экспертиза
+                </Link>
+              </li>
+              <li className={s.ListItem}>
+                <Link href={ROUTES.EXPERTIZA_KADASTR}>
+                  Кадастровая экспертиза
+                </Link>
+              </li>
+              <li className={s.ListItem}>
+                <Link href={ROUTES.EXPERTIZA_STROIT}>
+                  Строительно-техническая экспертиза
+                </Link>
+              </li>
+              <li className={s.ListItem}>
+                <Link href={ROUTES.EXPERTIZA_OCENKI}>Оценочная экспертиза</Link>
+              </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}>
-                Сопровождение сделок и составление договоров
+                <Link href={ROUTES.JURIST_NASLEDSTVO}>
+                  Семейные и наследственные споры
+                </Link>
+              </li>
+              <li className={s.ListItem}>
+                <Link href={ROUTES.JURIST_ZEMLYA_IMUSHESTVO}>
+                  Земельные и имущественные споры
+                </Link>
+              </li>
+              <li className={s.ListItem}>
+                <Link href={ROUTES.JURIST_DOLGI}>
+                  Взыскание долгов с юридических лиц
+                </Link>
+              </li>
+              <li className={s.ListItem}>
+                <Link href={ROUTES.JURIST_STRAHOVKA}>Страховые споры</Link>
+              </li>
+              <li className={s.ListItem}>
+                <Link href={ROUTES.JURIST_SDELKI_DOGOVORA}>
+                  Сопровождение сделок и составление договоров
+                </Link>
+              </li>
+              <li className={s.ListItem}>
+                <Link href={ROUTES.JURIST_PREDSTAVITELSTVO}>
+                  Представительство в суде
+                </Link>
              </li>
-              <li className={s.ListItem}>Представительство в суде</li>
            </ol>
          </div>
          <div className={s.Contacts}>