x

apps/spa/src/components/DynamicBanner.tsx

@@ -14,6 +14,8 @@ export default function DynamicBanner({ payload }: DynamicBannerProps) {
   const title = getLocalizedField(payload.title, lang);
   const description = getLocalizedField(payload.description, lang);
   const buttonText = getLocalizedField(payload.buttonText, lang);
+  const focalPoint = typeof payload.focalPoint === 'object' && payload.focalPoint ? payload.focalPoint : undefined;
+  const imageStyle = focalPoint ? { objectPosition: `${focalPoint.x} ${focalPoint.y}` } : undefined;
 
   return (
     <section className="ui-section-band bg-pop-bg relative overflow-hidden">
@@ -24,6 +26,7 @@ export default function DynamicBanner({ payload }: DynamicBannerProps) {
               src={imageUrl}
               className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-[1.03]"
               alt={title || "Banner"}
+              style={imageStyle}
             />
             <div className="ui-banner-overlay"></div>
           </div>
@@ -55,6 +58,7 @@ export default function DynamicBanner({ payload }: DynamicBannerProps) {
               src={imageUrl}
               className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-[1.03]"
               alt={title || "Banner"}
+              style={imageStyle}
             />
             <div className="ui-banner-overlay"></div>
           </div>