feat: add footer section

src/views/home/ui/contacts/contacts.module.scss

@@ -1,3 +1,119 @@
 .Contacts {
+  background: $color-lightgray;
+  border-radius: 28px;
+  padding: 160px;
 
+  .Header {
+    font-family: $font-open-sans;
+    font-weight: $font-semi-bold;
+    font-size: 60px;
+    line-height: 100%;
+    color: $color-text;
+    margin-bottom: 80px;
+  }
+
+  .Clients {
+    margin: 0 auto;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-items: center;
+    gap: 40px;
+    max-width: 1200px;
+    margin-bottom: 160px;
+
+    .Client {
+
+      img {
+        width: 300px;
+        height: auto;
+      }
+    }
+  }
+
+  .Form {
+    background: $color-white;
+    border-radius: 28px;
+    display: flex;
+    flex-direction: row;
+    padding: 60px 50px;
+    margin-bottom: 80px;
+
+    .Offer {
+      flex: 2;
+      display: flex;
+      flex-direction: column;
+
+
+      .Title {
+        font-family: $font-open-sans;
+        font-weight: $font-semi-bold;
+        font-size: 48px;
+        line-height: 100%;
+        color: $color-text-light;
+        margin-bottom: 80px;
+      }
+
+      .SubTitle {
+        font-family: $font-open-sans;
+        font-weight: $font-light;
+        font-size: 32px;
+        line-height: 100%;
+        color: $color-text-light;
+        max-width: 720px;
+      }
+    }
+
+    .Inputs {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+
+  .Map {
+    position: relative;
+
+    iframe {
+      border-radius: 28px;
+    }
+
+    .Contacts{
+      position: absolute;
+      z-index: 2;
+      top: -40px;
+      right: 180px;
+      border-radius: 28px;
+      background: $color-white;
+      width: 440px;
+      height: 540px;
+      padding: 40px 35px;
+
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: flex-start;
+
+      .Title{
+        font-family: $font-open-sans;
+        font-weight: $font-semi-bold;
+        font-size: 48px;
+        line-height: 100%;
+        color: $color-text;
+        text-align: right;
+        margin-bottom: 32px;
+        align-self: center;
+      }
+      .Address {
+        font-family: $font-open-sans;
+        font-weight: $font-regular;
+        font-size: 32px;
+        line-height: 130%;
+        color: $color-text;
+        margin-bottom: 32px;
+      }
+    }
+  }
 }

src/views/home/ui/contacts/contacts.tsx

@@ -1,5 +1,74 @@
 import s from './contacts.module.scss';
+import { Button, Mark } from '@shared/ui';
+
+import Image from 'next/image';
+
+import bogatyrLogo from '@public/images/logo-bogatyr.png';
+import sochiparkLogo from '@public/images/logo-sochipark.png';
+import chateauLogo from '@public/images/logo-chateau-de-talu.png';
+import gazpromLogo from '@public/images/logo-gazprom.png';
+import kraspolLogo from '@public/images/logo-kraspol.png';
 
 export default function Contacts() {
-  return <section className={s.Contacts}>Contacts</section>;
+  return (
+    <section className={s.Contacts}>
+      <h2 className={s.Header}>
+        Клиенты, которые <Mark>нам доверяют</Mark>
+      </h2>
+      <div className={s.Clients}>
+        {clientsLogos.map(({ logo }, idx) => (
+          <div key={idx} className={s.Client}>
+            <Image src={logo} alt='' />
+          </div>
+        ))}
+      </div>
+
+      <div className={s.Form}>
+        <div className={s.Offer}>
+          <h3 className={s.Title}>Остались вопросы?</h3>
+          <p className={s.SubTitle}>
+            Наш эксперт свяжется с вами для уточнения подробностей и определения
+            точной стоимости работ
+          </p>
+        </div>
+        <div className={s.Inputs}>
+          <input type='text' placeholder='Ваше имя' />
+          <input type='text' placeholder='+79991234567' />
+          <Button variant='orange'>Получить консультацию</Button>
+        </div>
+      </div>
+
+      <div className={s.Map}>
+        <iframe
+          src='https://yandex.ru/map-widget/v1/?um=constructor%3A7f1285c4f3e470bc9affa220323655ac72edd1be376c2579d421ca359ac46a7d&amp;source=constructor'
+          width='100%'
+          height='620'
+          frameBorder='0'
+        ></iframe>
+
+        <div className={s.Contacts}>
+          <h3 className={s.Title}>
+            Мы <Mark>всегда</Mark> <br /> на связи
+          </h3>
+          <p className={s.Address}>
+            Краснодарский край <br />
+            г.Сочи <br />
+            ТЦ «Атриум» <br />
+            ул. Навагинская д.9«Д» <br />
+            этаж 3, офис 35
+          </p>
+          <p className={s.Address}>+7 (988) 400 93 93</p>
+          <p className={s.Address}>office@firecheck.ru</p>
+        </div>
+      </div>
+    </section>
+  );
 }
+
+const clientsLogos = [
+  { logo: bogatyrLogo },
+  { logo: sochiparkLogo },
+  { logo: chateauLogo },
+  { logo: gazpromLogo },
+  { logo: kraspolLogo },
+];

src/views/home/ui/footer/footer.module.scss

@@ -1,2 +1,36 @@
 .Footer {
+  background-color: #1B1B25;
+  padding: 80px 160px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 20px;
+
+  .Header {
+    font-family: $font-open-sans;
+    font-weight: $font-semi-bold;
+    font-size: 60px;
+    line-height: 100%;
+    color: $color-white;
+    margin-bottom: 40px;
+  }
+
+  .Bottom {
+    width: 100%;
+    height: 80px;
+    border-top: 1px solid $color-white;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .Policy {
+      font-family: $font-open-sans;
+      font-weight: $font-regular;
+      font-size: 16px;
+      line-height: 100%;
+      color: $color-white;
+      margin-left: auto;
+    }
+  }
 }

src/views/home/ui/footer/footer.tsx

@@ -1,5 +1,27 @@
 import s from './footer.module.scss';
+import { Button, Mark } from '@shared/ui';
 
 export default function Footer() {
-  return <section className={s.Footer}>Footer</section>;
+  return (
+    <section className={s.Footer}>
+      <h2 className={s.Header}>
+        Давайте <Mark>обсудим</Mark> ваши задачи
+      </h2>
+
+      <input type='text' placeholder={'Ваше имя'} />
+      <input type='text' placeholder={'+7 999 1234567'} />
+      <textarea
+        name=''
+        id=''
+        placeholder={'Кратко опишите вашу задачу'}
+      ></textarea>
+      <Button variant={'orange'}>Отправить</Button>
+      <div className={s.Bottom}>
+        <div>TG</div>
+        <div>WA</div>
+        <div>+7 999 1234567</div>
+        <p className={s.Policy}>Политика конфиденциальности</p>
+      </div>
+    </section>
+  );
 }

src/views/home/ui/home.tsx

@@ -2,8 +2,8 @@ import Main from './main/main';
 import Offer from './offer/offer';
 import Result from './result/result';
 import License from './license/license';
-// import Contacts from './contacts/contacts';
+import Contacts from './contacts/contacts';
-// import Footer from './footer/footer';
+import Footer from './footer/footer';
 
 export default function HomePage() {
   return (
@@ -12,8 +12,8 @@ export default function HomePage() {
       <Offer />
       <Result />
       <License />
-      {/*<Contacts />*/}
+      <Contacts />
-      {/*<Footer />*/}
+      <Footer />
     </>
   );
 }

src/views/home/ui/main/main.tsx

@@ -50,7 +50,7 @@ export default function Main() {
           </ul>
         </div>
         <div className={s.Phone}>
-          <p className={s.Title}>+7 999 123 45 67</p>
+          <p className={s.Title}>+7 988 400 93 93</p>
           <Button variant='orange'>Получить консультацию</Button>
         </div>
       </div>

src/views/policy/index.ts

@@ -0,0 +1 @@
+export { default as PolicyPage } from './ui/policy';

src/views/policy/ui/policy.module.scss

@@ -0,0 +1,2 @@
+.Policy {
+}

src/views/policy/ui/policy.tsx

@@ -0,0 +1,5 @@
+import s from './policy.module.scss';
+
+export default function Policy() {
+  return <section className={s.Policy}>policy</section>;
+}