Rebuild the site to the Claude Design drafts
Carries the 11 page drafts plus the shared SiteNav and SiteFooter onto the project's own design system: tier-2 tokens, the published type roles, logical properties throughout, and both locales. Surfaces - The page stands on #0B0B0A with #1D1D1B bands lifted off it, as the drafts do; the body previously painted the band colour, so every band was a step too light. - A card is drawn one step off whatever it stands on (#1D1D1B on the ground, #141413 inside a band). Components paint --surface-card and a band re-points it for its subtree, so a card can never come out the same colour as its band. Shell - Nav: translucent ground with a blur, chevrons on group triggers, an accent rule under the current section, the drafts' compact dropdown card, and an EN | AR toggle in place of the globe menu. - Footer: the drafts' four-column grid, one-line brand text, Facebook as a bordered button, the EU lockup, the implemented-by row and the funding disclaimer. Pages - Home: hero with counting figures, launch band, three areas of change, newsroom, FAQ accordion and the consortium band. - The nine interior pages rebuilt and then audited section by section against their drafts. - Applications: the three-step application form now posts real submissions to the Strapi `application` type, validated server-side and working without JavaScript. Motion - Every animation in the drafts, as classes in _page-kit/motion.css: staggered entrances, scroll-driven reveals, the drifting washes (each page carries its own geometry), the sheen, the counting figures and the accordion. The drafts' coloured hover glow is deliberately not shipped. CMS - New `faq` collection type behind the home page's accordion. - `role` added to the consortium member component so an editor can supply the chip and the deliverable separately. Content - No invented figure, date, name or commitment ships: the five-working-day reply, the placeholder email and Facebook handle, the sample news, events, publications and FAQs, the invented application rules and the TBD counters are all withheld pending real content. Figures that survived (3 consortium partners, 4 areas of work, 16 human security sub-projects, Dec 2025 - Dec 2027) are verified against docs/ and the bundled draft copy. Verified: pnpm typecheck (web + CMS) and pnpm --filter web build pass; all 20 page/locale URLs render 200 through the built SSR handler, including with the CMS unreachable; no raw hex or physical-direction utility in components or routes. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -27,9 +27,12 @@ import { ArrowIcon, Button } from "~/components/ui/Button";
|
||||
import { Input } from "~/components/ui/Input";
|
||||
import type { Translator } from "~/i18n";
|
||||
|
||||
import { Container, PageHero, type HeroWash } from "../_page-kit/sections";
|
||||
import type { PaginationModel, SelectOption } from "./listing";
|
||||
import { withParam } from "./listing";
|
||||
|
||||
import "../_page-kit/motion.css";
|
||||
|
||||
function cx(...parts: Array<string | false | null | undefined>): string {
|
||||
return parts.filter(Boolean).join(" ");
|
||||
}
|
||||
@@ -59,6 +62,57 @@ export function PageShell({
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* The redesigned listing hero (2026 drafts): an accent eyebrow over the
|
||||
* headline, the standfirst, the two slow washes drifting behind it, the
|
||||
* staggered entrance, and a rule drawn on under the whole band.
|
||||
*
|
||||
* It is `PageHero` from the page kit, not a second hero: the same component
|
||||
* the home page uses, with `ambient` and `reveal` turned on, so every page on
|
||||
* the site arrives the same way and there is one hero to maintain.
|
||||
*
|
||||
* `children` is the slot under the headline row - the knowledge hub puts its
|
||||
* search box there; `actions` is the page kit's own inline-end slot.
|
||||
*/
|
||||
export function ListingHero({
|
||||
heading,
|
||||
intro,
|
||||
eyebrow,
|
||||
actions,
|
||||
ambient,
|
||||
children,
|
||||
}: {
|
||||
heading: string;
|
||||
intro?: string;
|
||||
eyebrow?: string;
|
||||
actions?: ReactNode;
|
||||
/** This page's own drifting wash - every draft positions its own. */
|
||||
ambient?: readonly HeroWash[];
|
||||
children?: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-col gap-2xl">
|
||||
<PageHero
|
||||
title={heading}
|
||||
{...(eyebrow ? { eyebrow } : {})}
|
||||
{...(intro ? { lead: intro } : {})}
|
||||
{...(actions ? { actions } : {})}
|
||||
{...(ambient ? { ambient } : {})}
|
||||
reveal
|
||||
/>
|
||||
|
||||
{children ? <Container>{children}</Container> : null}
|
||||
|
||||
{/* The draft closes the hero with a hairline. Drawn on from the inline
|
||||
start rather than simply appearing - the `barGrow` of the drafts. */}
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="sh-bar-grow h-px w-full bg-[var(--border-subtle)]"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function PageHeader({
|
||||
heading,
|
||||
intro,
|
||||
@@ -261,8 +315,11 @@ export function EmptyState({
|
||||
return (
|
||||
<div
|
||||
className={cx(
|
||||
// The drafts draw the empty panel as a dashed outline on whatever band
|
||||
// it sits on - no fill of its own, so it is correct on the #0B0B0A
|
||||
// ground and inside a #1D1D1B band alike.
|
||||
"flex flex-col items-start gap-md rounded-card border border-dashed",
|
||||
"border-border-default bg-surface-sunken p-2xl",
|
||||
"border-border-default p-2xl",
|
||||
)}
|
||||
>
|
||||
<p className="heading-h3 text-text-primary">{title}</p>
|
||||
@@ -524,3 +581,454 @@ export function MetaLine({ items }: { items: readonly string[] }) {
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
PILL FILTERS
|
||||
----------------------------------------------------------------------------
|
||||
The 2026 drafts replace the underlined tab strip with a row of pills on the
|
||||
calendar, the calls list and the activities index: a dot marks the pill in
|
||||
force and the rest are outlined. They are LINKS, exactly as the tab strip
|
||||
was - each combination of filters is its own URL, so it survives a share, a
|
||||
bookmark, the back button and a crawler that only follows links.
|
||||
------------------------------------------------------------------------ */
|
||||
|
||||
export interface FilterPill {
|
||||
readonly id: string;
|
||||
readonly label: string;
|
||||
readonly href: string;
|
||||
readonly isCurrent: boolean;
|
||||
}
|
||||
|
||||
export function FilterPills({
|
||||
label,
|
||||
pills,
|
||||
shape = "pill",
|
||||
hideLabel = false,
|
||||
children,
|
||||
}: {
|
||||
label: string;
|
||||
pills: readonly FilterPill[];
|
||||
/**
|
||||
* The drafts draw two shapes on the same row: the filters themselves are
|
||||
* fully rounded, while the calendar's List / Month switch is a pair of
|
||||
* square controls. Same markup, same behaviour, one radius token apart.
|
||||
*/
|
||||
shape?: "pill" | "control";
|
||||
/** The view switch carries no visible caption in the draft. */
|
||||
hideLabel?: boolean;
|
||||
/** Anything that belongs on the same row - a region select, a view switch. */
|
||||
children?: ReactNode;
|
||||
}) {
|
||||
const radius = shape === "pill" ? "rounded-pill" : "rounded-[var(--radius-control)]";
|
||||
|
||||
return (
|
||||
<nav aria-label={label} className="flex flex-wrap items-center gap-sm">
|
||||
<p
|
||||
className={cx(
|
||||
"label-md uppercase text-text-tertiary",
|
||||
hideLabel && "sr-only",
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
</p>
|
||||
|
||||
<ul className="flex flex-wrap items-center gap-xs">
|
||||
{pills.map((pill) => (
|
||||
<li key={pill.id}>
|
||||
<Link
|
||||
to={pill.href}
|
||||
prefetch="intent"
|
||||
aria-current={pill.isCurrent ? "page" : undefined}
|
||||
className={cx(
|
||||
"inline-flex items-center gap-xs border px-md py-xs",
|
||||
radius,
|
||||
"body-sm-bold transition-colors",
|
||||
"duration-[var(--motion-duration-fast)] ease-[var(--motion-ease-standard)]",
|
||||
pill.isCurrent
|
||||
? "border-border-accent bg-surface-accent-subtle text-text-primary"
|
||||
: "border-border-default text-text-secondary hover:border-border-accent hover:text-text-primary",
|
||||
)}
|
||||
>
|
||||
{/* Decorative: `aria-current` already says which pill is on. */}
|
||||
{pill.isCurrent ? (
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="size-[7px] shrink-0 rounded-pill bg-[var(--surface-accent)]"
|
||||
/>
|
||||
) : null}
|
||||
{pill.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{children}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* A single `<select>` that navigates on change, styled as one of the pills
|
||||
* beside it. A real `<form method="get">`, so it still applies with scripting
|
||||
* off; `keep` carries the filters that are not this one, because a GET submit
|
||||
* replaces the whole query string.
|
||||
*/
|
||||
export function PillSelect({
|
||||
name,
|
||||
label,
|
||||
value,
|
||||
options,
|
||||
allLabel,
|
||||
applyLabel,
|
||||
action,
|
||||
keep,
|
||||
}: {
|
||||
name: string;
|
||||
label: string;
|
||||
value: string;
|
||||
options: readonly SelectOption[];
|
||||
allLabel: string;
|
||||
/** Label of the fallback submit - shown because a <select> cannot submit. */
|
||||
applyLabel: string;
|
||||
action: string;
|
||||
/** Other query parameters to preserve, as [name, value] pairs. */
|
||||
keep?: readonly (readonly [string, string])[];
|
||||
}) {
|
||||
const submit = useSubmit();
|
||||
|
||||
return (
|
||||
<Form
|
||||
method="get"
|
||||
action={action}
|
||||
aria-label={label}
|
||||
onChange={(event) => {
|
||||
if (event.target instanceof HTMLSelectElement) {
|
||||
submit(event.currentTarget, { method: "get" });
|
||||
}
|
||||
}}
|
||||
className="flex items-center gap-xs"
|
||||
>
|
||||
{(keep ?? []).map(([key, kept]) => (
|
||||
<input key={key} type="hidden" name={key} value={kept} />
|
||||
))}
|
||||
|
||||
<label className="sr-only" htmlFor={`pill-${name}`}>
|
||||
{label}
|
||||
</label>
|
||||
<select
|
||||
id={`pill-${name}`}
|
||||
name={name}
|
||||
defaultValue={value}
|
||||
className={cx(
|
||||
"body-sm-bold rounded-pill border border-border-default bg-surface-raised",
|
||||
"px-md py-xs text-text-secondary transition-colors",
|
||||
"duration-[var(--motion-duration-fast)] ease-[var(--motion-ease-standard)]",
|
||||
"hover:border-border-accent hover:text-text-primary",
|
||||
)}
|
||||
>
|
||||
<option value="">{allLabel}</option>
|
||||
{options.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
{/* Kept for the case where scripting is off - the same bargain the
|
||||
filter bar strikes. A <select> alone cannot submit its form. */}
|
||||
<Button type="submit" variant="ghost" size="sm">
|
||||
{applyLabel}
|
||||
</Button>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
FACET SIDEBAR - the resources listing
|
||||
----------------------------------------------------------------------------
|
||||
The draft draws the resources filters as checkbox groups in a sticky rail.
|
||||
They are rendered as LINKS with a checkbox-shaped marker: one click sets the
|
||||
facet, clicking the active option clears it, and the result is still one
|
||||
URL per view. A real <input type="checkbox"> would promise multi-select,
|
||||
which the Strapi query behind this listing does not offer.
|
||||
------------------------------------------------------------------------ */
|
||||
|
||||
export interface FacetOption {
|
||||
readonly value: string;
|
||||
readonly label: string;
|
||||
readonly href: string;
|
||||
readonly isCurrent: boolean;
|
||||
}
|
||||
|
||||
export function FacetGroup({
|
||||
heading,
|
||||
options,
|
||||
}: {
|
||||
heading: string;
|
||||
options: readonly FacetOption[];
|
||||
}) {
|
||||
if (options.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-sm border-t border-border-subtle pt-md">
|
||||
<p className="label-md uppercase text-text-tertiary">{heading}</p>
|
||||
<ul className="flex flex-col gap-2xs">
|
||||
{options.map((option) => (
|
||||
<li key={option.value}>
|
||||
<Link
|
||||
to={option.href}
|
||||
prefetch="intent"
|
||||
aria-current={option.isCurrent ? "true" : undefined}
|
||||
className={cx(
|
||||
"flex items-start gap-sm py-2xs text-start body-sm-bold",
|
||||
"transition-colors duration-[var(--motion-duration-fast)]",
|
||||
"ease-[var(--motion-ease-standard)]",
|
||||
option.isCurrent
|
||||
? "text-text-primary"
|
||||
: "text-text-secondary hover:text-text-primary",
|
||||
)}
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={cx(
|
||||
"mt-2xs flex size-[0.875rem] shrink-0 items-center justify-center",
|
||||
"rounded-[var(--radius-control)] border",
|
||||
option.isCurrent
|
||||
? "border-border-accent"
|
||||
: "border-border-default",
|
||||
)}
|
||||
>
|
||||
{option.isCurrent ? (
|
||||
<span className="size-[7px] bg-[var(--surface-accent)]" />
|
||||
) : null}
|
||||
</span>
|
||||
<span>{option.label}</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** The rail the facet groups sit in - sticky from the large breakpoint up. */
|
||||
export function FacetRail({
|
||||
label,
|
||||
children,
|
||||
}: {
|
||||
label: string;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<aside
|
||||
aria-label={label}
|
||||
className={cx(
|
||||
"flex min-w-0 flex-col gap-lg lg:sticky lg:top-[var(--layout-sticky-top)]",
|
||||
"lg:max-w-[20rem] lg:self-start",
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
SEARCH
|
||||
------------------------------------------------------------------------ */
|
||||
|
||||
/**
|
||||
* A standalone search box - the hub's hero field and the resources rail both
|
||||
* use it. `keep` preserves the filters that are not the query, so searching
|
||||
* inside a filtered view does not silently clear the filters.
|
||||
*/
|
||||
export function SearchForm({
|
||||
action,
|
||||
label,
|
||||
placeholder,
|
||||
defaultValue,
|
||||
submitLabel,
|
||||
keep,
|
||||
name = "q",
|
||||
className,
|
||||
}: {
|
||||
action: string;
|
||||
label: string;
|
||||
placeholder: string;
|
||||
defaultValue: string;
|
||||
submitLabel: string;
|
||||
keep?: readonly (readonly [string, string])[];
|
||||
name?: string;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<Form
|
||||
method="get"
|
||||
action={action}
|
||||
role="search"
|
||||
aria-label={label}
|
||||
className={cx("flex flex-wrap items-end gap-sm", className)}
|
||||
>
|
||||
{(keep ?? []).map(([key, value]) => (
|
||||
<input key={key} type="hidden" name={key} value={value} />
|
||||
))}
|
||||
|
||||
<Input
|
||||
type="search"
|
||||
name={name}
|
||||
label={label}
|
||||
placeholder={placeholder}
|
||||
defaultValue={defaultValue}
|
||||
className="min-w-0 flex-1"
|
||||
/>
|
||||
|
||||
<Button type="submit" variant="primary" size="md">
|
||||
{submitLabel}
|
||||
</Button>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
CALLOUT BAND
|
||||
----------------------------------------------------------------------------
|
||||
The wide panel the drafts close a page with: a raised surface, an accent
|
||||
rule down the inline-start edge, a headline and one action. Used by the
|
||||
newsroom ("Are you a partner organisation?") and by the knowledge hub's
|
||||
repository note.
|
||||
|
||||
It is NOT Card.CTA: that card is a filled green field for a primary action,
|
||||
and the drafts draw this one as a quiet panel on the page surface.
|
||||
------------------------------------------------------------------------ */
|
||||
|
||||
export function CalloutBand({
|
||||
eyebrow,
|
||||
headline,
|
||||
body,
|
||||
action,
|
||||
headlineAs = "h2",
|
||||
}: {
|
||||
headline: string;
|
||||
action: { readonly to: string; readonly label: string };
|
||||
eyebrow?: string;
|
||||
body?: string;
|
||||
headlineAs?: "h2" | "h3";
|
||||
}) {
|
||||
const Headline = headlineAs;
|
||||
|
||||
return (
|
||||
<section
|
||||
className={cx(
|
||||
"sh-reveal flex flex-col gap-lg rounded-card border border-border-subtle",
|
||||
"border-s-4 border-s-[var(--border-accent)] bg-surface-raised p-xl",
|
||||
"md:flex-row md:items-center md:justify-between",
|
||||
)}
|
||||
>
|
||||
<div className="flex max-w-[var(--layout-prose-max)] flex-col gap-xs">
|
||||
{eyebrow ? (
|
||||
<p className="label-md uppercase text-text-accent">{eyebrow}</p>
|
||||
) : null}
|
||||
<Headline className="heading-h3 text-text-primary">{headline}</Headline>
|
||||
{body ? <p className="body-md text-text-secondary">{body}</p> : null}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
as={Link}
|
||||
to={action.to}
|
||||
variant="primary"
|
||||
size="md"
|
||||
iconEnd={<ArrowIcon />}
|
||||
className="shrink-0"
|
||||
>
|
||||
{action.label}
|
||||
</Button>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
FORM CONTROLS
|
||||
----------------------------------------------------------------------------
|
||||
`FilterSelect` above is a GET filter: it has no error state and its id is
|
||||
namespaced for the filter bar. A select that is part of a POSTed form needs
|
||||
both, so it gets its own control here rather than a second set of props on
|
||||
the filter one.
|
||||
|
||||
It is native on purpose, for the same reasons `FilterSelect` is: correct in
|
||||
every browser with a keyboard and a screen reader, and usable before - and
|
||||
without - hydration. The visual treatment is the field treatment from
|
||||
~/components/ui/Input, spent through the same tier-2 tokens.
|
||||
------------------------------------------------------------------------ */
|
||||
|
||||
export function FormSelect({
|
||||
id,
|
||||
name,
|
||||
label,
|
||||
hint,
|
||||
error,
|
||||
defaultValue,
|
||||
options,
|
||||
required = false,
|
||||
className,
|
||||
}: {
|
||||
id: string;
|
||||
name: string;
|
||||
label: string;
|
||||
options: readonly SelectOption[];
|
||||
hint?: string;
|
||||
error?: string;
|
||||
defaultValue?: string;
|
||||
required?: boolean;
|
||||
className?: string;
|
||||
}) {
|
||||
const hintId = `${id}-hint`;
|
||||
const errorId = `${id}-error`;
|
||||
const describedBy =
|
||||
[hint ? hintId : null, error ? errorId : null].filter(Boolean).join(" ") ||
|
||||
undefined;
|
||||
|
||||
return (
|
||||
<div className={cx("sh-field flex min-w-0 flex-col gap-xs", className)}>
|
||||
<label className="sh-field__label label-md" htmlFor={id}>
|
||||
{label}
|
||||
{required ? (
|
||||
<span className="sh-field__required ms-2xs" aria-hidden="true">
|
||||
*
|
||||
</span>
|
||||
) : null}
|
||||
</label>
|
||||
|
||||
<select
|
||||
id={id}
|
||||
name={name}
|
||||
defaultValue={defaultValue}
|
||||
required={required}
|
||||
aria-invalid={error ? true : undefined}
|
||||
aria-describedby={describedBy}
|
||||
className={cx(
|
||||
"body-md w-full rounded-[var(--radius-control)] border bg-field-bg",
|
||||
"border-field-border px-md py-sm text-[var(--field-fg)]",
|
||||
"transition-colors duration-[var(--motion-duration-fast)]",
|
||||
"ease-[var(--motion-ease-standard)] hover:border-[var(--field-border-hover)]",
|
||||
)}
|
||||
>
|
||||
{options.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
{hint ? (
|
||||
<p id={hintId} className="sh-field__hint body-sm">
|
||||
{hint}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{error ? (
|
||||
<p id={errorId} role="alert" className="sh-field__error body-sm">
|
||||
{error}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user