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>
2026-09-16 20:32:56 +02:00
parent 8464c24fb1
commit aedef6daeb
63 changed files with 7276 additions and 1768 deletions
@@ -21,6 +21,16 @@ import type { Locale } from "~/i18n";

 const EN = {
  events: {
+    /* The kicker above an event title. "other" is intentionally empty: an
+       event the CMS did not classify simply gets no kicker. */
+    eventTypes: {
+      "suq-dialogue": "SUQ Dialogue",
+      training: "Training",
+      "law-session": "Law Session",
+      "network-meeting": "Network Meeting",
+      launch: "Launch",
+      other: "",
+    },
    /** Draft 4, EN headline. */
    heading: "Upcoming Events",
    /** Draft 4, EN standfirst. */
@@ -79,6 +89,9 @@ const EN = {
    metaDescription:
      "Calls for expression of interest, SHARP network membership and upcoming sessions — how civil society organisations and individuals take part in SHARP-ER.",
    pathwaysHeading: "Ways to take part",
+    /* The draft has no call list; this single line keeps the open calls
+       reachable in-site now that the listing band is gone. */
+    currentCallsLabel: "Open calls:",
    pathwayCallsTitle: "Apply for a Call for Expression of Interest",
    pathwayCallsBody:
      "Open calls for CSO sub-projects and Policy-to-Rights (P2R) initiatives.",
@@ -88,14 +101,81 @@ const EN = {
    pathwaySessionsTitle: "Register for a SUQ Dialogue or Training",
    pathwaySessionsBody:
      "Take part in an upcoming Search, Understand, Question dialogue or a dialogue-facilitation training.",
-    listHeading: "Current calls",
-    listLabel: "Calls and opportunities",
-    statusFilterLabel: "Status",
-    empty: "There are no calls or opportunities to show yet.",
-    emptyHint:
-      "Calls for expression of interest are published here as soon as they open.",
-    unavailable:
-      "Calls and opportunities cannot be loaded right now. Please try again in a moment.",
+  },
+  /* -------------------------------------------------------------------------
+     THE APPLICATION FORM - the redesign draft's #apply band
+     ----------------------------------------------------------------------------
+     THREE OF THE DRAFT'S SENTENCES ARE NOT REPRODUCED, on the client's own
+     instruction and under CLAUDE.md rule 5:
+
+       * "PDF or DOCX, up to 10 MB" - not the rule this project runs. The CMS
+         ceiling is UPLOAD_MAX_FILE_SIZE (50 MB by default) over the media types
+         listed in apps/cms/config/plugins.ts, and in any case nothing is
+         uploaded here (see `documentsNote`), so no limit is quoted at all.
+       * "an automatic acknowledgment with your reference number" - there is no
+         reference-number field anywhere in the CMS, so no number is promised.
+         The acknowledgement itself IS modelled, as
+         `application.acknowledgementSentAt`, so it is the only half that
+         survives.
+       * "follows up within four weeks" - that response time appears in no
+         approved document; §8 of the draft marks it "[X weeks] - TBD". The
+         follow-up is stated without a period attached, exactly as the per-call
+         acknowledgement already does.
+     ---------------------------------------------------------------------- */
+  apply: {
+    /** The draft's "Step {n} of 3" kicker over the form. */
+    stepOf: "Step {current} of {total}",
+    /** Accessible name of the progress list. */
+    stepsLabel: "Application progress",
+    stepEligibility: "Eligibility",
+    stepApplication: "Application",
+    stepReview: "Review",
+    /** Announced on the step the reader is on. */
+    stepCurrent: "current step",
+    stepDone: "done",
+    /** The standfirst beside the form. */
+    standfirst:
+      "Submissions are acknowledged automatically by email. The consortium reviews complete applications and follows up by email.",
+    formLabel: "Application form",
+    fieldsetLegend: "Your details",
+    routeLabel: "What are you applying for?",
+    /* The short names the draft gives the three routes - the long ones head
+       the pathway cards above and are too long for a select. */
+    routeCalls: "Call for Expression of Interest",
+    routeNetwork: "SHARP Network membership",
+    routeSessions: "SUQ dialogue or training",
+    organisationLabel: "Organisation name",
+    organisationPlaceholder: "Registered legal name",
+    contactLabel: "Contact person",
+    contactPlaceholder: "Full name",
+    emailLabel: "Email",
+    emailPlaceholder: "name@organisation.ly",
+    regionLabel: "Region of operation",
+    regionPlaceholder: "City or municipality",
+    yearsLabel: "Years of operating history",
+    yearsPlaceholder: "e.g. 4",
+    summaryLabel: "Summary of your proposal",
+    summaryHint: "Briefly describe your organisation and why you are applying.",
+    documentsTitle: "Supporting documents",
+    /**
+     * The draft draws a file input here. There is nowhere for the file to go:
+     * `attachments` is deliberately off the public whitelist in
+     * apps/cms/src/api/application/middlewares/sanitize-submission.ts, and the
+     * Public role cannot upload. A control that accepted a document and then
+     * dropped it would be worse than none, so the panel says plainly what the
+     * form does with documents - and quotes no size limit, because it accepts
+     * no files at all.
+     */
+    documentsNote:
+      "Documents are not uploaded through this form. Describe any supporting material in the summary above.",
+    /** `application.acknowledgementSentAt` - modelled, so it can be said. */
+    acknowledgement: "Your submission is acknowledged automatically by email.",
+    submit: "Submit application",
+    errorSummaryTitle: "Please check the form",
+    receivedTitle: "Application received",
+    receivedBody:
+      "Thank you for applying to {route}. An acknowledgement is on its way to the email address you gave us, and our team will review your application and follow up by email.",
+    submitAnother: "Submit another",
  },
  /** `opportunity.opportunityType`, verbatim, with the draft's own wording. */
  opportunityTypes: {
@@ -143,6 +223,14 @@ export type RouteCopy = typeof EN;

 const AR: RouteCopy = {
  events: {
+    eventTypes: {
+      "suq-dialogue": "حوار سوق",
+      training: "تدريب",
+      "law-session": "جلسة قانونية",
+      "network-meeting": "اجتماع الشبكة",
+      launch: "إطلاق",
+      other: "",
+    },
    heading: "الفعاليات القادمة",
    intro:
      "سجّل في حوار SUQ، أو انضم إلى تدريب، أو تابع ما هو قادم في مختلف أنحاء ليبيا.",
@@ -189,6 +277,7 @@ const AR: RouteCopy = {
    metaDescription:
      "دعوات للتعبير عن الاهتمام، وعضوية شبكة SHARP، وجلسات قادمة — كيف تشارك منظمات المجتمع المدني والأفراد في SHARP-ER.",
    pathwaysHeading: "طرق المشاركة",
+    currentCallsLabel: "الدعوات المفتوحة:",
    pathwayCallsTitle: "التقديم على دعوة للتعبير عن الاهتمام",
    pathwayCallsBody:
      "دعوات مفتوحة للمشاريع الفرعية لمنظمات المجتمع المدني ومبادرات «من السياسة إلى الحقوق» (P2R).",
@@ -198,13 +287,45 @@ const AR: RouteCopy = {
    pathwaySessionsTitle: "سجّل في حوار SUQ أو تدريب",
    pathwaySessionsBody:
      "شارك في حوار قادم من نوع «ابحث، افهم، اسأل» أو في تدريب على تيسير الحوار.",
-    listHeading: "الدعوات الحالية",
-    listLabel: "الدعوات والفرص",
-    statusFilterLabel: "الحالة",
-    empty: "لا توجد دعوات أو فرص لعرضها حتى الآن.",
-    emptyHint: "تُنشر هنا دعوات التعبير عن الاهتمام فور فتحها.",
-    unavailable:
-      "تعذّر تحميل الدعوات والفرص في الوقت الحالي. يرجى المحاولة مرة أخرى بعد قليل.",
+  },
+  apply: {
+    stepOf: "الخطوة {current} من {total}",
+    stepsLabel: "مراحل تقديم الطلب",
+    stepEligibility: "الأهلية",
+    stepApplication: "الطلب",
+    stepReview: "المراجعة",
+    stepCurrent: "الخطوة الحالية",
+    stepDone: "مكتملة",
+    standfirst:
+      "يصلك إشعار تلقائي باستلام طلبك عبر البريد الإلكتروني. ويراجع الائتلاف الطلبات المكتملة ويتواصل معك عبر البريد الإلكتروني.",
+    formLabel: "نموذج التقديم",
+    fieldsetLegend: "بياناتك",
+    routeLabel: "ما الذي تقدّم عليه؟",
+    routeCalls: "دعوة للتعبير عن الاهتمام",
+    routeNetwork: "عضوية شبكة SHARP",
+    routeSessions: "حوار SUQ أو تدريب",
+    organisationLabel: "اسم المنظمة",
+    organisationPlaceholder: "الاسم القانوني المسجَّل",
+    contactLabel: "الشخص المسؤول",
+    contactPlaceholder: "الاسم الكامل",
+    emailLabel: "البريد الإلكتروني",
+    emailPlaceholder: "name@organisation.ly",
+    regionLabel: "نطاق العمل",
+    regionPlaceholder: "المدينة أو البلدية",
+    yearsLabel: "عدد سنوات العمل",
+    yearsPlaceholder: "مثال: 4",
+    summaryLabel: "ملخّص المقترح",
+    summaryHint: "صف باختصار منظمتك وسبب تقديمك.",
+    documentsTitle: "المستندات الداعمة",
+    documentsNote:
+      "لا تُرفَق المستندات عبر هذا النموذج. صف أي مواد داعمة في الملخّص أعلاه.",
+    acknowledgement: "يصلك إشعار تلقائي باستلام طلبك عبر البريد الإلكتروني.",
+    submit: "إرسال الطلب",
+    errorSummaryTitle: "يرجى مراجعة النموذج",
+    receivedTitle: "تم استلام الطلب",
+    receivedBody:
+      "شكرًا لتقديمك على {route}. سيصلك إشعار بالاستلام على البريد الإلكتروني الذي زوّدتنا به، وسيراجع فريقنا طلبك ويتواصل معك عبر البريد الإلكتروني.",
+    submitAnother: "تقديم طلب آخر",
  },
  opportunityTypes: {
    "call-eoi": "دعوة للتعبير عن الاهتمام",
@@ -69,6 +69,8 @@ import {
  type EventDetailData,
  type EventFormat,
  type EventRegistrationStatus,
+  EVENT_TYPES,
+  type EventType,
 } from "./events";

 export const EVENTS_RESOURCE = "events";
@@ -83,6 +85,7 @@ interface StrapiEvent extends StrapiEntity, CmsLocalizable {
  readonly body?: CmsRichText;
  readonly startDateTime: string;
  readonly endDateTime?: string | null;
+  readonly eventType?: EventType | null;
  readonly format?: EventFormat | null;
  readonly venue?: string | null;
  readonly region?: CmsTaxonomy | null;
@@ -135,6 +138,7 @@ function toCard(entry: StrapiEvent, now: Date): EventCardData {
    start,
    end,
    allDay,
+    eventType: oneOf(entry.eventType, EVENT_TYPES),
    format: oneOf(entry.format, FORMATS),
    place: text(entry.venue),
    region: text(entry.region?.name),
@@ -53,6 +53,22 @@ export type EventRegistrationStatus =
  | "waitlist"
  | "not-required";

+/**
+ * api::event.eventType - what kind of session this is. The redesign prints it
+ * as a kicker above the title ("SUQ Dialogue", "Training"), so the label map
+ * lives with the rest of the route copy, in both locales.
+ */
+export const EVENT_TYPES = [
+  "suq-dialogue",
+  "training",
+  "law-session",
+  "network-meeting",
+  "launch",
+  "other",
+] as const;
+
+export type EventType = (typeof EVENT_TYPES)[number];
+
 export const EVENT_REGISTRATION_STATUSES = [
  "open",
  "closed",
@@ -85,6 +101,8 @@ export function isEventStatusFilter(value: unknown): value is EventStatusFilter
 export interface EventCardData {
  readonly slug: string;
  readonly title: string;
+  /** Kicker above the title. Absent when the CMS leaves the type unset. */
+  readonly eventType?: EventType;
  readonly summary?: string;
  /** ISO 8601. Date-only when `allDay`. */
  readonly start: string;
@@ -54,6 +54,10 @@ const LIMITS = {
  email: 254,
  phone: 40,
  message: 4000,
+  /** Free text - "Tripoli", "Sabha and the south". Not a taxonomy. */
+  region: 160,
+  /** Free text on purpose: "4", "under a year", "since 2016" are all answers. */
+  years: 40,
 } as const;

 function field(form: FormData, name: string, limit: number): string {
@@ -150,3 +154,103 @@ export function validateApplication(

  return { values, errors, valid: Object.keys(errors).length === 0 };
 }
+
+/* ---------------------------------------------------------------------------
+   GET INVOLVED - the application form on the section's own page
+   ----------------------------------------------------------------------------
+   The redesign draft puts a single application form under the three pathway
+   cards, with five fields and a proposal summary. It is the same contract as
+   the per-call form above, plus the two answers the draft asks for (region of
+   operation, years of operating history) and the pathway being applied under.
+
+   WHAT IS REQUIRED, AND WHY EXACTLY THOSE THREE
+   `application.applicantName` and `application.email` are `required: true` in
+   the CMS, so a submission without them is a 400 that costs the applicant
+   everything they typed - they are validated here first. The summary is
+   required because an application with no case in it cannot be reviewed.
+
+   Everything else is optional BY DESIGN, not by omission: the page invites
+   "a civil society organisation or an individual", so an organisation name, a
+   region and a number of years of operating history cannot be demanded
+   without shutting the individuals out of the form that invites them.
+
+   `yearsOperating` is a STRING, deliberately. "4", "under a year" and "since
+   2016" are all true answers to the draft's question, and a number input would
+   reject two of them; it reaches the CMS inside `answers`, where a reviewer
+   reads it, and nothing computes on it.
+   ------------------------------------------------------------------------ */
+
+/**
+ * The three ways in, as the draft names them. The value is carried in the
+ * query string (`?route=`) so a pathway card can open the form already set to
+ * its own route, and it is submitted as a real `<select>` so the reader can
+ * correct it - and so the choice still travels with scripting off.
+ */
+export type ApplicationRoute = "calls" | "network" | "sessions";
+
+export const APPLICATION_ROUTES = [
+  "calls",
+  "network",
+  "sessions",
+] as const satisfies readonly ApplicationRoute[];
+
+export function isApplicationRoute(value: unknown): value is ApplicationRoute {
+  return (
+    typeof value === "string" &&
+    (APPLICATION_ROUTES as readonly string[]).includes(value)
+  );
+}
+
+export interface PathwayApplicationValues {
+  readonly route: ApplicationRoute;
+  readonly organisation: string;
+  readonly fullName: string;
+  readonly email: string;
+  readonly region: string;
+  readonly yearsOperating: string;
+  readonly summary: string;
+}
+
+/** The field name of the pathway select, shared by the form and the parser. */
+export const ROUTE_FIELD = "route";
+
+export function validatePathwayApplication(
+  form: FormData,
+  fallbackRoute: ApplicationRoute = "calls",
+): Validated<PathwayApplicationValues> {
+  const submittedRoute = form.get(ROUTE_FIELD);
+
+  const values: PathwayApplicationValues = {
+    // An unknown value is not an error the reader can act on - it cannot be
+    // produced by the select - so it falls back rather than blocking a submit.
+    route: isApplicationRoute(submittedRoute) ? submittedRoute : fallbackRoute,
+    organisation: field(form, "organisation", LIMITS.organisation),
+    fullName: field(form, "fullName", LIMITS.name),
+    email: field(form, "email", LIMITS.email),
+    region: field(form, "region", LIMITS.region),
+    yearsOperating: field(form, "yearsOperating", LIMITS.years),
+    summary: field(form, "summary", LIMITS.message),
+  };
+
+  const errors: Record<string, FieldErrorCode> = {};
+
+  if (!values.fullName) errors.fullName = "required";
+  if (!values.email) errors.email = "required";
+  else if (!EMAIL.test(values.email)) errors.email = "email";
+  if (!values.summary) errors.summary = "required";
+
+  return { values, errors, valid: Object.keys(errors).length === 0 };
+}
+
+/** The form's fields in reading order - the error summary lists them in it. */
+export const PATHWAY_APPLICATION_FIELDS = [
+  "organisation",
+  "fullName",
+  "email",
+  "region",
+  "yearsOperating",
+  "summary",
+] as const;
+
+export type PathwayApplicationField =
+  (typeof PATHWAY_APPLICATION_FIELDS)[number];
@@ -49,7 +49,11 @@
   `findOne` are NOT, or anyone could read everyone else's contact details.
   ========================================================================= */

-import type { ApplicationValues, RegistrationValues } from "./forms";
+import type {
+  ApplicationValues,
+  PathwayApplicationValues,
+  RegistrationValues,
+} from "./forms";
 import { createStrapiEntry } from "./strapi-write.server";

 export const EVENT_REGISTRATIONS_RESOURCE = "event-registrations";
@@ -104,3 +108,73 @@ export async function submitApplication(
    answers: { [APPLICATION_MESSAGE_KEY]: input.values.message },
  });
 }
+
+/* ---------------------------------------------------------------------------
+   GET INVOLVED - the section page's own application
+   ------------------------------------------------------------------------ */
+
+/**
+ * The keys the Get Involved form files inside `answers` (json).
+ *
+ * They are named here rather than spelled at the call site because a reviewer
+ * reads them in the admin panel: renaming one silently orphans every answer
+ * already stored under the old key.
+ *
+ * `message` is deliberately the SAME key the per-call form writes
+ * (APPLICATION_MESSAGE_KEY above), so the free-text case for applying reads
+ * out of one place whichever form it arrived through.
+ */
+export const APPLICATION_ANSWER_KEYS = {
+  /** Which of the three pathways the applicant chose. */
+  route: "route",
+  region: "regionOfOperation",
+  yearsOperating: "yearsOperating",
+  summary: APPLICATION_MESSAGE_KEY,
+} as const;
+
+export interface PathwayApplicationSubmission {
+  readonly values: PathwayApplicationValues;
+  /**
+   * documentId of the opportunity this application belongs to, when one is
+   * known. The Get Involved form is NOT tied to a single call - it is the
+   * section's general way in - so it is usually absent, and `opportunity` is
+   * optional on the content type precisely for that case. It is never guessed
+   * from "the nearest open call": an application filed against a call the
+   * applicant never named is a fabricated relation.
+   */
+  readonly opportunityId?: string;
+}
+
+/**
+ * Write a Get Involved application. The payload is the CMS whitelist and
+ * nothing more (see the header): the two extra answers the draft asks for ride
+ * inside `answers`, which is on that whitelist, so they need no migration.
+ *
+ * `attachments` is NOT sent, and the form does not offer an upload. See the
+ * header of this file and the `sanitize-submission` middleware in the CMS for
+ * why a public caller cannot supply one.
+ */
+export async function submitPathwayApplication(
+  input: PathwayApplicationSubmission,
+): Promise<void> {
+  const { values } = input;
+
+  await createStrapiEntry(APPLICATIONS_RESOURCE, {
+    ...(input.opportunityId ? { opportunity: input.opportunityId } : {}),
+    applicantName: values.fullName,
+    email: values.email,
+    organisation: optional(values.organisation),
+    answers: {
+      [APPLICATION_ANSWER_KEYS.route]: values.route,
+      // Only the answers actually given: an empty string in the admin panel
+      // reads as "answered, with nothing", which is not what happened.
+      ...(values.region
+        ? { [APPLICATION_ANSWER_KEYS.region]: values.region }
+        : {}),
+      ...(values.yearsOperating
+        ? { [APPLICATION_ANSWER_KEYS.yearsOperating]: values.yearsOperating }
+        : {}),
+      [APPLICATION_ANSWER_KEYS.summary]: values.summary,
+    },
+  });
+}