From ff6e1bdb484f10cab1a9a43b8a44157cfc243004 Mon Sep 17 00:00:00 2001
From: Kakabay <kashyrberdyew@gmail.com>
Date: Thu, 13 Oct 2022 17:27:53 +0500
Subject: [PATCH] footer

---
 src/assets/styles/_documents.scss |  4 ++
 src/assets/styles/_footer.scss    | 61 +++++++++++++++++++++++
 src/assets/styles/style.scss      |  1 +
 src/components/Footer.jsx         | 82 +++++++++++++++++++++++++++++++
 src/pages/Home.jsx                | 10 ++++
 5 files changed, 158 insertions(+)
 create mode 100644 src/assets/styles/_footer.scss
 create mode 100644 src/components/Footer.jsx

diff --git a/src/assets/styles/_documents.scss b/src/assets/styles/_documents.scss
index 0fe9be1..98b64d9 100644
--- a/src/assets/styles/_documents.scss
+++ b/src/assets/styles/_documents.scss
@@ -1,3 +1,7 @@
+.documents {
+  margin-bottom: 3.2rem;
+}
+
 .documents-wrapper {
   display: flex;
   flex-direction: column;
diff --git a/src/assets/styles/_footer.scss b/src/assets/styles/_footer.scss
new file mode 100644
index 0000000..cf8ef9c
--- /dev/null
+++ b/src/assets/styles/_footer.scss
@@ -0,0 +1,61 @@
+.footer-top {
+  padding: 4.8rem 0;
+  background: $base-light-blue;
+}
+
+.footer-top-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 4.8rem;
+}
+
+.footer-top-content {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 2.4rem;
+}
+
+.footer-top-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+
+  &:nth-child(3) {
+    .footer-top-item-text {
+      text-decoration: underline;
+    }
+  }
+}
+
+.footer-top-item-title {
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: $base-blue;
+}
+
+.footer-top-item-text {
+  font-size: 1.8rem;
+  color: $base-black;
+  font-weight: 400;
+}
+
+.footer-bottom {
+  padding: 4.8rem 0;
+  background: $base-blue;
+}
+
+.footer-nav-list {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.6rem;
+}
+
+.footer-nav-list-link {
+  font-size: 1.8rem;
+  color: $base-gray;
+  transition: all 0.3s linear;
+
+  &:hover {
+    color: $base-white;
+  }
+}
diff --git a/src/assets/styles/style.scss b/src/assets/styles/style.scss
index 26f5a8b..c1832f8 100644
--- a/src/assets/styles/style.scss
+++ b/src/assets/styles/style.scss
@@ -11,3 +11,4 @@
 @import './newsPost';
 @import './documents';
 @import './documentLink';
+@import './footer';
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
new file mode 100644
index 0000000..85e9fd7
--- /dev/null
+++ b/src/components/Footer.jsx
@@ -0,0 +1,82 @@
+// Modules
+import { Link } from 'react-router-dom';
+// Components
+import SectionTitle from './SectionTitle';
+
+const Footer = () => {
+  return (
+    <footer className="footer">
+      <div className="footer-top">
+        <div className="container">
+          <div className="footer-top-wrapper">
+            <SectionTitle title="Контакты" />
+            <div className="footer-top-content">
+              <div className="footer-top-item">
+                <h3 className="footer-top-item-title">Телефон:</h3>
+                <h4 className="footer-top-item-text">+993 12 44-60-15</h4>
+              </div>
+              <div className="footer-top-item">
+                <h3 className="footer-top-item-title">Время работы:</h3>
+                <h4 className="footer-top-item-text">Понедельник - пятница: с 9-00 по 18-00</h4>
+              </div>
+              <div className="footer-top-item">
+                <h3 className="footer-top-item-title">Email:</h3>
+                <Link to={'/'} className="footer-top-item-text">
+                  info@exchange.gov.tm
+                </Link>
+                <Link to={'/'} className="footer-top-item-text">
+                  broker@exchange.gov.tm
+                </Link>
+              </div>
+              <div className="footer-top-item">
+                <h3 className="footer-top-item-title">Приемные дни:</h3>
+                <h4 className="footer-top-item-text">Понедельник - четверг: с 9-00 по 17-00</h4>
+                <h4 className="footer-top-item-text">Пятница: с 9-00 по 13-00</h4>
+              </div>
+              <div className="footer-top-item">
+                <h3 className="footer-top-item-title">Адресс::</h3>
+                <h4 className="footer-top-item-text">
+                  744000, Туркменистан г. Ашхабат, Арчабиль шаелы 52
+                </h4>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="footer-bottom">
+        <div className="container">
+          <div className="footer-bottom-wrapper">
+            <ul className="footer-nav-list">
+              <li className="footer-nav-list-item">
+                <Link className="footer-nav-list-link">ГТСБТ</Link>
+              </li>
+              <li className="footer-nav-list-item">
+                <Link className="footer-nav-list-link">Нормативная база</Link>
+              </li>
+              <li className="footer-nav-list-item">
+                <Link className="footer-nav-list-link">Биржевые торги</Link>
+              </li>
+              <li className="footer-nav-list-item">
+                <Link className="footer-nav-list-link">Мильтимедия</Link>
+              </li>
+              <li className="footer-nav-list-item">
+                <Link className="footer-nav-list-link">Финансовый мониторинг</Link>
+              </li>
+              <li className="footer-nav-list-item">
+                <Link className="footer-nav-list-link">Новости</Link>
+              </li>
+              <li className="footer-nav-list-item">
+                <Link className="footer-nav-list-link">Регистрация договоров</Link>
+              </li>
+              <li className="footer-nav-list-item">
+                <Link className="footer-nav-list-link">Контакты</Link>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index d42facd..5bd5f5b 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -8,13 +8,19 @@ import Ticker from '../components/Ticker';
 import arrow from '../assets/icons/arrow.svg';
 import NewsPost from '../components/NewsPost';
 import DocumentLink from '../components/DocumentLink';
+import Footer from '../components/Footer';
 
 const Home = () => {
   return (
     <main className="home-main">
       <div>
+        {/* Hero section */}
         <Hero />
+        {/* Hero section ./ =========== */}
+
+        {/* Ticker section */}
         <Ticker />
+        {/* Ticker section ./ =========== */}
       </div>
 
       {/* About section */}
@@ -97,6 +103,10 @@ const Home = () => {
         </div>
       </section>
       {/* Documents section ./========= */}
+
+      {/* Footer section */}
+      <Footer />
+      {/* Footer section ./========= */}
     </main>
   );
 };