x

apps/website/src/components/dynamic/DynamicPageRenderer.tsx

@@ -893,14 +893,29 @@ function EditorialTileSection({ payload, lang }: { payload: Record<string, unkno
   const buttonLink = typeof payload.buttonLink === 'string' ? payload.buttonLink : ''
   const imageUrl = typeof payload.imageUrl === 'string' ? payload.imageUrl : ''
   const imagePosition = payload.imagePosition === 'right' ? 'right' : 'left'
+  const imageAspectRatio = typeof payload.imageAspectRatio === 'string' ? payload.imageAspectRatio : 'square'
   const backgroundColor = typeof payload.backgroundColor === 'string' ? payload.backgroundColor : undefined
   const textColor = typeof payload.textColor === 'string' ? payload.textColor : undefined
 
+  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'
+    }
+  }
+
   return (
     <section className="overflow-hidden bg-surface-page ui-section-band" style={{ backgroundColor, color: textColor }}>
       <div className="mx-auto grid max-w-7xl gap-12 md:grid-cols-2 md:items-center">
         {imageUrl && (
-          <div className={`group relative aspect-square overflow-hidden rounded-3xl shadow-card ${imagePosition === 'left' ? 'md:order-1' : 'md:order-2'}`}>
+          <div className={`group relative ${getAspectClass(imageAspectRatio)} overflow-hidden rounded-3xl shadow-card ${imagePosition === 'left' ? 'md:order-1' : 'md:order-2'}`}>
             <Image
               src={imageUrl}
               alt={title || 'Editorial'}