From e407a729de354ed6b07cb1ea4e1afc575ac8bade Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <mr.aydogdy02@gmail.com>
Date: Wed, 27 Jul 2022 20:55:46 +0500
Subject: [PATCH] aboutus page started

---
 src/App.tsx                   |  2 ++
 src/components/global/Nav.tsx |  2 +-
 src/helpers/apiRequests.ts    | 10 ++++++
 src/links.ts                  |  2 ++
 src/pages/AboutUs.tsx         | 63 +++++++++++++++++++++++++++++++++++
 src/styles/_about-us.scss     | 37 ++++++++++++++++++++
 src/styles/_variables.scss    |  9 +++++
 src/styles/style.scss         |  1 +
 8 files changed, 125 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/AboutUs.tsx
 create mode 100644 src/styles/_about-us.scss

diff --git a/src/App.tsx b/src/App.tsx
index fa27028..0953df7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -22,6 +22,7 @@ import Profile from "./pages/Profile";
 import EventItem from "./pages/EventItem";
 import Structure from "./pages/Structure";
 import Contacts from "./pages/Contact";
+import AboutUs from "./pages/AboutUs";
 
 const App = () => {
   // Types
@@ -50,6 +51,7 @@ const App = () => {
             <Route path="/event/:eventId" element={<EventItem />} />
             <Route path="/structure" element={<Structure />} />
             <Route path="/contact" element={<Contacts />} />
+            <Route path="/about-us" element={<AboutUs />} />
           </Routes>
         </div>
         <Footer dropdown={dropdown} setDropdown={setDropdown} />
diff --git a/src/components/global/Nav.tsx b/src/components/global/Nav.tsx
index f8ab669..cfde662 100644
--- a/src/components/global/Nav.tsx
+++ b/src/components/global/Nav.tsx
@@ -40,7 +40,7 @@ const Nav = ({ dropdown, setDropdown }: dropdown) => {
                   }
                 >
                   <li>
-                    <Link to={"/"}>О федерации</Link>
+                    <Link to={"/about-us"}>О федерации</Link>
                   </li>
                   <li>
                     <Link to={"/structure"}>Структура федерации</Link>
diff --git a/src/helpers/apiRequests.ts b/src/helpers/apiRequests.ts
index 64c9272..2bafd86 100644
--- a/src/helpers/apiRequests.ts
+++ b/src/helpers/apiRequests.ts
@@ -14,6 +14,7 @@ import {
   videos,
   structure,
   contacts,
+  about,
 } from "../links";
 import React from "react";
 
@@ -112,3 +113,12 @@ export const getContact = (setState: any) => {
     })
     .catch();
 };
+
+export const getAbout = (setState: any) => {
+  axios
+    .get(about)
+    .then((res) => {
+      setState(res.data.data);
+    })
+    .catch();
+};
diff --git a/src/links.ts b/src/links.ts
index a560223..e07b678 100644
--- a/src/links.ts
+++ b/src/links.ts
@@ -17,3 +17,5 @@ export const videos: string = hosting + "/api/v1/videos";
 export const structure: string = hosting + "/api/v1/structure";
 
 export const contacts: string = hosting + "/api/v1/contact-info";
+
+export const about: string = hosting + "/api/v1/about";
diff --git a/src/pages/AboutUs.tsx b/src/pages/AboutUs.tsx
new file mode 100644
index 0000000..1d980ac
--- /dev/null
+++ b/src/pages/AboutUs.tsx
@@ -0,0 +1,63 @@
+// Modules
+import React, { useState, useEffect } from "react";
+import Skeleton from "react-loading-skeleton";
+
+// Helpers
+import { getAbout } from "../helpers/apiRequests";
+import { highlightColor } from "../helpers/otherVariables";
+import { hosting } from "../links";
+
+const AboutUs = () => {
+  const [about, setAbout]: [any, React.Dispatch<any>] = useState();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+  useEffect(() => {
+    getAbout(setAbout);
+  }, []);
+
+  return (
+    <main className="about-us">
+      <div className="container">
+        <div className="about-us-inner">
+          <div className="about-us-top">
+            <div className="aut-left">
+              {about ? (
+                <h2>{about[0].header}</h2>
+              ) : (
+                <Skeleton
+                  highlightColor={highlightColor}
+                  height={"5.4rem"}
+                  width={"45%"}
+                />
+              )}
+
+              {about ? (
+                <p>{about[0].txt}</p>
+              ) : (
+                <Skeleton
+                  highlightColor={highlightColor}
+                  height={"1.4rem"}
+                  width={"100%"}
+                  count={12}
+                />
+              )}
+            </div>
+            <div className="aut-right">
+              {about ? (
+                <div>
+                  <img src={hosting + about[0].img} alt="" />
+                </div>
+              ) : (
+                <Skeleton height={"100%"} />
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default AboutUs;
diff --git a/src/styles/_about-us.scss b/src/styles/_about-us.scss
new file mode 100644
index 0000000..0341a5f
--- /dev/null
+++ b/src/styles/_about-us.scss
@@ -0,0 +1,37 @@
+.about-us-inner {
+  padding: 8rem 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8rem;
+}
+
+.about-us-top {
+  @include grid($layout: 1fr 1fr, $row: false);
+  align-items: center;
+  gap: 9.5rem;
+}
+
+.aut-left {
+  display: flex;
+  flex-direction: column;
+  gap: 4rem;
+
+  h2 {
+    font-size: 4rem;
+  }
+
+  p {
+    font-size: 1.8rem;
+  }
+}
+
+.aut-right {
+  div {
+    height: 49.8rem;
+    img {
+      height: 49.8rem;
+      width: 100%;
+      object-fit: cover;
+    }
+  }
+}
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 1f7e96c..4402d40 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -69,3 +69,12 @@ $hover-green: #0e654e;
     background: #7d7d7d !important;
   }
 }
+
+@mixin grid($row, $layout) {
+  display: grid;
+  @if $row {
+    grid-template-rows: $layout;
+  } @else {
+    grid-template-columns: $layout;
+  }
+}
diff --git a/src/styles/style.scss b/src/styles/style.scss
index ae8946a..6c28e3d 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -15,3 +15,4 @@
 @import "./contact";
 @import "./calendar";
 @import "./video-player";
+@import "./about-us";