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

apps/spa/src/components/DynamicHero.tsx

@@ -1,12 +1,20 @@
 import { Link } from 'react-router-dom';
 import type { HeroSectionPayload } from '@homaroma/types';
+import { useTranslation } from 'react-i18next';
+import { getLocalizedField } from '../utils/localization';
 
 interface DynamicHeroProps {
   payload: HeroSectionPayload;
 }
 
 export default function DynamicHero({ payload }: DynamicHeroProps) {
-  const { tagline, title, description, imageUrl, buttonText, buttonLink } = payload;
+  const { t, i18n } = useTranslation();
+  const lang = i18n.language;
+  const { imageUrl, buttonLink } = payload;
+  const tagline = getLocalizedField(payload.tagline, lang);
+  const title = getLocalizedField(payload.title, lang);
+  const description = getLocalizedField(payload.description, lang);
+  const buttonText = getLocalizedField(payload.buttonText, lang);
 
   const renderTitle = (text: string) => {
     if (!text) return null;
@@ -44,14 +52,10 @@ export default function DynamicHero({ payload }: DynamicHeroProps) {
 
       <div className="relative z-10 text-center space-y-6 px-8 animate-fade-in max-w-4xl w-full mx-auto mt-16 md:mt-0">
         <p className="text-spa-sage font-semibold tracking-[0.3em] text-xs md:text-sm uppercase drop-shadow-md">
-          {tagline || "Vibrant Elegance Collection"}
+          {tagline || t('hero.defaultTagline')}
         </p>
         <h1 className="text-5xl md:text-7xl lg:text-8xl font-light text-white leading-tight tracking-wide drop-shadow-md font-serif">
-          {renderTitle(title) || (
-            <>
-              Inhale <span className="text-spa-gold font-medium italic">Serenity</span>
-            </>
-          )}
+          {renderTitle(title) || renderTitle(t('hero.defaultTitle'))}
         </h1>
         <p className="text-spa-light/90 max-w-2xl mx-auto text-lg md:text-xl font-light pt-4 pb-8 drop-shadow-md">
           {description}
@@ -61,13 +65,13 @@ export default function DynamicHero({ payload }: DynamicHeroProps) {
             to={buttonLink || "/shop"}
             className="px-8 py-4 bg-white text-spa-forest rounded-full font-bold uppercase tracking-widest text-sm hover:bg-spa-sage hover:shadow-xl transition-all duration-300"
           >
-            {buttonText || "Explore Collection"}
+            {buttonText || t('hero.exploreCollection')}
           </Link>
           <a
             href="#categories"
             className="px-8 py-4 text-white font-medium uppercase tracking-widest text-sm hover:text-spa-gold flex items-center gap-2 group transition-colors"
           >
-            Learn More 
+            {t('hero.learnMore')} 
             <span className="group-hover:translate-x-1 transition-transform">&rarr;</span>
           </a>
         </div>