From a67494440874f7e325a4ecdf6797c42ee11929ec Mon Sep 17 00:00:00 2001
From: Replit Agent <agent@replit.com>
Date: Fri, 5 Jun 2026 20:45:25 +0000
Subject: [PATCH] Replace home workflow steps with 2026 impact stats (Task #23)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The home page previously showed the 10-step "خطوات إقفال دورة التبرع"
workflow section. The user asked to replace it with an "إحسانكم لعام 2026"
impact statistics section matching the attached reference.

Changes:
- artifacts/ehsan-poc/src/pages/home.tsx: removed the 10-step workflow
  section and added an "Impact Statistics" section in its place — a centered
  heading with a green Leaf accent, a subtitle, and three rounded white
  shadowed stat cards (lucide icons HandHeart / Users / Wallet), each with a
  large green value and a label. Responsive 3-up grid stacking on mobile.
- artifacts/ehsan-poc/src/lib/i18n/translations.ts: added a `home.stats`
  group (title, subtitle, and the 3 value/label pairs) in both en and ar.
  AR values: 85,4 مليون / 391,5 ألف / 3.113 مليار. EN mirrors with Million /
  Thousand / Billion.

Notes:
- Static reference numbers used as display values (POC; no live data — per
  task out-of-scope).
- No emojis; lucide icons consistent with the rest of the app. The old
  t.home.workflowTitle and t.workflow.* keys are left in place (harmless
  shared strings) but are no longer used by the home page.

Verified: tsc --noEmit clean; e2e confirmed AR + EN rendering, old workflow
section removed, no console errors.
---
 .../ehsan-poc/src/lib/i18n/translations.ts    | 20 ++++++++
 artifacts/ehsan-poc/src/pages/home.tsx        | 49 ++++++++++++++-----
 2 files changed, 56 insertions(+), 13 deletions(-)

diff --git a/artifacts/ehsan-poc/src/lib/i18n/translations.ts b/artifacts/ehsan-poc/src/lib/i18n/translations.ts
index 9d7fcbf..63f822d 100644
--- a/artifacts/ehsan-poc/src/lib/i18n/translations.ts
+++ b/artifacts/ehsan-poc/src/lib/i18n/translations.ts
@@ -257,6 +257,16 @@ export const en = {
     heroBrowse: "Browse Opportunities",
     featuredTitle: "Featured Opportunities",
     noResults: "No opportunities match your search.",
+    stats: {
+      title: "Your EHSAN in 2026",
+      subtitle: "Statistics reflecting the impact of your giving through the EHSAN platform in 2026",
+      donationsValue: "85.4 Million",
+      donationsLabel: "Number of Donations",
+      beneficiariesValue: "391.5 Thousand",
+      beneficiariesLabel: "Number of Beneficiaries",
+      totalValue: "3.113 Billion",
+      totalLabel: "Total Donations",
+    },
   },
   workflow: {
     step1: "Request Submitted",
@@ -674,6 +684,16 @@ export const ar = {
     heroBrowse: "تصفّح الفرص",
     featuredTitle: "الفرص المميزة",
     noResults: "لا توجد فرص تطابق بحثك.",
+    stats: {
+      title: "إحسانكم لعام 2026",
+      subtitle: "إحصائيات تعكس أثر عطائكم عبر منصة إحسان لعام 2026",
+      donationsValue: "85,4 مليون",
+      donationsLabel: "عدد عمليات التبرع",
+      beneficiariesValue: "391,5 ألف",
+      beneficiariesLabel: "عدد المستفيدين",
+      totalValue: "3.113 مليار",
+      totalLabel: "إجمالي التبرعات",
+    },
   },
   workflow: {
     step1: "مقدم الطلب",
diff --git a/artifacts/ehsan-poc/src/pages/home.tsx b/artifacts/ehsan-poc/src/pages/home.tsx
index cbdf5e2..90ab486 100644
--- a/artifacts/ehsan-poc/src/pages/home.tsx
+++ b/artifacts/ehsan-poc/src/pages/home.tsx
@@ -7,7 +7,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { OpportunityCard } from "../components/OpportunityCard";
 import { Reveal } from "../components/Reveal";
 import { Link } from "wouter";
-import { Pause, Play } from "lucide-react";
+import { Pause, Play, Leaf, HandHeart, Users, Wallet } from "lucide-react";
 import zakatBanner from "@assets/zakatbanarWEB_1780682994527.png";
 import dawriBanner from "@assets/dawribanarWEB_1780682998494.png";
 import waqfBanner from "@assets/waqfbanerWEB_1780683002610.png";
@@ -159,20 +159,43 @@ export default function Home() {
           )}
         </section>
 
-        {/* Workflow Steps */}
+        {/* Impact Statistics */}
         <section className="mb-12">
-          <h2 className="text-2xl font-bold mb-8 text-center">{t.home.workflowTitle}</h2>
-          <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
-            {Array.from({ length: 10 }).map((_, i) => (
-              <Reveal key={i} delay={(i % 5) * 0.06} className="h-full">
-                <Card className="bg-muted/50 border-none shadow-none h-full">
-                  <CardContent className="p-4 text-center">
-                    <div className="w-8 h-8 rounded-full bg-primary/20 text-primary mx-auto flex items-center justify-center font-bold mb-3 text-sm">
-                      {i + 1}
-                    </div>
-                    <div className="text-sm font-medium">
-                      {t.workflow[`step${i + 1}` as keyof typeof t.workflow]}
+          <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>
+            </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>