Replace home workflow steps with 2026 impact stats (Task #23)

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.
This commit is contained in:
Replit Agent
2026-06-05 20:45:25 +00:00
parent d65138a7dc
commit a674944408
2 changed files with 56 additions and 13 deletions
@@ -257,6 +257,16 @@ export const en = {
heroBrowse: "Browse Opportunities", heroBrowse: "Browse Opportunities",
featuredTitle: "Featured Opportunities", featuredTitle: "Featured Opportunities",
noResults: "No opportunities match your search.", 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: { workflow: {
step1: "Request Submitted", step1: "Request Submitted",
@@ -674,6 +684,16 @@ export const ar = {
heroBrowse: "تصفّح الفرص", heroBrowse: "تصفّح الفرص",
featuredTitle: "الفرص المميزة", featuredTitle: "الفرص المميزة",
noResults: "لا توجد فرص تطابق بحثك.", noResults: "لا توجد فرص تطابق بحثك.",
stats: {
title: "إحسانكم لعام 2026",
subtitle: "إحصائيات تعكس أثر عطائكم عبر منصة إحسان لعام 2026",
donationsValue: "85,4 مليون",
donationsLabel: "عدد عمليات التبرع",
beneficiariesValue: "391,5 ألف",
beneficiariesLabel: "عدد المستفيدين",
totalValue: "3.113 مليار",
totalLabel: "إجمالي التبرعات",
},
}, },
workflow: { workflow: {
step1: "مقدم الطلب", step1: "مقدم الطلب",
+36 -13
View File
@@ -7,7 +7,7 @@ import { Skeleton } from "@/components/ui/skeleton";
import { OpportunityCard } from "../components/OpportunityCard"; import { OpportunityCard } from "../components/OpportunityCard";
import { Reveal } from "../components/Reveal"; import { Reveal } from "../components/Reveal";
import { Link } from "wouter"; 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 zakatBanner from "@assets/zakatbanarWEB_1780682994527.png";
import dawriBanner from "@assets/dawribanarWEB_1780682998494.png"; import dawriBanner from "@assets/dawribanarWEB_1780682998494.png";
import waqfBanner from "@assets/waqfbanerWEB_1780683002610.png"; import waqfBanner from "@assets/waqfbanerWEB_1780683002610.png";
@@ -159,20 +159,43 @@ export default function Home() {
)} )}
</section> </section>
{/* Workflow Steps */} {/* Impact Statistics */}
<section className="mb-12"> <section className="mb-12">
<h2 className="text-2xl font-bold mb-8 text-center">{t.home.workflowTitle}</h2> <div className="text-center mb-8">
<div className="grid grid-cols-2 md:grid-cols-5 gap-4"> <div className="flex items-center justify-center gap-2 mb-2">
{Array.from({ length: 10 }).map((_, i) => ( <Leaf className="w-6 h-6 text-primary" aria-hidden="true" />
<Reveal key={i} delay={(i % 5) * 0.06} className="h-full"> <h2 className="text-2xl font-bold">{t.home.stats.title}</h2>
<Card className="bg-muted/50 border-none shadow-none h-full"> </div>
<CardContent className="p-4 text-center"> <p className="text-sm text-muted-foreground max-w-xl mx-auto">
<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"> {t.home.stats.subtitle}
{i + 1} </p>
</div> </div>
<div className="text-sm font-medium"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{t.workflow[`step${i + 1}` as keyof typeof t.workflow]} {[
{
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>
<div className="text-sm text-muted-foreground font-medium">{label}</div>
</CardContent> </CardContent>
</Card> </Card>
</Reveal> </Reveal>