x

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

@@ -251,6 +251,40 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
   const contentClasses = `${mClasses.content} ${dClasses.content}`
   const actionsClasses = `${mClasses.actions} ${dClasses.actions}`
 
+  const overlayStyle = typeof payload.overlayStyle === 'string' ? payload.overlayStyle : 'gradient'
+  const overlayOpacity = typeof payload.overlayOpacity === 'number' ? payload.overlayOpacity : 45
+
+  const renderOverlay = () => {
+    if (overlayStyle === 'none' || overlayOpacity === 0) {
+      return null
+    }
+
+    const opacityRatio = overlayOpacity / 100
+
+    if (overlayStyle === 'solid') {
+      return (
+        <div
+          className="absolute inset-0 transition-opacity duration-300"
+          style={{ backgroundColor: `rgba(0, 0, 0, ${opacityRatio})` }}
+        />
+      )
+    }
+
+    // Gradient style (default): smooth vertical gradient scaled by opacity
+    const bottomAlpha = Math.min(0.95, opacityRatio * 1.85)
+    const midAlpha = opacityRatio
+    const topAlpha = Math.max(0, opacityRatio * 0.65)
+
+    return (
+      <div
+        className="absolute inset-0 transition-opacity duration-300"
+        style={{
+          background: `linear-gradient(to top, rgba(0, 0, 0, ${bottomAlpha}) 0%, rgba(0, 0, 0, ${midAlpha}) 50%, rgba(0, 0, 0, ${topAlpha}) 100%)`,
+        }}
+      />
+    )
+  }
+
   return (
     <section className="relative w-full min-h-[85vh] sm:min-h-[90vh] md:h-[90vh] md:aspect-[21/9] flex bg-night-950 overflow-hidden">
       <div className="absolute inset-0 w-full h-full z-0">
@@ -262,7 +296,8 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
           className="object-cover md:scale-[1.02]"
           style={{ objectPosition: focalPoint ? `${focalPoint.x} ${focalPoint.y}` : undefined }}
         />
-        <div className="absolute inset-0 bg-gradient-to-t from-black/85 via-black/45 to-black/30 md:bg-black/35" />
+        {/* Dynamic Dark Gradient / Solid Overlay */}
+        {renderOverlay()}
       </div>
       <div className={`relative z-10 w-full min-h-[85vh] sm:min-h-[90vh] md:min-h-full flex flex-col ${wrapperClasses}`}>
         <div className={`w-full max-w-3xl flex flex-col space-y-5 ${contentClasses}`}>