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:
@@ -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: "مقدم الطلب",
|
||||
|
||||
@@ -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 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>
|
||||
<div className="text-sm font-medium">
|
||||
{t.workflow[`step${i + 1}` as keyof typeof t.workflow]}
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user