x

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

@@ -104,6 +104,7 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
   const buttonText = localizedFromRecord(payload, 'buttonText', resolvedLang)
   const imageUrl = typeof payload.imageUrl === 'string' ? payload.imageUrl : '/images/hero.png'
   const buttonLink = typeof payload.buttonLink === 'string' ? payload.buttonLink : '/shop'
+  const focalPoint = typeof payload.focalPoint === 'object' && payload.focalPoint ? (payload.focalPoint as { x: string, y: string }) : undefined
 
   return (
     <section className="ui-hero-shell">
@@ -113,6 +114,7 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
         fill
         unoptimized
         className="absolute inset-0 h-full w-full scale-[1.02] object-cover"
+        style={{ objectPosition: focalPoint ? `${focalPoint.x} ${focalPoint.y}` : undefined }}
       />
       <div className="relative z-10 mx-auto mt-16 w-full max-w-4xl space-y-6 px-8 text-center md:mt-0">
         <div className="space-y-6">
@@ -213,6 +215,7 @@ function HeroV2Section({ payload, lang }: { payload: Record<string, unknown>, la
   const imageUrl = typeof payload.imageUrl === 'string' ? payload.imageUrl : '/images/hero.png'
   const align = typeof payload.contentAlignment === 'string' ? payload.contentAlignment : 'left'
   const showOrnament = typeof payload.showOrnament === 'boolean' ? payload.showOrnament : true
+  const focalPoint = typeof payload.focalPoint === 'object' && payload.focalPoint ? (payload.focalPoint as { x: string, y: string }) : undefined
 
   // Alignment classes
   const alignClass = align === 'center' ? 'text-center items-center mx-auto' : align === 'right' ? 'text-right items-end ml-auto' : 'text-left items-start'
@@ -226,6 +229,7 @@ function HeroV2Section({ payload, lang }: { payload: Record<string, unknown>, la
           fill
           unoptimized
           className="object-cover"
+          style={{ objectPosition: focalPoint ? `${focalPoint.x} ${focalPoint.y}` : undefined }}
         />
       </div>
       
@@ -668,12 +672,13 @@ function HeroArticleSection({ payload, lang }: { payload: Record<string, unknown
     : typeof payload.publishDate === 'string'
       ? payload.publishDate
       : ''
+  const focalPoint = typeof payload.focalPoint === 'object' && payload.focalPoint ? (payload.focalPoint as { x: string, y: string }) : undefined
 
   return (
     <section className="ui-hero-shell min-h-[60vh] px-6 py-24 text-center md:min-h-[76vh]">
       {imageUrl && (
         <>
-          <Image src={imageUrl} alt={title} fill unoptimized className="absolute inset-0 h-full w-full object-cover" />
+          <Image src={imageUrl} alt={title} fill unoptimized className="absolute inset-0 h-full w-full object-cover" style={{ objectPosition: focalPoint ? `${focalPoint.x} ${focalPoint.y}` : undefined }} />
         </>
       )}
       <div className="relative z-10 mx-auto max-w-4xl space-y-6">