x

apps/spa/src/components/DynamicEditorialTile.tsx

@@ -13,12 +13,27 @@ export default function DynamicEditorialTile({ payload }: DynamicEditorialTilePr
   const {
     imageUrl,
     imagePosition = 'left',
+    imageAspectRatio = 'square',
     buttonLink
   } = payload;
   const title = getLocalizedField(payload.title, lang);
   const description = getLocalizedField(payload.description, lang);
   const buttonText = getLocalizedField(payload.buttonText, lang);
 
+  const getAspectClass = (ratio?: string) => {
+    switch (ratio) {
+      case 'portrait':
+        return 'aspect-[3/4]';
+      case 'tall':
+        return 'aspect-[2/3]';
+      case 'auto':
+        return 'aspect-auto';
+      case 'square':
+      default:
+        return 'aspect-square';
+    }
+  };
+
   const renderTitle = (text: string) => {
     if (!text) return null;
     return text.split('[').map((part, i) => {
@@ -43,7 +58,7 @@ export default function DynamicEditorialTile({ payload }: DynamicEditorialTilePr
       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 ${
+        <div className={`group relative ${getAspectClass(imageAspectRatio)} w-full overflow-hidden rounded-3xl shadow-xl ${
           imagePosition === 'left' ? 'md:order-1' : 'md:order-2'
         }`}>
           <img