From a01b87dc3fd026a4c9e00711394104d1990b09c2 Mon Sep 17 00:00:00 2001
From: Kakabay <kashyrberdyew@gmail.com>
Date: Sat, 21 Jan 2023 15:06:50 +0500
Subject: [PATCH] footer

---
 src/App.tsx                           | 10 +++--
 src/assets/icons/mail-white.svg       | 10 +++++
 src/assets/icons/navigation-white.svg | 10 +++++
 src/assets/icons/phone-white.svg      | 10 +++++
 src/components/footer/Footer.tsx      | 63 +++++++++++++++++++++++++++
 src/styles/_footer.scss               | 61 ++++++++++++++++++++++++++
 src/styles/style.scss                 |  7 +--
 7 files changed, 164 insertions(+), 7 deletions(-)
 create mode 100644 src/assets/icons/mail-white.svg
 create mode 100644 src/assets/icons/navigation-white.svg
 create mode 100644 src/assets/icons/phone-white.svg
 create mode 100644 src/components/footer/Footer.tsx
 create mode 100644 src/styles/_footer.scss

diff --git a/src/App.tsx b/src/App.tsx
index a03ba17..a136612 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,14 +1,15 @@
 // Modules
-import { Routes, Route } from "react-router-dom";
+import { Routes, Route } from 'react-router-dom';
 
 // Styles
-import "./styles/style.scss";
+import './styles/style.scss';
 
 // Pages
-import Main from "./pages/Main";
+import Main from './pages/Main';
 
 // Static
-import Header from "./components/header/Header";
+import Header from './components/header/Header';
+import Footer from './components/footer/Footer';
 
 const App = () => {
   return (
@@ -17,6 +18,7 @@ const App = () => {
       <Routes>
         <Route path="/" element={<Main />} />
       </Routes>
+      <Footer />
     </div>
   );
 };
diff --git a/src/assets/icons/mail-white.svg b/src/assets/icons/mail-white.svg
new file mode 100644
index 0000000..b550a40
--- /dev/null
+++ b/src/assets/icons/mail-white.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_38_3509)">
+<path d="M19 4H5C4.20435 4 3.44129 4.31607 2.87868 4.87868C2.31607 5.44129 2 6.20435 2 7V17C2 17.7956 2.31607 18.5587 2.87868 19.1213C3.44129 19.6839 4.20435 20 5 20H19C19.7956 20 20.5587 19.6839 21.1213 19.1213C21.6839 18.5587 22 17.7956 22 17V7C22 6.20435 21.6839 5.44129 21.1213 4.87868C20.5587 4.31607 19.7956 4 19 4ZM18.33 6L12 10.75L5.67 6H18.33ZM19 18H5C4.73478 18 4.48043 17.8946 4.29289 17.7071C4.10536 17.5196 4 17.2652 4 17V7.25L11.4 12.8C11.5731 12.9298 11.7836 13 12 13C12.2164 13 12.4269 12.9298 12.6 12.8L20 7.25V17C20 17.2652 19.8946 17.5196 19.7071 17.7071C19.5196 17.8946 19.2652 18 19 18Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_38_3509">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icons/navigation-white.svg b/src/assets/icons/navigation-white.svg
new file mode 100644
index 0000000..6c189b3
--- /dev/null
+++ b/src/assets/icons/navigation-white.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_38_3516)">
+<path d="M13.67 22.0001H13.61C13.3899 21.9868 13.1804 21.9012 13.014 21.7565C12.8476 21.6118 12.7337 21.4162 12.69 21.2001L11 13.0001L2.80001 11.3101C2.58348 11.2671 2.38727 11.1536 2.24197 10.9874C2.09666 10.8212 2.01044 10.6116 1.99674 10.3913C1.98304 10.1709 2.04264 9.95227 2.16623 9.76935C2.28983 9.58643 2.47048 9.44956 2.68001 9.38006L18.68 4.05006C18.8596 3.9759 19.0569 3.95567 19.2478 3.99185C19.4387 4.02802 19.615 4.11903 19.755 4.25374C19.895 4.38846 19.9928 4.56105 20.0363 4.75042C20.0798 4.93979 20.0672 5.13773 20 5.32006L14.67 21.3201C14.6004 21.527 14.465 21.7056 14.2844 21.8283C14.1039 21.9511 13.8881 22.0114 13.67 22.0001ZM6.87001 10.1001L12.06 11.1601C12.254 11.1975 12.4326 11.2915 12.5732 11.4304C12.7138 11.5692 12.8101 11.7465 12.85 11.9401L13.9 17.1301L17.42 6.58006L6.87001 10.1001Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_38_3516">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icons/phone-white.svg b/src/assets/icons/phone-white.svg
new file mode 100644
index 0000000..6b25b7b
--- /dev/null
+++ b/src/assets/icons/phone-white.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_38_3502)">
+<path d="M17.4 22.0001C13.3173 21.9948 9.40331 20.3706 6.5164 17.4837C3.62949 14.5968 2.00529 10.6828 2 6.60011C2 5.38012 2.48464 4.21009 3.34731 3.34742C4.20998 2.48476 5.38 2.00011 6.6 2.00011C6.85834 1.99815 7.11625 2.02159 7.37 2.07011C7.61531 2.10641 7.85647 2.1667 8.09 2.25011C8.25425 2.30774 8.40061 2.40725 8.51461 2.53879C8.62861 2.67033 8.7063 2.82934 8.74 3.00011L10.11 9.00011C10.1469 9.16298 10.1425 9.33249 10.0971 9.4932C10.0516 9.6539 9.96671 9.80067 9.85 9.92011C9.72 10.0601 9.71 10.0701 8.48 10.7101C9.46499 12.871 11.1932 14.6063 13.35 15.6001C14 14.3601 14.01 14.3501 14.15 14.2201C14.2694 14.1034 14.4162 14.0185 14.5769 13.9731C14.7376 13.9276 14.9071 13.9232 15.07 13.9601L21.07 15.3301C21.2353 15.3685 21.3881 15.4483 21.5141 15.562C21.64 15.6757 21.735 15.8196 21.79 15.9801C21.8744 16.2175 21.938 16.4617 21.98 16.7101C22.0202 16.9614 22.0403 17.2156 22.04 17.4701C22.0216 18.6849 21.5233 19.8431 20.654 20.6918C19.7847 21.5405 18.6149 22.0108 17.4 22.0001ZM6.6 4.00011C5.91125 4.00275 5.25146 4.27752 4.76443 4.76455C4.27741 5.25157 4.00263 5.91136 4 6.60011C4.00265 10.1532 5.41528 13.56 7.92769 16.0724C10.4401 18.5848 13.8469 19.9975 17.4 20.0001C18.0888 19.9975 18.7485 19.7227 19.2356 19.2357C19.7226 18.7487 19.9974 18.0889 20 17.4001V17.0701L15.36 16.0001L15.07 16.5501C14.62 17.4201 14.29 18.0501 13.45 17.7101C11.7929 17.117 10.2887 16.1621 9.04673 14.915C7.80477 13.6678 6.85622 12.1597 6.27 10.5001C5.91 9.72011 6.59 9.36011 7.45 8.91011L8 8.64011L6.93 4.00011H6.6Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_38_3502">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx
new file mode 100644
index 0000000..9be2baf
--- /dev/null
+++ b/src/components/footer/Footer.tsx
@@ -0,0 +1,63 @@
+// Modules
+import { Link } from 'react-router-dom';
+
+// Icons
+import { ReactComponent as Phone } from '../../assets/icons/phone-white.svg';
+import { ReactComponent as Mail } from '../../assets/icons/mail-white.svg';
+import { ReactComponent as Navigation } from '../../assets/icons/navigation-white.svg';
+
+const Footer = () => {
+  return (
+    <footer className="footer">
+      <div className="container">
+        <div className="footer-inner">
+          <div className="footer-left">
+            <ul>
+              <li>
+                <Link to="/">Главная</Link>
+              </li>
+              <li>
+                <Link to="/">Реклама на сайте</Link>
+              </li>
+              <li>
+                <Link to="/">О нас</Link>
+              </li>
+            </ul>
+          </div>
+          <div className="footer-mid">
+            <ul className="footer-list">
+              <li className="footer-list-item">
+                <Phone />
+                <a href="tel: +99312680792">(993) 12 68-07-92, 94-08-01</a>
+              </li>
+              <li className="footer-list-item">
+                <Mail />
+                <a href="mailto: turkmen@info.tm">turkmen@info.tm</a>
+              </li>
+              <li className="footer-list-item">
+                <Navigation />
+                <ul className="footer-list-inner">
+                  <li>
+                    <p>
+                      115184, Ашхабад, Битарап шаелы, 25 <br /> (Центр телерадиовещания
+                      Туркменистана)
+                    </p>
+                  </li>
+                  <li>
+                    <a href="tel: +99312781399">Реклама на ТВ и радио: (993) 12 78-13-99</a>
+                  </li>
+                  <li>
+                    <a href="tel: +99312781399">Реклама на сайте: (993) 12 78-13-99</a>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </div>
+          <div className="footer-right"></div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/src/styles/_footer.scss b/src/styles/_footer.scss
new file mode 100644
index 0000000..ac16fbc
--- /dev/null
+++ b/src/styles/_footer.scss
@@ -0,0 +1,61 @@
+.footer {
+  padding: 6.4rem;
+  background: $main;
+}
+
+.footer-inner {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 3.2rem;
+  justify-content: space-between;
+}
+
+.footer-left,
+.footer-mid,
+.footer-right {
+  justify-self: flex-start;
+}
+
+.footer-left {
+  ul {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1.6rem;
+    a {
+      color: $white;
+      font-size: 1.6rem;
+    }
+  }
+}
+
+.footer-list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1.6rem;
+}
+
+.footer-list-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 2.4rem;
+  svg {
+    width: 2.4rem;
+    height: 2.4rem;
+  }
+
+  a,
+  p {
+    color: $white;
+    font-size: 1.6rem;
+    line-height: 2.2rem;
+  }
+}
+
+.footer-list-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1.6rem;
+}
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 5e7e00b..57dcda3 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -1,3 +1,4 @@
-@import "./variables";
-@import "./general";
-@import "./header";
+@import './variables';
+@import './general';
+@import './header';
+@import './footer';