/* ============================================================================
HOME - /en and /ar
----------------------------------------------------------------------------
The redesigned home page (Claude Design "Home", second drop), carried onto
the project's own design system. Six bands, alternating the two dark
surfaces the way the draft alternates #0B0B0A and #1D1D1B:
Hero EU badge, an optional status pill, the headline, the lead,
the CTA pair, the wide picture, the brand stripe and the
figures row. Two slow washes drift behind it.
Launch "An important start for the project": the launch lead and
three pictures from the CMS gallery.
Work "Three areas of change" - the three approved pillars, with
a link through to What We Do.
Newsroom three cards from the newsroom, newest first.
FAQs a sticky heading column beside the accordion.
Consortium the three members, then the civil society network logos.
WHAT THE DRAFT SHIPS THAT THIS PAGE DOES NOT
--------------------------------------------
* The draft's FAQ column promises a reply "within five working days". That
commitment appears in no approved document, so it is not published
(CLAUDE.md rule 5). Everything else in the draft is verifiable: the four
figures, the ministries at the launch and the three pillars are all in
docs/ or in the bundled draft copy.
* Every list - news, questions, partner logos, launch pictures - is CMS
data, never the draft's sample entries. Each band shows its localised
empty state instead of inventing content.
* The draft's own navigation and footer are ignored: the site ships
and from the app shell.
MOTION: every animation in the draft is here, as classes from
_page-kit/motion.css, plus the figures counting up on arrival. The one
effect deliberately dropped is the coloured glow behind a hovered button or
card.
There is no Arabic frame, so /ar is this same DOM under `dir="rtl"`, which
is why every inline edge below is logical (ps-/pe-/start-/end-).
========================================================================= */
import { useEffect, useLayoutEffect, useState } from "react";
import { Link } from "react-router";
import { ArrowIcon, Button } from "~/components/ui/Button";
import { Card } from "~/components/ui/Card";
import { EuBadge } from "~/components/ui/EuBadge";
import {
createTranslator,
formatDate,
getMessages,
sectionPath,
type Locale,
} from "~/i18n";
import {
buildMeta,
buildOrganizationJsonLd,
buildWebSiteJsonLd,
} from "~/lib/seo";
import { safeHref } from "~/lib/safe-href";
import type { Route } from "./+types/home";
import { Accordion } from "./_page-kit/accordion";
import {
isImageGalleryBlock,
type CmsFaq,
type CmsHomePage,
type CmsNewsArticle,
type CmsPartner,
} from "./_page-kit/cms-types";
import {
list,
loadMany,
loadSingle,
toImage,
toPartner,
type ResolvedImage,
} from "./_page-kit/cms.server";
import { pageCopy } from "./_page-kit/copy";
import { routeLocale } from "./_page-kit/locale";
import {
Container,
cx,
EmptyState,
PageHero,
PageSection,
SectionHeader,
} from "./_page-kit/sections";
import "./_page-kit/motion.css";
/** The network logo wall - a wide but finite grid. */
const PARTNER_PAGE_SIZE = 36;
/** The draft's newsroom band is a straight three-up row. */
const NEWS_PAGE_SIZE = 3;
/** More than a dozen questions is a page of its own, not a home page band. */
const FAQ_PAGE_SIZE = 12;
/** The draft's launch band shows three pictures. */
const LAUNCH_SHOTS = 3;
/** A newsroom card, already localised and safe to serialise to the client. */
interface NewsCard {
id: string;
title: string;
href: string;
excerpt: string | null;
dateLabel: string | null;
organisation: string | null;
image: { src: string; alt: string } | null;
}
function toNewsCard(article: CmsNewsArticle, locale: Locale): NewsCard {
const image = toImage(article.coverImage, "small");
return {
id: article.documentId,
title: article.title,
href: `${sectionPath("news", locale)}/${article.slug}`,
excerpt: article.excerpt ?? null,
/* The CMS holds one date for both languages; the reader's locale decides
how it is written out. */
dateLabel: article.publishDate ? formatDate(article.publishDate, locale) : null,
organisation: article.authorOrganisation?.name ?? null,
image: image ? { src: image.src, alt: image.alt } : null,
};
}
export async function loader({ params }: Route.LoaderArgs) {
const locale = routeLocale(params);
const page = await loadSingle("home-page", {
locale,
populate: {
hero: { populate: { media: true, ctas: true } },
stats: true,
// Strapi 5 populates a dynamic zone per component with `on`.
blocks: { on: { "blocks.image-gallery": { populate: { images: true } } } },
featuredNews: { populate: { coverImage: true, authorOrganisation: true } },
partners: { populate: { logo: true, logoDark: true } },
seo: { populate: { ogImage: true } },
},
});
/* The curated relation wins; otherwise show every partner the CMS knows, so
the wall fills in as soon as partners exist - before anyone remembers to
curate the home page itself. */
const curatedPartners = list(page?.partners);
const partners =
curatedPartners.length > 0
? curatedPartners
: await loadMany("partners", {
locale,
sort: ["name:asc"],
filters: { partnerRole: { $in: ["cso-partner", "institution"] } },
populate: { logo: true, logoDark: true },
pagination: { pageSize: PARTNER_PAGE_SIZE },
});
/* Same rule for the newsroom: an editor's picks, else simply the newest
articles, so the band is never empty while the newsroom has entries. */
const curatedNews = list(page?.featuredNews);
const news =
curatedNews.length > 0
? curatedNews
: await loadMany("news-articles", {
locale,
sort: ["publishDate:desc", "title:asc"],
populate: { coverImage: true, authorOrganisation: true },
pagination: { pageSize: NEWS_PAGE_SIZE },
});
const faqs = await loadMany("faqs", {
locale,
sort: ["order:asc", "createdAt:asc"],
pagination: { pageSize: FAQ_PAGE_SIZE },
});
const gallery = list(page?.blocks)
.filter(isImageGalleryBlock)
.flatMap((block) => list(block.images))
.map((image) => toImage(image, "medium"))
.filter((image): image is ResolvedImage => image !== undefined);
return {
locale,
hero: {
eyebrow: page?.hero?.eyebrow ?? null,
headline: page?.hero?.headline ?? null,
subheading: page?.hero?.subheading ?? null,
media: toImage(page?.hero?.media, "large") ?? null,
ctas: list(page?.hero?.ctas).map((cta) => ({
label: cta.label,
href: cta.href,
variant: cta.variant ?? "primary",
})),
},
/* Editor-owned figures win; the bundled four stand in until then. */
stats: list(page?.stats).map((stat) => ({
value: stat.value,
label: stat.label,
})),
gallery: gallery.slice(0, LAUNCH_SHOTS),
partnersHeadline: page?.partnersHeadline ?? null,
partners: partners.map(toPartner),
news: news.slice(0, NEWS_PAGE_SIZE).map((article) => toNewsCard(article, locale)),
faqs: faqs.map((faq) => ({
id: faq.documentId,
question: faq.question,
answer: faq.answer,
})),
seo: {
title: page?.seo?.metaTitle ?? null,
description: page?.seo?.metaDescription ?? null,
image: toImage(page?.seo?.ogImage, "large") ?? null,
noIndex: page?.seo?.noIndex ?? false,
},
};
}
export function meta({ loaderData, matches }: Route.MetaArgs) {
const root = matches[0].loaderData;
const locale = loaderData?.locale ?? root.locale;
const messages = getMessages(locale);
return buildMeta({
locale,
pathname: root.pathname,
siteUrl: root.siteUrl,
title: loaderData?.seo.title ?? messages.site.metaTitle,
description: loaderData?.seo.description ?? messages.site.description,
...(loaderData?.seo.image
? { image: { url: loaderData.seo.image.src, alt: loaderData.seo.image.alt } }
: {}),
noIndex: loaderData?.seo.noIndex ?? false,
// Emitted once for the whole site, from its home page.
jsonLd: [
buildOrganizationJsonLd({ siteUrl: root.siteUrl, locale }),
buildWebSiteJsonLd({ siteUrl: root.siteUrl, locale }),
],
});
}
/* ---------------------------------------------------------------------------
SMALL PIECES
------------------------------------------------------------------------ */
interface HeroCtaProps {
href: string;
label: string;
variant: "primary" | "secondary";
}
/**
* A hero call to action.
*
* Both controls are the project's Button, which now carries the Claude Design
* drafts' own treatment: the accent fill for the primary, the outline ring for
* the secondary, and a 3px lift under the pointer. The secondary is no longer
* flipped onto the light surface - the drafts draw it as an outline on the
* dark band, not as a white fill.
*/
function HeroCta({ href, label, variant }: HeroCtaProps) {
return (
: undefined}
>
{label}
);
}
/**
* The hero's status line. The draft hard-codes "Now live ยท Expression of
* Interest open"; here the words are the CMS hero eyebrow, so the pill only
* ever announces a state an editor has actually written - and the hero simply
* has no pill until then. The dot pulses; the text does not move.
*/
function StatusPill({ label }: { label: string }) {
return (
{label}
);
}
/* `useLayoutEffect` would warn during SSR, and the count only exists in a
browser, so the effect is picked per environment. */
const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
/**
* A figure that counts up to its value on arrival, as the draft does.
*
* The server renders the FINAL value, so a reader without JavaScript - and a
* search engine - sees the real figure. In a browser the count is reset before
* the first paint (layout effect, not a plain effect), so the number never
* flashes its end state first. A value the CMS wrote as words rather than
* digits is simply printed.
*/
function CountUpValue({ value }: { value: string }) {
const parsed = /^(\d[\d,]*)([\s\S]*)$/.exec(value);
const target = parsed ? Number(parsed[1]!.replace(/,/g, "")) : null;
const suffix = parsed ? parsed[2]! : "";
const [shown, setShown] = useState(target);
useBrowserLayoutEffect(() => {
if (target === null) return;
/* app.css collapses animation, but this one is script-driven, so the
preference has to be honoured here as well. */
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
let frame = 0;
const started = performance.now();
const duration = 1500;
setShown(0);
const tick = (now: number) => {
const progress = Math.min(1, (now - started) / duration);
/* Ease out cubic - the draft's own curve. */
setShown(Math.round(target * (1 - Math.pow(1 - progress, 3))));
if (progress < 1) frame = requestAnimationFrame(tick);
};
frame = requestAnimationFrame(tick);
return () => cancelAnimationFrame(frame);
}, [target]);
if (target === null) return <>{value};
return (
<>
{shown}
{suffix}
);
}
/**
* The figures row that closes the hero: four cells divided by hairlines. The
* grid's own background paints the 1px gaps, which is how the draft draws the
* dividers without a border on each cell.
*/
function StatsRow({ stats }: { stats: readonly { value: string; label: string }[] }) {
if (stats.length === 0) return null;
return (
{stats.map((stat) => (
/* Source order is term-then-description, as the spec requires; the
reversed column paints the figure above its label without repeating
the label for a screen reader. */
{stat.label}
))}
);
}
/**
* The launch band's three pictures. The CMS alt text doubles as the visible
* caption - so the picture is described once, in the caption, and the
* itself is marked decorative rather than having a screen reader read the same
* sentence twice.
*/
function LaunchShots({ images }: { images: readonly ResolvedImage[] }) {
if (images.length === 0) return null;
return (
{images.map((image) => (
{image.alt ? (
{image.alt}
) : null}
))}
);
}
/** The "see the whole section" link the draft puts opposite a band heading. */
function BandLink({ to, label }: { to: string; label: string }) {
return (
}>
{label}
);
}
/* ---------------------------------------------------------------------------
THE PAGE
------------------------------------------------------------------------ */
export default function Home({ loaderData }: Route.ComponentProps) {
const { locale, hero, stats, gallery, partners, news, faqs } = loaderData;
const t = createTranslator(locale);
const copy = pageCopy(locale).home;
/* The three pillars are the About page's approved copy - one source, so the
two pages can never drift apart. */
const pillars = pageCopy(locale).about.pillars;
const headline = hero.headline ?? copy.heroHeadline;
const lead = hero.subheading ?? copy.heroLead;
const figures = stats.length > 0 ? stats : copy.stats;
const consortiumHeading = loaderData.partnersHeadline ?? copy.consortiumHeading;
/* The frame draws one accent CTA and one white one. Editor-supplied CTAs go
through the same component as the fallback pair, so a `secondary` CTA
authored in Strapi gets the white treatment too. */
const heroCtas: readonly HeroCtaProps[] =
hero.ctas.length > 0
? hero.ctas.map((cta) => ({
href: cta.href,
label: cta.label,
variant: cta.variant === "primary" ? "primary" : "secondary",
}))
: [
{
href: sectionPath("applications", locale),
label: copy.heroCtaPrimary,
variant: "primary",
},
{
href: sectionPath("about", locale),
label: copy.heroCtaSecondary,
variant: "secondary",
},
];
return (
<>
{/* The reading-progress rule. Decorative, pointer-transparent, and
painted only where scroll timelines exist (motion.css). */}
} : {})}
ambient={[
{ top: -220, from: "start", offset: "8%", width: 780, height: 620, durationSeconds: 18 },
{
top: 120,
from: "end",
offset: "-160px",
width: 620,
height: 520,
tone: "danger",
durationSeconds: 24,
reverse: true,
},
]}
reveal
/* EU visibility sits at the top of the hero (the draft's badge). The
emblem is the dark-surface export because the hero sits on the
page's own dark surface. `emblemAlt` is left at its empty default:
the statement is real text beside the emblem, so naming the image
would read the attribution out twice. */
funderBadge={
}
{...(hero.media ? { media: hero.media } : {})}
mediaTreatment="banner"
actions={heroCtas.map((cta) => (
))}
below={}
/>
{/* THE LAUNCH */}
{copy.launchLead}
{/* THREE AREAS OF CHANGE */}
{pillars.map((pillar) => (
{pillar.title}
{pillar.description}
))}
{/* NEWSROOM */}
{news.length > 0 ? (
{news.map((item) => (
))}
) : (
)}
{/* FAQs - the heading column stays with the reader while the answers
scroll beside it, as the draft has it. */}
}
>
{copy.faqCtaLabel}
{faqs.length > 0 ? (
) : (
)}
{/* THE CONSORTIUM, then the network it works with */}
{t("site.euStatement")}
{copy.consortium.map((member) => (
{member.role}
{member.name}
{member.description}
))}
{copy.networkLabel}
{partners.length > 0 ? (
{partners.map((partner) => {
const href = safeHref(partner.website);
/* The logo wall is a grid of equal tiles; the name is the
tile's text when there is no logo to draw, and always its
accessible name. */
const inner = (
<>
{partner.logo ? (
) : (
{partner.name}
)}
);
return (
{image.alt ? (