x

apps/spa/src/components/DynamicHeroArticle.tsx

@@ -1,8 +1,13 @@
+import type { HeroArticlePayload } from '@homaroma/types';
 import { useTranslation } from 'react-i18next';
 import { getLocalizedField } from '../utils/localization';
 
 interface DynamicHeroArticleProps {
-  payload: any;
+  payload: HeroArticlePayload & {
+    imageUrl?: string;
+    date?: string;
+    category?: string | { [key: string]: string };
+  };
 }
 
 export default function DynamicHeroArticle({ payload }: DynamicHeroArticleProps) {
@@ -16,29 +21,29 @@ export default function DynamicHeroArticle({ payload }: DynamicHeroArticleProps)
   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">
+    <section className="ui-hero-shell min-h-[60vh] md:min-h-[80vh]">
       {imageUrl && (
         <div className="absolute inset-0 z-0">
           <img src={imageUrl} alt={title || 'Article Hero'} className="w-full h-full object-cover" />
-          <div className="absolute inset-0 bg-black/40" />
+          <div className="ui-hero-overlay" />
         </div>
       )}
-      <div className="relative z-10 text-center max-w-4xl px-6 text-white">
+      <div className="ui-hero-content text-white">
         {category && (
-          <span className="text-sm uppercase tracking-widest font-bold mb-4 block text-spa-gold">
+          <span className="mb-4 block text-sm font-bold uppercase tracking-widest text-spa-gold">
             {category}
           </span>
         )}
-        <h1 className="text-4xl md:text-6xl font-serif mb-6 leading-tight">
+        <h1 className="ui-hero-title mb-6">
           {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">
+          <p className="mx-auto mb-8 max-w-2xl text-lg font-light opacity-90 md:text-xl">
             {subtitle}
           </p>
         )}
         {(author || date) && (
-          <div className="text-sm font-medium tracking-wide uppercase opacity-80 flex items-center justify-center gap-4">
+          <div className="flex items-center justify-center gap-4 text-sm font-medium uppercase tracking-wide opacity-80">
             {author && <span>{t('newsletter.byAuthor', { author })}</span>}
             {author && date && <span>•</span>}
             {date && <span>{date}</span>}