Second pass on localization

app/components/Header/Header.container.tsx

@@ -2,6 +2,7 @@
 
 import { memo } from "react";
 import { usePathname } from "next/navigation";
+import { useTranslation } from "../../contexts/MessagesContext";
 import MenuBarItem from "../MenuBarItem";
 import Button from "../Button";
 import AvatarContainer from "../AvatarContainer";
@@ -11,13 +12,6 @@ import { getAssetPath, ASSETS } from "../../../lib/assetUtils";
 import { HeaderView } from "./Header.view";
 import type { HeaderProps, NavSize } from "./Header.types";
 
-// Configuration data for testing
-export const navigationItems = [
-  { href: "#", text: "Use cases", extraPadding: true },
-  { href: "/learn", text: "Learn" },
-  { href: "#", text: "About" },
-];
-
 export const avatarImages = [
   { src: getAssetPath(ASSETS.AVATAR_1), alt: "Avatar 1" },
   { src: getAssetPath(ASSETS.AVATAR_2), alt: "Avatar 2" },
@@ -46,6 +40,7 @@ export const logoConfig = [
 
 const HeaderContainer = memo<HeaderProps>(() => {
   const pathname = usePathname();
+  const t = useTranslation("header");
 
   // Schema markup for site navigation
   const schemaData = {
@@ -60,6 +55,13 @@ const HeaderContainer = memo<HeaderProps>(() => {
     },
   };
 
+  // Navigation items with translations
+  const navigationItems = [
+    { href: "#", text: t("navigation.useCases"), extraPadding: true },
+    { href: "/learn", text: t("navigation.learn") },
+    { href: "#", text: t("navigation.about") },
+  ];
+
   const renderNavigationItems = (size: NavSize) => {
     return navigationItems.map((item, index) => (
       <MenuBarItem
@@ -67,7 +69,7 @@ const HeaderContainer = memo<HeaderProps>(() => {
         href={item.href}
         size={item.extraPadding && size === "xsmall" ? "xsmallUseCases" : size}
         isActive={pathname === item.href}
-        ariaLabel={`Navigate to ${item.text} page`}
+        ariaLabel={t("ariaLabels.navigateToPage").replace("{text}", item.text)}
       >
         {item.text}
       </MenuBarItem>
@@ -94,8 +96,8 @@ const HeaderContainer = memo<HeaderProps>(() => {
 
   const renderLoginButton = (size: NavSize) => {
     return (
-      <MenuBarItem href="#" size={size} ariaLabel="Log in to your account">
+      <MenuBarItem href="#" size={size} ariaLabel={t("ariaLabels.logInToAccount")}>
-        Log in
+        {t("buttons.logIn")}
       </MenuBarItem>
     );
   };
@@ -108,10 +110,10 @@ const HeaderContainer = memo<HeaderProps>(() => {
     return (
       <Button
         size={buttonSize}
-        ariaLabel="Create a new rule with avatar decoration"
+        ariaLabel={t("ariaLabels.createNewRule")}
       >
         {renderAvatarGroup(containerSize, avatarSize)}
-        <span>Create rule</span>
+        <span>{t("buttons.createRule")}</span>
       </Button>
     );
   };

app/components/Header/Header.view.tsx

@@ -1,3 +1,6 @@
+"use client";
+
+import { useTranslation } from "../../contexts/MessagesContext";
 import MenuBar from "../MenuBar";
 import type { HeaderViewProps } from "./Header.types";
 
@@ -9,6 +12,8 @@ export function HeaderView({
   renderCreateRuleButton,
   renderLogo,
 }: HeaderViewProps) {
+  const t = useTranslation("header");
+
   return (
     <>
       <script
@@ -18,12 +23,12 @@ export function HeaderView({
       <header
         className="sticky top-0 z-50 bg-[var(--color-surface-default-primary)] w-full border-b border-[var(--border-color-default-tertiary)]"
         role="banner"
-        aria-label="Main navigation header"
+        aria-label={t("ariaLabels.mainNavigationHeader")}
       >
         <nav
           className="flex items-center justify-between mx-auto h-[40px] lg:h-[84px] xl:h-[88px] px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-008)] lg:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-measures-spacing-016,16px)]"
           role="navigation"
-          aria-label="Main navigation"
+          aria-label={t("ariaLabels.mainNavigation")}
         >
           {/* Logo - Consistent left positioning across all breakpoints */}
           <div className="flex items-center">

app/components/HomeHeader/HomeHeader.container.tsx

@@ -2,6 +2,7 @@
 
 import { memo } from "react";
 import { usePathname } from "next/navigation";
+import { useTranslation } from "../../contexts/MessagesContext";
 import MenuBarItem from "../MenuBarItem";
 import Button from "../Button";
 import AvatarContainer from "../AvatarContainer";
@@ -11,13 +12,6 @@ import { getAssetPath, ASSETS } from "../../../lib/assetUtils";
 import HomeHeaderView from "./HomeHeader.view";
 import type { HomeHeaderProps, NavSize } from "./HomeHeader.types";
 
-// Configuration data for testing
-export const navigationItems = [
-  { href: "#", text: "Use cases", extraPadding: true },
-  { href: "/learn", text: "Learn" },
-  { href: "#", text: "About" },
-];
-
 export const avatarImages = [
   { src: getAssetPath(ASSETS.AVATAR_1), alt: "Avatar 1" },
   { src: getAssetPath(ASSETS.AVATAR_2), alt: "Avatar 2" },
@@ -54,6 +48,7 @@ export const logoConfig = [
 
 const HomeHeaderContainer = memo<HomeHeaderProps>(() => {
   const pathname = usePathname();
+  const t = useTranslation("header");
 
   // Schema markup for site navigation (home page specific)
   const schemaData = {
@@ -69,6 +64,13 @@ const HomeHeaderContainer = memo<HomeHeaderProps>(() => {
     },
   };
 
+  // Navigation items with translations
+  const navigationItems = [
+    { href: "#", text: t("navigation.useCases"), extraPadding: true },
+    { href: "/learn", text: t("navigation.learn") },
+    { href: "#", text: t("navigation.about") },
+  ];
+
   const renderNavigationItems = (size: NavSize) => {
     return navigationItems.map((item, index) => (
       <MenuBarItem
@@ -102,7 +104,7 @@ const HomeHeaderContainer = memo<HomeHeaderProps>(() => {
             : "default"
         }
         isActive={pathname === item.href}
-        ariaLabel={`Navigate to ${item.text} page`}
+        ariaLabel={t("ariaLabels.navigateToPage").replace("{text}", item.text)}
       >
         {item.text}
       </MenuBarItem>
@@ -133,9 +135,9 @@ const HomeHeaderContainer = memo<HomeHeaderProps>(() => {
         href="#"
         size={size}
         variant={size === "xsmall" || size === "default" ? "home" : "default"}
-        ariaLabel="Log in to your account"
+        ariaLabel={t("ariaLabels.logInToAccount")}
       >
-        Log in
+        {t("buttons.logIn")}
       </MenuBarItem>
     );
   };
@@ -149,10 +151,10 @@ const HomeHeaderContainer = memo<HomeHeaderProps>(() => {
       <Button
         size={buttonSize}
         variant="secondary"
-        ariaLabel="Create a new rule with avatar decoration"
+        ariaLabel={t("ariaLabels.createNewRule")}
       >
         {renderAvatarGroup(containerSize, avatarSize)}
-        <span>Create rule</span>
+        <span>{t("buttons.createRule")}</span>
       </Button>
     );
   };

app/components/HomeHeader/HomeHeader.view.tsx

@@ -2,6 +2,7 @@
 
 import { memo } from "react";
 import Script from "next/script";
+import { useTranslation } from "../../contexts/MessagesContext";
 import HeaderTab from "../HeaderTab";
 import MenuBar from "../MenuBar";
 import type { HomeHeaderViewProps } from "./HomeHeader.types";
@@ -14,6 +15,8 @@ function HomeHeaderView({
   renderCreateRuleButton,
   renderLogo,
 }: HomeHeaderViewProps) {
+  const t = useTranslation("homeHeader");
+
   return (
     <>
       <Script
@@ -24,12 +27,12 @@ function HomeHeaderView({
       <header
         className="w-full bg-transparent overflow-hidden"
         role="banner"
-        aria-label="Home page navigation header"
+        aria-label={t("ariaLabels.homePageNavigationHeader")}
       >
         <nav
           className="relative flex items-center justify-between mx-auto h-[50px] sm:h-[62px] md:h-[68px] lg:h-[68px] xl:h-[88px] px-[var(--spacing-scale-008)] pr-[var(--spacing-scale-016)] pt-[var(--spacing-scale-010)] sm:px-[var(--spacing-scale-010)] sm:pr-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] md:pr-[var(--spacing-scale-032)] md:pt-[var(--spacing-scale-016)] lg:pl-[var(--spacing-scale-024)] lg:pt-[var(--spacing-scale-016)] lg:pr-[var(--spacing-scale-056)] xl:pl-[var(--spacing-scale-048)] xl:pt-[var(--spacing-scale-024)] xl:pr-[var(--spacing-scale-056)]"
           role="navigation"
-          aria-label="Main navigation"
+          aria-label={t("ariaLabels.mainNavigation")}
         >
           <HeaderTab className="flex items-center self-end" stretch={true}>
             {/* Logo - Consistent left positioning within HeaderTab */}

app/components/LanguageSwitcher/LanguageSwitcher.view.tsx

@@ -1,26 +1,29 @@
 "use client";
 
 import { memo } from "react";
+import { useTranslation } from "../../contexts/MessagesContext";
 import type { LanguageSwitcherProps, Language } from "./LanguageSwitcher.types";
 
-const AVAILABLE_LANGUAGES: Language[] = [
-  {
-    code: "en",
-    name: "English",
-    nativeName: "English",
-  },
-];
-
 function LanguageSwitcherView({ className = "" }: LanguageSwitcherProps) {
+  const t = useTranslation("languageSwitcher");
+
+  const AVAILABLE_LANGUAGES: Language[] = [
+    {
+      code: "en",
+      name: t("languages.english.name"),
+      nativeName: t("languages.english.nativeName"),
+    },
+  ];
+
   return (
     <div className={className}>
       <label htmlFor="language-select" className="sr-only">
-        Select language
+        {t("label")}
       </label>
       <select
         id="language-select"
         className="bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] font-inter text-sm leading-5 font-normal border border-[var(--color-surface-default-secondary)] rounded-[var(--radius-measures-radius-small)] px-[var(--spacing-scale-012)] py-[var(--spacing-scale-008)] focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-default-brand-royal)] focus:ring-offset-2 cursor-pointer"
-        aria-label="Select language"
+        aria-label={t("ariaLabel")}
         disabled
       >
         {AVAILABLE_LANGUAGES.map((language) => (
@@ -30,7 +33,7 @@ function LanguageSwitcherView({ className = "" }: LanguageSwitcherProps) {
         ))}
       </select>
       <p className="text-[var(--color-content-default-secondary)] font-inter text-xs leading-4 font-normal mt-[var(--spacing-scale-008)]">
-        Language switching functionality coming soon
+        {t("comingSoonMessage")}
       </p>
     </div>
   );

app/components/MenuBar.tsx

@@ -1,4 +1,7 @@
+"use client";
+
 import { memo } from "react";
+import { useTranslation } from "../contexts/MessagesContext";
 
 interface MenuBarProps extends React.HTMLAttributes<HTMLElement> {
   children?: React.ReactNode;
@@ -8,6 +11,7 @@ interface MenuBarProps extends React.HTMLAttributes<HTMLElement> {
 
 const MenuBar = memo<MenuBarProps>(
   ({ children, className = "", size = "default", ...props }) => {
+    const t = useTranslation("menuBar");
     const sizeStyles: Record<string, string> = {
       xsmall:
         "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)] rounded-[4px]",
@@ -25,7 +29,7 @@ const MenuBar = memo<MenuBarProps>(
       <nav
         className={baseStyles}
         role="menubar"
-        aria-label="Main navigation menu"
+        aria-label={t("ariaLabel")}
         {...props}
       >
         {children}

app/components/QuoteBlock/QuoteBlock.view.tsx

@@ -2,6 +2,7 @@
 
 import { memo } from "react";
 import Image from "next/image";
+import { useTranslation } from "../../contexts/MessagesContext";
 import QuoteDecor from "../QuoteDecor";
 import type { QuoteBlockViewProps } from "./QuoteBlock.types";
 
@@ -19,6 +20,9 @@ function QuoteBlockView({
   onImageLoad,
   onImageError,
 }: QuoteBlockViewProps) {
+  const t = useTranslation("quoteBlock");
+  const avatarAlt = t("avatarAlt").replace("{author}", author);
+
   return (
     <section
       className={`${config.container} ${className}`}
@@ -54,7 +58,7 @@ function QuoteBlockView({
               {!imageError ? (
                 <Image
                   src={currentAvatarSrc}
-                  alt={`Portrait of ${author}`}
+                  alt={avatarAlt}
                   width={64}
                   height={64}
                   className={`filter sepia ${

app/components/RuleCard/RuleCard.view.tsx

@@ -1,3 +1,6 @@
+"use client";
+
+import { useTranslation } from "../../contexts/MessagesContext";
 import type { RuleCardViewProps } from "./RuleCard.types";
 
 export function RuleCardView({
@@ -9,12 +12,15 @@ export function RuleCardView({
   onClick,
   onKeyDown,
 }: RuleCardViewProps) {
+  const t = useTranslation("ruleCard");
+  const ariaLabel = t("ariaLabel").replace("{title}", title);
+
   return (
     <div
       className={`${backgroundColor} rounded-[var(--radius-measures-radius-small)] pt-[var(--spacing-scale-012)] pr-[var(--spacing-scale-012)] pl-[var(--spacing-scale-012)] pb-[var(--spacing-scale-024)] md:p-[var(--spacing-scale-024)] md:h-[210px] lg:h-[277px] flex flex-col gap-[18px] shadow-lg backdrop-blur-sm transition-all duration-500 ease-in-out hover:shadow-xl hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-[var(--color-community-teal-500)] focus:ring-offset-2 cursor-pointer min-h-[44px] min-w-[44px] ${className}`}
       tabIndex={0}
       role="button"
-      aria-label={`Learn more about ${title} governance pattern`}
+      aria-label={ariaLabel}
       onClick={onClick}
       onKeyDown={onKeyDown}
     >

app/components/RuleStack/RuleStack.view.tsx

@@ -1,4 +1,7 @@
+"use client";
+
 import Image from "next/image";
+import { useTranslation } from "../../contexts/MessagesContext";
 import RuleCard from "../RuleCard";
 import Button from "../Button";
 import { getAssetPath } from "../../../lib/assetUtils";
@@ -8,77 +11,79 @@ export function RuleStackView({
   className,
   onTemplateClick,
 }: RuleStackViewProps) {
+  const t = useTranslation("ruleStack");
+
   return (
     <section
       className={`w-full bg-transparent py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] md:py-[var(--spacing-scale-048)] md:px-[var(--spacing-scale-032)] xmd:py-[var(--spacing-scale-056)] xmd:px-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-064)] xl:py-[var(--spacing-scale-064)] xl:px-[var(--spacing-scale-096)] flex flex-col gap-[var(--spacing-scale-024)] xmd:gap-[var(--spacing-scale-032)] lg:gap-[var(--spacing-scale-040)] ${className}`}
     >
       <div className="flex flex-col gap-[18px] xmd:grid xmd:grid-cols-2 lg:gap-[var(--spacing-scale-024)]">
         <RuleCard
-          title="Consensus clusters"
+          title={t("cards.consensusClusters.title")}
-          description="Units called Circles have the ability to decide and act on matters in their domains, which their members agree on through a Council."
+          description={t("cards.consensusClusters.description")}
           icon={
             <Image
               src={getAssetPath("assets/Icon_Sociocracy.svg")}
-              alt="Sociocracy"
+              alt={t("cards.consensusClusters.iconAlt")}
               width={40}
               height={40}
               className="md:w-[56px] md:h-[56px] lg:w-[90px] lg:h-[90px]"
             />
           }
           backgroundColor="bg-[var(--color-surface-default-brand-lime)]"
-          onClick={() => onTemplateClick("Consensus clusters")}
+          onClick={() => onTemplateClick(t("cards.consensusClusters.title"))}
         />
         <RuleCard
-          title="Consensus"
+          title={t("cards.consensus.title")}
-          description="Decisions that affect the group collectively should involve participation of all participants."
+          description={t("cards.consensus.description")}
           icon={
             <Image
               src={getAssetPath("assets/Icon_Consensus.svg")}
-              alt="Consensus"
+              alt={t("cards.consensus.iconAlt")}
               width={40}
               height={40}
               className="md:w-[56px] md:h-[56px] lg:w-[90px] lg:h-[90px]"
             />
           }
           backgroundColor="bg-[var(--color-surface-default-brand-rust)]"
-          onClick={() => onTemplateClick("Consensus")}
+          onClick={() => onTemplateClick(t("cards.consensus.title"))}
         />
         <RuleCard
-          title="Elected Board"
+          title={t("cards.electedBoard.title")}
-          description="An elected board determines policies and organizes their implementation."
+          description={t("cards.electedBoard.description")}
           icon={
             <Image
               src={getAssetPath("assets/Icon_ElectedBoard.svg")}
-              alt="Elected Board"
+              alt={t("cards.electedBoard.iconAlt")}
               width={40}
               height={40}
               className="md:w-[56px] md:h-[56px] lg:w-[90px] lg:h-[90px]"
             />
           }
           backgroundColor="bg-[var(--color-surface-default-brand-red)]"
-          onClick={() => onTemplateClick("Elected Board")}
+          onClick={() => onTemplateClick(t("cards.electedBoard.title"))}
         />
         <RuleCard
-          title="Petition"
+          title={t("cards.petition.title")}
-          description="All participants can propose and vote on proposals for the group."
+          description={t("cards.petition.description")}
           icon={
             <Image
               src={getAssetPath("assets/Icon_Petition.svg")}
-              alt="Petition"
+              alt={t("cards.petition.iconAlt")}
               width={40}
               height={40}
               className="md:w-[56px] md:h-[56px] lg:w-[90px] lg:h-[90px]"
             />
           }
           backgroundColor="bg-[var(--color-surface-default-brand-teal)]"
-          onClick={() => onTemplateClick("Petition")}
+          onClick={() => onTemplateClick(t("cards.petition.title"))}
         />
       </div>
 
       {/* See all templates button */}
       <div className="flex justify-center">
         <Button variant="outlined" size="large">
-          See all templates
+          {t("button.seeAllTemplates")}
         </Button>
       </div>
     </section>

messages/en/components/header.json

@@ -0,0 +1,18 @@
+{
+  "navigation": {
+    "useCases": "Use cases",
+    "learn": "Learn",
+    "about": "About"
+  },
+  "buttons": {
+    "logIn": "Log in",
+    "createRule": "Create rule"
+  },
+  "ariaLabels": {
+    "mainNavigationHeader": "Main navigation header",
+    "mainNavigation": "Main navigation",
+    "navigateToPage": "Navigate to {text} page",
+    "logInToAccount": "Log in to your account",
+    "createNewRule": "Create a new rule with avatar decoration"
+  }
+}

messages/en/components/homeHeader.json

@@ -0,0 +1,6 @@
+{
+  "ariaLabels": {
+    "homePageNavigationHeader": "Home page navigation header",
+    "mainNavigation": "Main navigation"
+  }
+}

messages/en/components/languageSwitcher.json

@@ -0,0 +1,11 @@
+{
+  "label": "Select language",
+  "ariaLabel": "Select language",
+  "comingSoonMessage": "Language switching functionality coming soon",
+  "languages": {
+    "english": {
+      "name": "English",
+      "nativeName": "English"
+    }
+  }
+}

messages/en/components/menuBar.json

@@ -0,0 +1,3 @@
+{
+  "ariaLabel": "Main navigation menu"
+}

messages/en/components/quoteBlock.json

@@ -0,0 +1,3 @@
+{
+  "avatarAlt": "Portrait of {author}"
+}

messages/en/components/ruleCard.json

@@ -0,0 +1,3 @@
+{
+  "ariaLabel": "Learn more about {title} governance pattern"
+}

messages/en/components/ruleStack.json

@@ -0,0 +1,28 @@
+{
+  "cards": {
+    "consensusClusters": {
+      "title": "Consensus clusters",
+      "description": "Units called Circles have the ability to decide and act on matters in their domains, which their members agree on through a Council.",
+      "iconAlt": "Sociocracy"
+    },
+    "consensus": {
+      "title": "Consensus",
+      "description": "Decisions that affect the group collectively should involve participation of all participants.",
+      "iconAlt": "Consensus"
+    },
+    "electedBoard": {
+      "title": "Elected Board",
+      "description": "An elected board determines policies and organizes their implementation.",
+      "iconAlt": "Elected Board"
+    },
+    "petition": {
+      "title": "Petition",
+      "description": "All participants can propose and vote on proposals for the group.",
+      "iconAlt": "Petition"
+    }
+  },
+  "button": {
+    "seeAllTemplates": "See all templates"
+  },
+  "ariaLabel": "Learn more about {title} governance pattern"
+}

messages/en/index.ts

@@ -4,6 +4,13 @@ import numberedCards from "./components/numberedCards.json";
 import askOrganizer from "./components/askOrganizer.json";
 import featureGrid from "./components/featureGrid.json";
 import footer from "./components/footer.json";
+import header from "./components/header.json";
+import homeHeader from "./components/homeHeader.json";
+import languageSwitcher from "./components/languageSwitcher.json";
+import menuBar from "./components/menuBar.json";
+import quoteBlock from "./components/quoteBlock.json";
+import ruleCard from "./components/ruleCard.json";
+import ruleStack from "./components/ruleStack.json";
 import navigation from "./navigation.json";
 import metadata from "./metadata.json";
 
@@ -14,6 +21,13 @@ export default {
   askOrganizer,
   featureGrid,
   footer,
+  header,
+  homeHeader,
+  languageSwitcher,
+  menuBar,
+  quoteBlock,
+  ruleCard,
+  ruleStack,
   navigation,
   metadata,
 };