{group.heading}
+-
{group.links.map((link: FooterLink, linkIndex: number) => (
-
diff --git a/apps/web/app/i18n/messages/ar.json b/apps/web/app/i18n/messages/ar.json index c1f9eb6..977b1e6 100644 --- a/apps/web/app/i18n/messages/ar.json +++ b/apps/web/app/i18n/messages/ar.json @@ -42,6 +42,8 @@ "actions": { "readMore": "اقرأ المزيد", "learnMore": "اعرف المزيد", + "discoverSharper": "اكتشف SHARP-ER", + "exploreOurWork": "اطّلع على عملنا", "viewDetails": "عرض التفاصيل", "viewAll": "عرض الكل", "download": "تحميل", diff --git a/apps/web/app/i18n/messages/en.json b/apps/web/app/i18n/messages/en.json index 629dbc0..90ab11f 100644 --- a/apps/web/app/i18n/messages/en.json +++ b/apps/web/app/i18n/messages/en.json @@ -42,6 +42,8 @@ "actions": { "readMore": "Read more", "learnMore": "Learn more", + "discoverSharper": "Discover SHARP-ER", + "exploreOurWork": "Explore Our Work", "viewDetails": "View details", "viewAll": "View all", "download": "Download", diff --git a/apps/web/app/routes/_page-kit/copy.ts b/apps/web/app/routes/_page-kit/copy.ts index 57b7503..582dc00 100644 --- a/apps/web/app/routes/_page-kit/copy.ts +++ b/apps/web/app/routes/_page-kit/copy.ts @@ -1,24 +1,39 @@ /* ============================================================================ - APPROVED DRAFT COPY - EN / AR + PAGE COPY - EN / AR ---------------------------------------------------------------------------- SOURCE - docs/SHARPER_Website_Draft_Section_EN_AR.docx (sections 1, 2 and 9) - docs/SHARPER Home Page .docx (the launch story) - Both documents carry the English AND the Arabic, so nothing below is a - machine translation of the other column except where a comment says so. + Home page Figma frame 253:4799 "Home-en" is the source of truth. + The headline (I253:4800;228:2609), the launch heading + (I361:10853;361:11147), the one-paragraph launch lead + with its four bold runs (I361:10853;349:8838) and the + three captions are transcribed from that frame, NOT + from docs/SHARPER Home Page .docx - the design condenses + the draft, and the draft itself is headed "Placeholder + text for design purposes - not final copy". + Everything else docs/SHARPER_Website_Draft_Section_EN_AR.docx + (sections 1, 2 and 9), which carries both columns, so + no string below is a machine translation of the other + except where a comment says so. + + TRANSLATION STATUS + The Figma file has NO Arabic home frame - only the navigation and the + footer are drawn in Arabic - so the Arabic home strings marked (ar-draft) + are rebuilt from the approved Arabic column of the docx to carry the + English Figma meaning. They are NOT client-approved wording and should be + signed off before launch. WHY IT LIVES IN THE CODE This is page prose, not UI chrome, so it does not belong in the i18n catalogue (which holds labels only). It is the FALLBACK: every field is overridden by the matching Strapi field the moment an editor fills it in, - and the pages read `cms ?? draft`. Until then this is what renders, which - is exactly what the draft document is for. + and the pages read `cms ?? draft`. WHAT IS DELIBERATELY ABSENT Figures. The draft marks every number "TBD" and says they must not be - published until confirmed, so there is no statistic anywhere in this file; - the home page renders `statsPending` instead, and real figures arrive - through the CMS `stats` component. + published until confirmed, so there is no statistic anywhere in this file. + Figma hides the home page's figures band outright (frame 253:4835 is + hidden="true"), so the band renders only once the CMS `stats` component + supplies real numbers, and nothing stands in for it until then. ========================================================================= */ import type { Locale } from "~/i18n"; @@ -35,14 +50,19 @@ export interface ConsortiumCopy { readonly role: string; } +/** + * A run of prose that may carry emphasis. Figma sets four phrases of the launch + * lead in Bold on a lighter base run (349:8838), which a flat string cannot + * express - a plain string is the base weight, `{ em }` is the bold run. + */ +export type ProseRun = string | { readonly em: string }; + export interface HomeCopy { readonly heroHeadline: string; readonly statsHeading: string; - /** Rendered in place of the figures while they are unconfirmed. */ - readonly statsPending: string; readonly launchHeading: string; - readonly launchParagraphs: readonly string[]; - readonly fundingNote: 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; @@ -108,17 +128,22 @@ export interface PageCopy { const EN: PageCopy = { home: { - heroHeadline: "SHARP-ER Project Officially Launches in Libya", + /* 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", - statsPending: - "The project’s figures are still being confirmed in the official fact sheet. They will be published here once verified.", - launchHeading: "The Journey of the SHARP-ER Launch", - launchParagraphs: [ - "On Tuesday, June 30, the SHARP-ER project officially launched, bringing together representatives from the European Union Delegation, the Ministry of Youth, the Ministry of Local Governance, the Ministry of Women’s Affairs, civil society organizations, partners, and stakeholders from across Libya.", - "The event marked an important start for the project, including the launch of the SHARP-ER website and the opening of the Expression of Interest (EOI). Participants also learned more about the project’s objectives, upcoming opportunities, and activities focused on strengthening collaboration, partnerships, and local capacities.", - "Thank you to everyone who joined us and contributed to this milestone. We look forward to working together to support locally driven initiatives and create meaningful, lasting impact across Libya.", + 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).", ], - fundingNote: "This project is funded by the European Union in Libya.", mechanismsHeading: "What the launch set in motion", mechanisms: [ "Building local capacity and skills", @@ -249,17 +274,21 @@ const EN: PageCopy = { const AR: PageCopy = { home: { - heroHeadline: "انطلاق مشروع SHARP-ER رسميًا في ليبيا", + /* (ar-draft) matches the English frame: the wordmark names the project. */ + heroHeadline: "انطلاق المشروع رسميًا في ليبيا", statsHeading: "SHARP-ER بالأرقام", - statsPending: - "لا تزال أرقام المشروع قيد التأكيد في ورقة الحقائق الرسمية، وسيتم نشرها هنا فور اعتمادها.", launchHeading: "مسيرة إطلاق مشروع SHARP-ER", - launchParagraphs: [ - "انطلقت يوم الثلاثاء 30 يونيو رسميًا فعاليات مشروع SHARP-ER خلال حدث الإطلاق الذي جمع ممثلين عن بعثة الاتحاد الأوروبي، ووزارة الشباب، ووزارة الحكم المحلي، ووزارة شؤون المرأة، إلى جانب منظمات المجتمع المدني والشركاء والجهات الفاعلة من مختلف أنحاء ليبيا.", - "وشكّل الحدث بداية مهمة للمشروع، حيث تم إطلاق الموقع الإلكتروني الرسمي، والإعلان عن فتح باب التعبير عن الاهتمام (EOI)، إلى جانب استعراض أهداف المشروع والفرص والأنشطة القادمة. وتركّز هذه الأنشطة على تعزيز التعاون والشراكات وبناء القدرات على المستوى المحلي.", - "نتوجه بالشكر إلى جميع المشاركين على حضورهم ومساهماتهم القيّمة. ونتطلع إلى العمل معًا خلال المرحلة المقبلة لدعم المبادرات المحلية وتحقيق أثر مستدام في مختلف أنحاء ليبيا.", + launchLead: [ + "انطلقت رسميًا فعاليات مشروع SHARP-ER يوم ", + { em: "الثلاثاء 30 يونيو" }, + "، بمشاركة ممثلين عن ", + { em: "بعثة الاتحاد الأوروبي" }, + "، وعدد من ", + { em: "الوزارات الليبية" }, + "، إلى جانب ", + { em: "شركاء المجتمع المدني المحليين" }, + ". وشهد الحدث إطلاق الموقع الإلكتروني الرسمي للمشروع والدعوة للتعبير عن الاهتمام (EOI).", ], - fundingNote: "المشروع ممول من الاتحاد الأوروبي في ليبيا.", mechanismsHeading: "ما الذي أطلقه هذا الحدث", mechanisms: [ "بناء القدرات والمهارات المحلية", diff --git a/apps/web/app/routes/_page-kit/sections.tsx b/apps/web/app/routes/_page-kit/sections.tsx index 3bcb76c..83d18fd 100644 --- a/apps/web/app/routes/_page-kit/sections.tsx +++ b/apps/web/app/routes/_page-kit/sections.tsx @@ -98,6 +98,13 @@ export interface SectionHeaderProps { eyebrow?: string; lead?: string; titleAs?: "h1" | "h2" | "h3"; + /** + * Type role of the title. "h2" is the Heading/H2 role every inner page uses; + * "display" is Display/Small - the home page draws its band headings at the + * same 44/52 as the hero (figma 361:11147, 393:14570) while keeping them + * in the outline, which `titleAs` alone cannot express. + */ + size?: "h2" | "display"; /** Figma centres the home page's section headers; inner pages read start. */ align?: "start" | "center"; className?: string; @@ -109,11 +116,13 @@ export function SectionHeader({ eyebrow, lead, titleAs = "h2", + size = "h2", align = "start", className, }: SectionHeaderProps) { const Title = titleAs; const centred = align === "center"; + const display = size === "display" || titleAs === "h1"; return (
{title} @@ -150,14 +159,50 @@ export function SectionHeader({ HERO ------------------------------------------------------------------------ */ +export interface PageHeroWordmark { + src: string; + /** + * Empty when the headline already names the project - the lockup is then + * decorative and a screen reader would otherwise read the name twice. + */ + alt: string; + /** Intrinsic pixels of the asset, for the aspect ratio the browser reserves. */ + width: number; + height: number; + /** Drawn width in CSS pixels. Figma 253:4800 draws the hero lockup at 419. */ + drawnWidth: number; +} + +export interface PageHeroMedia { + src: string; + alt: string; + width?: number; + height?: number; +} + +/** + * How the picture is drawn. + * "rounded" - a 16:9 card with the surface radius. The default, and what the + * inner pages have always rendered. + * "banner" - the home treatment (figma 253:4800): square corners, a wide + * band, and the two flat washes the frame paints over the photo. + */ +export type PageHeroMediaTreatment = "rounded" | "banner"; + export interface PageHeroProps { title: string; eyebrow?: string; lead?: string; + /** + * Brand lockup drawn above the headline. Only the home hero carries one + * (figma 253:4800, a 419x58 wordmark 48px above the headline row). + */ + wordmark?: PageHeroWordmark; /** Buttons, rendered inline-end of the headline on wide viewports. */ actions?: ReactNode; /** Wide picture below the headline row, as in Figma 253:4800. */ - media?: { src: string; alt: string; width?: number; height?: number }; + media?: PageHeroMedia; + mediaTreatment?: PageHeroMediaTreatment; className?: string; } @@ -171,13 +216,32 @@ export function PageHero({ title, eyebrow, lead, + wordmark, actions, media, + mediaTreatment = "rounded", className, }: PageHeroProps) { return ( - + + {wordmark ? ( + /* A graphic dimension, not a spacing value - sized the way Brand.tsx + and the footer size their lockups, with the intrinsic box on the + element so the browser reserves the right height. */ + + ) : null} +
{eyebrow ? ( @@ -196,21 +260,47 @@ export function PageHero({{actions ? ( -+{media ? ( -{actions}) : null}+ mediaTreatment === "banner" ? ( + /* Figma draws a 1244x700 picture inside an 800px frame that clips + it, so what the page actually shows is a wide band. The band is + kept at 16:9 on a phone, where a 2.9:1 strip would be a sliver. + The two washes are flat fills in the frame, not gradients: a + mint tint over a shade, both painted on the photograph. */ +
++ ) : ( +-
+ {flanks.start ? (
+
-
+
+
+ ) : null}
+
+ -
+
+
+
+ {flanks.end ? (
+ -
+
+
+ ) : null}
+
0 ? ( - hero.ctas.map((cta) => ( - : undefined} - > - {cta.label} - - )) - ) : ( - <> - } - > - {t("actions.learnMore")} - - - - ) + heroCtas.map((cta) => ( + + )) } /> - {/* FIGURES - never invented here. The draft fact sheet marks them TBD. */} - - -- {stats.length > 0 ? ( + {/* FIGURES - 253:4835 is hidden in the frame and every figure in the + draft is marked TBD, so the band exists only once the CMS has real + numbers. Nothing is rendered in its place. */} + {stats.length > 0 ? ( + + - - {/* THE LAUNCH STORY - approved copy, EN and AR. */} -+-- ) : ( - - )} - - -- - - {copy.launchParagraphs.map((paragraph) => ( -+ + ) : null} - {/* Figma prints these three captions under the photo strip with no - heading of their own; the heading exists for the outline only. */} -- {paragraph} -
- ))} -{copy.fundingNote}
- {copy.mechanismsHeading} -
- --
- {mechanisms.map((mechanism, index) => (
-
- + {mechanism} + + ))} +
-
{partner.logo ? (
) : null} @@ -319,12 +421,12 @@ export default function Home({ loaderData }: Route.ComponentProps) { href={safeHref(partner.website)} target="_blank" rel="noopener noreferrer" - className="body-sm-bold text-[var(--text-primary)] underline-offset-2 hover:underline" + className="body-lg-bold text-[var(--text-link)] underline underline-offset-2 hover:text-[var(--text-link-hover)]" > {partner.name} ) : ( - + {partner.name} )} diff --git a/apps/web/app/styles/primitives.css b/apps/web/app/styles/primitives.css index 086452c..faa83fa 100644 --- a/apps/web/app/styles/primitives.css +++ b/apps/web/app/styles/primitives.css @@ -80,11 +80,16 @@ --color-black-a08: rgb(0 0 0 / 0.08); --color-black-a12: rgb(0 0 0 / 0.12); --color-black-a16: rgb(0 0 0 / 0.16); + --color-black-a20: rgb(0 0 0 / 0.2); /* [figma] hero picture shade */ --color-black-a24: rgb(0 0 0 / 0.24); --color-black-a40: rgb(0 0 0 / 0.4); --color-black-a56: rgb(0 0 0 / 0.56); --color-black-a72: rgb(0 0 0 / 0.72); + /* The pale mint tint the home hero washes its picture with - green-200, + not the brand green-600 the --color-green-a* steps below carry. */ + --color-green-200-a12: rgb(179 219 209 / 0.12); + --color-green-a12: rgb(0 135 100 / 0.12); --color-green-a16: rgb(0 135 100 / 0.16); --color-green-a24: rgb(0 135 100 / 0.24); @@ -198,6 +203,7 @@ --opacity-8: 0.08; --opacity-16: 0.16; --opacity-40: 0.4; /* [figma] every disabled button */ + --opacity-50: 0.5; /* [figma] launch strip, flanking photos */ --opacity-64: 0.64; --opacity-100: 1; diff --git a/apps/web/app/styles/semantic.css b/apps/web/app/styles/semantic.css index 2a67ebd..66281b4 100644 --- a/apps/web/app/styles/semantic.css +++ b/apps/web/app/styles/semantic.css @@ -36,6 +36,7 @@ --surface-danger: var(--color-red-500); --surface-danger-subtle: var(--color-red-a24); --surface-inverse: var(--color-white); /* figma background/inverse */ + --surface-footer: var(--color-black); /* figma base/black - the footer sits below the page, not on it */ --surface-selection: var(--color-green-a40); /* --- text ------------------------------------------------------------- */ @@ -144,6 +145,12 @@ --overlay-scrim: var(--color-black-a56); --overlay-scrim-strong: var(--color-black-a72); --overlay-veil: var(--color-white-a08); + + /* The home hero's picture wash (figma 253:4800): a flat mint tint painted + over a flat shade. Both sit on a photograph rather than on the page, so + they carry the same value on either surface. */ + --overlay-picture-shade: var(--color-black-a20); + --overlay-picture-tint: var(--color-green-200-a12); } /* --------------------------------------------------------------------------- @@ -163,6 +170,7 @@ --surface-danger: var(--color-red-500); --surface-danger-subtle: var(--color-red-100); --surface-inverse: var(--color-neutral-900); /* figma background/inverse #0b0b0a */ + --surface-footer: var(--color-white); /* figma 140:7812, the light footer */ --surface-selection: var(--color-green-200); /* --- text ------------------------------------------------------------- */ @@ -270,6 +278,12 @@ --overlay-scrim: var(--color-black-a40); --overlay-scrim-strong: var(--color-black-a56); --overlay-veil: var(--color-black-a04); + + /* The home hero's picture wash (figma 253:4800): a flat mint tint painted + over a flat shade. Both sit on a photograph rather than on the page, so + they carry the same value on either surface. */ + --overlay-picture-shade: var(--color-black-a20); + --overlay-picture-tint: var(--color-green-200-a12); } /* --------------------------------------------------------------------------- diff --git a/apps/web/public/assets/sharp-wordmark-inverse.svg b/apps/web/public/assets/sharp-wordmark-inverse.svg new file mode 100644 index 0000000..79b1cbd --- /dev/null +++ b/apps/web/public/assets/sharp-wordmark-inverse.svg @@ -0,0 +1,285 @@ + +
+ +{/* PARTNERS */}+ + + {gallery.length > 0 ?++- ))} - + + {/* One paragraph with four bold runs, as the frame sets it. The + designed 20px has no published type role, so it takes the + nearest one, Body/Large - whose 28px leading is the frame's. */} + + {copy.launchLead.map((run, index) => + typeof run === "string" ? ( + {run} + ) : ( + + {run.em} + + ), + )} +
+: null} + + + {/* Figma prints these three captions with no heading of their own; + the heading exists for the outline and for screen readers. */} + + {copy.mechanismsHeading} +
+ +-
+ {copy.mechanisms.map((mechanism) => (
+
- +{partners.length > 0 ? ( - -
+
-
{partners.map((partner) => (
+ /* The tile pads its inline start only, as the frame draws it,
+ and sits on the sunken surface - darker than the page, which
+ is the way round the design has it. */
-
+