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
@@ -1,15 +1,36 @@
|
||||
/* ============================================================================
|
||||
WHAT WE DO - /en/what-we-do and /ar/what-we-do
|
||||
----------------------------------------------------------------------------
|
||||
Section 2 of docs/SHARPER_Website_Draft_Section_EN_AR.docx: the participatory
|
||||
approach, the four connected areas of work, the values that guide them and
|
||||
the four principles the approach rests on.
|
||||
The redesigned What We Do page ("What-We-Do", Claude Design draft), carried
|
||||
onto the project's own design system. Four bands:
|
||||
|
||||
Hero eyebrow, headline and the one-line lead, on the sunken
|
||||
surface with the two drifting washes behind it.
|
||||
Areas the four connected areas of work as a seam grid, each cell
|
||||
led by its numeral.
|
||||
Guidance the five values as a centred chip row, then the four
|
||||
principles as bar-topped tiles.
|
||||
Activities the closing panel with the accent start-edge.
|
||||
|
||||
WHAT THE DRAFT SHIPS THAT THIS PAGE DOES NOT
|
||||
--------------------------------------------
|
||||
* The draft gives each principle an explanatory line ("Local organisations
|
||||
lead the design and delivery of activities", "Solutions are built to
|
||||
outlast the project's own timeline", "Institutional change is supported
|
||||
step by step, not imposed"). None of those sentences is in an approved
|
||||
document, so the tiles carry only the clause the approved "How we work"
|
||||
sentence states, which is what the draft's own titles carry too.
|
||||
* The draft's coloured hover glow is deliberately dropped.
|
||||
|
||||
Overridden field by field by api::what-we-do-page.what-we-do-page; the draft
|
||||
copy below is what renders until an editor fills that in.
|
||||
|
||||
Arabic is this same DOM under `dir="rtl"`, so every inline edge is logical.
|
||||
========================================================================= */
|
||||
|
||||
import { Card } from "~/components/ui/Card";
|
||||
import { Link } from "react-router";
|
||||
|
||||
import { ArrowIcon, Button } from "~/components/ui/Button";
|
||||
import { createTranslator, formatNumber, sectionPath } from "~/i18n";
|
||||
import { buildBreadcrumbJsonLd, buildMeta } from "~/lib/seo";
|
||||
|
||||
@@ -25,7 +46,6 @@ import { pageCopy } from "./_page-kit/copy";
|
||||
import { routeLocale } from "./_page-kit/locale";
|
||||
import { RichText } from "./_page-kit/rich-text";
|
||||
import {
|
||||
InfoPanel,
|
||||
PageHero,
|
||||
PageSection,
|
||||
Prose,
|
||||
@@ -33,6 +53,8 @@ import {
|
||||
ValueChips,
|
||||
} from "./_page-kit/sections";
|
||||
|
||||
import "./_page-kit/motion.css";
|
||||
|
||||
export async function loader({ params }: Route.LoaderArgs) {
|
||||
const locale = routeLocale(params);
|
||||
|
||||
@@ -104,6 +126,10 @@ export function meta({ loaderData, matches }: Route.MetaArgs) {
|
||||
});
|
||||
}
|
||||
|
||||
/** See the note on the same constant in about.tsx. */
|
||||
const ACCENT_EDGE =
|
||||
"[border-inline-start-color:var(--border-accent)] [border-inline-start-width:4px]";
|
||||
|
||||
export default function WhatWeDo({ loaderData }: Route.ComponentProps) {
|
||||
const { locale, hero, intro, richTextBlocks } = loaderData;
|
||||
const t = createTranslator(locale);
|
||||
@@ -117,25 +143,40 @@ export default function WhatWeDo({ loaderData }: Route.ComponentProps) {
|
||||
const values =
|
||||
loaderData.guidingValues.length > 0 ? loaderData.guidingValues : copy.values;
|
||||
|
||||
/* An editor's principles carry a line of their own; the bundled fallback is
|
||||
the four clauses of the approved sentence and nothing more. */
|
||||
const principles =
|
||||
loaderData.principles.length > 0
|
||||
? loaderData.principles
|
||||
: copy.principleTitles.map((title) => ({ title, description: "" }));
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHero
|
||||
className="border-b border-[var(--border-subtle)] bg-[var(--surface-sunken)] [--layout-hero-bottom:clamp(2.75rem,6vw,4.25rem)]"
|
||||
title={hero.headline ?? copy.heroHeadline}
|
||||
eyebrow={hero.eyebrow ?? t("nav.sections.aboutAndStrategy")}
|
||||
eyebrow={hero.eyebrow ?? t("nav.sections.whatWeDo")}
|
||||
lead={hero.subheading ?? copy.lead}
|
||||
ambient={[{ top: -240, from: "end", offset: "-120px", width: 700, height: 560, durationSeconds: 22 }]}
|
||||
leadTone="primary"
|
||||
reveal
|
||||
{...(hero.media ? { media: hero.media } : {})}
|
||||
/>
|
||||
|
||||
{/* THE FOUR AREAS OF WORK */}
|
||||
{/* THE FOUR AREAS OF WORK - one seam grid, the cells raised out of the
|
||||
band, each led by its numeral (localised, so the Arabic page numbers
|
||||
its cells in its own conventions). */}
|
||||
<PageSection
|
||||
aria-labelledby="wwd-workstreams-heading"
|
||||
className="pt-0 md:pt-0"
|
||||
className="bg-[var(--surface-sunken)]"
|
||||
>
|
||||
<div className="flex flex-col gap-2xl">
|
||||
{/* The draft prints the heading alone - the approved intro sentence
|
||||
IS this heading - so no lead is drawn under it. */}
|
||||
<SectionHeader
|
||||
className="sh-reveal max-w-[var(--layout-prose-max)]"
|
||||
id="wwd-workstreams-heading"
|
||||
title={copy.workstreamsHeading}
|
||||
lead={intro ? undefined : copy.workstreamsIntro}
|
||||
/>
|
||||
|
||||
{intro ? (
|
||||
@@ -144,68 +185,115 @@ export default function WhatWeDo({ loaderData }: Route.ComponentProps) {
|
||||
</Prose>
|
||||
) : null}
|
||||
|
||||
<ul className="grid list-none grid-cols-1 gap-lg md:grid-cols-2">
|
||||
<ul className="grid list-none grid-cols-1 gap-[1px] overflow-hidden rounded-card border border-[var(--border-subtle)] bg-[var(--border-subtle)] sm:grid-cols-2 lg:grid-cols-4">
|
||||
{workstreams.map((workstream, index) => (
|
||||
<li key={workstream.title}>
|
||||
<InfoPanel
|
||||
title={workstream.title}
|
||||
eyebrow={formatNumber(index + 1, locale, {
|
||||
minimumIntegerDigits: 2,
|
||||
})}
|
||||
<li
|
||||
key={workstream.title}
|
||||
className="sh-reveal flex min-h-[16.25rem] flex-col gap-sm bg-[var(--surface-card)] p-lg transition-colors duration-[var(--motion-duration-base)] hover:bg-[var(--surface-muted)]"
|
||||
>
|
||||
<p
|
||||
aria-hidden="true"
|
||||
className="heading-h2 text-[var(--text-accent)]"
|
||||
>
|
||||
{formatNumber(index + 1, locale, { minimumIntegerDigits: 2 })}
|
||||
</p>
|
||||
{/* The draft sets an area title a step above body - the same
|
||||
size it gives the consortium names on About. */}
|
||||
<h3 className="heading-h3 text-[var(--text-primary)]">
|
||||
{workstream.title}
|
||||
</h3>
|
||||
<p className="body-md text-[var(--text-secondary)]">
|
||||
{workstream.description}
|
||||
</InfoPanel>
|
||||
</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<ValueChips values={values} label={copy.valuesLabel} />
|
||||
</div>
|
||||
</PageSection>
|
||||
|
||||
{/* HOW WE WORK */}
|
||||
<PageSection aria-labelledby="wwd-principles-heading">
|
||||
<div className="flex flex-col gap-lg">
|
||||
<SectionHeader
|
||||
id="wwd-principles-heading"
|
||||
title={copy.principlesHeading}
|
||||
{/* WHAT GUIDES US, AND HOW WE WORK - the one band the draft raises off
|
||||
the near-black ground, so it names its surface explicitly. */}
|
||||
<PageSection
|
||||
aria-labelledby="wwd-principles-heading"
|
||||
band
|
||||
>
|
||||
<div className="flex flex-col gap-2xl">
|
||||
{/* The draft's chips rest as a plain outline and only take the accent
|
||||
fill under the pointer; the shared component rests filled, so the
|
||||
resting and hover paints are restated here until it carries the
|
||||
draft's own treatment. */}
|
||||
<ValueChips
|
||||
className="sh-reveal"
|
||||
align="center"
|
||||
values={values}
|
||||
label={copy.valuesLabel}
|
||||
/>
|
||||
|
||||
{loaderData.principles.length > 0 ? (
|
||||
<ul className="grid list-none grid-cols-1 gap-lg md:grid-cols-2">
|
||||
{loaderData.principles.map((principle) => (
|
||||
<li key={principle.title}>
|
||||
<InfoPanel title={principle.title}>
|
||||
{principle.description}
|
||||
</InfoPanel>
|
||||
<div className="flex flex-col gap-2xl border-t border-[var(--border-default)] pt-2xl">
|
||||
{/* The draft draws the four principles straight under the rule,
|
||||
with no heading over them; the heading stays in the outline. */}
|
||||
<h2 id="wwd-principles-heading" className="sr-only">
|
||||
{copy.principlesHeading}
|
||||
</h2>
|
||||
|
||||
<ul className="grid list-none grid-cols-1 gap-lg sm:grid-cols-2 lg:grid-cols-4">
|
||||
{principles.map((principle) => (
|
||||
<li
|
||||
key={principle.title}
|
||||
className="sh-reveal flex flex-col gap-sm"
|
||||
>
|
||||
{/* The short accent rule the draft draws over each tile,
|
||||
drawn on from the inline start. Decorative. */}
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="sh-bar-grow block h-[3px] w-[44px] bg-[var(--surface-accent)]"
|
||||
/>
|
||||
<h3 className="body-md-bold text-[var(--text-primary)]">
|
||||
{principle.title}
|
||||
</h3>
|
||||
{principle.description ? (
|
||||
<p className="body-sm text-[var(--text-secondary)]">
|
||||
{principle.description}
|
||||
</p>
|
||||
) : null}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<Prose>
|
||||
<p className="body-md text-[var(--text-secondary)]">
|
||||
{copy.principles}
|
||||
</p>
|
||||
</Prose>
|
||||
)}
|
||||
|
||||
{richTextBlocks.map((block) => (
|
||||
<Prose key={block.id}>
|
||||
<RichText markdown={block.body} />
|
||||
</Prose>
|
||||
))}
|
||||
{richTextBlocks.map((block) => (
|
||||
<Prose key={block.id}>
|
||||
<RichText markdown={block.body} />
|
||||
</Prose>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</PageSection>
|
||||
|
||||
<PageSection>
|
||||
<Card.CTA
|
||||
headline={t("nav.sections.activities")}
|
||||
body={copy.lead}
|
||||
action={{
|
||||
href: sectionPath("activities", locale),
|
||||
label: t("actions.seeActivities"),
|
||||
}}
|
||||
/>
|
||||
{/* THE WAY ON TO THE ACTIVITIES */}
|
||||
<PageSection
|
||||
aria-labelledby="wwd-activities-heading"
|
||||
className="bg-[var(--surface-sunken)]"
|
||||
>
|
||||
<div
|
||||
className={`sh-reveal flex flex-wrap items-center justify-between gap-xl rounded-card border border-[var(--border-subtle)] bg-[var(--surface-raised)] p-lg md:p-xl ${ACCENT_EDGE}`}
|
||||
>
|
||||
<h2
|
||||
id="wwd-activities-heading"
|
||||
className="heading-h2 max-w-[39rem] text-[var(--text-primary)]"
|
||||
>
|
||||
{copy.activitiesCtaHeading}
|
||||
</h2>
|
||||
|
||||
<Button
|
||||
as={Link}
|
||||
to={sectionPath("activities", locale)}
|
||||
prefetch="intent"
|
||||
size="lg"
|
||||
iconEnd={<ArrowIcon />}
|
||||
>
|
||||
{t("actions.seeActivities")}
|
||||
</Button>
|
||||
</div>
|
||||
</PageSection>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user