From c7573c35bf0f6af92a4d29c17615c7df45105b87 Mon Sep 17 00:00:00 2001
From: Replit Agent <agent@replit.com>
Date: Fri, 5 Jun 2026 19:11:34 +0000
Subject: [PATCH] Task #14: Black Ayah & Scroll Reveal (EHSAN POC)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two refinements to match ehsan.sa on artifacts/ehsan-poc:

1. Black ayah: the ayah artwork below the hero
   («وأحسنوا إنّ الله يحبّ المحسنين») now renders solid black
   instead of green via Tailwind `brightness-0` on the <img>.
   Ornaments and centered layout unchanged.

2. Scroll-reveal motion: added a reusable Reveal component
   (src/components/Reveal.tsx) built on the existing framer-motion
   dependency. It fades + translates children up (y:28 -> 0) when
   they scroll into view, animates once (viewport once:true,
   amount 0.2), supports an optional stagger `delay`, and falls
   back to a plain div when prefers-reduced-motion is set.

   Applied on:
   - home.tsx: stats row (2 cards, staggered), featured
     opportunity cards grid (staggered by column), workflow-steps
     grid (staggered by column).
   - opportunities.tsx: opportunity cards grid (staggered).

   Added `h-full` to the OpportunityCard root and to the Reveal
   wrappers / wrapped Cards so the motion wrapper becoming the grid
   item does not break equal-height cards.

Out of scope (unchanged): two-card stats layout, nav, services
mega-menu, hero slider/carousel, copy. No scroll animation on
header/nav or hero.

Verified: tsc --noEmit passes; restarted ehsan-poc web workflow
to clear HMR; screenshot confirms the ayah is black.
---
 .../src/components/OpportunityCard.tsx        |  2 +-
 artifacts/ehsan-poc/src/components/Reveal.tsx | 28 +++++++
 artifacts/ehsan-poc/src/pages/home.tsx        | 83 ++++++++++---------
 .../ehsan-poc/src/pages/opportunities.tsx     |  7 +-
 4 files changed, 80 insertions(+), 40 deletions(-)
 create mode 100644 artifacts/ehsan-poc/src/components/Reveal.tsx

diff --git a/artifacts/ehsan-poc/src/components/OpportunityCard.tsx b/artifacts/ehsan-poc/src/components/OpportunityCard.tsx
index e8f4569..8a3c098 100644
--- a/artifacts/ehsan-poc/src/components/OpportunityCard.tsx
+++ b/artifacts/ehsan-poc/src/components/OpportunityCard.tsx
@@ -39,7 +39,7 @@ export function OpportunityCard({ request }: OpportunityCardProps) {
   };
 
   return (
-    <div className="bg-card rounded-2xl border border-card-border shadow-sm overflow-hidden flex flex-col hover-elevate">
+    <div className="bg-card rounded-2xl border border-card-border shadow-sm overflow-hidden flex flex-col h-full hover-elevate">
       {/* Photo + progress bar */}
       <div className="relative">
         <img
diff --git a/artifacts/ehsan-poc/src/components/Reveal.tsx b/artifacts/ehsan-poc/src/components/Reveal.tsx
new file mode 100644
index 0000000..a8cc920
--- /dev/null
+++ b/artifacts/ehsan-poc/src/components/Reveal.tsx
@@ -0,0 +1,28 @@
+import { motion, useReducedMotion } from "framer-motion";
+import type { ReactNode } from "react";
+
+interface RevealProps {
+  children: ReactNode;
+  delay?: number;
+  className?: string;
+}
+
+export function Reveal({ children, delay = 0, className = "" }: RevealProps) {
+  const reduce = useReducedMotion();
+
+  if (reduce) {
+    return <div className={className}>{children}</div>;
+  }
+
+  return (
+    <motion.div
+      className={className}
+      initial={{ opacity: 0, y: 28 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, amount: 0.2 }}
+      transition={{ duration: 0.5, delay, ease: [0.22, 1, 0.36, 1] }}
+    >
+      {children}
+    </motion.div>
+  );
+}
diff --git a/artifacts/ehsan-poc/src/pages/home.tsx b/artifacts/ehsan-poc/src/pages/home.tsx
index 1f74706..fe6bfdd 100644
--- a/artifacts/ehsan-poc/src/pages/home.tsx
+++ b/artifacts/ehsan-poc/src/pages/home.tsx
@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Skeleton } from "@/components/ui/skeleton";
 import { OpportunityCard } from "../components/OpportunityCard";
+import { Reveal } from "../components/Reveal";
 import { Riyal } from "@/components/Riyal";
 import { Link } from "wouter";
 import { Search, Pause, Play } from "lucide-react";
@@ -141,7 +142,7 @@ export default function Home() {
           <img
             src={ayahArt}
             alt="وأحسنوا إن الله يحب المحسنين"
-            className="h-7 sm:h-9 md:h-10 w-auto"
+            className="h-7 sm:h-9 md:h-10 w-auto brightness-0"
             data-testid="img-ayah"
           />
           <Ornament className="hidden sm:block shrink-0 -scale-x-100" />
@@ -157,30 +158,34 @@ export default function Home() {
           </div>
         ) : (
           <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">
-                  {t.home.totalCollected}
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <div className="text-4xl font-bold text-primary inline-flex items-center gap-2">
-                  {stats?.totalCollected?.toLocaleString() || 0} <Riyal />
-                </div>
-              </CardContent>
-            </Card>
-            <Card>
-              <CardHeader className="pb-2">
-                <CardTitle className="text-sm font-medium text-muted-foreground">
-                  {t.home.totalClosed}
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <div className="text-4xl font-bold text-foreground">
-                  {stats?.totalClosed || 0}
-                </div>
-              </CardContent>
-            </Card>
+            <Reveal className="h-full">
+              <Card className="h-full">
+                <CardHeader className="pb-2">
+                  <CardTitle className="text-sm font-medium text-muted-foreground">
+                    {t.home.totalCollected}
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <div className="text-4xl font-bold text-primary inline-flex items-center gap-2">
+                    {stats?.totalCollected?.toLocaleString() || 0} <Riyal />
+                  </div>
+                </CardContent>
+              </Card>
+            </Reveal>
+            <Reveal delay={0.1} className="h-full">
+              <Card className="h-full">
+                <CardHeader className="pb-2">
+                  <CardTitle className="text-sm font-medium text-muted-foreground">
+                    {t.home.totalClosed}
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <div className="text-4xl font-bold text-foreground">
+                    {stats?.totalClosed || 0}
+                  </div>
+                </CardContent>
+              </Card>
+            </Reveal>
           </div>
         )}
 
@@ -221,8 +226,10 @@ export default function Home() {
             </div>
           ) : (
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-              {filtered.slice(0, 6).map((request) => (
-                <OpportunityCard key={request.id} request={request} />
+              {filtered.slice(0, 6).map((request, i) => (
+                <Reveal key={request.id} delay={(i % 3) * 0.08} className="h-full">
+                  <OpportunityCard request={request} />
+                </Reveal>
               ))}
             </div>
           )}
@@ -233,16 +240,18 @@ export default function Home() {
           <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) => (
-              <Card key={i} className="bg-muted/50 border-none shadow-none">
-                <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>
-                </CardContent>
-              </Card>
+              <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>
+                  </CardContent>
+                </Card>
+              </Reveal>
             ))}
           </div>
         </section>
diff --git a/artifacts/ehsan-poc/src/pages/opportunities.tsx b/artifacts/ehsan-poc/src/pages/opportunities.tsx
index c730589..0ff051f 100644
--- a/artifacts/ehsan-poc/src/pages/opportunities.tsx
+++ b/artifacts/ehsan-poc/src/pages/opportunities.tsx
@@ -3,6 +3,7 @@ import { useLanguage } from "../contexts/LanguageContext";
 import { useListPublishedRequests } from "@workspace/api-client-react";
 import { Skeleton } from "@/components/ui/skeleton";
 import { OpportunityCard } from "../components/OpportunityCard";
+import { Reveal } from "../components/Reveal";
 
 type NeedTypeKey =
   | "electricity" | "water" | "food" | "health"
@@ -70,8 +71,10 @@ export default function Opportunities() {
         </div>
       ) : (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {filtered.map((request) => (
-            <OpportunityCard key={request.id} request={request} />
+          {filtered.map((request, i) => (
+            <Reveal key={request.id} delay={(i % 3) * 0.08} className="h-full">
+              <OpportunityCard request={request} />
+            </Reveal>
           ))}
         </div>
       )}