From 8464c24fb1714ee9ee537285d980ac62903d7e0f Mon Sep 17 00:00:00 2001 From: Hisham Aburaqibah Date: Mon, 14 Sep 2026 12:38:05 +0200 Subject: [PATCH] Match the home page to Figma frame 253:4799 The page resembled the design but had drifted in every band. Ported it section by section against the measured frame. Hero (253:4800) - Add the SHARP wordmark above the headline. The frame paints "SHARP" only, not the full SHARP-ER lockup the navigation carries, so this is the SHARP mark on its own, as vector (extracted from the brand guideline artwork) at its true 273px rather than an upscaled PNG. - Drop the leading project name from the headline in both locales: the wordmark above now carries it, as the frame composes it. - Stop the lead paragraph rendering by default. The frame's subheading node is hidden, but the code fell back to the site description, so a paragraph always appeared. - Fallback CTAs become "Discover SHARP-ER" / "Explore Our Work", 24px apart. Both the CMS and fallback paths now render through one HeroCta, so an editor-authored secondary CTA gets the designed white treatment instead of the dark-surface outline. - The picture loses its radius and gains the frame's two flat washes and wide band. Figures band - 253:4835 is hidden="true" in the frame, so the band and its "figures still being confirmed" placeholder no longer render. It appears only once the CMS supplies real numbers. Launch (361:10853) - Heading renders at Display/Small instead of Heading/H2. SectionHeader gains `size` since display-sm was reachable only via titleAs="h1". - The three-paragraph story becomes the frame's single centred lead with its four bold runs, which needed a ProseRun copy shape - a flat string cannot carry emphasis. - The captions were Card.Content links with images and action labels; the frame draws plain centred Heading/H2 text. - Add the three-up photo strip that bleeds past the page and clips. - Remove the funding line, which the frame does not draw in this band. EU visibility still stands via the nav badge and footer statement. Partners (393:14754) - Heading moves from centred to start-aligned, up to Display/Small. - Tiles move to the sunken surface (they were lighter than the page; the design has them darker), lose their border, 8px -> 4px radius, padding on the inline start only, logo 48 -> 70px, name to Body/Large Bold. Footer - Black ground via a new --surface-footer token, a top rule, links up to Body/Large Bold 18/28 at 24px spacing, and column headings to Body/Small Bold on --text-tertiary. - Keeps the real IA from ROUTE_SLUGS rather than frame 140:7814's labels, which name six pages that do not exist. Tokens - New tier-1 steps for values the design uses and the ramps lacked (--color-black-a20, --color-green-200-a12, --opacity-50) and tier-2 --overlay-picture-shade / --overlay-picture-tint for the hero wash. copy.ts now names the Figma frame as the source for the home strings. The Arabic launch lead is rebuilt from the approved Arabic column to carry the English frame's meaning and is marked (ar-draft) pending client sign-off - the file has no Arabic home frame to work from. Verified: typecheck and build green, no raw hex or tier-1 token in components/routes, no physical-direction utility, 141 i18n keys at parity, both locales rendered and checked for RTL mirroring. Co-Authored-By: Claude Opus 5 (1M context) --- apps/web/app/components/ui/Footer/Footer.tsx | 44 ++- apps/web/app/i18n/messages/ar.json | 2 + apps/web/app/i18n/messages/en.json | 2 + apps/web/app/routes/_page-kit/copy.ts | 91 +++-- apps/web/app/routes/_page-kit/sections.tsx | 114 +++++- apps/web/app/routes/home.tsx | 374 +++++++++++------- apps/web/app/styles/primitives.css | 6 + apps/web/app/styles/semantic.css | 14 + .../public/assets/sharp-wordmark-inverse.svg | 285 +++++++++++++ 9 files changed, 735 insertions(+), 197 deletions(-) create mode 100644 apps/web/public/assets/sharp-wordmark-inverse.svg diff --git a/apps/web/app/components/ui/Footer/Footer.tsx b/apps/web/app/components/ui/Footer/Footer.tsx index cb576ac..cd72e6f 100644 --- a/apps/web/app/components/ui/Footer/Footer.tsx +++ b/apps/web/app/components/ui/Footer/Footer.tsx @@ -11,13 +11,17 @@ everything that carries meaning (`text-[var(--text-primary)]`). No raw hex, no tier-1 primitive, no component stylesheet. - TWO DELIBERATE DEVIATIONS FROM THE PUBLISHED FRAMES, both noted inline: - 1. the two EN frames disagree on the sitemap (140:7812 carries the real IA - but no column headings, 140:7814 carries headings but stale labels) - - this takes the newer IA and the headings; - 2. `text/tertiary` (#949492) on white is ~2.9:1, so the small labels use - `--text-secondary` instead. Revert the two lines marked (a11y) for - pixel-exact parity. + ONE DELIBERATE DEVIATION FROM THE PUBLISHED FRAMES: + the two EN frames disagree on the sitemap. 140:7812 carries the real IA but + no column headings; 140:7814 carries headings but labels for pages that do + not exist (Partners, Blog, Photo Gallery, SUQs, Pilot Initiatives, + Research). This takes the newer IA - built from ROUTE_SLUGS, the same + source the router is built from - and the headings. Linking the frame's + labels verbatim is what previously shipped five dead links. + + Column headings take `--text-tertiary`, as the frames do: that token is + already re-pointed to a readable step on the light surface (semantic.css), + so it needs no a11y override here. ========================================================================= */ import { Link } from "react-router"; @@ -62,17 +66,22 @@ const FOCUS_RING = cx( const TRANSITION = "transition-[color] duration-[var(--motion-duration-fast)] ease-[var(--motion-ease-standard)]"; -/** Body/Medium Bold links, as in figma 380:12385. */ +/** Body/Large Bold links - 18/28, as the footer frame sets them. */ const LINK_CLASS = cx( FOCUS_RING, TRANSITION, - "body-md-bold inline-block text-[var(--text-primary)]", + "body-lg-bold inline-block text-[var(--text-primary)]", "hover:text-[var(--text-link)] hover:underline underline-offset-4", ); -/** Label/Medium, used for the column headings and the "implemented by" label. */ +/** Label/Medium - the "implemented by" label (figma 228:3035). */ const LABEL_CLASS = "label-md uppercase"; +/** Body/Small Bold - the sitemap column headings (figma 140:7823 / 140:7834). + `--text-tertiary` is already remapped to a readable step on the light + surface, so the same token is correct on both. */ +const GROUP_HEADING_CLASS = "body-sm-bold uppercase text-[var(--text-tertiary)]"; + /** * Internal links go through the router so the footer navigates client-side; * anything flagged `external` stays a plain anchor and opens in a new tab. @@ -117,9 +126,11 @@ export function Footer({ dir={dir} data-surface={surface} className={cx( - // data-surface paints background-color and color itself (app.css), so - // the footer needs no colour utility of its own. - "w-full px-lg pb-2xl pt-[var(--layout-section-gap)] md:px-xl", + // data-surface sets the palette, but the frame puts the footer on its + // own ground (base/black on dark) with a rule separating it from the + // page, so those two are stated here rather than inherited. + "w-full border-t border-[var(--border-default)] bg-[var(--surface-footer)]", + "px-lg pb-2xl pt-[var(--layout-section-gap)] md:px-xl", className, )} > @@ -185,11 +196,8 @@ export function Footer({ index < groups.length - 1 && "sm:pe-xl", )} > - {/* (a11y) figma uses text/tertiary; see the header note. */} -

- {group.heading} -

-