/**
* Brand illustration — the landing hero's landscape.
*
* Guideline rules for illustration: no people or faces, soft shapes, rounded
* corners, minimal detail, maximum clarity. The scene reads as "the journey to
* a school" — a path climbing through layered hills to a small schoolhouse,
* with a pin marking where you are.
*
* Deliberately server-safe: no 'use client', no hooks, no event handlers, so
* it renders in the RSC pass and never reaches the client bundle.
*
* TWO COMPOSITIONS, ON PURPOSE
* ----------------------------
* The hero art slot is not one shape. On a wide desktop it is roughly 1.5:1;
* at the 1024px breakpoint about 1.34:1; on a phone it collapses to a band
* near 2.6:1, and just above the one-column breakpoint it is nearly 5:1.
*
* A single drawing cannot cover 1.34:1 → 4.9:1. With `slice`, the SVG scales
* to cover and crops the overflow, anchored here to the bottom edge — so at
* 860×176 a 540×520 scene shows only its bottom 110 user units. That is what
* used to happen: the schoolhouse sat at y 218–324 and was cropped away
* entirely on phones, leaving bare hills and a pin pointing at nothing.
*
* So there are two drawings and CSS shows exactly one. They are both static
* server-rendered SVG, so this costs markup and nothing else — no JS, no
* second request, no layout shift. Each is composed against the crop window
* its own breakpoint actually produces; see the safe-zone note on each.
*
* Colour comes from the --ill-* tokens in globals.css, which are re-graded for
* the dark theme. Everything else about the scene is identical in both themes.
*/
/** Scoped so the gradient ids can't collide with another inline SVG. */
const SKY_TALL_ID = 'sc-hero-sky-tall';
const SKY_BAND_ID = 'sc-hero-sky-band';
function SkyGradient({ id }: { id: string }) {
return (
);
}
/**
* The schoolhouse. Drawn once, placed by each composition.
*
* Detail deliberately below what it was: the gable clock, the flagpole
* pennant and the four-window grid are gone. At the sizes this actually
* renders they read as noise, and they were what tipped the drawing from
* "soft brand illustration" into clip art.
*/
function Schoolhouse({ x, y, scale = 1 }: { x: number; y: number; scale?: number }) {
return (
);
}
/** The "you are here" pin. The only saturated thing in either composition. */
function Pin({ x, y, scale = 1 }: { x: number; y: number; scale?: number }) {
return (
);
}
/**
* Desktop composition — the two-column hero panel.
*
* Crop window: `slice` anchored to the bottom, so the widest slot (about
* 590×384) reveals y ∈ [169, 520] and the narrowest (about 430×320) reveals
* y ∈ [118, 520]. Everything that carries meaning is therefore kept at
* y ≥ 200; the sky above it exists only to be cropped.
*/
export function HeroIllustration() {
return (
);
}
/**
* Band composition — the one-column hero, where the art becomes a short strip
* beneath the search.
*
* Crop window: at 358×136 (a phone) `slice` reveals x ∈ [42, 358] of the
* 400-unit width; at 860×176 (just under the one-column breakpoint) it reveals
* the full width but only y ∈ [38, 120]. The intersection — x ∈ [70, 330],
* y ∈ [38, 120] — is where the school and the pin sit. Hills and trees run to
* the edges precisely because they are the parts that may be cropped.
*/
export function HeroIllustrationBand() {
return (
);
}