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:
2026-09-16 20:32:56 +02:00
co-authored by Claude Opus 5
parent 8464c24fb1
commit aedef6daeb
63 changed files with 7276 additions and 1768 deletions
+234 -76
View File
@@ -44,10 +44,16 @@ export interface TitledCopy {
readonly description: string;
}
/** One consortium member and the role the draft assigns it. */
/**
* One consortium member, split the way the redesign draws it: a role chip, the
* member's name, then what it delivers. Both halves are the approved draft's
* own wording - section 1 writes each member as
* "<name> - <role> - <deliverable>".
*/
export interface ConsortiumCopy {
readonly name: string;
readonly role: string;
readonly description: string;
}
/**
@@ -59,47 +65,105 @@ export type ProseRun = string | { readonly em: string };
export interface HomeCopy {
readonly heroHeadline: string;
readonly statsHeading: string;
readonly heroLead: string;
readonly heroCtaPrimary: string;
readonly heroCtaSecondary: string;
/**
* The figures band. Bundled so the band is never empty, and overridden by
* `home-page.stats` the moment an editor writes one. Every figure here is
* verifiable: three consortium members and the Dec 2025 - Dec 2027 run come
* from the project brief, the four areas of work are the What We Do
* workstreams, and the sixteen human security sub-projects are the approved
* EN/AR draft's own wording.
*/
readonly stats: readonly { readonly value: string; readonly label: string }[];
readonly launchEyebrow: string;
readonly launchHeading: string;
/** One paragraph, as the design draws it - not the full three-part story. */
readonly launchLead: readonly ProseRun[];
readonly mechanismsHeading: string;
readonly mechanisms: readonly string[];
readonly partnersHeading: string;
readonly launchLead: string;
readonly workHeading: string;
readonly workLinkLabel: string;
readonly newsEyebrow: string;
readonly newsHeading: string;
readonly newsEmpty: string;
readonly faqEyebrow: string;
readonly faqHeading: string;
readonly faqLead: string;
readonly faqEmpty: string;
readonly faqCtaLabel: string;
readonly consortiumHeading: string;
/**
* The same three members the About page lists, split the way the redesign
* draws them: a role chip, the name, then what they deliver.
*/
readonly consortium: readonly {
readonly role: string;
readonly name: string;
readonly description: string;
}[];
readonly networkLabel: string;
readonly partnersEmpty: string;
}
export interface AboutCopy {
/** Draft eyebrow over the hero headline - "About the project". */
readonly heroEyebrow: string;
readonly heroHeadline: string;
readonly lead: string;
readonly body: string;
/**
* The four-cell band under the hero. These are project FACTS, not figures:
* the run, the coverage, the lead partner and the funder, each one written
* out in the approved draft's first section. Nothing here is counted or
* estimated - the draft marks every statistic "TBD", so none is published.
*/
readonly facts: readonly { readonly label: string; readonly value: string }[];
readonly bodyHeading: string;
/**
* The approved body prose, one entry per paragraph. The draft sets it as two
* paragraphs beside the focus-area column, which a single string cannot
* express.
*/
readonly body: readonly string[];
readonly consortiumHeading: string;
readonly consortium: readonly ConsortiumCopy[];
readonly pillarsHeading: string;
readonly pillars: readonly TitledCopy[];
readonly legacyEyebrow: string;
readonly legacyHeading: string;
readonly legacyBody: string;
readonly legacyLinkLabel: string;
readonly fundingNote: string;
}
export interface WhatWeDoCopy {
readonly heroHeadline: string;
readonly lead: string;
/**
* The draft's own heading over the areas grid. It restates the approved
* "SHARP-ER is organised around four connected areas of work" line, which is
* why the draft prints no separate intro paragraph under it and neither does
* the page.
*/
readonly workstreamsHeading: string;
readonly workstreamsIntro: string;
readonly workstreams: readonly TitledCopy[];
readonly valuesLabel: string;
readonly values: readonly string[];
/** Not drawn - it names the principles block for the document outline. */
readonly principlesHeading: string;
readonly principles: string;
/**
* The redesign draws the four principles as tiles. These are the four
* clauses of the approved "Our approach rests on four principles…" sentence
* and nothing else: the draft gives each tile an explanatory line, none of
* which is in any approved document, so the tiles carry the clause alone.
*/
readonly principleTitles: readonly string[];
readonly activitiesCtaHeading: string;
}
export interface ContactCopy {
readonly heroHeadline: string;
readonly lead: string;
/** Not drawn - it names the form for the document outline. */
readonly formHeading: string;
readonly formIntro: string;
/** Not drawn - it names the channels column for the document outline. */
readonly detailsHeading: string;
readonly generalEnquiries: string;
readonly websiteLabel: string;
@@ -113,6 +177,8 @@ export interface ContactCopy {
readonly errorTooLong: string;
readonly honeypotLabel: string;
readonly organisationHint: string;
/** Link text for the project's Facebook page. */
readonly facebookLabel: string;
}
export interface PageCopy {
@@ -128,50 +194,89 @@ export interface PageCopy {
const EN: PageCopy = {
home: {
/* The frame's wordmark above the headline carries the project name, so
the headline itself does not repeat it (figma I253:4800;228:2609). */
heroHeadline: "Project Officially Launches in Libya",
statsHeading: "SHARP-ER in numbers",
launchHeading: "The Journey of SHARP-ER Launch",
launchLead: [
"The SHARP-ER project officially launched on ",
{ em: "Tuesday, June 30" },
", joining representatives from the ",
{ em: "European Union Delegation" },
", key ",
{ em: "Libyan Ministries" },
", and ",
{ em: "local civil society partners" },
". The event marked the launch of the project’s official website and the Call for Expression of Interest (EOI).",
heroHeadline: "SHARP-ER Project Officially Launches in Libya",
heroLead:
"Shared Action on Rule of Law Progress — Exit Route: a nationwide initiative supporting Libya’s civil society, local institutions, and communities in advancing justice, accountability, and good governance.",
heroCtaPrimary: "Expression of Interest",
heroCtaSecondary: "About the project",
stats: [
{ value: "3", label: "Consortium partners" },
{ value: "4", label: "Areas of work" },
{ value: "16", label: "Human security sub-projects" },
{ value: "25 mo", label: "Dec 2025 – Dec 2027" },
],
mechanismsHeading: "What the launch set in motion",
mechanisms: [
"Building local capacity and skills",
"Fostering cross-sector partnerships",
"Supporting municipal and community-led initiatives",
launchEyebrow: "30 June · Launch event",
launchHeading: "An important start for the project",
launchLead:
"The launch brought together representatives from the European Union Delegation, the Ministry of Youth, the Ministry of Local Governance, the Ministry of Women’s Affairs, civil society organisations, partners, and stakeholders from across Libya. The event marked the opening of the Expression of Interest and the launch of this website.",
workHeading: "Three areas of change",
workLinkLabel: "What we do",
newsEyebrow: "Newsroom",
newsHeading: "News and Updates",
newsEmpty: "News and updates will appear here as they are published.",
faqEyebrow: "Frequently asked",
faqHeading: "Questions about the project",
/* The draft also promises a reply "within five working days". That
commitment is in no approved document, so it is not published here. */
faqLead: "Eligibility, timelines and how to take part.",
faqEmpty: "Answers to common questions will be published here.",
faqCtaLabel: "More in the Knowledge Hub",
consortiumHeading: "The consortium",
consortium: [
{
role: "Lead implementing partner",
name: "Acted",
description:
"Overall project management and civil society sub-projects.",
},
{
role: "Consortium partner",
name: "United Efforts Consultancy (UEC)",
description: "Network strengthening, dialogue, and peer-learning.",
},
{
role: "Consortium partner",
name: "Stichting Bureau Ensemble (SBE)",
description: "Research, perception data, and knowledge publications.",
},
],
partnersHeading: "Meet Our Partners",
networkLabel: "Civil society network partners",
partnersEmpty:
"Partner organisations will be listed here as they join the SHARP-ER network.",
},
about: {
heroEyebrow: "About the project",
heroHeadline: "Strengthening the Rule of Law, Together",
lead: "SHARP-ER (Shared Action on Rule of Law Progress – Exit Route) is a nationwide initiative supporting Libya’s civil society, local institutions, and communities in advancing justice, accountability, and good governance.",
body: "Running from December 2025 to December 2027, SHARP-ER is implemented by Acted, in consortium with United Efforts Consultancy (UEC) and Stichting Bureau Ensemble (SBE), and funded by the European Union. The project works nationwide across Libya, partnering with civil society organisations, municipalities, and community leaders to strengthen access to justice, build the capacity of civil society to hold institutions accountable, and improve local governance and service delivery.",
facts: [
{ label: "Duration", value: "December 2025 – December 2027" },
{ label: "Coverage", value: "Nationwide, Libya" },
{ label: "Lead partner", value: "Acted" },
{ label: "Funded by", value: "The European Union" },
],
bodyHeading: "A nationwide project, delivered locally",
body: [
"Running from December 2025 to December 2027, SHARP-ER is implemented by Acted, in consortium with United Efforts Consultancy (UEC) and Stichting Bureau Ensemble (SBE), and funded by the European Union.",
"The project works nationwide across Libya, partnering with civil society organisations, municipalities, and community leaders to strengthen access to justice, build the capacity of civil society to hold institutions accountable, and improve local governance and service delivery.",
],
consortiumHeading: "The consortium",
consortium: [
{
name: "Acted",
role: "Lead implementing partner — overall project management and civil society sub-projects",
role: "Lead implementing partner",
description:
"Overall project management and civil society sub-projects.",
},
{
name: "United Efforts Consultancy (UEC)",
role: "Network strengthening, dialogue, and peer-learning",
role: "Consortium partner",
description: "Network strengthening, dialogue, and peer-learning.",
},
{
name: "Stichting Bureau Ensemble (SBE)",
role: "Research, perception data, and knowledge publications",
role: "Consortium partner",
description: "Research, perception data, and knowledge publications.",
},
],
pillarsHeading: "Where we focus",
@@ -192,18 +297,17 @@ const EN: PageCopy = {
"Enhancing collaboration between municipalities and local actors to improve service delivery",
},
],
legacyHeading: "Building on SHARP I and II",
legacyEyebrow: "Building on SHARP",
legacyHeading: "Carrying the SHARP I and II network into a new phase",
legacyBody:
"SHARP-ER builds on the foundation of SHARP I and II (2019–2024), carrying its network of civil society partners and its dialogue practice into a new phase focused on sustainability and exit.",
legacyLinkLabel: "Read about the SHARP legacy",
fundingNote: "Funded by the European Union.",
},
whatWeDo: {
heroHeadline: "A Participatory Approach to Justice and Governance",
lead: "We work directly with civil society, municipalities, and communities — not around them.",
workstreamsHeading: "Our areas of work",
workstreamsIntro: "SHARP-ER is organised around four connected areas of work:",
workstreamsHeading: "Four connected areas of work",
workstreams: [
{
title: "Capacity Building",
@@ -235,16 +339,21 @@ const EN: PageCopy = {
"Responsibility & Accountability",
],
principlesHeading: "How we work",
principles:
"Our approach rests on four principles: working with local actors, promoting sustainable — not one-off — solutions, connecting civil society with institutions, and supporting gradual, realistic institutional reform.",
principleTitles: [
"Working with local actors",
"Sustainable, not one-off, solutions",
"Connecting civil society with institutions",
"Gradual, realistic institutional reform",
],
activitiesCtaHeading:
"See how this work is taking shape across the network",
},
contact: {
facebookLabel: "Follow us on Facebook",
heroHeadline: "Get in Touch",
lead: "Questions about SHARP-ER, a partnership, or a specific activity? Reach out.",
formHeading: "Send us a message",
formIntro:
"Fill in the form and the SHARP-ER team will come back to you by email.",
detailsHeading: "Contact details",
generalEnquiries: "General enquiries",
websiteLabel: "Website",
@@ -274,49 +383,90 @@ const EN: PageCopy = {
const AR: PageCopy = {
home: {
/* (ar-draft) matches the English frame: the wordmark names the project. */
heroHeadline: "انطلاق المشروع رسميًا في ليبيا",
statsHeading: "SHARP-ER بالأرقام",
launchHeading: "مسيرة إطلاق مشروع SHARP-ER",
launchLead: [
"انطلقت رسميًا فعاليات مشروع SHARP-ER يوم ",
{ em: "الثلاثاء 30 يونيو" },
"، بمشاركة ممثلين عن ",
{ em: "بعثة الاتحاد الأوروبي" },
"، وعدد من ",
{ em: "الوزارات الليبية" },
"، إلى جانب ",
{ em: "شركاء المجتمع المدني المحليين" },
". وشهد الحدث إطلاق الموقع الإلكتروني الرسمي للمشروع والدعوة للتعبير عن الاهتمام (EOI).",
heroHeadline: "انطلاق مشروع SHARP-ER رسميًا في ليبيا",
heroLead:
"العمل المشترك لتعزيز سيادة القانون – مسار الخروج: مبادرة وطنية تدعم المجتمع المدني والمؤسسات المحلية والمجتمعات في ليبيا في تعزيز العدالة والمساءلة والحوكمة الرشيدة.",
heroCtaPrimary: "الدعوة للتعبير عن الاهتمام",
heroCtaSecondary: "عن المشروع",
/* Western digits, as the rest of the Arabic draft writes its numbers
("ديسمبر 2025", "SHARP I and II (2019–2024)"). */
stats: [
{ value: "3", label: "شركاء الائتلاف" },
{ value: "4", label: "مجالات العمل" },
{ value: "16", label: "مشروعًا فرعيًا للأمن الإنساني" },
{ value: "25 شهرًا", label: "ديسمبر 2025 – ديسمبر 2027" },
],
mechanismsHeading: "ما الذي أطلقه هذا الحدث",
mechanisms: [
"بناء القدرات والمهارات المحلية",
"تعزيز الشراكات بين القطاعات",
"دعم المبادرات البلدية والمبادرات المجتمعية",
launchEyebrow: "30 يونيو · فعالية الإطلاق",
launchHeading: "بداية مهمة للمشروع",
launchLead:
"جمعت فعالية الإطلاق ممثلين عن بعثة الاتحاد الأوروبي، ووزارة الشباب، ووزارة الحكم المحلي، ووزارة شؤون المرأة، ومنظمات المجتمع المدني، والشركاء، وأصحاب المصلحة من مختلف أنحاء ليبيا. وشهد الحدث افتتاح الدعوة للتعبير عن الاهتمام وإطلاق هذا الموقع الإلكتروني.",
workHeading: "ثلاثة مجالات للتغيير",
workLinkLabel: "ماذا نفعل",
newsEyebrow: "غرفة الأخبار",
newsHeading: "الأخبار والمستجدات",
newsEmpty: "ستظهر الأخبار والمستجدات هنا فور نشرها.",
faqEyebrow: "الأسئلة الشائعة",
faqHeading: "أسئلة حول المشروع",
faqLead: "شروط الأهلية والجداول الزمنية وكيفية المشاركة.",
faqEmpty: "ستُنشر إجابات الأسئلة الشائعة هنا قريبًا.",
faqCtaLabel: "المزيد في مركز المعرفة",
consortiumHeading: "الائتلاف المنفّذ",
consortium: [
{
role: "الشريك المنفّذ الرئيسي",
name: "Acted",
description: "الإدارة العامة للمشروع والمشاريع الفرعية لمنظمات المجتمع المدني.",
},
{
role: "شريك في الائتلاف",
name: "United Efforts Consultancy (UEC)",
description: "تعزيز الشبكة، والحوار، والتعلّم بين الأقران.",
},
{
role: "شريك في الائتلاف",
name: "Stichting Bureau Ensemble (SBE)",
description: "البحث، وبيانات الاستطلاع، والمنشورات المعرفية.",
},
],
partnersHeading: "تعرّف على شركائنا",
networkLabel: "شركاء شبكة المجتمع المدني",
partnersEmpty:
"ستُدرج المنظمات الشريكة هنا فور انضمامها إلى شبكة SHARP-ER.",
},
about: {
heroEyebrow: "عن المشروع",
heroHeadline: "نحو تعزيز سيادة القانون، معًا",
lead: "SHARP-ER (العمل المشترك لتعزيز سيادة القانون – مسار الخروج) هو مبادرة وطنية تدعم المجتمع المدني والمؤسسات المحلية والمجتمعات الليبية في تعزيز العدالة والمساءلة والحوكمة الرشيدة.",
body: "يمتد المشروع من ديسمبر 2025 إلى ديسمبر 2027، ويُنفَّذ من قِبل منظمة Acted بالشراكة مع United Efforts Consultancy (UEC) وStichting Bureau Ensemble (SBE)، وبتمويل من الاتحاد الأوروبي. يعمل المشروع على مستوى ليبيا بأكملها، بالتعاون مع منظمات المجتمع المدني والبلديات والقيادات المجتمعية، من أجل تحسين الوصول إلى العدالة، وبناء قدرات المجتمع المدني على مساءلة المؤسسات، وتحسين الحوكمة المحلية وتقديم الخدمات.",
/* Western digits, as the Arabic column of the approved draft writes its
own dates ("ديسمبر 2025", "(2019–2024)"). */
facts: [
{ label: "مدة المشروع", value: "ديسمبر 2025 – ديسمبر 2027" },
{ label: "نطاق العمل", value: "على مستوى ليبيا بأكملها" },
{ label: "الشريك المنفّذ الرئيسي", value: "Acted" },
{ label: "بتمويل من", value: "الاتحاد الأوروبي" },
],
bodyHeading: "مشروع وطني يُنفَّذ محليًا",
body: [
"يمتد المشروع من ديسمبر 2025 إلى ديسمبر 2027، ويُنفَّذ من قِبل منظمة Acted بالشراكة مع United Efforts Consultancy (UEC) وStichting Bureau Ensemble (SBE)، وبتمويل من الاتحاد الأوروبي.",
"يعمل المشروع على مستوى ليبيا بأكملها، بالتعاون مع منظمات المجتمع المدني والبلديات والقيادات المجتمعية، من أجل تحسين الوصول إلى العدالة، وبناء قدرات المجتمع المدني على مساءلة المؤسسات، وتحسين الحوكمة المحلية وتقديم الخدمات.",
],
consortiumHeading: "الائتلاف المنفّذ",
consortium: [
{
name: "Acted",
role: "الشريك المنفّذ الرئيسي — الإدارة العامة للمشروع والمشاريع الفرعية لمنظمات المجتمع المدني",
role: "الشريك المنفّذ الرئيسي",
description:
"الإدارة العامة للمشروع والمشاريع الفرعية لمنظمات المجتمع المدني.",
},
{
name: "United Efforts Consultancy (UEC)",
role: "تعزيز الشبكة، والحوار، والتعلّم بين الأقران",
role: "شريك في الائتلاف",
description: "تعزيز الشبكة، والحوار، والتعلّم بين الأقران.",
},
{
name: "Stichting Bureau Ensemble (SBE)",
role: "البحث، وبيانات الاستطلاع، والمنشورات المعرفية",
role: "شريك في الائتلاف",
description: "البحث، وبيانات الاستطلاع، والمنشورات المعرفية.",
},
],
pillarsHeading: "محاور تركيزنا",
@@ -337,18 +487,21 @@ const AR: PageCopy = {
"تعزيز التعاون بين البلديات والجهات الفاعلة المحلية لتحسين تقديم الخدمات",
},
],
legacyHeading: "استكمالًا لمشروعي SHARP الأول والثاني",
legacyEyebrow: "استكمالًا لمشروع SHARP",
legacyHeading:
"حمل شبكة SHARP الأول والثاني إلى مرحلة جديدة",
legacyBody:
"يبني SHARP-ER على الأساس الذي أرساه مشروعا SHARP الأول والثاني (2019–2024)، حاملًا معه شبكة الشركاء من المجتمع المدني وممارسة الحوار إلى مرحلة جديدة تركّز على الاستدامة ومسار الخروج.",
legacyLinkLabel: "اطّلع على إرث مشروع SHARP",
fundingNote: "بتمويل من الاتحاد الأوروبي.",
},
whatWeDo: {
heroHeadline: "نهج تشاركي في العدالة والحوكمة",
lead: "نعمل مباشرة مع المجتمع المدني والبلديات والمجتمعات المحلية، لا من حولها.",
workstreamsHeading: "محاور عملنا",
workstreamsIntro: "يقوم عمل SHARP-ER على أربعة محاور مترابطة:",
/* The approved Arabic column writes the same line as a sentence -
"يقوم عمل SHARP-ER على أربعة محاور مترابطة" - which the draft's frame
sets as the heading itself. */
workstreamsHeading: "أربعة محاور عمل مترابطة",
workstreams: [
{
title: "بناء القدرات",
@@ -380,15 +533,20 @@ const AR: PageCopy = {
"المساءلة والمسؤولية",
],
principlesHeading: "كيف نعمل",
principles:
"يسترشد عملنا بأربعة مبادئ: العمل مع الفاعلين المحليين، وتعزيز الحلول المستدامة لا الآنية، والربط بين المجتمع المدني والمؤسسات، ودعم إصلاح مؤسسي تدريجي وواقعي.",
principleTitles: [
"العمل مع الفاعلين المحليين",
"حلول مستدامة لا آنية",
"الربط بين المجتمع المدني والمؤسسات",
"إصلاح مؤسسي تدريجي وواقعي",
],
activitiesCtaHeading: "اطّلع على كيفية تجسّد هذا العمل عبر الشبكة",
},
contact: {
facebookLabel: "تابعونا على فيسبوك",
heroHeadline: "تواصل معنا",
lead: "لديك استفسار حول SHARP-ER، أو شراكة محتملة، أو نشاط معيّن؟ راسلنا.",
formHeading: "أرسل لنا رسالة",
formIntro: "املأ النموذج وسيعاود فريق SHARP-ER التواصل معك عبر البريد الإلكتروني.",
detailsHeading: "بيانات التواصل",
generalEnquiries: "للاستفسارات العامة",
websiteLabel: "الموقع الإلكتروني",