refactor(i18n): migrate shared chrome to useTranslations

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

frontend/components/web/Footer.tsx

@@ -2,11 +2,12 @@
 
 import Link from "next/link";
 import Image from "next/image";
-import { useI18n } from "@/components/providers/TranslationProvider";
+import { useLocale, useTranslations } from "next-intl";
 import { languageDisplayNames } from "@/constants/i18n-config";
 
 export function Footer() {
-  const { messages, lang } = useI18n();
+  const t = useTranslations("text.Footer");
+  const lang = useLocale();
 
   return (
     <footer className="bg-background border-t mt-auto">
@@ -23,8 +24,7 @@ export function Footer() {
               priority
             />
             <p className="text-sm text-muted-foreground">
-              &copy; {new Date().getFullYear()}{" "}
-              {messages.text.Footer.copyrightNotice}
+              &copy; {new Date().getFullYear()} {t("copyrightNotice")}
             </p>
           </div>
 
@@ -37,7 +37,7 @@ export function Footer() {
                   href={`/${lang}/terms`}
                   className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                 >
-                  {messages.text.Footer.termsLabel}
+                  {t("termsLabel")}
                 </Link>
               </li>
               <li>
@@ -45,14 +45,14 @@ export function Footer() {
                   href={`/${lang}/privacy`}
                   className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                 >
-                  {messages.text.Footer.privacyLabel}
+                  {t("privacyLabel")}
                 </Link>
               </li>
 
               {/* Entry for supported languages */}
               <li>
                 <span className="text-sm text-muted-foreground font-bold">
-                  {messages.text.Footer.supportedLanguagesLabel}:
+                  {t("supportedLanguagesLabel")}:
                 </span>
               </li>
               {Object.entries(languageDisplayNames).map(([code, name]) => (

frontend/components/web/Header.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { useState } from "react";
-import { useI18n } from "@/components/providers/TranslationProvider";
+import { useLocale, useTranslations } from "next-intl";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils";
@@ -15,20 +15,21 @@ import ThemeToggle from "@/components/web/ThemeToggle";
  * Features responsive design with mobile menu support
  */
 const Header = () => {
-  const { messages, lang } = useI18n();
+  const t = useTranslations("text.Header");
+  const lang = useLocale();
   const pathname = usePathname();
   const [isOpen, setIsOpen] = useState(false);
 
   // Configuration for navigation items
   const navItems = [
-    { href: `/${lang}`, label: messages.text.Header.homeLabel },
-    { href: `/${lang}/features`, label: messages.text.Header.featuresLabel },
-    { href: `/${lang}/blog`, label: messages.text.Header.blogLabel },
-    { href: `/${lang}/about`, label: messages.text.Header.aboutLabel },
-    { href: `/${lang}/help`, label: messages.text.Header.helpLabel },
-    { href: `/${lang}/faq`, label: messages.text.Header.faqLabel },
-    { href: `/${lang}/terms`, label: messages.text.Header.termsLabel },
-    { href: `/${lang}/privacy`, label: messages.text.Header.privacyLabel },
+    { href: `/${lang}`, label: t("homeLabel") },
+    { href: `/${lang}/features`, label: t("featuresLabel") },
+    { href: `/${lang}/blog`, label: t("blogLabel") },
+    { href: `/${lang}/about`, label: t("aboutLabel") },
+    { href: `/${lang}/help`, label: t("helpLabel") },
+    { href: `/${lang}/faq`, label: t("faqLabel") },
+    { href: `/${lang}/terms`, label: t("termsLabel") },
+    { href: `/${lang}/privacy`, label: t("privacyLabel") },
   ];
 
   // GitHub repository URL