x

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

@@ -424,10 +424,18 @@ function BannerSection({ payload, lang }: { payload: Record<string, unknown>, la
   const buttonText = localizedFromRecord(payload, 'buttonText', resolvedLang)
   const imageUrl = typeof payload.imageUrl === 'string' ? payload.imageUrl : '/images/hero.png'
   const linkUrl = typeof payload.linkUrl === 'string' ? payload.linkUrl : ''
+  const focalPoint = typeof payload.focalPoint === 'object' && payload.focalPoint ? (payload.focalPoint as { x: string, y: string }) : undefined
 
   const content = (
     <div className="ui-banner-shell">
-      <Image src={imageUrl} alt={title || 'Banner'} fill unoptimized className="absolute inset-0 h-full w-full object-cover" />
+      <Image
+        src={imageUrl}
+        alt={title || 'Banner'}
+        fill
+        unoptimized
+        className="absolute inset-0 h-full w-full object-cover"
+        style={{ objectPosition: focalPoint ? `${focalPoint.x} ${focalPoint.y}` : undefined }}
+      />
       <div className="ui-banner-overlay" />
       <div className="ui-banner-content">
         {title && <h2 className="text-3xl font-semibold text-brand-primary drop-shadow-md md:text-5xl">{title}</h2>}