From 22f3b4e2e8d28cbaa9fc89d15a5d269a69e066c7 Mon Sep 17 00:00:00 2001
From: Replit Agent <agent@replit.com>
Date: Fri, 5 Jun 2026 19:02:16 +0000
Subject: [PATCH] Home ayah banner & cleanup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Task #13: Bring the EHSAN home page closer to the real ehsan.sa.

Changes (artifacts/ehsan-poc/src/pages/home.tsx):
- Ayah banner: added a full-width white section directly below the hero
  slider showing the provided ayah artwork «وأحسنوا إن الله يحب المحسنين»
  (imported via the @assets Vite alias as an <img>), centered and flanked by
  two decorative ornaments. Ornaments are a small inline SVG flourish
  (Ornament component) in a light primary-green tint, mirrored on each side,
  hidden on the smallest screens. Responsive heights, RTL-correct.
- Removed the "إجمالي الطلبات" (Total Requests) stat card; the stats row now
  shows two cards (الحالات المغلقة, إجمالي التبرعات) and the grid was changed
  from md:grid-cols-3 to md:grid-cols-2 (loading skeleton updated to match).
- Removed the "الفرص المميزة" (featuredTitle) heading text; the heading row
  now just right-aligns the existing "عرض جميع الفرص" button. Search box and
  opportunity cards are unchanged and still visible.

Scope decision: user confirmed (interactive query) to remove ONLY the
"الفرص المميزة" heading word and keep the search + cards.

Out of scope (unchanged): nav, services mega-menu, hero slider, workflow
steps, other pages. featuredTitle translation key left in place (unused now).

Verified: tsc --noEmit clean; screenshots confirm the ayah band under the
hero, two stat cards, and no featured heading; console clean after workflow
restart. No emojis.
---
 artifacts/ehsan-poc/src/pages/home.tsx | 58 ++++++++++++++++++--------
 1 file changed, 41 insertions(+), 17 deletions(-)

diff --git a/artifacts/ehsan-poc/src/pages/home.tsx b/artifacts/ehsan-poc/src/pages/home.tsx
index 9ddef42..1f74706 100644
--- a/artifacts/ehsan-poc/src/pages/home.tsx
+++ b/artifacts/ehsan-poc/src/pages/home.tsx
@@ -13,9 +13,33 @@ import zakatBanner from "@assets/zakatbanarWEB_1780682994527.png";
 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";
 
 const HERO_BANNERS = [zakatBanner, dawriBanner, waqfBanner, giftBanner];
 
+function Ornament({ className = "" }: { className?: string }) {
+  return (
+    <svg
+      width="56"
+      height="20"
+      viewBox="0 0 56 20"
+      fill="none"
+      aria-hidden="true"
+      className={`text-primary/30 ${className}`}
+    >
+      <path
+        d="M2 10c6-7 12-7 18 0 6 7 12 7 18 0 4-4.6 8-5.6 12-3"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        fill="none"
+      />
+      <circle cx="20" cy="10" r="2.2" fill="currentColor" />
+      <circle cx="50" cy="6.5" r="1.6" fill="currentColor" />
+    </svg>
+  );
+}
+
 export default function Home() {
   const { t } = useLanguage();
   const { data: stats, isLoading: statsLoading } = useGetStats();
@@ -110,28 +134,29 @@ export default function Home() {
         </div>
       </section>
 
+      {/* Ayah banner */}
+      <section className="bg-white py-10">
+        <div className="container mx-auto px-4 flex items-center justify-center gap-5 sm:gap-8">
+          <Ornament className="hidden sm:block shrink-0" />
+          <img
+            src={ayahArt}
+            alt="وأحسنوا إن الله يحب المحسنين"
+            className="h-7 sm:h-9 md:h-10 w-auto"
+            data-testid="img-ayah"
+          />
+          <Ornament className="hidden sm:block shrink-0 -scale-x-100" />
+        </div>
+      </section>
+
       <div className="container mx-auto px-4 py-12">
         {/* Stats */}
         {statsLoading ? (
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16">
-            <Skeleton className="h-32 w-full" />
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-16">
             <Skeleton className="h-32 w-full" />
             <Skeleton className="h-32 w-full" />
           </div>
         ) : (
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16">
-            <Card>
-              <CardHeader className="pb-2">
-                <CardTitle className="text-sm font-medium text-muted-foreground">
-                  {t.home.totalRequests}
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <div className="text-4xl font-bold text-foreground">
-                  {stats?.totalRequests || 0}
-                </div>
-              </CardContent>
-            </Card>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-16">
             <Card>
               <CardHeader className="pb-2">
                 <CardTitle className="text-sm font-medium text-muted-foreground">
@@ -161,8 +186,7 @@ export default function Home() {
 
         {/* Featured Opportunities */}
         <section className="mb-16">
-          <div className="flex items-center justify-between mb-6 flex-wrap gap-3">
-            <h2 className="text-2xl font-bold">{t.home.featuredTitle}</h2>
+          <div className="flex items-center justify-end mb-6 flex-wrap gap-3">
             <Link href="/opportunities">
               <Button variant="outline" size="sm">{t.home.viewOpportunities}</Button>
             </Link>