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">
-        Log in
+      <MenuBarItem href="#" size={size} ariaLabel={t("ariaLabels.logInToAccount")}>
+        {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">