Task #15: Make «عن إحسان» top-nav a real dropdown and build the About page.
- Header.tsx: converted static «عن إحسان» span into a dropdown trigger
replicating the existing services dropdown pattern (aboutOpen state,
trigger/panel refs, outside-click + Escape handling). Desktop panel and
mobile nav both list «من نحن» (/about) and «اللجان» (/about/committees).
- New pages/about.tsx: green intro panel («نبذة عن إحسان») + tab strip
(الرؤية والرسالة / الأهداف والركائز / المزايا والمجالات) for the Who-we-are
view, and a committee card grid for the Committees view. Section chosen via
/about/:section? route param; in-page toggle between the two. Reuses Reveal
for scroll-in.
- App.tsx: registered <Route path="/about/:section?" component={About} />.
- translations.ts: added full bilingual `about` section (AR + EN).
Fully bilingual via existing t.* system, RTL verified, no emojis.
tsc passes; screenshots confirm both views render correctly.
Reskin the EHSAN POC to match ehsan.sa and gate the admin area behind a
simple POC login.
- Official header: cropped EHSAN logo, nav (الرئيسية/الوقف/فرص التبرع/
خدماتنا dropdown→طلب دعم/عن إحسان/براعم إحسان), login/cart/search icons,
language toggle, mobile menu. Functional items link; rest are visual-only.
- Colors: green primary tuned + orange accent token added in index.css.
- Auth: AuthContext (localStorage, admin/admin) + login page; /admin and
/whatsapp-log now behind a Protected wrapper redirecting to /login.
- Redesigned OpportunityCard (photo, green progress bar with %, category
badge, تم جمع/المبلغ المتبقي columns, inline donate button + amount),
used on home and opportunities pages.
- Two-step donate page (التفاصيل → الدفع): step indicator, presets
100/50/10, custom amount (prefilled via ?amount=), "تبرع عن أهلك"
checkbox, donor form (phone min 10 for OpenClaw loop).
- 8 need-type card images added; needImages helper maps need→image.
- Seed: added published opportunities (req-012..017) with partial progress
to showcase cards; one kept near-full for an easy closed-loop demo.
Deviation (from code review): donate handler now ACCUMULATES collectedAmount
and clamps to target, validates finite/positive amount, and only advances to
the closed-loop pipeline when a case is fully funded (previously overwrote
and force-advanced — broke partial-progress cases). Donate buttons kept green
to match the reference; orange is an accent only.
Replit Agent