hammam/Ehsan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Match ehsan.sa look: font, hero, and new Riyal symbol

Browse Source 
Follow-up tweaks so the EHSAN POC matches the official ehsan.sa site.

- Font: switched from Tajawal to IBM Plex Sans Arabic (index.html +
  index.css). ehsan.sa's exact webfont couldn't be auto-detected (site
  blocks scraping; no Wayback snapshot), so picked the closest official
  match.
- Home hero: replaced the gray search-box hero with a full-bleed green
  branded banner (badge, title, subtitle, two CTAs, decorative leaf SVGs),
  matching ehsan.sa. Moved the search bar above the featured opportunities
  grid (with an sr-only label for accessibility).
- Currency: replaced the legacy "﷼" glyph everywhere with the new official
  Saudi Riyal symbol via a reusable <Riyal /> component that masks a
  processed PNG (src/assets/riyal.png) colored with currentColor; marked
  aria-hidden since the adjacent number conveys the value. Applied across
  home stats, OpportunityCard, donate, track, admin, request.
- Added AR+EN translation keys heroBadge/heroBrowse.

Verified: tsc clean, no console errors, screenshots confirm hero, font, and
riyal symbol render correctly. Code review fixes applied (search label,
decorative riyal aria, removed unused key).
This commit is contained in:
Replit Agent
2026-06-05 18:05:28 +00:00
parent 5d40b0d3c2
commit 8519202949
17 changed files with 241 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.agents/memory/ehsan-branding.md
+13
View File
@@ -0,0 +1,13 @@
---
name: EHSAN branding (ehsan.sa)
description: Font, currency symbol, and hero conventions for matching the official ehsan.sa look.
---
# Matching ehsan.sa
- **Font:** the POC uses `IBM Plex Sans Arabic` (Google Fonts) as the closest official-looking match. ehsan.sa's exact webfont could NOT be auto-detected — the live site blocks server-side access (Firecrawl returns ERR_TUNNEL_CONNECTION_FAILED, curl with a browser UA returns nothing, and the Wayback Machine has no snapshot). If the font ever needs to be exact, ask the user to read it from browser DevTools (Computed > font-family).
- **Currency = new Saudi Riyal symbol**, not the legacy `﷼` glyph and not the word "ريال". It is rendered by the `<Riyal />` component (`src/components/Riyal.tsx`) which masks a processed PNG (`src/assets/riyal.png`) with `mask-image` + `background-color: currentColor`, so it inherits the surrounding text color and font size. The symbol is decorative (`aria-hidden`) since the adjacent number conveys the value.
**Why:** the user explicitly flagged the wrong font, the wrong currency symbol, and a non-official hero. The riyal mask approach was chosen because font/Unicode support for the new symbol is unreliable; masking the user-provided glyph guarantees it matches their reference and recolors anywhere.
**How to apply:** put the amount number first, then `<Riyal />` (e.g. `{amount.toLocaleString()} <Riyal />`). The home hero should be a full-bleed green (`bg-primary`) banner with a badge, title/subtitle, and CTAs — not a gray search box.