Initial implementation of localization

app/components/FeatureGrid/FeatureGrid.container.tsx

@@ -1,47 +1,50 @@
 "use client";
 
 import { memo, useMemo } from "react";
+import { useTranslation } from "../../contexts/MessagesContext";
 import FeatureGridView from "./FeatureGrid.view";
 import type { FeatureGridProps, Feature } from "./FeatureGrid.types";
 
 const FeatureGridContainer = memo<FeatureGridProps>(
   ({ title, subtitle, className = "" }) => {
+    const t = useTranslation();
+
     const features: Feature[] = useMemo(
       () => [
         {
           backgroundColor: "bg-[var(--color-surface-default-brand-royal)]",
-          labelLine1: "Decision-making",
-          labelLine2: "support",
+          labelLine1: t("featureGrid.features.decisionMaking.labelLine1"),
+          labelLine2: t("featureGrid.features.decisionMaking.labelLine2"),
           panelContent: "/assets/Feature_Support.png",
-          ariaLabel: "Decision-making support tools",
+          ariaLabel: t("featureGrid.features.decisionMaking.ariaLabel"),
           href: "#decision-making",
         },
         {
           backgroundColor: "bg-[#D1FFE2]",
-          labelLine1: "Values alignment",
-          labelLine2: "exercises",
+          labelLine1: t("featureGrid.features.valuesAlignment.labelLine1"),
+          labelLine2: t("featureGrid.features.valuesAlignment.labelLine2"),
           panelContent: "/assets/Feature_Exercises.png",
-          ariaLabel: "Values alignment exercises",
+          ariaLabel: t("featureGrid.features.valuesAlignment.ariaLabel"),
           href: "#values-alignment",
         },
         {
           backgroundColor: "bg-[#F4CAFF]",
-          labelLine1: "Membership",
-          labelLine2: "guidance",
+          labelLine1: t("featureGrid.features.membershipGuidance.labelLine1"),
+          labelLine2: t("featureGrid.features.membershipGuidance.labelLine2"),
           panelContent: "/assets/Feature_Guidance.png",
-          ariaLabel: "Membership guidance resources",
+          ariaLabel: t("featureGrid.features.membershipGuidance.ariaLabel"),
           href: "#membership-guidance",
         },
         {
           backgroundColor: "bg-[#CBDDFF]",
-          labelLine1: "Conflict resolution",
-          labelLine2: "tools",
+          labelLine1: t("featureGrid.features.conflictResolution.labelLine1"),
+          labelLine2: t("featureGrid.features.conflictResolution.labelLine2"),
           panelContent: "/assets/Feature_Tools.png",
-          ariaLabel: "Conflict resolution tools",
+          ariaLabel: t("featureGrid.features.conflictResolution.ariaLabel"),
           href: "#conflict-resolution",
         },
       ],
-      [],
+      [t],
     );
 
     const labelledBy = title ? "feature-grid-headline" : undefined;

app/components/FeatureGrid/FeatureGrid.view.tsx

@@ -1,3 +1,6 @@
+"use client";
+
+import { useTranslation } from "../../contexts/MessagesContext";
 import ContentLockup from "../ContentLockup";
 import MiniCard from "../MiniCard";
 import type { FeatureGridViewProps } from "./FeatureGrid.types";
@@ -9,11 +12,16 @@ function FeatureGridView({
   features,
   labelledBy,
 }: FeatureGridViewProps) {
+  const t = useTranslation();
+  const ariaLabel = t("featureGrid.ariaLabel");
+  const linkText = t("featureGrid.linkText");
+  const linkHref = t("featureGrid.linkHref");
+
   return (
     <section
       className={`p-0 lg:p-[var(--spacing-scale-064)] ${className}`}
       aria-labelledby={labelledBy}
-      aria-label={labelledBy ? undefined : "Feature tools and services"}
+      aria-label={labelledBy ? undefined : ariaLabel}
     >
       <div className="py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] md:pt-[var(--spacing-scale-076)] md:pb-[var(--spacing-scale-048)] lg:pb-[var(--spacing-scale-076)] md:px-[var(--spacing-scale-048)] bg-[#171717] rounded-[var(--radius-measures-radius-xlarge)] focus-within:ring-2 focus-within:ring-[var(--color-surface-default-brand-royal)] focus-within:ring-offset-2">
         <div className="w-full mx-auto gap-[var(--spacing-scale-048)] lg:flex lg:items-start lg:gap-[var(--spacing-scale-048)] [container-type:inline-size]">
@@ -23,8 +31,8 @@ function FeatureGridView({
               title={title}
               subtitle={subtitle}
               variant="feature"
-              linkText="Learn more"
-              linkHref="#"
+              linkText={linkText}
+              linkHref={linkHref}
               titleId={labelledBy}
             />
           </div>