Match the home page to Figma frame 253:4799
The page resembled the design but had drifted in every band. Ported it section by section against the measured frame. Hero (253:4800) - Add the SHARP wordmark above the headline. The frame paints "SHARP" only, not the full SHARP-ER lockup the navigation carries, so this is the SHARP mark on its own, as vector (extracted from the brand guideline artwork) at its true 273px rather than an upscaled PNG. - Drop the leading project name from the headline in both locales: the wordmark above now carries it, as the frame composes it. - Stop the lead paragraph rendering by default. The frame's subheading node is hidden, but the code fell back to the site description, so a paragraph always appeared. - Fallback CTAs become "Discover SHARP-ER" / "Explore Our Work", 24px apart. Both the CMS and fallback paths now render through one HeroCta, so an editor-authored secondary CTA gets the designed white treatment instead of the dark-surface outline. - The picture loses its radius and gains the frame's two flat washes and wide band. Figures band - 253:4835 is hidden="true" in the frame, so the band and its "figures still being confirmed" placeholder no longer render. It appears only once the CMS supplies real numbers. Launch (361:10853) - Heading renders at Display/Small instead of Heading/H2. SectionHeader gains `size` since display-sm was reachable only via titleAs="h1". - The three-paragraph story becomes the frame's single centred lead with its four bold runs, which needed a ProseRun copy shape - a flat string cannot carry emphasis. - The captions were Card.Content links with images and action labels; the frame draws plain centred Heading/H2 text. - Add the three-up photo strip that bleeds past the page and clips. - Remove the funding line, which the frame does not draw in this band. EU visibility still stands via the nav badge and footer statement. Partners (393:14754) - Heading moves from centred to start-aligned, up to Display/Small. - Tiles move to the sunken surface (they were lighter than the page; the design has them darker), lose their border, 8px -> 4px radius, padding on the inline start only, logo 48 -> 70px, name to Body/Large Bold. Footer - Black ground via a new --surface-footer token, a top rule, links up to Body/Large Bold 18/28 at 24px spacing, and column headings to Body/Small Bold on --text-tertiary. - Keeps the real IA from ROUTE_SLUGS rather than frame 140:7814's labels, which name six pages that do not exist. Tokens - New tier-1 steps for values the design uses and the ramps lacked (--color-black-a20, --color-green-200-a12, --opacity-50) and tier-2 --overlay-picture-shade / --overlay-picture-tint for the hero wash. copy.ts now names the Figma frame as the source for the home strings. The Arabic launch lead is rebuilt from the approved Arabic column to carry the English frame's meaning and is marked (ar-draft) pending client sign-off - the file has no Arabic home frame to work from. Verified: typecheck and build green, no raw hex or tier-1 token in components/routes, no physical-direction utility, 141 i18n keys at parity, both locales rendered and checked for RTL mirroring. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -11,13 +11,17 @@
|
||||
everything that carries meaning (`text-[var(--text-primary)]`). No raw hex, no
|
||||
tier-1 primitive, no component stylesheet.
|
||||
|
||||
TWO DELIBERATE DEVIATIONS FROM THE PUBLISHED FRAMES, both noted inline:
|
||||
1. the two EN frames disagree on the sitemap (140:7812 carries the real IA
|
||||
but no column headings, 140:7814 carries headings but stale labels) -
|
||||
this takes the newer IA and the headings;
|
||||
2. `text/tertiary` (#949492) on white is ~2.9:1, so the small labels use
|
||||
`--text-secondary` instead. Revert the two lines marked (a11y) for
|
||||
pixel-exact parity.
|
||||
ONE DELIBERATE DEVIATION FROM THE PUBLISHED FRAMES:
|
||||
the two EN frames disagree on the sitemap. 140:7812 carries the real IA but
|
||||
no column headings; 140:7814 carries headings but labels for pages that do
|
||||
not exist (Partners, Blog, Photo Gallery, SUQs, Pilot Initiatives,
|
||||
Research). This takes the newer IA - built from ROUTE_SLUGS, the same
|
||||
source the router is built from - and the headings. Linking the frame's
|
||||
labels verbatim is what previously shipped five dead links.
|
||||
|
||||
Column headings take `--text-tertiary`, as the frames do: that token is
|
||||
already re-pointed to a readable step on the light surface (semantic.css),
|
||||
so it needs no a11y override here.
|
||||
========================================================================= */
|
||||
|
||||
import { Link } from "react-router";
|
||||
@@ -62,17 +66,22 @@ const FOCUS_RING = cx(
|
||||
const TRANSITION =
|
||||
"transition-[color] duration-[var(--motion-duration-fast)] ease-[var(--motion-ease-standard)]";
|
||||
|
||||
/** Body/Medium Bold links, as in figma 380:12385. */
|
||||
/** Body/Large Bold links - 18/28, as the footer frame sets them. */
|
||||
const LINK_CLASS = cx(
|
||||
FOCUS_RING,
|
||||
TRANSITION,
|
||||
"body-md-bold inline-block text-[var(--text-primary)]",
|
||||
"body-lg-bold inline-block text-[var(--text-primary)]",
|
||||
"hover:text-[var(--text-link)] hover:underline underline-offset-4",
|
||||
);
|
||||
|
||||
/** Label/Medium, used for the column headings and the "implemented by" label. */
|
||||
/** 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).
|
||||
`--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)]";
|
||||
|
||||
/**
|
||||
* Internal links go through the router so the footer navigates client-side;
|
||||
* anything flagged `external` stays a plain anchor and opens in a new tab.
|
||||
@@ -117,9 +126,11 @@ export function Footer({
|
||||
dir={dir}
|
||||
data-surface={surface}
|
||||
className={cx(
|
||||
// data-surface paints background-color and color itself (app.css), so
|
||||
// the footer needs no colour utility of its own.
|
||||
"w-full px-lg pb-2xl pt-[var(--layout-section-gap)] md:px-xl",
|
||||
// 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)]",
|
||||
"px-lg pb-2xl pt-[var(--layout-section-gap)] md:px-xl",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
@@ -185,11 +196,8 @@ export function Footer({
|
||||
index < groups.length - 1 && "sm:pe-xl",
|
||||
)}
|
||||
>
|
||||
{/* (a11y) figma uses text/tertiary; see the header note. */}
|
||||
<h2 className={cx(LABEL_CLASS, "text-[var(--text-secondary)]")}>
|
||||
{group.heading}
|
||||
</h2>
|
||||
<ul className="flex flex-col gap-sm">
|
||||
<h2 className={GROUP_HEADING_CLASS}>{group.heading}</h2>
|
||||
<ul className="flex flex-col gap-lg">
|
||||
{group.links.map((link: FooterLink, linkIndex: number) => (
|
||||
<li key={`${link.href}-${linkIndex}`}>
|
||||
<FooterNavLink link={link} className={LINK_CLASS} />
|
||||
|
||||
@@ -42,6 +42,8 @@
|
||||
"actions": {
|
||||
"readMore": "اقرأ المزيد",
|
||||
"learnMore": "اعرف المزيد",
|
||||
"discoverSharper": "اكتشف SHARP-ER",
|
||||
"exploreOurWork": "اطّلع على عملنا",
|
||||
"viewDetails": "عرض التفاصيل",
|
||||
"viewAll": "عرض الكل",
|
||||
"download": "تحميل",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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: [
|
||||
"بناء القدرات والمهارات المحلية",
|
||||
|
||||
@@ -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
|
||||
* <h2> 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 (
|
||||
<header
|
||||
@@ -131,7 +140,7 @@ export function SectionHeader({
|
||||
id={id}
|
||||
className={cx(
|
||||
"text-[var(--text-primary)]",
|
||||
titleAs === "h1" ? "heading-h1 md:display-sm" : "heading-h2",
|
||||
display ? "heading-h1 md:display-sm" : "heading-h2",
|
||||
)}
|
||||
>
|
||||
{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 (
|
||||
<section className={cx("pt-2xl pb-3xl md:pt-3xl md:pb-4xl", className)}>
|
||||
<section className={cx("pt-2xl md:pt-3xl", className)}>
|
||||
<Container className="flex flex-col gap-2xl">
|
||||
{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. */
|
||||
<img
|
||||
src={wordmark.src}
|
||||
alt={wordmark.alt}
|
||||
width={wordmark.width}
|
||||
height={wordmark.height}
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
draggable={false}
|
||||
style={{ maxWidth: `${wordmark.drawnWidth}px` }}
|
||||
className="block h-auto w-full"
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<div className="flex flex-col gap-lg lg:flex-row lg:items-end lg:justify-between">
|
||||
<div className="flex max-w-[46rem] flex-col gap-sm">
|
||||
{eyebrow ? (
|
||||
@@ -196,21 +260,47 @@ export function PageHero({
|
||||
</div>
|
||||
|
||||
{actions ? (
|
||||
<div className="flex flex-wrap items-center gap-md lg:justify-end">
|
||||
<div className="flex flex-wrap items-center gap-lg lg:justify-end">
|
||||
{actions}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{media ? (
|
||||
<img
|
||||
src={media.src}
|
||||
alt={media.alt}
|
||||
{...(media.width ? { width: media.width } : {})}
|
||||
{...(media.height ? { height: media.height } : {})}
|
||||
fetchPriority="high"
|
||||
className="aspect-[16/9] w-full max-w-full rounded-surface object-cover"
|
||||
/>
|
||||
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. */
|
||||
<div className="relative w-full overflow-hidden">
|
||||
<img
|
||||
src={media.src}
|
||||
alt={media.alt}
|
||||
{...(media.width ? { width: media.width } : {})}
|
||||
{...(media.height ? { height: media.height } : {})}
|
||||
fetchPriority="high"
|
||||
className="aspect-[16/9] w-full object-cover md:aspect-[1244/425]"
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute inset-0 bg-[var(--overlay-picture-shade)]"
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute inset-0 bg-[var(--overlay-picture-tint)]"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<img
|
||||
src={media.src}
|
||||
alt={media.alt}
|
||||
{...(media.width ? { width: media.width } : {})}
|
||||
{...(media.height ? { height: media.height } : {})}
|
||||
fetchPriority="high"
|
||||
className="aspect-[16/9] w-full max-w-full rounded-surface object-cover"
|
||||
/>
|
||||
)
|
||||
) : null}
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
+238
-136
@@ -1,28 +1,37 @@
|
||||
/* ============================================================================
|
||||
HOME - /en and /ar
|
||||
----------------------------------------------------------------------------
|
||||
Figma frame 253:4799 ("Home-en"), which is laid out as:
|
||||
Figma frame 253:4799 ("Home-en"). The frame is four bands:
|
||||
|
||||
Hero header (253:4800) headline + CTA group + wide picture
|
||||
Stats hidden in the frame, and every figure in the
|
||||
draft copy is marked TBD - so the band renders a
|
||||
localised "not yet confirmed" note and only shows
|
||||
numbers the CMS supplies
|
||||
Offical launch (361:10853) "The Journey of the SHARP-ER Launch", the
|
||||
launch story, the photo strip and the three
|
||||
captions under it
|
||||
Partners (393:14754) "Meet Our Partners" logo grid
|
||||
Footer owned by the app shell, not by this module
|
||||
Hero header (253:4800) the SHARP-ER lockup, the headline, the CTA
|
||||
pair and the wide washed picture. The frame's
|
||||
subheading node is hidden, so the hero carries
|
||||
no lead unless the CMS supplies one.
|
||||
About the Programme 253:4835, hidden="true" in the frame. It is
|
||||
the only place figures appear, so the band
|
||||
renders ONLY once the CMS has real numbers -
|
||||
there is no placeholder standing in for it.
|
||||
Offical launch (361:10853) "The Journey of SHARP-ER Launch": one centred
|
||||
lead with four bold runs, a three-up photo
|
||||
strip that bleeds past the page and is
|
||||
clipped, and three plain centred captions.
|
||||
Partners (393:14754) "Meet Our Partners", start-aligned, over a
|
||||
grid of logo-and-name tiles.
|
||||
Footer owned by the app shell, not by this module
|
||||
|
||||
The launch story is the approved copy from docs/SHARPER Home Page .docx in
|
||||
both languages; the pictures, the figures and the partner list come from
|
||||
Strapi and degrade to a localised empty state while it is empty.
|
||||
There is no Arabic frame in the file - only the navigation and the footer
|
||||
are drawn in Arabic - so /ar is this same DOM under `dir="rtl"`, which is
|
||||
why every inline edge below is logical (ps-/pe-/start-/end-) and never
|
||||
left/right.
|
||||
|
||||
Copy is the approved draft in both languages; the pictures, the figures and
|
||||
the partner list come from Strapi and degrade to a localised empty state
|
||||
while it is empty.
|
||||
========================================================================= */
|
||||
|
||||
import { Link } from "react-router";
|
||||
|
||||
import { ArrowIcon, Button } from "~/components/ui/Button";
|
||||
import { Card } from "~/components/ui/Card";
|
||||
import { createTranslator, getMessages, sectionPath } from "~/i18n";
|
||||
import {
|
||||
buildMeta,
|
||||
@@ -48,6 +57,7 @@ import {
|
||||
import { pageCopy } from "./_page-kit/copy";
|
||||
import { routeLocale } from "./_page-kit/locale";
|
||||
import {
|
||||
Container,
|
||||
EmptyState,
|
||||
PageHero,
|
||||
PageSection,
|
||||
@@ -58,6 +68,21 @@ import {
|
||||
/** Partner logos and CSO tiles - a wide but finite grid. */
|
||||
const PARTNER_PAGE_SIZE = 36;
|
||||
|
||||
/**
|
||||
* The mark the hero draws above the headline (figma 253:4800). The frame paints
|
||||
* "SHARP" only - 272.58 x 57.65 of ink - not the full SHARP-ER lockup the
|
||||
* navigation carries, so this is the SHARP wordmark on its own, as vector so it
|
||||
* stays crisp at any size. `alt` is empty because the navigation's brand link
|
||||
* already carries the project's accessible name.
|
||||
*/
|
||||
const HERO_WORDMARK = {
|
||||
src: "/assets/sharp-wordmark-inverse.svg",
|
||||
alt: "",
|
||||
width: 272,
|
||||
height: 57,
|
||||
drawnWidth: 273,
|
||||
} as const;
|
||||
|
||||
export async function loader({ params }: Route.LoaderArgs) {
|
||||
const locale = routeLocale(params);
|
||||
|
||||
@@ -146,168 +171,245 @@ export function meta({ loaderData, matches }: Route.MetaArgs) {
|
||||
});
|
||||
}
|
||||
|
||||
interface HeroCtaProps {
|
||||
href: string;
|
||||
label: string;
|
||||
variant: "primary" | "secondary";
|
||||
}
|
||||
|
||||
/**
|
||||
* A hero call to action. Figma paints the secondary one as a white fill with a
|
||||
* black stroke and a dark label, which is the secondary variant on the LIGHT
|
||||
* surface - so the surface is flipped on the control itself. It has to be the
|
||||
* control and not a wrapper: `[data-surface]` paints a background in the base
|
||||
* layer, and a wrapping element would draw a square white box behind the
|
||||
* button's rounded corners.
|
||||
*/
|
||||
function HeroCta({ href, label, variant }: HeroCtaProps) {
|
||||
return (
|
||||
<Button
|
||||
as={Link}
|
||||
to={href}
|
||||
prefetch="intent"
|
||||
size="lg"
|
||||
variant={variant}
|
||||
{...(variant === "secondary" ? { "data-surface": "light" } : {})}
|
||||
iconEnd={variant === "primary" ? <ArrowIcon /> : undefined}
|
||||
>
|
||||
{label}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* The three-up strip under the launch lead (figma 361:11115). The row is drawn
|
||||
* 1849px wide against a 1440px page, so it deliberately overflows the page and
|
||||
* is clipped by the band - the widths below are the designed proportions of the
|
||||
* 1440 artboard (500 / 729 / 500) carried over as viewport fractions, which
|
||||
* reproduces the overhang at any width. The centre picture is the emphasised
|
||||
* one; the flanks sit at half strength and are dropped on small screens, where
|
||||
* three clipped pictures would be unreadable.
|
||||
*/
|
||||
function LaunchStrip({ images }: { images: readonly ResolvedImage[] }) {
|
||||
const first = images[0];
|
||||
if (!first) return null;
|
||||
|
||||
/* The flanks only exist as a trio. With one or two pictures the emphasised
|
||||
one stays centred and the row simply has no wings, rather than throwing
|
||||
the centre off-axis or hiding an uploaded picture below `lg`. */
|
||||
const complete = images.length >= 3;
|
||||
const centre = complete ? images[1]! : first;
|
||||
const flanks = complete
|
||||
? { start: images[0]!, end: images[2]! }
|
||||
: { start: undefined, end: undefined };
|
||||
|
||||
return (
|
||||
<ul className="flex list-none items-center justify-center gap-3xl">
|
||||
{flanks.start ? (
|
||||
<li className="hidden shrink-0 lg:block">
|
||||
<img
|
||||
src={flanks.start.src}
|
||||
alt={flanks.start.alt}
|
||||
loading="lazy"
|
||||
className="aspect-[500/268] w-[34.7vw] object-cover opacity-50"
|
||||
/>
|
||||
</li>
|
||||
) : null}
|
||||
|
||||
<li className="shrink-0">
|
||||
<img
|
||||
src={centre.src}
|
||||
alt={centre.alt}
|
||||
loading="lazy"
|
||||
className="aspect-[729/374] w-[86vw] object-cover lg:w-[50.6vw]"
|
||||
/>
|
||||
</li>
|
||||
|
||||
{flanks.end ? (
|
||||
<li className="hidden shrink-0 lg:block">
|
||||
<img
|
||||
src={flanks.end.src}
|
||||
alt={flanks.end.alt}
|
||||
loading="lazy"
|
||||
className="aspect-[500/267] w-[34.7vw] object-cover opacity-50"
|
||||
/>
|
||||
</li>
|
||||
) : null}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Home({ loaderData }: Route.ComponentProps) {
|
||||
const { locale, hero, stats, gallery, partners } = loaderData;
|
||||
const t = createTranslator(locale);
|
||||
const copy = pageCopy(locale).home;
|
||||
|
||||
const headline = hero.headline ?? copy.heroHeadline;
|
||||
const lead = hero.subheading ?? t("site.description");
|
||||
const partnersHeadline = loaderData.partnersHeadline ?? copy.partnersHeading;
|
||||
|
||||
/* The three captions under the photo strip in Figma. Each one points at the
|
||||
section of the site that carries that strand of work forward, and every
|
||||
label is a catalogue string so /ar never inherits an English one. */
|
||||
const mechanisms = [
|
||||
{
|
||||
title: copy.mechanisms[0]!,
|
||||
href: sectionPath("whatWeDo", locale),
|
||||
actionLabel: t("actions.learnWhatWeDo"),
|
||||
},
|
||||
{
|
||||
title: copy.mechanisms[1]!,
|
||||
href: sectionPath("activities", locale),
|
||||
actionLabel: t("actions.seeActivities"),
|
||||
},
|
||||
{
|
||||
title: copy.mechanisms[2]!,
|
||||
href: sectionPath("applications", locale),
|
||||
actionLabel: t("actions.seeCurrentCalls"),
|
||||
},
|
||||
];
|
||||
/* 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("about", locale),
|
||||
label: t("actions.discoverSharper"),
|
||||
variant: "primary",
|
||||
},
|
||||
{
|
||||
href: sectionPath("whatWeDo", locale),
|
||||
label: t("actions.exploreOurWork"),
|
||||
variant: "secondary",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* `lead` is passed only when the CMS supplies a subheading: the frame's
|
||||
own subheading node is hidden, so nothing stands under the headline
|
||||
unless an editor deliberately writes one. */}
|
||||
<PageHero
|
||||
title={headline}
|
||||
{...(hero.eyebrow ? { eyebrow: hero.eyebrow } : {})}
|
||||
lead={lead}
|
||||
{...(hero.subheading ? { lead: hero.subheading } : {})}
|
||||
wordmark={HERO_WORDMARK}
|
||||
{...(hero.media ? { media: hero.media } : {})}
|
||||
mediaTreatment="banner"
|
||||
actions={
|
||||
hero.ctas.length > 0 ? (
|
||||
hero.ctas.map((cta) => (
|
||||
<Button
|
||||
key={`${cta.href}-${cta.label}`}
|
||||
as={Link}
|
||||
to={cta.href}
|
||||
prefetch="intent"
|
||||
size="lg"
|
||||
variant={cta.variant}
|
||||
iconEnd={cta.variant === "primary" ? <ArrowIcon /> : undefined}
|
||||
>
|
||||
{cta.label}
|
||||
</Button>
|
||||
))
|
||||
) : (
|
||||
<>
|
||||
<Button
|
||||
as={Link}
|
||||
to={sectionPath("about", locale)}
|
||||
prefetch="intent"
|
||||
size="lg"
|
||||
variant="primary"
|
||||
iconEnd={<ArrowIcon />}
|
||||
>
|
||||
{t("actions.learnMore")}
|
||||
</Button>
|
||||
<Button
|
||||
as={Link}
|
||||
to={sectionPath("whatWeDo", locale)}
|
||||
prefetch="intent"
|
||||
size="lg"
|
||||
variant="secondary"
|
||||
>
|
||||
{t("actions.learnWhatWeDo")}
|
||||
</Button>
|
||||
</>
|
||||
)
|
||||
heroCtas.map((cta) => (
|
||||
<HeroCta key={`${cta.href}-${cta.label}`} {...cta} />
|
||||
))
|
||||
}
|
||||
/>
|
||||
|
||||
{/* FIGURES - never invented here. The draft fact sheet marks them TBD. */}
|
||||
<PageSection aria-labelledby="home-stats-heading" className="py-2xl md:py-3xl">
|
||||
<div className="flex flex-col gap-lg">
|
||||
<SectionHeader id="home-stats-heading" title={copy.statsHeading} />
|
||||
{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 ? (
|
||||
<PageSection aria-labelledby="home-stats-heading">
|
||||
<div className="flex flex-col gap-3xl">
|
||||
<SectionHeader
|
||||
id="home-stats-heading"
|
||||
title={copy.statsHeading}
|
||||
size="display"
|
||||
/>
|
||||
<StatStrip stats={stats} />
|
||||
) : (
|
||||
<EmptyState message={copy.statsPending} />
|
||||
)}
|
||||
</div>
|
||||
</PageSection>
|
||||
|
||||
{/* THE LAUNCH STORY - approved copy, EN and AR. */}
|
||||
<PageSection aria-labelledby="home-launch-heading">
|
||||
<div className="flex flex-col gap-2xl">
|
||||
<SectionHeader
|
||||
id="home-launch-heading"
|
||||
title={copy.launchHeading}
|
||||
align="center"
|
||||
/>
|
||||
|
||||
<div className="mx-auto flex w-full max-w-[var(--layout-prose-max)] flex-col gap-md">
|
||||
{copy.launchParagraphs.map((paragraph) => (
|
||||
<p key={paragraph.slice(0, 32)} className="body-md text-[var(--text-secondary)]">
|
||||
{paragraph}
|
||||
</p>
|
||||
))}
|
||||
<p className="body-sm-bold text-[var(--text-accent)]">{copy.fundingNote}</p>
|
||||
</div>
|
||||
</PageSection>
|
||||
) : null}
|
||||
|
||||
{/* Figma prints these three captions under the photo strip with no
|
||||
heading of their own; the heading exists for the outline only. */}
|
||||
<h3 id="home-mechanisms-heading" className="sr-only">
|
||||
{copy.mechanismsHeading}
|
||||
</h3>
|
||||
|
||||
<ul
|
||||
aria-labelledby="home-mechanisms-heading"
|
||||
className="grid list-none grid-cols-1 gap-lg sm:grid-cols-2 lg:grid-cols-3"
|
||||
>
|
||||
{mechanisms.map((mechanism, index) => (
|
||||
<Card.Content
|
||||
key={mechanism.title}
|
||||
as="li"
|
||||
titleAs="h4"
|
||||
href={mechanism.href}
|
||||
title={mechanism.title}
|
||||
actionLabel={mechanism.actionLabel}
|
||||
{...(gallery[index]
|
||||
? {
|
||||
image: {
|
||||
src: gallery[index]!.src,
|
||||
alt: gallery[index]!.alt,
|
||||
},
|
||||
}
|
||||
: {})}
|
||||
{/* THE LAUNCH STORY - the band is `bleed` so the photo strip can run past
|
||||
the content column, and it clips what runs past the page. */}
|
||||
<PageSection
|
||||
aria-labelledby="home-launch-heading"
|
||||
bleed
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<div className="flex flex-col gap-3xl">
|
||||
<Container>
|
||||
<div className="flex flex-col items-center gap-lg text-center">
|
||||
<SectionHeader
|
||||
id="home-launch-heading"
|
||||
title={copy.launchHeading}
|
||||
size="display"
|
||||
align="center"
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{/* 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. */}
|
||||
<p className="body-lg text-[var(--text-primary)]">
|
||||
{copy.launchLead.map((run, index) =>
|
||||
typeof run === "string" ? (
|
||||
<span key={index}>{run}</span>
|
||||
) : (
|
||||
<strong key={index} className="body-lg-bold">
|
||||
{run.em}
|
||||
</strong>
|
||||
),
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
{gallery.length > 0 ? <LaunchStrip images={gallery} /> : null}
|
||||
|
||||
<Container>
|
||||
{/* Figma prints these three captions with no heading of their own;
|
||||
the heading exists for the outline and for screen readers. */}
|
||||
<h3 id="home-mechanisms-heading" className="sr-only">
|
||||
{copy.mechanismsHeading}
|
||||
</h3>
|
||||
|
||||
<ul
|
||||
aria-labelledby="home-mechanisms-heading"
|
||||
className="grid list-none grid-cols-1 gap-lg text-center sm:grid-cols-2 lg:grid-cols-3"
|
||||
>
|
||||
{copy.mechanisms.map((mechanism) => (
|
||||
<li
|
||||
key={mechanism}
|
||||
className="mx-auto max-w-[21.875rem] heading-h2 text-[var(--text-primary)]"
|
||||
>
|
||||
{mechanism}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Container>
|
||||
</div>
|
||||
</PageSection>
|
||||
|
||||
{/* PARTNERS */}
|
||||
<PageSection aria-labelledby="home-partners-heading">
|
||||
<div className="flex flex-col gap-2xl">
|
||||
<div className="flex flex-col gap-3xl">
|
||||
<SectionHeader
|
||||
id="home-partners-heading"
|
||||
title={partnersHeadline}
|
||||
align="center"
|
||||
size="display"
|
||||
/>
|
||||
|
||||
{partners.length > 0 ? (
|
||||
<ul className="grid list-none grid-cols-1 gap-lg sm:grid-cols-2 lg:grid-cols-3">
|
||||
<ul className="grid list-none grid-cols-1 gap-lg sm:grid-cols-2 lg:grid-cols-3 lg:gap-x-4xl">
|
||||
{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. */
|
||||
<li
|
||||
key={partner.id}
|
||||
className="flex items-center gap-md rounded-card border border-[var(--border-subtle)] bg-[var(--surface-raised)] p-md"
|
||||
className="flex min-h-[7.125rem] items-center gap-md rounded-control bg-[var(--surface-sunken)] ps-md py-sm"
|
||||
>
|
||||
{partner.logo ? (
|
||||
<img
|
||||
src={partner.logo.src}
|
||||
alt=""
|
||||
loading="lazy"
|
||||
className="size-12 shrink-0 rounded-control object-contain"
|
||||
className="size-[4.375rem] shrink-0 object-contain"
|
||||
/>
|
||||
) : 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}
|
||||
</a>
|
||||
) : (
|
||||
<span className="body-sm-bold text-[var(--text-primary)]">
|
||||
<span className="body-lg-bold text-[var(--text-primary)]">
|
||||
{partner.name}
|
||||
</span>
|
||||
)}
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
|
||||
@@ -0,0 +1,285 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="272.0"
|
||||
height="56.8"
|
||||
viewBox="209.6 153.6 272.0 56.8"
|
||||
version="1.1"
|
||||
id="svg906"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs892">
|
||||
<clipPath
|
||||
id="clip-69">
|
||||
<path
|
||||
clip-rule="nonzero"
|
||||
d="M 0 0.320312 L 53.457031 0.320312 L 53.457031 57 L 0 57 Z M 0 0.320312 "
|
||||
id="path456" />
|
||||
</clipPath>
|
||||
<clipPath
|
||||
id="clip-70">
|
||||
<path
|
||||
clip-rule="nonzero"
|
||||
d="M 19.445312 3.234375 C 20.039062 2.347656 21.363281 1.902344 23.410156 1.902344 C 26.96875 1.902344 29.472656 3.046875 30.933594 5.320312 C 32.394531 7.59375 33.132812 10.796875 33.132812 14.929688 C 33.132812 17.332031 32.828125 19.515625 32.230469 21.472656 C 31.632812 23.429688 30.527344 25.007812 28.9375 26.175781 C 27.347656 27.34375 24.996094 27.941406 21.910156 27.941406 L 18.542969 27.941406 L 18.542969 8.648438 C 18.542969 5.929688 18.847656 4.125 19.445312 3.234375 M 52.273438 51.480469 C 51.75 52.050781 51.269531 52.484375 50.824219 52.777344 C 50.378906 53.070312 49.820312 53.234375 49.132812 53.285156 C 48.140625 53.285156 47.378906 52.867188 46.859375 52.027344 C 46.335938 51.1875 45.839844 49.726562 45.371094 47.628906 L 43.566406 39.546875 C 42.878906 36.304688 41.40625 33.878906 39.128906 32.25 C 36.855469 30.625 33.375 29.621094 28.65625 29.199219 C 30.703125 28.972656 32.546875 28.617188 34.148438 28.132812 C 37.1875 27.21875 39.574219 25.984375 41.328125 24.449219 C 43.082031 22.910156 44.316406 21.230469 45.054688 19.425781 C 45.789062 17.621094 46.160156 15.832031 46.160156 14.050781 C 46.160156 9.703125 44.355469 6.351562 40.746094 3.972656 C 37.136719 1.597656 31.695312 0.402344 24.425781 0.402344 C 23.433594 0.402344 21.757812 0.425781 19.40625 0.476562 C 17.054688 0.527344 14.613281 0.554688 12.109375 0.554688 C 9.910156 0.554688 7.699219 0.527344 5.476562 0.476562 C 3.25 0.425781 1.484375 0.375 0.175781 0.324219 L 0.175781 1.902344 C 1.804688 1.953125 3.035156 2.15625 3.898438 2.484375 C 4.765625 2.816406 5.335938 3.453125 5.628906 4.367188 C 5.921875 5.28125 6.058594 6.707031 6.058594 8.636719 L 6.058594 47.554688 C 6.058594 49.433594 5.921875 50.84375 5.628906 51.785156 C 5.335938 52.726562 4.777344 53.363281 3.949219 53.667969 C 3.125 53.972656 1.855469 54.1875 0.175781 54.289062 L 0.175781 55.851562 C 1.484375 55.75 3.25 55.6875 5.476562 55.660156 C 7.699219 55.636719 10.0625 55.625 12.582031 55.625 C 14.777344 55.625 16.941406 55.636719 19.085938 55.660156 C 21.234375 55.6875 23.015625 55.75 24.425781 55.851562 L 24.425781 54.300781 C 22.746094 54.199219 21.503906 53.984375 20.664062 53.679688 C 19.824219 53.375 19.265625 52.738281 18.972656 51.796875 C 18.679688 50.859375 18.542969 49.445312 18.542969 47.566406 L 18.542969 29.519531 L 23.636719 29.519531 C 25.265625 29.519531 26.523438 30 27.4375 30.96875 C 28.351562 31.933594 29.066406 33.242188 29.597656 34.894531 C 30.132812 36.546875 30.5625 38.464844 30.933594 40.664062 L 32.34375 48.507812 C 32.914062 51.746094 34.121094 53.972656 35.953125 55.167969 C 37.785156 56.359375 40.109375 56.972656 42.941406 56.972656 C 45.242188 56.972656 47.199219 56.617188 48.828125 55.917969 C 50.453125 55.21875 51.96875 54.046875 53.378906 52.421875 Z M 52.273438 51.480469 "
|
||||
id="path459" />
|
||||
</clipPath>
|
||||
<clipPath
|
||||
id="clip-71">
|
||||
<rect
|
||||
x="0"
|
||||
y="0"
|
||||
width="54"
|
||||
height="57"
|
||||
id="rect462" />
|
||||
</clipPath>
|
||||
<g
|
||||
id="source-89"
|
||||
clip-path="url(#clip-71)">
|
||||
<g
|
||||
clip-path="url(#clip-69)"
|
||||
id="g469">
|
||||
<g
|
||||
clip-path="url(#clip-70)"
|
||||
id="g467">
|
||||
<rect
|
||||
x="-695.8"
|
||||
y="-332.199998"
|
||||
width="2073.6"
|
||||
height="1166.39999"
|
||||
fill="rgb(100%, 100%, 100%)"
|
||||
fill-opacity="1"
|
||||
id="rect465" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<clipPath
|
||||
id="clip-74">
|
||||
<path
|
||||
clip-rule="nonzero"
|
||||
d="M 0.601562 0.191406 L 46.679688 0.191406 L 46.679688 55.917969 L 0.601562 55.917969 Z M 0.601562 0.191406 "
|
||||
id="path478" />
|
||||
</clipPath>
|
||||
<clipPath
|
||||
id="clip-75">
|
||||
<path
|
||||
clip-rule="nonzero"
|
||||
d="M 32.761719 24.179688 C 32.164062 26.480469 31.058594 28.335938 29.46875 29.746094 C 27.878906 31.160156 25.527344 31.871094 22.441406 31.871094 L 19.074219 31.871094 L 19.074219 8.648438 C 19.074219 5.929688 19.378906 4.125 19.976562 3.234375 C 20.574219 2.347656 21.894531 1.902344 23.941406 1.902344 C 27.5 1.902344 30.003906 3.132812 31.464844 5.585938 C 32.925781 8.039062 33.664062 11.765625 33.664062 16.71875 C 33.664062 19.390625 33.359375 21.867188 32.761719 24.167969 M 41.277344 4.710938 C 37.667969 1.835938 32.226562 0.390625 24.957031 0.390625 C 23.964844 0.390625 22.289062 0.414062 19.9375 0.464844 C 17.585938 0.515625 15.160156 0.542969 12.640625 0.542969 C 10.441406 0.542969 8.230469 0.515625 6.007812 0.464844 C 3.785156 0.414062 2.015625 0.363281 0.707031 0.3125 L 0.707031 1.902344 C 2.335938 1.953125 3.566406 2.15625 4.429688 2.484375 C 5.296875 2.816406 5.867188 3.453125 6.160156 4.367188 C 6.453125 5.28125 6.59375 6.707031 6.59375 8.636719 L 6.59375 47.554688 C 6.59375 49.433594 6.453125 50.84375 6.160156 51.785156 C 5.867188 52.726562 5.308594 53.347656 4.46875 53.667969 C 3.632812 53.984375 2.371094 54.1875 0.707031 54.300781 L 0.707031 55.867188 C 2.4375 55.816406 4.367188 55.765625 6.515625 55.714844 C 8.664062 55.660156 10.863281 55.636719 13.097656 55.636719 C 15.921875 55.636719 18.617188 55.660156 21.183594 55.714844 C 23.75 55.765625 25.835938 55.816406 27.460938 55.867188 L 27.460938 54.148438 C 25.109375 54.097656 23.332031 53.921875 22.125 53.601562 C 20.914062 53.285156 20.101562 52.636719 19.683594 51.644531 C 19.261719 50.65625 19.058594 49.128906 19.058594 47.097656 L 19.058594 33.433594 L 23.214844 33.433594 C 27.816406 33.433594 31.640625 32.886719 34.667969 31.792969 C 37.691406 30.699219 40.09375 29.265625 41.847656 27.523438 C 43.601562 25.78125 44.847656 23.863281 45.570312 21.792969 C 46.296875 19.71875 46.664062 17.75 46.664062 15.867188 C 46.664062 11.320312 44.859375 7.609375 41.25 4.734375 "
|
||||
id="path481" />
|
||||
</clipPath>
|
||||
<clipPath
|
||||
id="clip-76">
|
||||
<rect
|
||||
x="0"
|
||||
y="0"
|
||||
width="47"
|
||||
height="56"
|
||||
id="rect484" />
|
||||
</clipPath>
|
||||
<g
|
||||
id="source-92"
|
||||
clip-path="url(#clip-76)">
|
||||
<g
|
||||
clip-path="url(#clip-74)"
|
||||
id="g491">
|
||||
<g
|
||||
clip-path="url(#clip-75)"
|
||||
id="g489">
|
||||
<rect
|
||||
x="-751.8"
|
||||
y="-332.199998"
|
||||
width="2073.6"
|
||||
height="1166.39999"
|
||||
fill="rgb(100%, 100%, 100%)"
|
||||
fill-opacity="1"
|
||||
id="rect487" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<clipPath
|
||||
id="clip-79">
|
||||
<path
|
||||
clip-rule="nonzero"
|
||||
d="M 0.640625 0.078125 L 37.601562 0.078125 L 37.601562 55.917969 L 0.640625 55.917969 Z M 0.640625 0.078125 "
|
||||
id="path500" />
|
||||
</clipPath>
|
||||
<clipPath
|
||||
id="clip-80">
|
||||
<path
|
||||
clip-rule="nonzero"
|
||||
d="M 0.761719 0.171875 L 18.148438 47.71875 C 19.1875 50.386719 19.367188 52.128906 18.65625 52.941406 C 17.941406 53.753906 16.265625 54.214844 13.597656 54.316406 L 13.597656 55.878906 C 14.855469 55.777344 16.558594 55.714844 18.691406 55.6875 C 20.828125 55.660156 23.117188 55.648438 25.519531 55.648438 C 27.664062 55.648438 29.800781 55.660156 31.910156 55.6875 C 34.019531 55.714844 35.875 55.777344 37.4375 55.878906 L 37.4375 54.300781 C 36.703125 54.25 35.875 53.871094 34.972656 53.160156 C 34.070312 52.445312 33.234375 51.164062 32.496094 49.269531 L 13.429688 0.160156 Z M 0.761719 0.171875 "
|
||||
id="path503" />
|
||||
</clipPath>
|
||||
<clipPath
|
||||
id="clip-81">
|
||||
<rect
|
||||
x="0"
|
||||
y="0"
|
||||
width="38"
|
||||
height="56"
|
||||
id="rect506" />
|
||||
</clipPath>
|
||||
<g
|
||||
id="source-95"
|
||||
clip-path="url(#clip-81)">
|
||||
<g
|
||||
clip-path="url(#clip-79)"
|
||||
id="g513">
|
||||
<g
|
||||
clip-path="url(#clip-80)"
|
||||
id="g511">
|
||||
<rect
|
||||
x="-654.8"
|
||||
y="-332.199998"
|
||||
width="2073.6"
|
||||
height="1166.39999"
|
||||
fill="rgb(100%, 100%, 100%)"
|
||||
fill-opacity="1"
|
||||
id="rect509" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<clipPath
|
||||
id="clip-84">
|
||||
<path
|
||||
clip-rule="nonzero"
|
||||
d="M 0.285156 0.371094 L 43.382812 0.371094 L 43.382812 58 L 0.285156 58 Z M 0.285156 0.371094 "
|
||||
id="path522" />
|
||||
</clipPath>
|
||||
<clipPath
|
||||
id="clip-85">
|
||||
<path
|
||||
clip-rule="nonzero"
|
||||
d="M 15.945312 11.390625 C 17.511719 10.195312 19.707031 9.597656 22.53125 9.597656 C 25.453125 9.597656 27.726562 10.3125 29.34375 11.734375 C 30.957031 13.15625 31.769531 15.152344 31.769531 17.71875 L 43.308594 17.71875 C 43.308594 14.367188 42.445312 11.351562 40.71875 8.722656 C 38.988281 6.089844 36.550781 4.03125 33.421875 2.582031 C 30.296875 1.136719 26.722656 0.410156 22.722656 0.410156 C 18.742188 0.410156 15.160156 1.070312 11.96875 2.40625 C 8.777344 3.742188 6.324219 5.597656 4.621094 7.972656 C 2.917969 10.347656 2.066406 13.042969 2.066406 16.066406 C 2.066406 21.890625 5.246094 26.527344 11.613281 29.960938 C 13.953125 31.21875 17.117188 32.488281 21.121094 33.785156 C 25.121094 35.082031 27.894531 36.3125 29.429688 37.484375 C 30.96875 38.652344 31.746094 40.332031 31.746094 42.503906 C 31.746094 44.5 30.96875 46.0625 29.429688 47.179688 C 27.894531 48.300781 25.746094 48.859375 23 48.859375 C 15.617188 48.859375 11.917969 45.769531 11.917969 39.582031 L 0.328125 39.582031 C 0.328125 43.203125 1.253906 46.378906 3.109375 49.125 C 4.964844 51.871094 7.671875 54.03125 11.207031 55.605469 C 14.738281 57.183594 18.667969 57.972656 22.976562 57.972656 C 29.175781 57.972656 34.121094 56.585938 37.78125 53.828125 C 41.441406 51.070312 43.285156 47.269531 43.285156 42.414062 C 43.285156 38.054688 41.785156 34.40625 38.785156 31.484375 C 35.785156 28.5625 30.996094 26.109375 24.4375 24.140625 C 20.867188 23.058594 18.171875 21.902344 16.339844 20.667969 C 14.511719 19.4375 13.582031 17.910156 13.582031 16.09375 C 13.582031 14.148438 14.371094 12.574219 15.933594 11.378906 "
|
||||
id="path525" />
|
||||
</clipPath>
|
||||
<clipPath
|
||||
id="clip-86">
|
||||
<rect
|
||||
x="0"
|
||||
y="0"
|
||||
width="44"
|
||||
height="58"
|
||||
id="rect528" />
|
||||
</clipPath>
|
||||
<g
|
||||
id="source-98"
|
||||
clip-path="url(#clip-86)">
|
||||
<g
|
||||
clip-path="url(#clip-84)"
|
||||
id="g535">
|
||||
<g
|
||||
clip-path="url(#clip-85)"
|
||||
id="g533">
|
||||
<rect
|
||||
x="-525.8"
|
||||
y="-331.199998"
|
||||
width="2073.6"
|
||||
height="1166.39999"
|
||||
fill="rgb(100%, 100%, 100%)"
|
||||
fill-opacity="1"
|
||||
id="rect531" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<clipPath
|
||||
id="clip-88">
|
||||
<path
|
||||
clip-rule="nonzero"
|
||||
d="M 34.453125 0.1875 L 45.996094 0.1875 L 45.996094 22.882812 L 34.453125 22.882812 Z M 0.40625 0.1875 L 11.945312 0.1875 L 11.945312 22.882812 L 0.40625 22.882812 Z M 0.40625 22.882812 L 45.996094 22.882812 L 45.996094 32.199219 L 0.40625 32.199219 Z M 0.40625 32.199219 L 11.945312 32.199219 L 11.945312 55.96875 L 0.40625 55.96875 Z M 34.453125 32.199219 L 45.996094 32.199219 L 45.996094 55.96875 L 34.453125 55.96875 Z M 34.453125 32.199219 "
|
||||
id="path541" />
|
||||
</clipPath>
|
||||
<clipPath
|
||||
id="clip-89">
|
||||
<rect
|
||||
x="0"
|
||||
y="0"
|
||||
width="46"
|
||||
height="56"
|
||||
id="rect544" />
|
||||
</clipPath>
|
||||
<g
|
||||
id="source-101"
|
||||
clip-path="url(#clip-89)">
|
||||
<g
|
||||
clip-path="url(#clip-88)"
|
||||
id="g549">
|
||||
<rect
|
||||
x="-576.8"
|
||||
y="-332.199998"
|
||||
width="2073.6"
|
||||
height="1166.39999"
|
||||
fill="rgb(100%, 100%, 100%)"
|
||||
fill-opacity="1"
|
||||
id="rect547" />
|
||||
</g>
|
||||
</g>
|
||||
<clipPath
|
||||
id="clip-92">
|
||||
<path
|
||||
clip-rule="nonzero"
|
||||
d="M 0.519531 0.078125 L 36.636719 0.078125 L 36.636719 56 L 0.519531 56 Z M 0.519531 0.078125 "
|
||||
id="path558" />
|
||||
</clipPath>
|
||||
<clipPath
|
||||
id="clip-93">
|
||||
<path
|
||||
clip-rule="nonzero"
|
||||
d="M 17.871094 41.503906 L 36.59375 41.503906 L 33.175781 32.199219 L 21.0625 32.199219 L 26.933594 15.144531 L 21.378906 0.1875 L 0.625 55.96875 L 12.890625 55.96875 Z M 17.871094 41.503906 "
|
||||
id="path561" />
|
||||
</clipPath>
|
||||
<clipPath
|
||||
id="clip-94">
|
||||
<rect
|
||||
x="0"
|
||||
y="0"
|
||||
width="37"
|
||||
height="56"
|
||||
id="rect564" />
|
||||
</clipPath>
|
||||
<g
|
||||
id="source-104"
|
||||
clip-path="url(#clip-94)">
|
||||
<g
|
||||
clip-path="url(#clip-92)"
|
||||
id="g571">
|
||||
<g
|
||||
clip-path="url(#clip-93)"
|
||||
id="g569">
|
||||
<rect
|
||||
x="-627.8"
|
||||
y="-332.199998"
|
||||
width="2073.6"
|
||||
height="1166.39999"
|
||||
fill="rgb(100%, 100%, 100%)"
|
||||
fill-opacity="1"
|
||||
id="rect567" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</defs>
|
||||
<use
|
||||
xlink:href="#source-98"
|
||||
transform="matrix(1, 0, 0, 1, 209, 153)"
|
||||
id="use894" />
|
||||
<use
|
||||
xlink:href="#source-101"
|
||||
transform="matrix(1, 0, 0, 1, 260, 154)"
|
||||
id="use896" />
|
||||
<use
|
||||
xlink:href="#source-104"
|
||||
transform="matrix(1, 0, 0, 1, 311, 154)"
|
||||
id="use898" />
|
||||
<use
|
||||
xlink:href="#source-95"
|
||||
transform="matrix(1, 0, 0, 1, 338, 154)"
|
||||
id="use900" />
|
||||
<use
|
||||
xlink:href="#source-89"
|
||||
transform="matrix(1, 0, 0, 1, 379, 154)"
|
||||
id="use902" />
|
||||
<use
|
||||
xlink:href="#source-92"
|
||||
transform="matrix(1, 0, 0, 1, 435, 154)"
|
||||
id="use904" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 14 KiB |
Reference in New Issue
Block a user