x

apps/spa/src/components/DynamicEditorialTile.tsx

@@ -39,7 +39,8 @@ export default function DynamicEditorialTile({ payload }: DynamicEditorialTilePr
 
   return (
     <section
-      className="ui-section-band w-full overflow-hidden bg-pop-bg text-pop-black"
+      className="ui-section-band w-full overflow-hidden"
+      style={{ backgroundColor: payload.backgroundColor, color: payload.textColor }}
     >
       <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 ${
@@ -59,11 +60,11 @@ export default function DynamicEditorialTile({ payload }: DynamicEditorialTilePr
         <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="font-serif text-3xl font-light leading-tight tracking-wide md:text-5xl">
+          <h2 className="font-serif text-3xl font-light leading-tight tracking-wide md:text-5xl" style={{ color: payload.textColor }}>
             {renderTitle(title) || title}
           </h2>
           <div className="w-12 h-[1px] bg-pop-pink"></div>
-          <p className="whitespace-pre-line text-sm font-light leading-relaxed opacity-90 md:text-base">
+          <p className="whitespace-pre-line text-sm font-light leading-relaxed opacity-90 md:text-base" style={{ color: payload.textColor }}>
             {description}
           </p>
           {buttonText && buttonLink && (