aboutus page started

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} />

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>

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();
+};

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";

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;

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;
+    }
+  }
+}

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;
+  }
+}

src/styles/style.scss

@@ -15,3 +15,4 @@
 @import "./contact";
 @import "./calendar";
 @import "./video-player";
+@import "./about-us";