Replace home hero with animated EHSAN banner carousel

Task #6: On artifacts/ehsan-poc home page, replaced the green text hero
with an auto-rotating, looping carousel of the four official ehsan.sa
banner images (Zakat, recurring/dawri, Waqf, gift) imported via @assets.

- Auto-advances every 5s, loops, and respects prefers-reduced-motion.
- Clickable dot indicators plus an accessible pause/play toggle (WCAG
  2.2.2) on a translucent backdrop pill.
- Bottom gradient scrim keeps the white CTA + controls readable on all
  four banner backgrounds.
- Removed the overlay heading, subtitle, and the "طلب دعم" button per the
  user; kept the "تصفّح الفرص" CTA linking to /opportunities.
- Added common.pause / common.play i18n keys (AR + EN) for the toggle.

Banners use alt="" (decorative) since the functional CTA is separately
labeled. Verified with tsc --noEmit and home-page screenshots (RTL).
This commit is contained in:
Replit Agent
2026-06-05 18:20:34 +00:00
parent 2828a816ce
commit d371d63c19
2 changed files with 82 additions and 59 deletions
@@ -28,6 +28,8 @@ export const en = {
login: "Login",
logout: "Logout",
cart: "Cart",
pause: "Pause slideshow",
play: "Play slideshow",
},
nav: {
home: "Home",
@@ -238,6 +240,8 @@ export const ar = {
login: "تسجيل الدخول",
logout: "تسجيل الخروج",
cart: "السلة",
pause: "إيقاف العرض",
play: "تشغيل العرض",
},
nav: {
home: "الرئيسية",