41 lines
1.5 KiB
TypeScript
41 lines
1.5 KiB
TypeScript
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>
|
|
);
|
|
}
|