Localization with pages context

app/components/FeatureGrid/FeatureGrid.container.tsx

@@ -13,32 +13,32 @@ const FeatureGridContainer = memo<FeatureGridProps>(
       () => [
         {
           backgroundColor: "bg-[var(--color-surface-default-brand-royal)]",
-          labelLine1: t("featureGrid.features.decisionMaking.labelLine1"),
-          labelLine2: t("featureGrid.features.decisionMaking.labelLine2"),
+          labelLine1: t("pages.home.featureGrid.features.decisionMaking.labelLine1"),
+          labelLine2: t("pages.home.featureGrid.features.decisionMaking.labelLine2"),
           panelContent: "/assets/Feature_Support.png",
           ariaLabel: t("featureGrid.features.decisionMaking.ariaLabel"),
           href: "#decision-making",
         },
         {
           backgroundColor: "bg-[#D1FFE2]",
-          labelLine1: t("featureGrid.features.valuesAlignment.labelLine1"),
-          labelLine2: t("featureGrid.features.valuesAlignment.labelLine2"),
+          labelLine1: t("pages.home.featureGrid.features.valuesAlignment.labelLine1"),
+          labelLine2: t("pages.home.featureGrid.features.valuesAlignment.labelLine2"),
           panelContent: "/assets/Feature_Exercises.png",
           ariaLabel: t("featureGrid.features.valuesAlignment.ariaLabel"),
           href: "#values-alignment",
         },
         {
           backgroundColor: "bg-[#F4CAFF]",
-          labelLine1: t("featureGrid.features.membershipGuidance.labelLine1"),
-          labelLine2: t("featureGrid.features.membershipGuidance.labelLine2"),
+          labelLine1: t("pages.home.featureGrid.features.membershipGuidance.labelLine1"),
+          labelLine2: t("pages.home.featureGrid.features.membershipGuidance.labelLine2"),
           panelContent: "/assets/Feature_Guidance.png",
           ariaLabel: t("featureGrid.features.membershipGuidance.ariaLabel"),
           href: "#membership-guidance",
         },
         {
           backgroundColor: "bg-[#CBDDFF]",
-          labelLine1: t("featureGrid.features.conflictResolution.labelLine1"),
-          labelLine2: t("featureGrid.features.conflictResolution.labelLine2"),
+          labelLine1: t("pages.home.featureGrid.features.conflictResolution.labelLine1"),
+          labelLine2: t("pages.home.featureGrid.features.conflictResolution.labelLine2"),
           panelContent: "/assets/Feature_Tools.png",
           ariaLabel: t("featureGrid.features.conflictResolution.ariaLabel"),
           href: "#conflict-resolution",

app/components/RuleStack/RuleStack.view.tsx

@@ -11,7 +11,7 @@ export function RuleStackView({
   className,
   onTemplateClick,
 }: RuleStackViewProps) {
-  const t = useTranslation("ruleStack");
+  const t = useTranslation("pages.home.ruleStack");
 
   return (
     <section

app/learn/page.tsx

@@ -1,3 +1,5 @@
+import messages from "../../messages/en/index";
+import { getTranslation } from "../../lib/i18n/getTranslation";
 import ContentThumbnailTemplate from "../components/ContentThumbnailTemplate";
 import ContentLockup from "../components/ContentLockup";
 import AskOrganizer from "../components/AskOrganizer";
@@ -7,21 +9,22 @@ export default function LearnPage() {
   // Get real blog posts from the content system
   const allPosts = getAllBlogPosts();
 
+  // Use direct message access for server components
+  const t = (key: string) => getTranslation(messages, key);
+
   const contentLockupData = {
-    title: "Organizing is hard",
-    subtitle:
-      "Find answers to your questions and see how other groups have solved similar challenges.",
+    title: t("pages.learn.contentLockup.title"),
+    subtitle: t("pages.learn.contentLockup.subtitle"),
     variant: "learn" as const,
     alignment: "left" as const,
   };
 
   const askOrganizerData = {
-    title: "Still have questions?",
-    subtitle: "Get answers from an experienced organizer",
-    description:
-      "Our community of organizers is here to help you navigate the challenges of building and maintaining effective community organizations.",
-    buttonText: "Ask an organizer",
-    buttonHref: "/contact",
+    title: t("pages.learn.askOrganizer.title"),
+    subtitle: t("pages.learn.askOrganizer.subtitle"),
+    description: t("pages.learn.askOrganizer.description"),
+    buttonText: t("pages.learn.askOrganizer.buttonText"),
+    buttonHref: t("pages.learn.askOrganizer.buttonHref"),
     variant: "centered" as const,
   };
 

app/page.tsx

@@ -46,29 +46,29 @@ export default function Page() {
   const t = (key: string) => getTranslation(messages, key);
 
   const heroBannerData = {
-    title: t("heroBanner.title"),
-    subtitle: t("heroBanner.subtitle"),
-    description: t("heroBanner.description"),
-    ctaText: t("heroBanner.ctaText"),
-    ctaHref: t("heroBanner.ctaHref"),
+    title: t("pages.home.heroBanner.title"),
+    subtitle: t("pages.home.heroBanner.subtitle"),
+    description: t("pages.home.heroBanner.description"),
+    ctaText: t("pages.home.heroBanner.ctaText"),
+    ctaHref: t("pages.home.heroBanner.ctaHref"),
   };
 
   const numberedCardsData = {
-    title: t("numberedCards.title"),
-    subtitle: t("numberedCards.subtitle"),
+    title: t("pages.home.numberedCards.title"),
+    subtitle: t("pages.home.numberedCards.subtitle"),
     cards: [
       {
-        text: t("numberedCards.cards.card1.text"),
+        text: t("pages.home.numberedCards.cards.card1.text"),
         iconShape: "blob",
         iconColor: "green",
       },
       {
-        text: t("numberedCards.cards.card2.text"),
+        text: t("pages.home.numberedCards.cards.card2.text"),
         iconShape: "gear",
         iconColor: "purple",
       },
       {
-        text: t("numberedCards.cards.card3.text"),
+        text: t("pages.home.numberedCards.cards.card3.text"),
         iconShape: "star",
         iconColor: "orange",
       },
@@ -76,15 +76,15 @@ export default function Page() {
   };
 
   const featureGridData = {
-    title: t("featureGrid.title"),
-    subtitle: t("featureGrid.subtitle"),
+    title: t("pages.home.featureGrid.title"),
+    subtitle: t("pages.home.featureGrid.subtitle"),
   };
 
   const askOrganizerData = {
-    title: t("askOrganizer.title"),
-    subtitle: t("askOrganizer.subtitle"),
-    buttonText: t("askOrganizer.buttonText"),
-    buttonHref: t("askOrganizer.buttonHref"),
+    title: t("pages.home.askOrganizer.title"),
+    subtitle: t("pages.home.askOrganizer.subtitle"),
+    buttonText: t("pages.home.askOrganizer.buttonText"),
+    buttonHref: t("pages.home.askOrganizer.buttonHref"),
   };
 
   return (