Improve the statistics section with updated layout and styling

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

artifacts/ehsan-poc/src/pages/home.tsx

@@ -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>