From d212071fa0a04a39fdada7e0ad7bf7cfd200730a Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <mr.aydogdy02@gmail.com>
Date: Fri, 29 Jul 2022 15:20:28 +0500
Subject: [PATCH] new section

---
 src/components/about_us/Statistic.tsx | 18 ++++++
 src/pages/AboutUs.tsx                 | 90 ++++++++++++++++++++++++++-
 src/styles/_about-us.scss             | 47 ++++++++++++++
 3 files changed, 154 insertions(+), 1 deletion(-)
 create mode 100644 src/components/about_us/Statistic.tsx

diff --git a/src/components/about_us/Statistic.tsx b/src/components/about_us/Statistic.tsx
new file mode 100644
index 0000000..ca0d3a5
--- /dev/null
+++ b/src/components/about_us/Statistic.tsx
@@ -0,0 +1,18 @@
+// Types
+interface Props {
+  count: number;
+  title: string;
+}
+
+const Statistic = ({ count, title }: Props) => {
+  return (
+    <div className="stat">
+      <div className="stat-square">
+        <span>{count}</span>
+      </div>
+      <p className="stat-title">{title}</p>
+    </div>
+  );
+};
+
+export default Statistic;
diff --git a/src/pages/AboutUs.tsx b/src/pages/AboutUs.tsx
index 1d980ac..ef737e9 100644
--- a/src/pages/AboutUs.tsx
+++ b/src/pages/AboutUs.tsx
@@ -7,6 +7,9 @@ import { getAbout } from "../helpers/apiRequests";
 import { highlightColor } from "../helpers/otherVariables";
 import { hosting } from "../links";
 
+// Components
+import Statistic from "../components/about_us/Statistic";
+
 const AboutUs = () => {
   const [about, setAbout]: [any, React.Dispatch<any>] = useState();
 
@@ -50,10 +53,95 @@ const AboutUs = () => {
                   <img src={hosting + about[0].img} alt="" />
                 </div>
               ) : (
-                <Skeleton height={"100%"} />
+                <Skeleton height={"49.8rem"} />
               )}
             </div>
           </div>
+          <div className="about-us-middle">
+            {about ? (
+              <div className="aub-wrapper">
+                <Statistic
+                  count={about[0].tournment_number}
+                  title={about[0].tournment_title}
+                />
+                <Statistic
+                  count={about[0].organisation_number}
+                  title={about[0].organisation_title}
+                />
+                <Statistic
+                  count={about[0].graduate_number}
+                  title={about[0].graduate_title}
+                />
+                <Statistic
+                  count={about[0].places_number}
+                  title={about[0].places_title}
+                />
+              </div>
+            ) : (
+              <div className="group-skeleton">
+                <div className="group">
+                  <Skeleton
+                    className="fchild"
+                    highlightColor={highlightColor}
+                    width={"13.5rem"}
+                    height={"13.5rem"}
+                    style={{ borderRadius: "0.5rem" }}
+                  />
+                  <Skeleton
+                    highlightColor={highlightColor}
+                    height={"2.14rem"}
+                    width={"18rem"}
+                    count={2}
+                  />
+                </div>
+                <div className="group">
+                  <Skeleton
+                    className="fchild"
+                    highlightColor={highlightColor}
+                    width={"13.5rem"}
+                    height={"13.5rem"}
+                    style={{ borderRadius: "0.5rem" }}
+                  />
+                  <Skeleton
+                    highlightColor={highlightColor}
+                    height={"2.14rem"}
+                    width={"18rem"}
+                    count={2}
+                  />
+                </div>
+                <div className="group">
+                  <Skeleton
+                    className="fchild"
+                    highlightColor={highlightColor}
+                    width={"13.5rem"}
+                    height={"13.5rem"}
+                    style={{ borderRadius: "0.5rem" }}
+                  />
+                  <Skeleton
+                    highlightColor={highlightColor}
+                    height={"2.14rem"}
+                    width={"18rem"}
+                    count={2}
+                  />
+                </div>
+                <div className="group">
+                  <Skeleton
+                    className="fchild"
+                    highlightColor={highlightColor}
+                    width={"13.5rem"}
+                    height={"13.5rem"}
+                    style={{ borderRadius: "0.5rem" }}
+                  />
+                  <Skeleton
+                    highlightColor={highlightColor}
+                    height={"2.14rem"}
+                    width={"18rem"}
+                    count={2}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
         </div>
       </div>
     </main>
diff --git a/src/styles/_about-us.scss b/src/styles/_about-us.scss
index 0341a5f..252b71c 100644
--- a/src/styles/_about-us.scss
+++ b/src/styles/_about-us.scss
@@ -35,3 +35,50 @@
     }
   }
 }
+
+.group-skeleton {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  .group {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .fchild {
+    margin-bottom: 2.4rem;
+  }
+}
+
+.aub-wrapper {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-around;
+}
+
+.stat {
+  display: flex;
+  flex-direction: column;
+  gap: 2.4rem;
+  align-items: center;
+}
+
+.stat-square {
+  @include flex-c;
+  font-weight: bold;
+  width: 13.5rem;
+  height: 13.5rem;
+  background: $base-green;
+  color: #fff;
+  font-size: 3.2rem;
+  border-radius: 0.5rem;
+}
+
+.stat-title {
+  text-align: center;
+  font-weight: bold;
+  font-size: 1.8rem;
+  max-width: 20rem;
+}