46 lines
1.9 KiB
TypeScript
46 lines
1.9 KiB
TypeScript
interface DynamicScentNotesBreakdownProps {
|
|
payload: any;
|
|
}
|
|
|
|
export default function DynamicScentNotesBreakdown({ payload }: DynamicScentNotesBreakdownProps) {
|
|
const { title, description, topNotes, heartNotes, baseNotes } = payload || {};
|
|
|
|
return (
|
|
<section className="py-20 px-6 bg-spa-light">
|
|
<div className="max-w-5xl mx-auto text-center">
|
|
<h2 className="text-3xl md:text-5xl font-serif text-spa-forest mb-6">
|
|
{title || 'Scent Notes'}
|
|
</h2>
|
|
{description && (
|
|
<p className="text-lg text-spa-stone/80 max-w-2xl mx-auto mb-16">
|
|
{description}
|
|
</p>
|
|
)}
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<div className="p-8 bg-white rounded-2xl shadow-sm border border-spa-stone/10">
|
|
<h3 className="text-xl font-bold uppercase tracking-widest text-spa-forest mb-4">Top Notes</h3>
|
|
<p className="text-spa-stone font-light leading-relaxed">
|
|
{topNotes || 'The initial, lighter smells of the fragrance.'}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="p-8 bg-white rounded-2xl shadow-sm border border-spa-stone/10">
|
|
<h3 className="text-xl font-bold uppercase tracking-widest text-spa-forest mb-4">Heart Notes</h3>
|
|
<p className="text-spa-stone font-light leading-relaxed">
|
|
{heartNotes || 'The core of the fragrance, emerging just after the top notes.'}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="p-8 bg-white rounded-2xl shadow-sm border border-spa-stone/10">
|
|
<h3 className="text-xl font-bold uppercase tracking-widest text-spa-forest mb-4">Base Notes</h3>
|
|
<p className="text-spa-stone font-light leading-relaxed">
|
|
{baseNotes || 'The deepest, richest scents that linger the longest.'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|