From aedef6daeb80aae9e6a5c4551f7fbdd56a11da58 Mon Sep 17 00:00:00 2001 From: Hisham Aburaqibah Date: Wed, 16 Sep 2026 20:32:56 +0200 Subject: [PATCH] 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) --- .../src/api/faq/content-types/faq/schema.json | 48 + apps/cms/src/api/faq/controllers/faq.ts | 7 + apps/cms/src/api/faq/routes/faq.ts | 7 + apps/cms/src/api/faq/services/faq.ts | 7 + .../components/page/consortium-member.json | 4 + apps/cms/types/generated/components.d.ts | 4 + apps/cms/types/generated/contentTypes.d.ts | 54 + apps/web/app/app.css | 23 +- apps/web/app/components/ui/Button/Button.css | 21 +- apps/web/app/components/ui/Card/CardShell.tsx | 2 +- .../web/app/components/ui/EuBadge/EuBadge.tsx | 112 ++ apps/web/app/components/ui/EuBadge/index.ts | 2 + apps/web/app/components/ui/Footer/Footer.css | 40 + apps/web/app/components/ui/Footer/Footer.tsx | 185 ++-- apps/web/app/components/ui/Footer/content.ts | 44 +- apps/web/app/components/ui/Footer/types.ts | 14 +- .../ui/LanguageSwitcher/LanguageMenu.tsx | 273 +++++ .../ui/LanguageSwitcher/LanguageSwitcher.css | 35 + .../ui/LanguageSwitcher/LanguageSwitcher.tsx | 11 +- .../ui/LanguageSwitcher/LanguageToggle.tsx | 119 +++ .../components/ui/LanguageSwitcher/index.ts | 4 + .../components/ui/Navigation/DesktopNav.tsx | 429 +++++--- .../app/components/ui/Navigation/EuBadge.tsx | 73 -- .../components/ui/Navigation/MobileNav.tsx | 6 +- .../components/ui/Navigation/Navigation.css | 33 + .../components/ui/Navigation/Navigation.tsx | 106 +- .../web/app/components/ui/Navigation/index.ts | 2 - .../app/components/ui/Navigation/nav-items.ts | 2 + .../web/app/components/ui/Navigation/types.ts | 2 + apps/web/app/i18n/messages/ar.json | 1 + apps/web/app/i18n/messages/en.json | 1 + apps/web/app/lib/site-links.ts | 13 + .../app/routes/_events-opportunities/copy.ts | 151 ++- .../_events-opportunities/events.server.ts | 4 + .../routes/_events-opportunities/events.ts | 18 + .../app/routes/_events-opportunities/forms.ts | 104 ++ .../submissions.server.ts | 76 +- apps/web/app/routes/_page-kit/accordion.tsx | 133 +++ apps/web/app/routes/_page-kit/cms-types.ts | 25 + apps/web/app/routes/_page-kit/copy.ts | 310 ++++-- apps/web/app/routes/_page-kit/hero.css | 63 ++ apps/web/app/routes/_page-kit/motion.css | 249 +++++ apps/web/app/routes/_page-kit/sections.tsx | 460 ++++++-- apps/web/app/routes/_shared/calendar.ts | 247 +++++ apps/web/app/routes/_shared/cms.ts | 29 + apps/web/app/routes/_shared/listing-ui.tsx | 510 ++++++++- apps/web/app/routes/_shared/page-copy.ts | 194 ++++ apps/web/app/routes/about.tsx | 320 ++++-- .../app/routes/activities-and-initiatives.tsx | 417 +++++--- .../routes/applications-and-opportunities.tsx | 996 +++++++++++++++--- apps/web/app/routes/contact.tsx | 313 ++++-- apps/web/app/routes/events-calendar.tsx | 607 +++++++++-- apps/web/app/routes/home.tsx | 761 +++++++++---- apps/web/app/routes/knowledge-hub.tsx | 389 +++++-- apps/web/app/routes/news-and-updates.tsx | 333 ++++-- .../app/routes/resources-and-publications.tsx | 410 ++++--- apps/web/app/routes/what-we-do.tsx | 194 +++- apps/web/app/styles/primitives.css | 2 + apps/web/app/styles/semantic.css | 32 +- apps/web/package.json | 2 +- apps/web/public/assets/icons/globe-solid.svg | 10 + .../public/assets/sharp-er-suffix-inverse.svg | 1 + .../Home page redesign with news and FAQs.zip | Bin 0 -> 166046 bytes 63 files changed, 7276 insertions(+), 1768 deletions(-) create mode 100644 apps/cms/src/api/faq/content-types/faq/schema.json create mode 100644 apps/cms/src/api/faq/controllers/faq.ts create mode 100644 apps/cms/src/api/faq/routes/faq.ts create mode 100644 apps/cms/src/api/faq/services/faq.ts create mode 100644 apps/web/app/components/ui/EuBadge/EuBadge.tsx create mode 100644 apps/web/app/components/ui/EuBadge/index.ts create mode 100644 apps/web/app/components/ui/Footer/Footer.css create mode 100644 apps/web/app/components/ui/LanguageSwitcher/LanguageMenu.tsx create mode 100644 apps/web/app/components/ui/LanguageSwitcher/LanguageSwitcher.css create mode 100644 apps/web/app/components/ui/LanguageSwitcher/LanguageToggle.tsx delete mode 100644 apps/web/app/components/ui/Navigation/EuBadge.tsx create mode 100644 apps/web/app/components/ui/Navigation/Navigation.css create mode 100644 apps/web/app/lib/site-links.ts create mode 100644 apps/web/app/routes/_page-kit/accordion.tsx create mode 100644 apps/web/app/routes/_page-kit/hero.css create mode 100644 apps/web/app/routes/_page-kit/motion.css create mode 100644 apps/web/app/routes/_shared/calendar.ts create mode 100644 apps/web/public/assets/icons/globe-solid.svg create mode 100644 apps/web/public/assets/sharp-er-suffix-inverse.svg create mode 100644 design/Home page redesign with news and FAQs.zip diff --git a/apps/cms/src/api/faq/content-types/faq/schema.json b/apps/cms/src/api/faq/content-types/faq/schema.json new file mode 100644 index 0000000..bf5c5e5 --- /dev/null +++ b/apps/cms/src/api/faq/content-types/faq/schema.json @@ -0,0 +1,48 @@ +{ + "kind": "collectionType", + "collectionName": "faqs", + "info": { + "singularName": "faq", + "pluralName": "faqs", + "displayName": "FAQ", + "description": "A question and answer shown in the FAQ accordion." + }, + "options": { + "draftAndPublish": true + }, + "pluginOptions": { + "i18n": { + "localized": true + } + }, + "attributes": { + "question": { + "type": "string", + "required": true, + "maxLength": 250, + "pluginOptions": { + "i18n": { + "localized": true + } + } + }, + "answer": { + "type": "richtext", + "required": true, + "pluginOptions": { + "i18n": { + "localized": true + } + } + }, + "order": { + "type": "integer", + "default": 0, + "pluginOptions": { + "i18n": { + "localized": false + } + } + } + } +} diff --git a/apps/cms/src/api/faq/controllers/faq.ts b/apps/cms/src/api/faq/controllers/faq.ts new file mode 100644 index 0000000..7e2caa9 --- /dev/null +++ b/apps/cms/src/api/faq/controllers/faq.ts @@ -0,0 +1,7 @@ +/** + * faq controller + */ + +import { factories } from '@strapi/strapi'; + +export default factories.createCoreController('api::faq.faq'); diff --git a/apps/cms/src/api/faq/routes/faq.ts b/apps/cms/src/api/faq/routes/faq.ts new file mode 100644 index 0000000..e9f783c --- /dev/null +++ b/apps/cms/src/api/faq/routes/faq.ts @@ -0,0 +1,7 @@ +/** + * faq router + */ + +import { factories } from '@strapi/strapi'; + +export default factories.createCoreRouter('api::faq.faq'); diff --git a/apps/cms/src/api/faq/services/faq.ts b/apps/cms/src/api/faq/services/faq.ts new file mode 100644 index 0000000..5578d01 --- /dev/null +++ b/apps/cms/src/api/faq/services/faq.ts @@ -0,0 +1,7 @@ +/** + * faq service + */ + +import { factories } from '@strapi/strapi'; + +export default factories.createCoreService('api::faq.faq'); diff --git a/apps/cms/src/components/page/consortium-member.json b/apps/cms/src/components/page/consortium-member.json index c9955ff..6d9b436 100644 --- a/apps/cms/src/components/page/consortium-member.json +++ b/apps/cms/src/components/page/consortium-member.json @@ -12,6 +12,10 @@ "relation": "oneToOne", "target": "api::partner.partner" }, + "role": { + "type": "string", + "maxLength": 120 + }, "roleDescription": { "type": "text" } diff --git a/apps/cms/types/generated/components.d.ts b/apps/cms/types/generated/components.d.ts index 3c6f26f..98bfc57 100644 --- a/apps/cms/types/generated/components.d.ts +++ b/apps/cms/types/generated/components.d.ts @@ -159,6 +159,10 @@ export interface PageConsortiumMember extends Struct.ComponentSchema { }; attributes: { partner: Schema.Attribute.Relation<'oneToOne', 'api::partner.partner'>; + role: Schema.Attribute.String & + Schema.Attribute.SetMinMaxLength<{ + maxLength: 120; + }>; roleDescription: Schema.Attribute.Text; }; } diff --git a/apps/cms/types/generated/contentTypes.d.ts b/apps/cms/types/generated/contentTypes.d.ts index 028c5cd..d07a703 100644 --- a/apps/cms/types/generated/contentTypes.d.ts +++ b/apps/cms/types/generated/contentTypes.d.ts @@ -1095,6 +1095,59 @@ export interface ApiEventEvent extends Struct.CollectionTypeSchema { }; } +export interface ApiFaqFaq extends Struct.CollectionTypeSchema { + collectionName: 'faqs'; + info: { + description: 'A question and answer shown in the FAQ accordion.'; + displayName: 'FAQ'; + pluralName: 'faqs'; + singularName: 'faq'; + }; + options: { + draftAndPublish: true; + }; + pluginOptions: { + i18n: { + localized: true; + }; + }; + attributes: { + answer: Schema.Attribute.RichText & + Schema.Attribute.Required & + Schema.Attribute.SetPluginOptions<{ + i18n: { + localized: true; + }; + }>; + createdAt: Schema.Attribute.DateTime; + createdBy: Schema.Attribute.Relation<'oneToOne', 'admin::user'> & + Schema.Attribute.Private; + locale: Schema.Attribute.String; + localizations: Schema.Attribute.Relation<'oneToMany', 'api::faq.faq'>; + order: Schema.Attribute.Integer & + Schema.Attribute.SetPluginOptions<{ + i18n: { + localized: false; + }; + }> & + Schema.Attribute.DefaultTo<0>; + publishedAt: Schema.Attribute.DateTime; + question: Schema.Attribute.String & + Schema.Attribute.Required & + Schema.Attribute.SetPluginOptions<{ + i18n: { + localized: true; + }; + }> & + Schema.Attribute.SetMinMaxLength<{ + maxLength: 250; + }>; + updatedAt: Schema.Attribute.DateTime; + updatedBy: Schema.Attribute.Relation<'oneToOne', 'admin::user'> & + Schema.Attribute.Private; + }; +} + export interface ApiHomePageHomePage extends Struct.SingleTypeSchema { collectionName: 'home_pages'; info: { @@ -2664,6 +2717,7 @@ declare module '@strapi/strapi' { 'api::contact-submission.contact-submission': ApiContactSubmissionContactSubmission; 'api::event-registration.event-registration': ApiEventRegistrationEventRegistration; 'api::event.event': ApiEventEvent; + 'api::faq.faq': ApiFaqFaq; 'api::home-page.home-page': ApiHomePageHomePage; 'api::knowledge-item.knowledge-item': ApiKnowledgeItemKnowledgeItem; 'api::news-article.news-article': ApiNewsArticleNewsArticle; diff --git a/apps/web/app/app.css b/apps/web/app/app.css index 0e96817..e3500bf 100644 --- a/apps/web/app/app.css +++ b/apps/web/app/app.css @@ -30,7 +30,13 @@ html, body, [data-surface] { - background-color: var(--surface-page); + /* The design drafts stand the whole site on #0B0B0A and lift their + bands off it with #1D1D1B, so the document's ground is the SUNKEN + surface and `--surface-page` is the colour of a band. A section that + wants the lighter band paints `bg-[var(--surface-page)]`; one that + wants the ground paints nothing, or `bg-[var(--surface-sunken)]` when + it needs to say so explicitly. */ + background-color: var(--surface-sunken); color: var(--text-primary); } @@ -86,3 +92,18 @@ } } } + +/* --------------------------------------------------------------------------- + BANDS + The design drafts alternate the #0B0B0A ground with lighter #1D1D1B bands, + and a card inside a band is drawn DARKER than the band (#141413) while a + card on the ground is drawn LIGHTER (#1D1D1B). A section paints itself with + `.sh-band` and every Card, InfoPanel and tile inside it follows, instead of + each route guessing its own fill. + ------------------------------------------------------------------------ */ +@layer components { + .sh-band { + background-color: var(--surface-page); + --surface-card: var(--surface-raised); + } +} diff --git a/apps/web/app/components/ui/Button/Button.css b/apps/web/app/components/ui/Button/Button.css index 5f16a75..5caa2ad 100644 --- a/apps/web/app/components/ui/Button/Button.css +++ b/apps/web/app/components/ui/Button/Button.css @@ -57,7 +57,26 @@ transition: background-color var(--motion-duration-fast) var(--motion-ease-standard), border-color var(--motion-duration-fast) var(--motion-ease-standard), - color var(--motion-duration-fast) var(--motion-ease-standard); + color var(--motion-duration-fast) var(--motion-ease-standard), + transform var(--motion-duration-base) var(--motion-ease-entrance); + } + + /* The Claude Design drafts lift a button 3px under the pointer and set it + back down on press. Pointer devices only - a touch "hover" would leave the + control raised after the tap - and never while disabled or busy, where the + control must not look live. app.css collapses the transition under + prefers-reduced-motion, so the lift becomes an instant, harmless offset. + + The drafts also put a coloured glow behind the lifted button; that is + deliberately not shipped (client decision). */ + @media (hover: hover) { + .sh-btn:hover:not(:disabled):not([aria-disabled="true"]):not([data-loading]) { + transform: translateY(-3px); + } + } + + .sh-btn:active:not(:disabled):not([aria-disabled="true"]):not([data-loading]) { + transform: none; } .sh-btn--block { diff --git a/apps/web/app/components/ui/Card/CardShell.tsx b/apps/web/app/components/ui/Card/CardShell.tsx index aefa266..8b27dd9 100644 --- a/apps/web/app/components/ui/Card/CardShell.tsx +++ b/apps/web/app/components/ui/Card/CardShell.tsx @@ -159,7 +159,7 @@ export function CardShell({ className={cx( "sh-card", linked && "sh-card--linked", - "relative flex bg-surface-raised text-text-primary", + "relative flex bg-[var(--surface-card)] text-text-primary", "rounded-surface border border-border-subtle shadow-[var(--elevation-card)]", className, )} diff --git a/apps/web/app/components/ui/EuBadge/EuBadge.tsx b/apps/web/app/components/ui/EuBadge/EuBadge.tsx new file mode 100644 index 0000000..a2f6155 --- /dev/null +++ b/apps/web/app/components/ui/EuBadge/EuBadge.tsx @@ -0,0 +1,112 @@ +import { getDirection, type Locale } from "../LanguageSwitcher"; + +/* Exported from Figma assets/eu-en (224:11275) and assets/eu-en - darkBg + (238:2325). The source files are downscaled copies of the Figma exports. */ +const EMBLEM_SRC = { + light: "/assets/eu-flag.png", + dark: "/assets/eu-flag-dark.png", +} as const; + +const EMBLEM_INTRINSIC_WIDTH = 192; +const EMBLEM_INTRINSIC_HEIGHT = 128; + +/** + * Drawn emblem box per size. "md" is the 48x32 the navigation and the drawer + * use; "sm" is the 36x24 the home hero draws above the wordmark (478:15951). + * Only the emblem changes - see the note on the statement below. + */ +const EMBLEM_BOX = { + md: "h-[32px] w-[48px]", + sm: "h-[24px] w-[36px]", +} as const; + +export type EuBadgeSize = keyof typeof EMBLEM_BOX; + +/** Which tier-2 surface the badge is sitting on. `:root` is the dark one. */ +export type EuBadgeSurface = keyof typeof EMBLEM_SRC; + +export interface EuBadgeProps { + /** "Funded by the European Union", already in the reader's language. */ + statement: string; + /** Alt text for the emblem. Empty when the statement is rendered beside it. */ + emblemAlt?: string; + /** Language of `statement` - drives the font switch and the text direction. */ + locale: Locale; + surface: EuBadgeSurface; + /** "md" (48x32) by default; "sm" (36x24) for the hero lockup. */ + size?: EuBadgeSize; + className?: string; +} + +/** + * The mandatory EU visibility lockup: emblem + funding statement. + * + * The lockup itself is pinned to `dir="ltr"` so the emblem always leads, which + * is how the Arabic navigation frame (334:526) draws it; only the statement + * carries the reader's own direction. A mirroring ancestor still moves the + * whole badge from the inline start to the inline end in Arabic. + * + * DEVIATION FROM FIGMA (colour): the design sets the statement in EU reflex + * blue (hex 0f2a8e). A raw hex is not permitted in a component here, and there + * is no semantic token for a third-party brand colour, so the statement uses + * --text-primary. It stays legible on both surfaces and the emblem still + * carries the EU colours. Add a tier-2 token if the blue has to come back. + * + * DEVIATION FROM FIGMA (type): the hero badge sets the statement at 10px. The + * type scale has no 10px role and a raw font-size is not permitted, so both + * sizes render the statement at `label-md` (12px). The lockup is then a little + * taller than the 24px emblem at "sm"; it is also more legible, which EU + * visibility guidance asks for. Add a tier-2 role if 10px is required. + */ +export function EuBadge({ + statement, + emblemAlt = "", + locale, + surface, + size = "md", + className, +}: EuBadgeProps) { + return ( +
+ {emblemAlt} + + {statement} + +
+ ); +} + +export default EuBadge; + +/* --------------------------------------------------------------------------- + USAGE + --------------------------------------------------------------------------- + // In the mobile drawer, on the dark surface: + + + // Above the home hero wordmark, at the smaller emblem size: + + ------------------------------------------------------------------------ */ diff --git a/apps/web/app/components/ui/EuBadge/index.ts b/apps/web/app/components/ui/EuBadge/index.ts new file mode 100644 index 0000000..e3817ba --- /dev/null +++ b/apps/web/app/components/ui/EuBadge/index.ts @@ -0,0 +1,2 @@ +export { EuBadge, default } from "./EuBadge"; +export type { EuBadgeProps, EuBadgeSize, EuBadgeSurface } from "./EuBadge"; diff --git a/apps/web/app/components/ui/Footer/Footer.css b/apps/web/app/components/ui/Footer/Footer.css new file mode 100644 index 0000000..1eb967a --- /dev/null +++ b/apps/web/app/components/ui/Footer/Footer.css @@ -0,0 +1,40 @@ +/* ============================================================================ + FOOTER - the sitemap link's hover + ---------------------------------------------------------------------------- + The design draft moves a hovered footer link along ONE axis and eases it: + + transition: color .2s ease, transform .25s ease; + :hover { color: #4DAA93; transform: translateX(4px); } + + Two reasons this is CSS rather than Tailwind utilities: + + 1. `translate-x-*` compiles to the two-value form + `translate: var(--tw-translate-x) var(--tw-translate-y)`, so whatever Y + translate happens to be in scope rides along and the link drifts + diagonally. `translate: 4px 0` pins the second axis at zero. + 2. The movement has to be in the transition list. A `transition-[color]` + utility animates the colour and snaps the offset. + + The direction is physical because `translate` has no logical form, so the + RTL rule mirrors it - the link always moves toward the reading edge. + ========================================================================= */ + +@layer theme, base, components, utilities; + +@layer components { + .sh-footer-link { + transition: + color var(--motion-duration-fast) var(--motion-ease-standard), + translate var(--motion-duration-base) var(--motion-ease-standard); + } + + @media (hover: hover) { + .sh-footer-link:hover { + translate: 4px 0; + } + + [dir="rtl"] .sh-footer-link:hover { + translate: -4px 0; + } + } +} diff --git a/apps/web/app/components/ui/Footer/Footer.tsx b/apps/web/app/components/ui/Footer/Footer.tsx index cd72e6f..797ed27 100644 --- a/apps/web/app/components/ui/Footer/Footer.tsx +++ b/apps/web/app/components/ui/Footer/Footer.tsx @@ -36,12 +36,14 @@ import type { import { DEFAULT_FOOTER_COPY, DEFAULT_FOOTER_PARTNERS, - DEFAULT_FOOTER_SOCIAL_LINKS, + defaultFooterSocialLinks, FOOTER_ASSETS, FOOTER_EU_EMBLEM_SIZE, FOOTER_WORDMARK_SIZE, defaultFooterLinkGroups, } from "./content"; +import "./Footer.css"; +import { EuBadge } from "../EuBadge"; import { FooterSocialIcon } from "./FooterSocialIcon"; const cx = (...parts: readonly (string | false | undefined)[]): string => @@ -69,18 +71,20 @@ const TRANSITION = /** Body/Large Bold links - 18/28, as the footer frame sets them. */ const LINK_CLASS = cx( FOCUS_RING, - TRANSITION, - "body-lg-bold inline-block text-[var(--text-primary)]", - "hover:text-[var(--text-link)] hover:underline underline-offset-4", + /* Colour AND the 4px nudge, both eased, both in ./Footer.css - see the note + there on why this is not a `translate-x` utility. */ + "sh-footer-link", + "body-md-bold inline-block no-underline text-[var(--text-primary)]", + "hover:text-[var(--text-accent)]", ); /** Label/Medium - the "implemented by" label (figma 228:3035). */ const LABEL_CLASS = "label-md uppercase"; -/** Body/Small Bold - the sitemap column headings (figma 140:7823 / 140:7834). +/** The drafts set the column headings as a small uppercase label. `--text-tertiary` is already remapped to a readable step on the light surface, so the same token is correct on both. */ -const GROUP_HEADING_CLASS = "body-sm-bold uppercase text-[var(--text-tertiary)]"; +const GROUP_HEADING_CLASS = "label-md uppercase text-[var(--text-tertiary)]"; /** * Internal links go through the router so the footer navigates client-side; @@ -106,7 +110,7 @@ export function Footer({ locale = "en", dir, linkGroups, - socialLinks = DEFAULT_FOOTER_SOCIAL_LINKS, + socialLinks, partners = DEFAULT_FOOTER_PARTNERS, copy: copyOverrides, homeHref, @@ -118,6 +122,9 @@ export function Footer({ // would blank the default, so only defined overrides are applied. const copy: FooterCopy = { ...DEFAULT_FOOTER_COPY[locale], ...definedOnly(copyOverrides) }; const groups = linkGroups ?? defaultFooterLinkGroups(locale); + /* `[]` from a caller hides the row deliberately; `undefined` means "nobody + said", so the project's own confirmed channels stand in. */ + const social = socialLinks ?? defaultFooterSocialLinks(locale); const home = homeHref ?? `/${locale}`; return ( @@ -126,26 +133,17 @@ export function Footer({ dir={dir} data-surface={surface} className={cx( - // data-surface sets the palette, but the frame puts the footer on its - // own ground (base/black on dark) with a rule separating it from the - // page, so those two are stated here rather than inherited. - "w-full border-t border-[var(--border-default)] bg-[var(--surface-footer)]", + /* The drafts stand the footer on its own ground (#141413) under a + hairline, rather than letting it inherit the page surface. */ + "w-full border-t border-[var(--border-subtle)] bg-[var(--surface-footer)]", "px-lg pb-2xl pt-[var(--layout-section-gap)] md:px-xl", className, )} >
- {/* ---- brand + sitemap (figma 140:7684 / 140:8686) ---------------- */} -
- {/* --- brand column (figma 140:7685 / 140:8687) ----------------- */} -
mirrors the row. - "lg:w-[345px] lg:shrink-0 lg:border-e lg:border-[var(--border-subtle)] lg:pe-2xl", - )} - > + {/* ---- brand column + sitemap --------------------------------- */} +
+
-

{copy.tagline}

- -

- {copy.description} + {/* One line: the full name and the dates the project runs. */} +

+ {copy.brandLine}

- {/* --- EU visibility (figma 140:7688 / 238:2325) -------------- */} -
- {copy.euEmblemAlt} -

- {copy.euStatement} -

-
+ {/* The draft draws each channel as a bordered button with its + glyph and a written label, not as a bare icon. */} + {social.length > 0 && ( + <> +

{copy.socialHeading}

+
    + {social.map((link) => ( +
  • + +
    • + ))} +
+ + )} - {socialLinks.length > 0 && } + {/* EU visibility, through the shared lockup the hero uses. */} +
- {/* --- sitemap columns (figma 380:12402) ------------------------ */} -