hammam/Ehsan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve the statistics section with updated layout and styling

Browse Source 
Update the home page component to reorder stats, apply new text colors, and add a decorative background SVG to the statistics section.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 1fa9329f-0cec-4a2f-80e8-e26dbae3142e
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 7c8ec397-0fe8-4a0d-8da4-a681483856de
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/4d696b13-86f2-4c9d-be0d-95b293430047/1fa9329f-0cec-4a2f-80e8-e26dbae3142e/Pf8P9xq
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
Replit Agent
2026-06-05 20:54:17 +00:00
parent a674944408
commit 9bb676851b
3 changed files with 114 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
artifacts/ehsan-poc/public/opengraph.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 60 KiB

artifacts/ehsan-poc/src/pages/home.tsx
+48 -39
View File
@@ -13,6 +13,7 @@ import dawriBanner from "@assets/dawribanarWEB_1780682998494.png";
import waqfBanner from "@assets/waqfbanerWEB_1780683002610.png";
import giftBanner from "@assets/giftbanarWEB_1780683006569.png";
import ayahArt from "@assets/ahseno-ayah_(1)_1780685571353.svg";
import statsBg from "@assets/snapil-vertical-bg_1780692460644.svg";
const HERO_BANNERS = [zakatBanner, dawriBanner, waqfBanner, giftBanner];
@@ -160,46 +161,54 @@ export default function Home() {
</section>
{/* Impact Statistics */}
<section className="mb-12">
<div className="text-center mb-8">
<div className="flex items-center justify-center gap-2 mb-2">
<Leaf className="w-6 h-6 text-primary" aria-hidden="true" />
<h2 className="text-2xl font-bold">{t.home.stats.title}</h2>
<section className="relative overflow-hidden mb-12 py-8">
<img
src={statsBg}
alt=""
aria-hidden="true"
className="pointer-events-none select-none absolute top-0 left-0 h-full w-auto opacity-70"
/>
<div className="relative z-10">
<div className="text-center mb-8">
<div className="flex items-center justify-center gap-2 mb-2">
<Leaf className="w-6 h-6 text-primary" aria-hidden="true" />
<h2 className="text-2xl font-bold text-primary">{t.home.stats.title}</h2>
</div>
<p className="text-sm text-muted-foreground max-w-xl mx-auto">
{t.home.stats.subtitle}
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{[
{
Icon: Wallet,
value: t.home.stats.totalValue,
label: t.home.stats.totalLabel,
},
{
Icon: Users,
value: t.home.stats.beneficiariesValue,
label: t.home.stats.beneficiariesLabel,
},
{
Icon: HandHeart,
value: t.home.stats.donationsValue,
label: t.home.stats.donationsLabel,
},
].map(({ Icon, value, label }, i) => (
<Reveal key={label} delay={i * 0.08} className="h-full">
<Card className="border-none shadow-md h-full rounded-2xl">
<CardContent className="p-8 text-center">
<Icon className="w-9 h-9 text-primary mx-auto mb-4" aria-hidden="true" />
<div className="text-3xl font-bold text-primary mb-3" data-testid={`stat-value-${i}`}>
{value}
</div>
<div className="text-sm text-muted-foreground font-medium">{label}</div>
</CardContent>
</Card>
</Reveal>
))}
</div>
<p className="text-sm text-muted-foreground max-w-xl mx-auto">
{t.home.stats.subtitle}
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{[
{
Icon: HandHeart,
value: t.home.stats.donationsValue,
label: t.home.stats.donationsLabel,
},
{
Icon: Users,
value: t.home.stats.beneficiariesValue,
label: t.home.stats.beneficiariesLabel,
},
{
Icon: Wallet,
value: t.home.stats.totalValue,
label: t.home.stats.totalLabel,
},
].map(({ Icon, value, label }, i) => (
<Reveal key={label} delay={i * 0.08} className="h-full">
<Card className="border-none shadow-md h-full rounded-2xl">
<CardContent className="p-8 text-center">
<Icon className="w-9 h-9 text-primary mx-auto mb-4" aria-hidden="true" />
<div className="text-3xl font-bold text-primary mb-3" data-testid={`stat-value-${i}`}>
{value}
</div>
<div className="text-sm text-muted-foreground font-medium">{label}</div>
</CardContent>
</Card>
</Reveal>
))}
</div>
</section>
</div>