x

apps/spa/src/components/DynamicQuoteCallout.tsx

@@ -0,0 +1,28 @@
+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>
+  );
+}