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;