about us page finished

src/components/about_us/TeamSlider.tsx

@@ -0,0 +1,81 @@
+// Modules
+import React, { useState, useEffect } from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Navigation, Autoplay } from "swiper";
+import { v4 as uuidv4 } from "uuid";
+
+// Helpers
+import { getTeam } from "../../helpers/apiRequests";
+import { hosting } from "../../links";
+import { highlightColor } from "../../helpers/otherVariables";
+
+// Icons
+import arrowPrev from "../../icons/arrow-left-green.svg";
+import arrowNext from "../../icons/arrow-right-green.svg";
+import Skeleton from "react-loading-skeleton";
+
+const TeamSlider = () => {
+  const [team, setTeam]: [any, React.Dispatch<any>] = useState();
+
+  useEffect(() => {
+    getTeam(setTeam);
+  }, []);
+
+  return (
+    <div className="team">
+      <Swiper
+        modules={[Navigation, Autoplay]}
+        autoplay={{ delay: 3000 }}
+        spaceBetween={48}
+        slidesPerView={4}
+        loop={true}
+        navigation={{
+          nextEl: ".slider-next",
+          prevEl: ".slider-prev",
+        }}
+      >
+        {team
+          ? team.map((el: any) => {
+              if (el.national) {
+                return (
+                  <SwiperSlide key={uuidv4()}>
+                    <div className="team-slide">
+                      <div className="team-img">
+                        <img src={hosting + el.img} alt="" />
+                      </div>
+                      <h4>{el.name}</h4>
+                    </div>
+                  </SwiperSlide>
+                );
+              }
+            })
+          : ["", "", "", "", "", ""].map(() => {
+              return (
+                <SwiperSlide key={uuidv4()}>
+                  <div className="team-skeleton">
+                    <Skeleton
+                      width={"100%"}
+                      height={"35rem"}
+                      highlightColor={highlightColor}
+                    />
+                    <Skeleton
+                      width={"20rem"}
+                      height={"2.5rem"}
+                      highlightColor={highlightColor}
+                    />
+                  </div>
+                </SwiperSlide>
+              );
+            })}
+      </Swiper>
+      <div className="slider-prev slider-next-white slider-next-white-prev">
+        <img src={arrowPrev} alt="" />
+      </div>
+      <div className="slider-next slider-next-white slider-next-white-next">
+        <img src={arrowNext} alt="" />
+      </div>
+    </div>
+  );
+};
+
+export default TeamSlider;

src/helpers/apiRequests.ts

@@ -15,6 +15,7 @@ import {
   structure,
   contacts,
   about,
+  players,
 } from "../links";
 import React from "react";
 
@@ -122,3 +123,12 @@ export const getAbout = (setState: any) => {
     })
     .catch();
 };
+
+export const getTeam = (setState: any) => {
+  axios
+    .get(players)
+    .then((res) => {
+      setState(res.data.data);
+    })
+    .catch();
+};

src/links.ts

@@ -1,4 +1,4 @@
-export const hosting: string = "http://tkf.com.tm:8080";
+export const hosting: string = "http://tkf.com.tm/app";
 export const sliderDataUrl: string = hosting + "/api/v1/sliders";
 export const partners: string = hosting + "/api/v1/partners";
 export const postsMain: string =
@@ -19,3 +19,5 @@ 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";
+
+export const players: string = hosting + "/api/v1/players";

src/pages/AboutUs.tsx

@@ -3,21 +3,26 @@ import React, { useState, useEffect } from "react";
 import Skeleton from "react-loading-skeleton";
 
 // Helpers
-import { getAbout } from "../helpers/apiRequests";
+import { getAbout, getVideos } from "../helpers/apiRequests";
 import { highlightColor } from "../helpers/otherVariables";
 import { hosting } from "../links";
 
 // Components
 import Statistic from "../components/about_us/Statistic";
+import VideoPlayer from "../components/global/VideoPlayer";
+import SectionTitle from "../components/global/SectionTitle";
+import TeamSlider from "../components/about_us/TeamSlider";
 
 const AboutUs = () => {
   const [about, setAbout]: [any, React.Dispatch<any>] = useState();
+  const [video, setVideo]: [any, React.Dispatch<any>] = useState();
 
   useEffect(() => {
     window.scrollTo(0, 0);
   }, []);
   useEffect(() => {
     getAbout(setAbout);
+    getVideos(setVideo);
   }, []);
 
   return (
@@ -142,6 +147,17 @@ const AboutUs = () => {
               </div>
             )}
           </div>
+          <div className="about-us-slider">
+            <TeamSlider />
+          </div>
+          <div className="about-us-video">
+            <SectionTitle title="Вводный видео ролик" />
+            {video ? (
+              <VideoPlayer videoUrl={video[0].video} />
+            ) : (
+              <Skeleton highlightColor={highlightColor} height={"40rem"} />
+            )}
+          </div>
         </div>
       </div>
     </main>

src/styles/_about-us.scss

@@ -82,3 +82,45 @@
   font-size: 1.8rem;
   max-width: 20rem;
 }
+
+.about-us-video {
+  display: flex;
+  flex-direction: column;
+  gap: 4.8rem;
+}
+
+.team {
+  position: relative;
+}
+
+.team-skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+  text-align: center;
+}
+
+.team-slide {
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+  text-align: center;
+
+  .team-img {
+    max-width: 30rem;
+    max-height: 35rem;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  h4 {
+    font-size: 1.8rem;
+  }
+}

src/styles/_video-player.scss

@@ -1,6 +1,7 @@
 .player {
   width: 100%;
   min-height: 51.2rem;
+  height: 100%;
 
   img {
     pointer-events: none;
@@ -18,6 +19,7 @@
   position: relative;
   background: #000000a6;
   width: 100%;
+  min-height: 51.2rem;
   height: 100%;
 
   img {