Statistics
Statistics provide a visual representation of numerical data, enabling a comprehensive understanding of trends, patterns, and insights.
interface StatisticsItem {
name: string;
description: string;
}
const statisticsSample: StatisticsItem[] = [
{ name: "40 Million", description: "Bookmarks saved" },
{ name: "100k", description: "Monthly Active Users" },
{ name: "2.1 Billion", description: "Cached Pages" },
{ name: "400k", description: "Monthly Images Served" },
];
export default function Basic() {
return (
<section className="mx-auto flex max-w-7xl flex-col items-center gap-12 bg-background px-4 py-12 text-center lg:py-20">
<div className="grid grid-cols-1 gap-16 sm:grid-cols-2 lg:grid-cols-4">
{statisticsSample.map((details: StatisticsItem, index: number) => (
<div key={index}>
<h3 className="mb-2 text-3xl font-extrabold tracking-tight">
{details.name}
</h3>
<p className="text-muted-foreground">{details.description}</p>
</div>
))}
</div>
</section>
);
}
interface StatisticsItem {
name: string;
description: string;
}
const statisticsSample: StatisticsItem[] = [
{ name: "40 Million", description: "Bookmarks saved" },
{ name: "100k", description: "Monthly Active Users" },
{ name: "2.1 Billion", description: "Cached Pages" },
{ name: "400k", description: "Monthly Images Served" },
];
export default function StatisticsWithBackground() {
return (
<section className="relative bg-blue-700 px-4 py-12 text-center text-white lg:py-20">
<div className="mx-auto flex max-w-5xl flex-col gap-12">
<div
className="pointer-events-none absolute inset-0 select-none bg-repeat"
style={{
background: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' stroke='%23ffffff' stroke-miterlimit='10' stroke-dasharray='4 4' opacity='0.15'%3E%3Cline x1='0.5' y1='0.5' x2='63.5' y2='63.5' /%3E%3Cline x1='63.5' y1='0.5' x2='0.5' y2='63.5' /%3E%3C/svg%3E")`,
}}
></div>
<div>
<h1 className="text-4xl font-bold tracking-tight">
Save anywhere you go.
</h1>
<p className="pt-3 text-base text-blue-200">
Easily save your favourite links from any device, anywhere.
</p>
</div>
<div className="grid grid-cols-1 gap-10 sm:grid-cols-2 md:gap-x-16 lg:grid-cols-4 lg:gap-x-32">
{statisticsSample.map((details: StatisticsItem, index: number) => (
<div key={index}>
<h3 className="mb-2 text-3xl font-extrabold">{details.name}</h3>
<p className="text-sm text-blue-200">{details.description}</p>
</div>
))}
</div>
</div>
</section>
);
}
interface StatisticsItem {
name: string;
description: string;
}
const statisticsSample: StatisticsItem[] = [
{ name: "40 Million", description: "Bookmarks saved" },
{ name: "100k", description: "Monthly Active Users" },
{ name: "2.1 Billion", description: "Cached Pages" },
{ name: "400k", description: "Monthly Images Served" },
];
export default function BasicWithDivider() {
return (
<section className="mx-auto grid max-w-5xl grid-cols-1 gap-10 divide-x-0 bg-background px-4 py-12 text-center sm:grid-cols-2 lg:grid-cols-4 lg:divide-x lg:py-20">
{statisticsSample.map((details: StatisticsItem, index: number) => (
<div key={index} className="px-5">
<h3 className="mb-2 text-3xl font-extrabold">{details.name}</h3>
<p className="text-muted-foreground">{details.description}</p>
</div>
))}
</section>
);
}
interface StatisticsItem {
name: string;
description: string;
}
const statisticsSample: StatisticsItem[] = [
{ name: "40 Million", description: "Bookmarks saved" },
{ name: "100k", description: "Monthly Active Users" },
{ name: "2.1 Billion", description: "Cached Pages" },
{ name: "400k", description: "Monthly Images Served" },
];
export default function ColorDivider() {
return (
<section className="mx-auto grid max-w-5xl grid-cols-1 gap-10 px-4 py-12 sm:grid-cols-2 lg:grid-cols-4 lg:py-20">
{statisticsSample.map((details: StatisticsItem, index: number) => (
<div key={index} className="border-l-4 border-blue-600 px-5">
<h3 className="mb-2 text-3xl font-extrabold">{details.name}</h3>
<p className="text-muted-foreground">{details.description}</p>
</div>
))}
</section>
);
}
interface StatisticsItem {
name: string;
description: string;
}
const statisticsSample: StatisticsItem[] = [
{ name: "40 Million", description: "Bookmarks saved" },
{ name: "100k", description: "Monthly Active Users" },
{ name: "2.1 Billion", description: "Cached Pages" },
{ name: "400k", description: "Monthly Images Served" },
];
export default function GridWithText() {
return (
<section className="mx-auto grid max-w-7xl grid-cols-1 gap-14 px-4 py-12 sm:grid-cols-2 lg:grid-cols-2 lg:py-20">
<div>
<h1 className="text-4xl font-bold tracking-tight">
Loved by high-performance teams
</h1>
<p className="pt-3 text-base text-muted-foreground">
Hundreds of companies trust us to build world-class products.
</p>
</div>
<div className="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-2">
{statisticsSample.map((details: StatisticsItem, index: number) => (
<div
key={index}
className="mb-4 border-l-4 border-blue-600 pl-5 pr-16 sm:mb-0"
>
<h3 className="mb-2 text-3xl font-extrabold">{details.name}</h3>
<p className="text-muted-foreground">{details.description}</p>
</div>
))}
</div>
</section>
);
}
import { File, Image, Star, User } from "@mynaui/icons-react";
export default function StatisticsWithIcons() {
return (
<section className="bg-background px-4 py-12 text-center lg:py-20">
<div className="mx-auto flex max-w-7xl flex-col gap-14">
<div>
<h1 className="text-3xl font-bold tracking-tight">
Save anywhere you go.
</h1>
<p className="pt-3 text-base text-muted-foreground">
Easily save your favourite links from any device, anywhere.
</p>
</div>
<div className="mx-auto grid max-w-5xl grid-cols-1 gap-10 text-center sm:grid-cols-2 lg:grid-cols-4">
<div className="flex w-full flex-col items-center justify-center rounded-lg border bg-primary-foreground p-5">
<Star className="size-10 text-yellow-400" />
<h3 className="mt-3 text-2xl font-bold">40 Million</h3>
<p className="text-base text-muted-foreground">Bookmarks saved</p>
</div>
<div className="flex w-full flex-col items-center justify-center rounded-lg border bg-primary-foreground p-5">
<User className="size-10 text-blue-400" />
<h3 className="mt-3 text-2xl font-bold">100 k</h3>
<p className="text-base text-muted-foreground">
Monthly Active Users
</p>
</div>
<div className="flex w-full flex-col items-center justify-center rounded-lg border bg-primary-foreground p-5">
<File className="size-10 text-purple-400" />
<h3 className="mt-3 text-2xl font-bold">2.1 Billion</h3>
<p className="text-base text-muted-foreground">Cached Pages</p>
</div>
<div className="flex w-full flex-col items-center justify-center rounded-lg border bg-primary-foreground p-5">
<Image className="size-10 text-red-400" />
<h3 className="mt-3 text-2xl font-bold">400 k</h3>
<p className="text-base text-muted-foreground">
Monthly Images Served
</p>
</div>
</div>
</div>
</section>
);
}
interface StatisticsItem {
name: string;
description: string;
}
const statisticsSample: StatisticsItem[] = [
{ name: "40 Million", description: "Bookmarks saved" },
{ name: "100k", description: "Monthly Active Users" },
{ name: "2.1 Billion", description: "Cached Pages" },
{ name: "400k", description: "Monthly Images Served" },
];
export default function ThreeDivider() {
return (
<section className="mx-auto grid max-w-5xl grid-cols-1 gap-y-10 divide-x-0 px-4 py-12 text-center sm:grid-cols-2 lg:grid-cols-3 lg:divide-x lg:py-20">
{statisticsSample
.slice(0, 3)
.map((details: StatisticsItem, index: number) => (
<div key={index} className="px-12">
<h3 className="mb-2 text-5xl font-extralight">{details.name}</h3>
<p className="text-muted-foreground">{details.description}</p>
</div>
))}
</section>
);
}