x

apps/spa/src/components/DynamicHero.tsx

@@ -182,6 +182,40 @@ export default function DynamicHero({ payload }: DynamicHeroProps) {
   const contentClasses = `${mClasses.content} ${dClasses.content}`;
   const actionsClasses = `${mClasses.actions} ${dClasses.actions}`;
 
+  const overlayStyle = (payload as any).overlayStyle || 'gradient';
+  const overlayOpacity = (payload as any).overlayOpacity !== undefined ? (payload as any).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">
@@ -194,8 +228,8 @@ export default function DynamicHero({ payload }: DynamicHeroProps) {
             (e.target as HTMLImageElement).style.display = 'none';
           }}
         />
-        {/* Dark Gradient Overlay for high readability on both mobile and desktop */}
-        <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} animate-fade-in`}>