TudorandClaude Opus 5
3f0e05cc99
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m3s
PR Checks / Backend Smoke (pull_request) Successful in 7s
PR Checks / Build Backend (no push) (pull_request) Successful in 11s
PR Checks / Build Frontend (no push) (pull_request) Successful in 46s
PR Checks / Build Pipeline (no push) (pull_request) Successful in 10s
PR Checks / AI Code Review (Claude) (pull_request) Successful in 2m29s
Replaces the hand-drawn SVG landscape with the illustration supplied by the project owner. Master is assets/hero-source.png; everything under public/brand/hero-* comes from scripts/build-hero-images.js and should never be hand-edited. LAYOUT The artwork is composed as a full-bleed hero: it reserves an empty cream area down its left side for the headline. The old hero was a two-column grid with art in the right 0.88fr, which would have cropped that reserved area off and shrunk the scene into a thumbnail — the one thing the picture is built not to be. So the panel is now a single layered block: artwork behind, copy on top, and below the one-column breakpoint the artwork leaves the background and becomes a band under the search. Overlaying does not survive down to phone widths — the panel gets too narrow for the copy to stay inside the cream, so the scrim would have to cover nearly the whole image and you would be left with a tinted rectangle. Hence the switch at 860px rather than a single treatment stretched across every width. CONTRAST The copy sits on a gradient of --hero-ground, a new token sampled from the artwork's own cream (#FDF9F3) rather than from Sand. Sand is eight to thirteen points darker per channel, which leaves a visible seam straight down the hero. The scrim exists because the artwork is a fixed image on a fluid panel: past some width the headline would otherwise land on hillside green. Measured on rendered pixels, sampling background up to 120px beyond the right edge of each line, so a longer line still has margin: light title 14.36:1 body 6.52:1 dark title 11.01:1 body 6.44:1 The worst light case is hillside green showing through the scrim at 6.52:1. TWO CROPS The slot is two shapes: roughly 2.1:1–2.7:1 behind the desktop panel, and 2.6:1–4.9:1 as the band. A single file under object-fit: cover centre-crops, and at the band's extreme that slices a strip through the scene and loses the schoolhouse — exactly how the drawn hero failed on phones. <picture> switches crop, not just resolution: the band file is pre-cropped around the school and is already near 2.6:1, with the subject at ~65% across so squeezing toward 4.9:1 crops the empty sides instead. WEIGHT 1.6 MB PNG in, AVIF and WebP out; a browser fetches exactly one file — about 23–33 kB on desktop, 9–18 kB on a phone. The JPEG is only the <img> fallback. `sizes` describes the real panel box (max-width 1400 minus padding) rather than 100vw, which over-requested a candidate at every width on the LCP element. DARK THEME A raster cannot be re-graded token by token the way the drawing was, but it would reproduce the same failure — a bright illustration is the brightest object on a near-black page. It is dimmed in CSS to read as dusk, and the scrim fades it into the dark panel rather than into cream. TESTS The two illustration journeys are replaced by three, each covering a failure that still renders a valid-looking page: the artwork actually loading (naturalWidth, not src), the crop switching at the breakpoint, a modern format winning negotiation, and the dark theme dimming it. public/brand/CREDITS.md records provenance for every asset in that folder. The hero's licence line is marked unconfirmed — that one needs the owner. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
92 lines
3.6 KiB
TypeScript
92 lines
3.6 KiB
TypeScript
/**
|
|
* The landing hero artwork.
|
|
*
|
|
* This is the supplied illustration, not a drawing of one — see
|
|
* assets/hero-source.png and scripts/build-hero-images.js, which produces
|
|
* everything under public/brand/hero-*. Regenerate rather than hand-editing.
|
|
*
|
|
* Server-safe by construction: no 'use client', no hooks, no handlers, so it
|
|
* renders in the RSC pass and never reaches the client bundle.
|
|
*
|
|
* TWO CROPS, ONE <picture>
|
|
* ------------------------
|
|
* The slot is two different shapes. On desktop the artwork sits behind the
|
|
* whole panel at roughly 2.1:1 → 2.7:1, with the headline over the empty cream
|
|
* area the illustration reserves on its left. Below the one-column breakpoint
|
|
* it becomes a band between 2.6:1 and 4.9:1, under the search rather than
|
|
* behind it.
|
|
*
|
|
* A single file under `object-fit: cover` centre-crops, and at the band's
|
|
* extreme that slices a strip through the middle of the scene and loses the
|
|
* schoolhouse — exactly how the previous SVG hero failed on phones. So the
|
|
* <source media> switches crop, not just resolution: `band` is pre-cropped
|
|
* around the school and is already near 2.6:1, so the narrow band barely
|
|
* crops it further.
|
|
*
|
|
* `object-position` is set in CSS per breakpoint and is load-bearing — see
|
|
* .heroArt in HomeView.module.css.
|
|
*
|
|
* The artwork is decorative: the proposition beside it carries the meaning, so
|
|
* alt is empty and it is hidden from assistive tech rather than described.
|
|
*/
|
|
|
|
/*
|
|
* The panel is not the viewport. `.main` is capped at 1400px with 1.5rem of
|
|
* padding (1rem under 768px), so the artwork's box is that minus the padding —
|
|
* describing it as 100vw over-requests by ~48px worth of candidate at every
|
|
* width, which on a slow connection is a larger file than needed for the LCP
|
|
* element.
|
|
*/
|
|
const SIZES = '(min-width: 1400px) 1352px, (min-width: 769px) calc(100vw - 3rem), calc(100vw - 2rem)';
|
|
|
|
/** Intrinsic size of the wide crop — the aspect hint that prevents reflow. */
|
|
const WIDE_W = 1672;
|
|
const WIDE_H = 941;
|
|
|
|
export function HeroIllustration() {
|
|
return (
|
|
<picture>
|
|
{/* Band crop first: <source> is first-match-wins, so the narrow-viewport
|
|
rules have to precede the unconstrained desktop ones. */}
|
|
<source
|
|
media="(max-width: 860px)"
|
|
type="image/avif"
|
|
srcSet="/brand/hero-band-500.avif 500w, /brand/hero-band-700.avif 700w, /brand/hero-band-972.avif 972w"
|
|
sizes={SIZES}
|
|
/>
|
|
<source
|
|
media="(max-width: 860px)"
|
|
type="image/webp"
|
|
srcSet="/brand/hero-band-500.webp 500w, /brand/hero-band-700.webp 700w, /brand/hero-band-972.webp 972w"
|
|
sizes={SIZES}
|
|
/>
|
|
<source
|
|
type="image/avif"
|
|
srcSet="/brand/hero-wide-900.avif 900w, /brand/hero-wide-1200.avif 1200w, /brand/hero-wide-1672.avif 1672w"
|
|
sizes={SIZES}
|
|
/>
|
|
<source
|
|
type="image/webp"
|
|
srcSet="/brand/hero-wide-900.webp 900w, /brand/hero-wide-1200.webp 1200w, /brand/hero-wide-1672.webp 1672w"
|
|
sizes={SIZES}
|
|
/>
|
|
{/*
|
|
The hero is the largest thing above the fold, so it is almost certainly
|
|
the LCP element: fetchPriority high, and never lazy. eslint's
|
|
no-img-element wants next/image, which cannot art-direct between two
|
|
different crops — that is the whole point of the <picture> above.
|
|
*/}
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src="/brand/hero-wide-1200.jpg"
|
|
alt=""
|
|
aria-hidden="true"
|
|
width={WIDE_W}
|
|
height={WIDE_H}
|
|
decoding="async"
|
|
fetchPriority="high"
|
|
/>
|
|
</picture>
|
|
);
|
|
}
|