29 lines
1.3 KiB
TypeScript
29 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
|
|
interface DynamicQuoteCalloutProps {
|
|
payload: any;
|
|
}
|
|
|
|
export default function DynamicQuoteCallout({ payload }: DynamicQuoteCalloutProps) {
|
|
const { quote, author, role } = payload || {};
|
|
|
|
return (
|
|
<section className="py-24 px-6 bg-white">
|
|
<div className="max-w-4xl mx-auto text-center">
|
|
<svg className="w-12 h-12 mx-auto text-spa-gold/40 mb-8" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
|
|
</svg>
|
|
<blockquote className="text-2xl md:text-4xl font-serif text-spa-forest italic leading-relaxed mb-8">
|
|
"{quote || 'Fragrance is the invisible, unforgettable, ultimate accessory of fashion.'}"
|
|
</blockquote>
|
|
{(author || role) && (
|
|
<div className="flex flex-col items-center">
|
|
{author && <span className="font-bold uppercase tracking-widest text-spa-stone">{author}</span>}
|
|
{role && <span className="text-sm text-spa-stone/60 mt-1 uppercase tracking-wide">{role}</span>}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|