Fix featured grid

app/components/sections/FeatureGrid/FeatureGrid.container.tsx

@@ -1,11 +1,11 @@
 "use client";
 
 /**
- * Figma: "Sections / FeatureGrid" (see registry)
+ * Figma: "Section / Feature-Grid" (18847:22410)
  */
 
 import { memo, useMemo } from "react";
-import { getAssetPath, featurePanelPath } from "../../../../lib/assetUtils";
+import { getAssetPath, featurePanelLayout, featurePanelPath } from "../../../../lib/assetUtils";
 import { useTranslation } from "../../../contexts/MessagesContext";
 import FeatureGridView from "./FeatureGrid.view";
 import type { FeatureGridProps, Feature } from "./FeatureGrid.types";
@@ -17,7 +17,7 @@ const FeatureGridContainer = memo<FeatureGridProps>(
     const features: Feature[] = useMemo(
       () => [
         {
-          backgroundColor: "bg-[var(--color-surface-default-brand-royal)]",
+          backgroundColor: "bg-[var(--color-surface-invert-brand-royal)]",
           labelLine1: t(
             "pages.home.featureGrid.features.decisionMaking.labelLine1",
           ),
@@ -25,11 +25,12 @@ const FeatureGridContainer = memo<FeatureGridProps>(
             "pages.home.featureGrid.features.decisionMaking.labelLine2",
           ),
           panelContent: getAssetPath(featurePanelPath("support")),
+          ...featurePanelLayout("support"),
           ariaLabel: t("featureGrid.features.decisionMaking.ariaLabel"),
           href: "#decision-making",
         },
         {
-          backgroundColor: "bg-[#D1FFE2]",
+          backgroundColor: "bg-[var(--color-surface-invert-brand-lime)]",
           labelLine1: t(
             "pages.home.featureGrid.features.valuesAlignment.labelLine1",
           ),
@@ -37,11 +38,12 @@ const FeatureGridContainer = memo<FeatureGridProps>(
             "pages.home.featureGrid.features.valuesAlignment.labelLine2",
           ),
           panelContent: getAssetPath(featurePanelPath("exercises")),
+          ...featurePanelLayout("exercises"),
           ariaLabel: t("featureGrid.features.valuesAlignment.ariaLabel"),
           href: "#values-alignment",
         },
         {
-          backgroundColor: "bg-[#F4CAFF]",
+          backgroundColor: "bg-[var(--color-surface-invert-brand-rust)]",
           labelLine1: t(
             "pages.home.featureGrid.features.membershipGuidance.labelLine1",
           ),
@@ -49,11 +51,12 @@ const FeatureGridContainer = memo<FeatureGridProps>(
             "pages.home.featureGrid.features.membershipGuidance.labelLine2",
           ),
           panelContent: getAssetPath(featurePanelPath("guidance")),
+          ...featurePanelLayout("guidance"),
           ariaLabel: t("featureGrid.features.membershipGuidance.ariaLabel"),
           href: "#membership-guidance",
         },
         {
-          backgroundColor: "bg-[#CBDDFF]",
+          backgroundColor: "bg-[var(--color-surface-invert-brand-teal)]",
           labelLine1: t(
             "pages.home.featureGrid.features.conflictResolution.labelLine1",
           ),
@@ -61,6 +64,7 @@ const FeatureGridContainer = memo<FeatureGridProps>(
             "pages.home.featureGrid.features.conflictResolution.labelLine2",
           ),
           panelContent: getAssetPath(featurePanelPath("tools")),
+          ...featurePanelLayout("tools"),
           ariaLabel: t("featureGrid.features.conflictResolution.ariaLabel"),
           href: "#conflict-resolution",
         },