78 lines
3.0 KiB
TypeScript
78 lines
3.0 KiB
TypeScript
import { Link } from 'react-router-dom';
|
|
import type { HeroSectionPayload } from '@homaroma/types';
|
|
|
|
interface DynamicHeroProps {
|
|
payload: HeroSectionPayload;
|
|
}
|
|
|
|
export default function DynamicHero({ payload }: DynamicHeroProps) {
|
|
const { tagline, title, description, imageUrl, buttonText, buttonLink } = payload;
|
|
|
|
const renderTitle = (text: string) => {
|
|
if (!text) return null;
|
|
return text.split('[').map((part, i) => {
|
|
if (part.includes(']')) {
|
|
const [accent, rest] = part.split(']');
|
|
return (
|
|
<span key={i}>
|
|
<span className="text-spa-gold font-medium italic">
|
|
{accent}
|
|
</span>
|
|
{rest}
|
|
</span>
|
|
);
|
|
}
|
|
return <span key={i}>{part}</span>;
|
|
});
|
|
};
|
|
|
|
return (
|
|
<section className="relative w-full min-h-[90vh] md:min-h-0 md:aspect-[21/9] flex items-center justify-center overflow-hidden bg-night-900">
|
|
<div className="absolute inset-0 z-0">
|
|
<img
|
|
src={imageUrl || "/images/hero.png"}
|
|
className="w-full h-full object-cover scale-[1.02]"
|
|
alt="Hero Background"
|
|
onError={(e) => {
|
|
(e.target as HTMLImageElement).style.display = 'none';
|
|
}}
|
|
/>
|
|
{/* Dark gradient overlay for premium vibe */}
|
|
<div className="absolute inset-0 bg-neutral-900/40"></div>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-neutral-900/90 via-neutral-900/10 to-neutral-900/30"></div>
|
|
</div>
|
|
|
|
<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"}
|
|
</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>
|
|
</>
|
|
)}
|
|
</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}
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-6 items-center justify-center">
|
|
<Link
|
|
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"}
|
|
</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
|
|
<span className="group-hover:translate-x-1 transition-transform">→</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|