diff --git a/app/(marketing)/about/page.tsx b/app/(marketing)/about/page.tsx index db50a7c..8ce856f 100644 --- a/app/(marketing)/about/page.tsx +++ b/app/(marketing)/about/page.tsx @@ -36,11 +36,6 @@ export default function AboutPage() { const headerSegments = asArray(page.aboutHeader.segments); const statsItems = asArray(page.stats.items); - const statsAsOf = - typeof page.stats.asOf === "string" - ? page.stats.asOf - : String(page.stats.asOf ?? ""); - const faqItems = asArray(page.faq.items); const tripleColumns = asArray(page.tripleTextBlock.columns); @@ -57,10 +52,8 @@ export default function AboutPage() { titlePrefix={page.stats.titlePrefix} titleEmphasis={page.stats.titleEmphasis} titleSuffix={page.stats.titleSuffix} - items={statsItems.map((item) => ({ - ...item, - asOf: statsAsOf, - }))} + asOfPrefix={page.stats.asOfPrefix} + items={statsItems} /> {asOf ? (

- {asOf} + {sourcedYear ? ( + <> + {asOfPrefix ? {`${asOfPrefix} `} : null} + {sourceHref ? ( + + {asOf} + {sourceName ? ( + {` (${sourceName})`} + ) : null} + + ) : ( + {asOf} + )} + + ) : ( + asOf + )}

) : null} diff --git a/app/components/sections/FeatureGrid/FeatureGrid.container.tsx b/app/components/sections/FeatureGrid/FeatureGrid.container.tsx index a993dfb..430ffee 100644 --- a/app/components/sections/FeatureGrid/FeatureGrid.container.tsx +++ b/app/components/sections/FeatureGrid/FeatureGrid.container.tsx @@ -1,11 +1,11 @@ "use client"; /** - * Figma: "Section / Feature-Grid" (18847:22410) + * Figma: "Section / Feature-Grid" (18632:10668) */ import { memo, useMemo } from "react"; -import { getAssetPath, featurePanelLayout, featurePanelPath } from "../../../../lib/assetUtils"; +import { featureIconPath, getAssetPath } from "../../../../lib/assetUtils"; import { useTranslation } from "../../../contexts/MessagesContext"; import FeatureGridView from "./FeatureGrid.view"; import type { FeatureGridProps, Feature } from "./FeatureGrid.types"; @@ -17,52 +17,40 @@ const FeatureGridContainer = memo( const features: Feature[] = useMemo( () => [ { - backgroundColor: "bg-[var(--color-surface-invert-brand-royal)]", - labelLine1: t( - "pages.home.featureGrid.features.decisionMaking.labelLine1", + backgroundColor: "bg-[var(--color-surface-invert-brand-lavender)]", + title: t("pages.home.featureGrid.features.decisionMaking.title"), + description: t( + "pages.home.featureGrid.features.decisionMaking.description", ), - labelLine2: t( - "pages.home.featureGrid.features.decisionMaking.labelLine2", - ), - panelContent: getAssetPath(featurePanelPath("support")), - ...featurePanelLayout("support"), - ariaLabel: t("featureGrid.features.decisionMaking.ariaLabel"), + descriptionClassName: "text-[#3a3273]", + iconSrc: getAssetPath(featureIconPath("git-branch")), }, { backgroundColor: "bg-[var(--color-surface-invert-brand-lime)]", - labelLine1: t( - "pages.home.featureGrid.features.valuesAlignment.labelLine1", + title: t("pages.home.featureGrid.features.valuesAlignment.title"), + description: t( + "pages.home.featureGrid.features.valuesAlignment.description", ), - labelLine2: t( - "pages.home.featureGrid.features.valuesAlignment.labelLine2", - ), - panelContent: getAssetPath(featurePanelPath("exercises")), - ...featurePanelLayout("exercises"), - ariaLabel: t("featureGrid.features.valuesAlignment.ariaLabel"), + descriptionClassName: "text-[#424f1a]", + iconSrc: getAssetPath(featureIconPath("arrow-left-right")), }, { backgroundColor: "bg-[var(--color-surface-invert-brand-rust)]", - labelLine1: t( - "pages.home.featureGrid.features.membershipGuidance.labelLine1", + title: t("pages.home.featureGrid.features.membershipGuidance.title"), + description: t( + "pages.home.featureGrid.features.membershipGuidance.description", ), - labelLine2: t( - "pages.home.featureGrid.features.membershipGuidance.labelLine2", - ), - panelContent: getAssetPath(featurePanelPath("guidance")), - ...featurePanelLayout("guidance"), - ariaLabel: t("featureGrid.features.membershipGuidance.ariaLabel"), + descriptionClassName: "text-[#5e2e23]", + iconSrc: getAssetPath(featureIconPath("door-open")), }, { backgroundColor: "bg-[var(--color-surface-invert-brand-teal)]", - labelLine1: t( - "pages.home.featureGrid.features.conflictResolution.labelLine1", + title: t("pages.home.featureGrid.features.conflictResolution.title"), + description: t( + "pages.home.featureGrid.features.conflictResolution.description", ), - labelLine2: t( - "pages.home.featureGrid.features.conflictResolution.labelLine2", - ), - panelContent: getAssetPath(featurePanelPath("tools")), - ...featurePanelLayout("tools"), - ariaLabel: t("featureGrid.features.conflictResolution.ariaLabel"), + descriptionClassName: "text-[#1f4d47]", + iconSrc: getAssetPath(featureIconPath("message-square-share")), }, ], [t], diff --git a/app/components/sections/FeatureGrid/FeatureGrid.types.ts b/app/components/sections/FeatureGrid/FeatureGrid.types.ts index b49af6c..cbb0f58 100644 --- a/app/components/sections/FeatureGrid/FeatureGrid.types.ts +++ b/app/components/sections/FeatureGrid/FeatureGrid.types.ts @@ -6,13 +6,10 @@ export interface FeatureGridProps { export interface Feature { backgroundColor: string; - labelLine1: string; - labelLine2: string; - panelContent: string; - panelWidth: number; - panelHeight: number; - panelImageClassName?: string; - ariaLabel: string; + title: string; + description: string; + descriptionClassName: string; + iconSrc: string; } export interface FeatureGridViewProps extends FeatureGridProps { diff --git a/app/components/sections/FeatureGrid/FeatureGrid.view.tsx b/app/components/sections/FeatureGrid/FeatureGrid.view.tsx index d639a74..5425f07 100644 --- a/app/components/sections/FeatureGrid/FeatureGrid.view.tsx +++ b/app/components/sections/FeatureGrid/FeatureGrid.view.tsx @@ -2,10 +2,9 @@ import { useTranslation } from "../../../contexts/MessagesContext"; import ContentLockup from "../../type/ContentLockup"; -import Mini from "../../cards/Mini"; import type { FeatureGridViewProps } from "./FeatureGrid.types"; -/** Figma **Section / Feature-Grid** [18847:22410](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=18847-22410&m=dev). */ +/** Figma **Section / Feature-Grid** [18632:10668](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=18632-10668&m=dev). */ function FeatureGridView({ title, subtitle, @@ -20,16 +19,16 @@ function FeatureGridView({ return (
-
-
+
+
-
- {features.map((feature, index) => ( - +
+ {features.map((feature) => ( +
+
+ {/* eslint-disable-next-line @next/next/no-img-element -- decorative Figma glyph */} + +
+
+

+ {feature.title} +

+

+ {feature.description} +

+
+
))}
diff --git a/app/components/sections/Stats/Stats.types.ts b/app/components/sections/Stats/Stats.types.ts index da700e4..741bf56 100644 --- a/app/components/sections/Stats/Stats.types.ts +++ b/app/components/sections/Stats/Stats.types.ts @@ -4,6 +4,9 @@ export interface StatItem { value: string; label: string; asOf?: string; + asOfPrefix?: string; + sourceHref?: string; + sourceName?: string; shapeVariant?: StatShapeVariant; } @@ -11,6 +14,7 @@ export interface StatsProps { titlePrefix?: string; titleEmphasis?: string; titleSuffix?: string; + asOfPrefix?: string; items: StatItem[]; className?: string; } diff --git a/app/components/sections/Stats/Stats.view.tsx b/app/components/sections/Stats/Stats.view.tsx index c4499eb..41560fd 100644 --- a/app/components/sections/Stats/Stats.view.tsx +++ b/app/components/sections/Stats/Stats.view.tsx @@ -21,6 +21,7 @@ function StatsView({ titlePrefix, titleEmphasis, titleSuffix, + asOfPrefix, items, headingId, className = "", @@ -88,7 +89,11 @@ function StatsView({ return (
  • - +
  • ); })} diff --git a/app/components/type/AboutHeader/AboutHeader.view.tsx b/app/components/type/AboutHeader/AboutHeader.view.tsx index a9d148a..f1d148d 100644 --- a/app/components/type/AboutHeader/AboutHeader.view.tsx +++ b/app/components/type/AboutHeader/AboutHeader.view.tsx @@ -25,16 +25,27 @@ function AboutHeaderView({ variant="about" alignment="left" titleId={titleId} - titleContent={segments.map((segment, index) => { - if (segment.type === "word") { - return ( - - {segment.text} + titleContent={segments.flatMap((segment, index) => { + const spaceBefore = + segment.type === "word" && index > 0 ? ( + + {" "} - ); + ) : null; + + if (segment.type === "word") { + return [ + spaceBefore, + + {segment.text} + , + ]; } - return ( + return [ - - ); + , + ]; })} />
    diff --git a/app/components/type/ContentLockup/ContentLockup.view.tsx b/app/components/type/ContentLockup/ContentLockup.view.tsx index 224e6d8..0707a97 100644 --- a/app/components/type/ContentLockup/ContentLockup.view.tsx +++ b/app/components/type/ContentLockup/ContentLockup.view.tsx @@ -84,8 +84,13 @@ function ContentLockupView({ )} - {/* Subtitle */} - {subtitle ?

    {subtitle}

    : null} + {subtitle ? ( + variant === "feature" ? ( +

    {subtitle}

    + ) : ( +

    {subtitle}

    + ) + ) : null} {/* Description */} @@ -110,7 +115,7 @@ function ContentLockupView({