IllusionandClaude Opus 5
19fab4a783
An audit of all twelve draft files against the build turned up a set of mismatches, most of them in the tier-2 token layer rather than in any one component. Tier 1 is untouched throughout - only the meanings moved. SHAPE. The drafts draw three corners, not five: 2px for a tag, thumbnail, flag or checkbox, 4px for anything with a box, and fully round for a filter chip or status pill. Nothing in any draft is 8px or 12px. --radius-card and --radius-surface therefore come down to radius/sm, a --radius-chip is added for the 2px tier, and --radius-control-lg - a quirk of the Figma Button frame's ghost cells - is retired along with its four consumers. ELEVATION. A shadow is a fraction of the ground it falls on, and the ramp was tuned for a white page: on the drafts' near-black ground a 12-28% black is invisible. Tier 1 gains the two deep steps the drafts actually draw (--shadow-dark-lg/xl), and --elevation-card/-popover/-modal move into the per-surface blocks so the dark surface can take them while the light one keeps the soft ramp. A resting card now has no shadow at all - the drafts separate with a hairline - and the black is spent on what floats. CARDS. The hover was a white-24% hairline and a faint glow; the drafts turn the hairline accent green, lift the card 6px and land a deep black under it. The lift is pointer-only and is dropped under prefers-reduced-motion. GHOST IS A TEXT LINK. The drafts never fill a ghost control - every "All updates ->" is plain text that turns green while the label-to-arrow gap opens. The tokens carry no fill in any state and the variant opts out of the 3px lift, which also retires the WCAG workaround the old Figma hover forced (green label on a green fill, 1.40:1). NAVIGATION. A nav label rests in text/secondary and brightens to primary; the current section stays primary and is marked by the accent rule, not by green text. HERO STRIPE. The middle block was painted near-black against a comment claiming the redesign had dropped white; the drafts paint it #F8F9FA. Back to background/inverse, and to the drafts' 390 : 495 : 363 split. styles/README.md is updated to match, including a contrast table that still described --surface-raised as the retired #2e2e2c. Not changed, because each is a decision rather than a defect: the drafts set every eyebrow, tag and meta line in IBM Plex Mono at 10-11px with 1.2-1.4px tracking (a third typeface, and no Arabic counterpart); draft headings are weight 800, which needs a font file we do not have; and the EU badge statement stays at --text-primary, since the visibility lockup is contractual. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
apps/web — SHARP-ER front end
React Router 8 in framework mode with ssr: true, React 19, Vite 8 and Tailwind CSS 4.
It renders the bilingual (EN / AR) SHARP-ER website and reads its content from the Strapi CMS
in apps/cms.
Setup, the database, Docker and everything else that spans both applications is in the repository README. This file covers the web application only.
Run it
Always install from the repository root (pnpm install) — this is a pnpm workspace with a
hoisted node_modules.
pnpm --filter web dev # http://localhost:5173, HMR (or: pnpm dev:web)
pnpm --filter web build # build/client + build/server
pnpm --filter web start # react-router-serve, http://localhost:3000
pnpm --filter web typecheck # react-router typegen && tsc
The server reads three variables from its process environment, all optional in development:
STRAPI_URL (default http://localhost:1337), STRAPI_TOKEN and SITE_URL (unset means
the canonical URL is derived from the request).
Layout
app/
├── root.tsx HTML shell: <html lang/dir>, canonical + hreflang, <Navigation>, <Footer>
├── routes.ts Route config: "/" redirect, the ":lang" layout, the ten sections
├── routes/
│ ├── *.tsx One module per page, serving BOTH locales
│ ├── _page-kit/ Section/hero/prose primitives, markdown renderer, CMS helpers
│ ├── _shared/ Listing helpers + listing UI (filters, tabs, pagination, empty states)
│ └── _events-opportunities/ Event and opportunity models, forms, .ics generation
├── components/ui/ Button · Input · Card · Navigation · Footer · LanguageSwitcher
├── styles/ Design tokens — see styles/README.md
├── i18n/ Locale config, paths, translator, formatters, messages/{en,ar}.json
└── lib/ strapi.ts · seo.ts · env.server.ts · route-slugs.ts · site-navigation.ts
public/
├── assets/ Logos, EU emblem, partner logos, icons
└── fonts/ Licensed woff2 files — NOT in git, see the root README
URLs
/ 302 (Vary: Accept-Language) -> /en or /ar
/:lang home
/:lang/<section> about · what-we-do · activities-and-initiatives · events-calendar ·
applications-and-opportunities · news-and-updates · contact ·
resources-and-publications · knowledge-hub
/:lang/<section>/:slug detail pages (events, opportunities, resources, knowledge, news, activities)
/EN/about 301 -> /en/about
anything else localised 404
One route module serves both languages: params.lang is validated by the :lang layout, so
inside a page it is always "en" | "ar". Add a section module at the path
SECTION_MODULES names in app/routes.ts and it is wired on the next build — Vite does not
re-evaluate that file when a module appears, so restart the dev server.
Data
Content is fetched in loaders, on the server, through ~/lib/strapi:
const { data } = await getMany<Story>("stories", { locale, sort: "publicationDate:desc" });
const story = requireEntity(await getBySlug<Story>("stories", params.slug, { locale }));
getMany · getOne · getOneOrNull · getSingle · getBySlug · findFirst, plus
mediaUrl, requireEntity and notFound. The client is server-only; STRAPI_TOKEN never
reaches the browser. Listing pages swallow CMS failures and fall back to the approved draft
copy, so the site stays up when Strapi is down — requireEntity is for genuine per-slug 404s.
SEO comes from ~/lib/seo (buildMeta plus the JSON-LD builders). root.tsx already emits
the canonical link and the en / ar / x-default alternates for every route, so a page's
meta must not pass alternates: true; override the canonical with
handle.canonicalPath instead. In meta, read the root data with readRootSeo(matches) —
React Router 8 exposes loaderData on a match, not data.
Styling
Two-tier design tokens: tier 1 is raw values (app/styles/primitives.css), tier 2 is meaning
(semantic.css, typography.css). Components reference tier-2 tokens only — no raw hex,
no tier-1 primitive, no raw font sizes. :root is the dark surface; data-surface="light"
flips a subtree and repaints itself.
Full reference: app/styles/README.md.
Bilingual and RTL
Import from ~/i18n: useTranslation() in components, translate(locale, key) in loaders,
localizedPath / sectionPath for links, formatDate / formatNumber for values. UI
strings live in app/i18n/messages/en.json and ar.json with identical, typechecked keys.
Lay out with logical properties only — ps- pe- ms- me- start- end-,
margin-inline-start, text-align: start — never pl- / pr- / left / right. Arabic
then mirrors for free. rtl: and ltr: variants exist for the rare case that cannot be
expressed logically.
Docker
Dockerfile builds this application for production. Its build context is the repository
root, because the pnpm lockfile lives there:
docker build -f apps/web/Dockerfile -t sharper-web . # from the repository root
docker compose up -d --build web # or through compose
It is a pnpm adaptation of the React Router template Dockerfile: install with
--filter web..., react-router build, then serve build/server/index.js with
react-router-serve on port 3000, with a health check on /en.
Further reading
- React Router docs — framework mode, loaders,
meta,handle ../../README.md— setting the whole project up, both paths../../CLAUDE.md— the house rules in short form