x

apps/website/src/components/ProductHeroCarousel.tsx

@@ -21,6 +21,7 @@ function aspectClasses(
     '4/3': 'aspect-[4/3]',
     '1/1': 'aspect-square',
     '21/9': 'aspect-[21/9]',
+    full_screen: 'min-h-[85vh]',
     auto: 'min-h-[22rem]',
   }[mobile ?? '16/9']
 
@@ -32,6 +33,7 @@ function aspectClasses(
     '16/6': 'md:aspect-[16/6]',
     '4/1': 'md:aspect-[4/1]',
     '5/1': 'md:aspect-[5/1]',
+    full_screen: 'md:aspect-auto md:min-h-[90vh]',
     auto: 'md:aspect-auto md:min-h-[30rem]',
   }[desktop ?? '21/7']
 

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

@@ -374,21 +374,74 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
     )
   }
 
+  const aspectRatio = typeof payload.aspectRatio === 'string' ? payload.aspectRatio : undefined
+  const mobileAspectRatio = typeof payload.mobileAspectRatio === 'string' ? payload.mobileAspectRatio : undefined
+  const mobileImageUrl = typeof payload.mobileImageUrl === 'string' && payload.mobileImageUrl ? payload.mobileImageUrl : imageUrl
+  const isFullScreen = !aspectRatio || aspectRatio === 'full_screen'
+
+  const getAspectClass = () => {
+    switch (aspectRatio) {
+      case '21/6': return 'md:aspect-[21/6]'
+      case '21/7': return 'md:aspect-[21/7]'
+      case '21/9': return 'md:aspect-[21/9]'
+      case '16/5': return 'md:aspect-[16/5]'
+      case '16/6': return 'md:aspect-[16/6]'
+      case '4/1': return 'md:aspect-[4/1]'
+      case '5/1': return 'md:aspect-[5/1]'
+      case 'full_screen': return 'md:h-[90vh] md:aspect-[21/9]'
+      default: return 'md:aspect-[21/7]'
+    }
+  }
+
+  const getMobileAspectClass = () => {
+    switch (mobileAspectRatio) {
+      case '16/9': return 'aspect-[16/9]'
+      case '4/3': return 'aspect-[4/3]'
+      case '1/1': return 'aspect-[1/1]'
+      case '21/9': return 'aspect-[21/9]'
+      case 'full_screen': return 'min-h-[85vh]'
+      default: return 'aspect-[16/9]'
+    }
+  }
+
+  const sectionHeightClass = isFullScreen
+    ? 'min-h-[85vh] sm:min-h-[90vh] md:h-[90vh] md:aspect-[21/9]'
+    : `${getMobileAspectClass()} ${getAspectClass()}`
+  const innerHeightClass = isFullScreen
+    ? 'min-h-[85vh] sm:min-h-[90vh] md:min-h-full'
+    : 'h-full justify-center'
+
   return (
-    <section className={`relative w-full min-h-[85vh] sm:min-h-[90vh] md:h-[90vh] md:aspect-[21/9] flex overflow-hidden ${isDarkText ? 'bg-surface-page' : 'bg-night-950'}`}>
+    <section className={`relative w-full ${sectionHeightClass} flex overflow-hidden ${isDarkText ? 'bg-surface-page' : 'bg-night-950'}`}>
       <div className="absolute inset-0 w-full h-full z-0">
-        <Image
-          src={imageUrl}
-          alt={title || ''}
-          fill
-          unoptimized
-          className="object-cover md:scale-[1.02]"
-          style={{ objectPosition: focalPoint ? `${focalPoint.x} ${focalPoint.y}` : undefined }}
-        />
+        {/* Desktop Image */}
+        <div className={`w-full h-full ${mobileImageUrl !== imageUrl ? 'hidden md:block' : ''}`}>
+          <Image
+            src={imageUrl}
+            alt={title || ''}
+            fill
+            unoptimized
+            className="object-cover md:scale-[1.02]"
+            style={{ objectPosition: focalPoint ? `${focalPoint.x} ${focalPoint.y}` : undefined }}
+          />
+        </div>
+        {/* Mobile Image (if provided) */}
+        {mobileImageUrl !== imageUrl && (
+          <div className="block md:hidden w-full h-full relative">
+            <Image
+              src={mobileImageUrl}
+              alt={title || ''}
+              fill
+              unoptimized
+              className="object-cover"
+              style={{ objectPosition: focalPoint ? `${focalPoint.x} ${focalPoint.y}` : undefined }}
+            />
+          </div>
+        )}
         {/* Dynamic Dark / Light Gradient / Solid Overlay */}
         {renderOverlay()}
       </div>
-      <div className={`relative z-10 min-h-[85vh] sm:min-h-[90vh] md:min-h-full flex flex-col ${containerClasses} ${wrapperClasses}`}>
+      <div className={`relative z-10 ${innerHeightClass} flex flex-col ${containerClasses} ${wrapperClasses}`}>
         <div className={`w-full ${textWrapperWidthClass} flex flex-col space-y-5 ${contentClasses}`}>
           {tagline && (
             <p className={`text-xs font-semibold uppercase tracking-[0.3em] drop-shadow-md md:text-sm ${isDarkText ? 'text-brand-primary' : 'text-brand-accent'}`}>