Illusion/sharper.ly
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Match the home page to Figma frame 253:4799

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
Illusion
2026-09-14 12:38:05 +02:00
co-authored by Claude Opus 5
parent 20b384039c
commit 8464c24fb1
9 changed files with 735 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/app/routes/_page-kit/sections.tsx
+102 -12
View File
@@ -98,6 +98,13 @@ export interface SectionHeaderProps {
eyebrow?: string;
lead?: string;
titleAs?: "h1" | "h2" | "h3";
/**
* Type role of the title. "h2" is the Heading/H2 role every inner page uses;
* "display" is Display/Small - the home page draws its band headings at the
* same 44/52 as the hero (figma 361:11147, 393:14570) while keeping them
* <h2> in the outline, which `titleAs` alone cannot express.
*/
size?: "h2" | "display";
/** Figma centres the home page's section headers; inner pages read start. */
align?: "start" | "center";
className?: string;
@@ -109,11 +116,13 @@ export function SectionHeader({
eyebrow,
lead,
titleAs = "h2",
size = "h2",
align = "start",
className,
}: SectionHeaderProps) {
const Title = titleAs;
const centred = align === "center";
const display = size === "display" || titleAs === "h1";
return (
<header
@@ -131,7 +140,7 @@ export function SectionHeader({
id={id}
className={cx(
"text-[var(--text-primary)]",
titleAs === "h1" ? "heading-h1 md:display-sm" : "heading-h2",
display ? "heading-h1 md:display-sm" : "heading-h2",
)}
>
{title}
@@ -150,14 +159,50 @@ export function SectionHeader({
HERO
------------------------------------------------------------------------ */
export interface PageHeroWordmark {
src: string;
/**
* Empty when the headline already names the project - the lockup is then
* decorative and a screen reader would otherwise read the name twice.
*/
alt: string;
/** Intrinsic pixels of the asset, for the aspect ratio the browser reserves. */
width: number;
height: number;
/** Drawn width in CSS pixels. Figma 253:4800 draws the hero lockup at 419. */
drawnWidth: number;
}
export interface PageHeroMedia {
src: string;
alt: string;
width?: number;
height?: number;
}
/**
* How the picture is drawn.
* "rounded" - a 16:9 card with the surface radius. The default, and what the
* inner pages have always rendered.
* "banner" - the home treatment (figma 253:4800): square corners, a wide
* band, and the two flat washes the frame paints over the photo.
*/
export type PageHeroMediaTreatment = "rounded" | "banner";
export interface PageHeroProps {
title: string;
eyebrow?: string;
lead?: string;
/**
* Brand lockup drawn above the headline. Only the home hero carries one
* (figma 253:4800, a 419x58 wordmark 48px above the headline row).
*/
wordmark?: PageHeroWordmark;
/** Buttons, rendered inline-end of the headline on wide viewports. */
actions?: ReactNode;
/** Wide picture below the headline row, as in Figma 253:4800. */
media?: { src: string; alt: string; width?: number; height?: number };
media?: PageHeroMedia;
mediaTreatment?: PageHeroMediaTreatment;
className?: string;
}
@@ -171,13 +216,32 @@ export function PageHero({
title,
eyebrow,
lead,
wordmark,
actions,
media,
mediaTreatment = "rounded",
className,
}: PageHeroProps) {
return (
<section className={cx("pt-2xl pb-3xl md:pt-3xl md:pb-4xl", className)}>
<section className={cx("pt-2xl md:pt-3xl", className)}>
<Container className="flex flex-col gap-2xl">
{wordmark ? (
/* A graphic dimension, not a spacing value - sized the way Brand.tsx
and the footer size their lockups, with the intrinsic box on the
element so the browser reserves the right height. */
<img
src={wordmark.src}
alt={wordmark.alt}
width={wordmark.width}
height={wordmark.height}
loading="eager"
decoding="async"
draggable={false}
style={{ maxWidth: `${wordmark.drawnWidth}px` }}
className="block h-auto w-full"
/>
) : null}
<div className="flex flex-col gap-lg lg:flex-row lg:items-end lg:justify-between">
<div className="flex max-w-[46rem] flex-col gap-sm">
{eyebrow ? (
@@ -196,21 +260,47 @@ export function PageHero({
</div>
{actions ? (
<div className="flex flex-wrap items-center gap-md lg:justify-end">
<div className="flex flex-wrap items-center gap-lg lg:justify-end">
{actions}
</div>
) : null}
</div>
{media ? (
<img
src={media.src}
alt={media.alt}
{...(media.width ? { width: media.width } : {})}
{...(media.height ? { height: media.height } : {})}
fetchPriority="high"
className="aspect-[16/9] w-full max-w-full rounded-surface object-cover"
/>
mediaTreatment === "banner" ? (
/* Figma draws a 1244x700 picture inside an 800px frame that clips
it, so what the page actually shows is a wide band. The band is
kept at 16:9 on a phone, where a 2.9:1 strip would be a sliver.
The two washes are flat fills in the frame, not gradients: a
mint tint over a shade, both painted on the photograph. */
<div className="relative w-full overflow-hidden">
<img
src={media.src}
alt={media.alt}
{...(media.width ? { width: media.width } : {})}
{...(media.height ? { height: media.height } : {})}
fetchPriority="high"
className="aspect-[16/9] w-full object-cover md:aspect-[1244/425]"
/>
<span
aria-hidden="true"
className="pointer-events-none absolute inset-0 bg-[var(--overlay-picture-shade)]"
/>
<span
aria-hidden="true"
className="pointer-events-none absolute inset-0 bg-[var(--overlay-picture-tint)]"
/>
</div>
) : (
<img
src={media.src}
alt={media.alt}
{...(media.width ? { width: media.width } : {})}
{...(media.height ? { height: media.height } : {})}
fetchPriority="high"
className="aspect-[16/9] w-full max-w-full rounded-surface object-cover"
/>
)
) : null}
</Container>
</section>