x

apps/spa/src/components/DynamicScentNotesBreakdown.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+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>
+  );
+}