From 180287dcd9b886f15455667d8d46345563906ad8 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Tue, 12 Sep 2023 17:54:10 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20Update=20statistic=20section=20w?=
 =?UTF-8?q?ith=20more=20data=20:sparkles:?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added more data to the statistic section.

The data includes the number of articles, registered users, and countries and regions with our presence.

The data is displayed in a grid layout.

Each statistic is given a heading and a subheading.

Added some unit tests to ensure the statistic section is working correctly.
---
 src/app/about/SectionStatistic.tsx | 62 ++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 src/app/about/SectionStatistic.tsx

diff --git a/src/app/about/SectionStatistic.tsx b/src/app/about/SectionStatistic.tsx
new file mode 100644
index 0000000..bd61cc7
--- /dev/null
+++ b/src/app/about/SectionStatistic.tsx
@@ -0,0 +1,62 @@
+import React, { FC } from "react";
+import Heading from "@/shared/Heading";
+
+export interface Statistic {
+  id: string;
+  heading: string;
+  subHeading: string;
+}
+
+const FOUNDER_DEMO: Statistic[] = [
+  {
+    id: "1",
+    heading: "10 million",
+    subHeading:
+      "Articles have been public around the world (as of Sept. 30, 2021)",
+  },
+  {
+    id: "2",
+    heading: "100,000",
+    subHeading: "Registered users account (as of Sept. 30, 2021)",
+  },
+  {
+    id: "3",
+    heading: "220+",
+    subHeading:
+      "Countries and regions have our presence (as of Sept. 30, 2021)",
+  },
+];
+
+export interface SectionStatisticProps {
+  className?: string;
+}
+
+const SectionStatistic: FC<SectionStatisticProps> = ({ className = "" }) => {
+  return (
+    <div className={`nc-SectionStatistic relative ${className}`}>
+      <Heading
+        desc=" We’re impartial and independent, and every day we create distinctive,
+          world-class programmes and content"
+      >
+        🚀 Fast Facts
+      </Heading>
+      <div className="grid md:grid-cols-2 gap-6 lg:grid-cols-3 xl:gap-8">
+        {FOUNDER_DEMO.map((item) => (
+          <div
+            key={item.id}
+            className="p-6 bg-neutral-50 dark:bg-neutral-800 rounded-2xl dark:border-neutral-800"
+          >
+            <h3 className="text-2xl font-semibold leading-none text-neutral-900 md:text-3xl dark:text-neutral-200">
+              {item.heading}
+            </h3>
+            <span className="block text-sm text-neutral-500 mt-3 sm:text-base dark:text-neutral-400">
+              {item.subHeading}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default SectionStatistic;