feat(cms): implement multi-language support across frontend and admin UI

apps/spa/src/components/DynamicHeroArticle.tsx

@@ -1,9 +1,19 @@
+import { useTranslation } from 'react-i18next';
+import { getLocalizedField } from '../utils/localization';
+
 interface DynamicHeroArticleProps {
   payload: any;
 }
 
 export default function DynamicHeroArticle({ payload }: DynamicHeroArticleProps) {
-  const { title, subtitle, imageUrl, author, date, category } = payload || {};
+  const { t, i18n } = useTranslation();
+  const lang = i18n.language;
+  const p = payload || {};
+  const { imageUrl, date } = p;
+  const title = getLocalizedField(p.title, lang);
+  const subtitle = getLocalizedField(p.subtitle, lang);
+  const author = getLocalizedField(p.author, lang);
+  const category = getLocalizedField(p.category, lang);
 
   return (
     <section className="relative w-full min-h-[60vh] md:min-h-[80vh] flex items-center justify-center bg-spa-sage overflow-hidden">
@@ -20,7 +30,7 @@ export default function DynamicHeroArticle({ payload }: DynamicHeroArticleProps)
           </span>
         )}
         <h1 className="text-4xl md:text-6xl font-serif mb-6 leading-tight">
-          {title || 'Scent Guide Article'}
+          {title || t('newsletter.articleDefaultTitle', 'Scent Guide Article')}
         </h1>
         {subtitle && (
           <p className="text-lg md:text-xl font-light opacity-90 max-w-2xl mx-auto mb-8">
@@ -29,7 +39,7 @@ export default function DynamicHeroArticle({ payload }: DynamicHeroArticleProps)
         )}
         {(author || date) && (
           <div className="text-sm font-medium tracking-wide uppercase opacity-80 flex items-center justify-center gap-4">
-            {author && <span>By {author}</span>}
+            {author && <span>{t('newsletter.byAuthor', { author })}</span>}
             {author && date && <span>•</span>}
             {date && <span>{date}</span>}
           </div>