x

apps/spa/src/components/DynamicEditorialTile.tsx

@@ -14,8 +14,8 @@ export default function DynamicEditorialTile({ payload }: DynamicEditorialTilePr
     imageUrl,
     imagePosition = 'left',
     buttonLink,
-    backgroundColor = '#FDFDF9', // Default to spa-light
-    textColor = '#1F3D2D' // Default to spa-forest
+    backgroundColor = '#FDFDF9',
+    textColor = '#1F3D2D'
   } = payload;
   const title = getLocalizedField(payload.title, lang);
   const description = getLocalizedField(payload.description, lang);
@@ -40,13 +40,12 @@ export default function DynamicEditorialTile({ payload }: DynamicEditorialTilePr
   };
 
   return (
-    <section 
-      className="w-full overflow-hidden py-16 md:py-24 px-6 md:px-16"
+    <section
+      className="ui-section-band w-full overflow-hidden"
       style={{ backgroundColor, color: textColor }}
     >
-      <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-20 items-center">
-        {/* Image Column */}
-        <div className={`w-full overflow-hidden rounded-3xl shadow-xl aspect-square relative group ${
+      <div className="ui-section-inner grid grid-cols-1 items-center gap-12 md:grid-cols-2 md:gap-20">
+        <div className={`group relative aspect-square w-full overflow-hidden rounded-3xl shadow-xl ${
           imagePosition === 'left' ? 'md:order-1' : 'md:order-2'
         }`}>
           <img 
@@ -57,26 +56,24 @@ export default function DynamicEditorialTile({ payload }: DynamicEditorialTilePr
               (e.target as HTMLImageElement).style.display = 'none';
             }}
           />
-          {/* Subtle overlay */}
           <div className="absolute inset-0 bg-neutral-900/5 mix-blend-overlay"></div>
         </div>
 
-        {/* Content Column */}
-        <div className={`space-y-6 md:space-y-8 flex flex-col justify-center ${
+        <div className={`flex flex-col justify-center space-y-6 md:space-y-8 ${
           imagePosition === 'left' ? 'md:order-2 md:pl-8' : 'md:order-1 md:pr-8'
         }`}>
-          <h2 className="text-3xl md:text-5xl font-light leading-tight tracking-wide font-serif">
+          <h2 className="font-serif text-3xl font-light leading-tight tracking-wide md:text-5xl">
             {renderTitle(title) || title}
           </h2>
           <div className="w-12 h-[1px] bg-spa-gold"></div>
-          <p className="text-sm md:text-base font-light leading-relaxed opacity-90 whitespace-pre-line">
+          <p className="whitespace-pre-line text-sm font-light leading-relaxed opacity-90 md:text-base">
             {description}
           </p>
           {buttonText && buttonLink && (
             <div className="pt-4">
               <Link
                 to={buttonLink}
-                className="inline-block px-8 py-3.5 border border-current rounded-full font-bold uppercase tracking-widest text-xs hover:bg-spa-gold hover:border-spa-gold hover:text-white transition-all duration-300"
+                className="ui-chip border-current px-8 py-3.5 hover:bg-spa-gold hover:border-spa-gold hover:text-white"
               >
                 {buttonText}
               </Link>