g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

:3 blehhh

Browse Source
This commit is contained in:
NotII
2025-04-10 00:52:42 +01:00
parent 2221c39df9
commit 907831d6a7
2 changed files with 54 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
components/animated-stats-section.tsx
View File

@@ -8,7 +8,7 @@ const formatCurrency = (value: number) => {
return new Intl.NumberFormat('en-GB', {
style: 'currency',
currency: 'GBP',
minimumFractionDigits: 0,
minimumFractionDigits: 2,
}).format(value);
};
@@ -18,62 +18,65 @@ interface AnimatedStatsProps {
export function AnimatedStatsSection({ stats }: AnimatedStatsProps) {
return (
<div className="mx-auto grid max-w-5xl grid-cols-1 gap-8 md:grid-cols-3 mt-8">
<div className="flex flex-col items-center space-y-2 rounded-lg border border-zinc-800 p-6 transition-all hover:bg-zinc-800">
<div className="rounded-full bg-zinc-900 p-3 text-[#D53F8C]">
<Package className="h-8 w-8" />
<div className="mx-auto grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-3">
<div className="group relative overflow-hidden flex flex-col items-center text-center rounded-xl bg-gradient-to-b from-zinc-900/50 to-black border border-[#1C1C1C] p-6">
<div className="absolute inset-0 bg-[#D53F8C]/5 opacity-0 group-hover:opacity-100 transition-opacity" />
<div className="relative flex flex-col items-center">
<Package className="h-6 w-6 text-[#D53F8C]" />
<div className="mt-4 text-3xl font-bold text-white">
<AnimatedCounter
value={stats.orders.completed}
duration={2000}
suffix="+"
/>
</div>
<h3 className="mt-2 text-lg font-medium text-white">
Completed Orders
</h3>
<p className="mt-1 text-sm text-zinc-500">
Successfully fulfilled orders across our platform
</p>
</div>
<div className="text-3xl font-bold text-white">
<AnimatedCounter
value={stats.orders.completed}
duration={2000}
suffix="+"
/>
</div>
<h3 className="text-xl font-bold text-white">
Completed Orders
</h3>
<p className="text-center text-zinc-400">
Successfully fulfilled orders across our platform
</p>
</div>
<div className="flex flex-col items-center space-y-2 rounded-lg border border-zinc-800 p-6 transition-all hover:bg-zinc-800">
<div className="rounded-full bg-zinc-900 p-3 text-[#D53F8C]">
<Users className="h-8 w-8" />
<div className="group relative overflow-hidden flex flex-col items-center text-center rounded-xl bg-gradient-to-b from-zinc-900/50 to-black border border-[#1C1C1C] p-6">
<div className="absolute inset-0 bg-[#D53F8C]/5 opacity-0 group-hover:opacity-100 transition-opacity" />
<div className="relative flex flex-col items-center">
<Users className="h-6 w-6 text-[#D53F8C]" />
<div className="mt-4 text-3xl font-bold text-white">
<AnimatedCounter
value={stats.vendors.total}
duration={2000}
suffix="+"
/>
</div>
<h3 className="mt-2 text-lg font-medium text-white">
Registered Vendors
</h3>
<p className="mt-1 text-sm text-zinc-500">
Active sellers offering products on our marketplace
</p>
</div>
<div className="text-3xl font-bold text-white">
<AnimatedCounter
value={stats.vendors.total}
duration={2000}
suffix="+"
/>
</div>
<h3 className="text-xl font-bold text-white">
Registered Vendors
</h3>
<p className="text-center text-zinc-400">
Active sellers offering products on our marketplace
</p>
</div>
<div className="flex flex-col items-center space-y-2 rounded-lg border border-zinc-800 p-6 transition-all hover:bg-zinc-800">
<div className="rounded-full bg-zinc-900 p-3 text-[#D53F8C]">
<CreditCard className="h-8 w-8" />
<div className="group relative overflow-hidden flex flex-col items-center text-center rounded-xl bg-gradient-to-b from-zinc-900/50 to-black border border-[#1C1C1C] p-6">
<div className="absolute inset-0 bg-[#D53F8C]/5 opacity-0 group-hover:opacity-100 transition-opacity" />
<div className="relative flex flex-col items-center">
<CreditCard className="h-6 w-6 text-[#D53F8C]" />
<div className="mt-4 text-3xl font-bold text-white">
<AnimatedCounter
value={stats.transactions.volume}
duration={2500}
formatter={formatCurrency}
/>
</div>
<h3 className="mt-2 text-lg font-medium text-white">
Transaction Volume
</h3>
<p className="mt-1 text-sm text-zinc-500">
Total value of successful transactions processed
</p>
</div>
<div className="text-3xl font-bold text-white">
<AnimatedCounter
value={stats.transactions.volume}
duration={2500}
formatter={formatCurrency}
/>
</div>
<h3 className="text-xl font-bold text-white">
Transaction Volume
</h3>
<p className="text-center text-zinc-400">
Total value of successful transactions processed
</p>
</div>
</div>
);