Browse Source

🚀 Update statistic section with more data

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.
main
John Doe 1 year ago
parent
commit
180287dcd9
  1. 62
      src/app/about/SectionStatistic.tsx

62
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=" Were 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;
Loading…
Cancel
Save