x

apps/spa/src/components/DynamicHeroArticle.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+interface DynamicHeroArticleProps {
+  payload: any;
+}
+
+export default function DynamicHeroArticle({ payload }: DynamicHeroArticleProps) {
+  const { title, subtitle, imageUrl, author, date, category } = payload || {};
+
+  return (
+    <section className="relative w-full min-h-[60vh] md:min-h-[80vh] flex items-center justify-center bg-spa-sage overflow-hidden">
+      {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>
+      )}
+      <div className="relative z-10 text-center max-w-4xl px-6 text-white">
+        {category && (
+          <span className="text-sm uppercase tracking-widest font-bold mb-4 block text-spa-gold">
+            {category}
+          </span>
+        )}
+        <h1 className="text-4xl md:text-6xl font-serif mb-6 leading-tight">
+          {title || 'Scent Guide Article'}
+        </h1>
+        {subtitle && (
+          <p className="text-lg md:text-xl font-light opacity-90 max-w-2xl mx-auto mb-8">
+            {subtitle}
+          </p>
+        )}
+        {(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 && date && <span>•</span>}
+            {date && <span>{date}</span>}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}