@deriv-web-design/ui 0.1.10 → 0.1.12

package/block-registry.json

@@ -3418,7 +3418,7 @@
     "name": "Hero",
     "component": "Hero",
     "category": "hero",
-    "description": "Landing hero with title, description and CTA buttons. Three layouts: split (right-side image), centered (background image), showcase (product + floating images).",
+    "description": "Landing hero with title, description and CTA buttons. Three layouts: split (right-side image + optional device mockup behind it), centered (background image), showcase (product + floating images).",
     "purpose": "The primary hero section used to introduce a page with a strong title, supporting description, primary call-to-action, and optional secondary action. Exposed as a single `Hero` component with a required `variant` prop selecting one of three layouts: `split` (dark background, left-aligned text, right-side hero image), `centered` (full background image, center-aligned text), or `showcase` (dark background with a large product image and a smaller floating image below the buttons). This block is designed to be the first visible section of a landing page.",
     "keywords": [
       "hero",
@@ -3500,7 +3500,11 @@
       "floatingImage": {
         "type": "image",
         "required": false,
-        "description": "Smaller floating image below productImage in the Showcase variant. Accepts a ReactNode in code; page builders should pass an image URL string."
+        "supportedVariants": [
+          "split",
+          "showcase"
+        ],
+        "description": "Secondary foreground image. In Showcase it sits below productImage, cropped to 1:1. In Split it is a small layer anchored to the hero's lower inline-end, painted behind heroImage and hidden below 992px; portrait assets keep their natural aspect ratio. Accepts a ReactNode in code; page builders should pass an image URL string."
       },
       "heroImage": {
         "type": "image",

package/components.manifest.json

@@ -2290,7 +2290,7 @@
         "floatingImage": {
           "type": "ReactNode",
           "required": false,
-          "description": "Smaller floating image shown below the productImage in the Showcase variant. Accepts a ReactNode or image URL string."
+          "description": "Secondary foreground image. Accepts a ReactNode or image URL string. In the Showcase variant it sits below `productImage`, cropped to a 1:1 box. In the Split variant it is a small layer anchored to the hero's lower inline-end and painted behind `heroImage` so the subject overlaps it; it keeps its natural aspect ratio (no crop) and is hidden below 992px."
         },
         "heroImage": {
           "type": "ReactNode",

package/dist/index.css

@@ -2834,8 +2834,10 @@
   --hero-body-lh: var(--typography-body-md-line-height);
   --hero-split-padding-top-mobile: var(--spacing-80);
   --hero-split-padding-top-tablet: var(--spacing-96);
-  --hero-split-radius: 1.5rem;
   --hero-split-min-height: 35.25rem;
+  --hero-split-floating-width: 16%;
+  --hero-split-floating-inset-inline-end: 28%;
+  --hero-split-floating-inset-bottom: 17%;
   --hero-shrink-radius: 3.5rem;
   --hero-padding-top-mobile: var(--spacing-80);
   --hero-padding-top-tablet: var(--spacing-96);
@@ -2911,17 +2913,19 @@
 }
 .hero--split {
   background-position: left center;
-  border-bottom-left-radius: var(--hero-split-radius);
-  border-bottom-right-radius: var(--hero-split-radius);
   animation: hero-split-shrink linear both;
   animation-timeline: view();
   animation-range: exit 0% exit 40%;
 }
 @keyframes hero-split-shrink {
   0% {
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
     scale: 1;
   }
   100% {
+    border-bottom-left-radius: var(--hero-shrink-radius);
+    border-bottom-right-radius: var(--hero-shrink-radius);
     scale: 0.94;
   }
 }
@@ -2978,6 +2982,10 @@
   height: 100%;
   display: block;
 }
+.hero--split .hero__floating-image {
+  display: none;
+  pointer-events: none;
+}
 .hero--split .hero__text {
   gap: 0;
 }
@@ -3212,9 +3220,6 @@
   .hero__inner {
     padding: var(--spacing-48) var(--spacing-32);
   }
-  .hero--split {
-    --hero-split-radius: 4rem;
-  }
   .hero--split .hero__inner {
     max-width: var(--content-width-1280);
     padding-top: 0;
@@ -3257,6 +3262,20 @@
     object-fit: contain;
     object-position: 40% 100%;
   }
+  .hero--split .hero__floating-image {
+    display: block;
+    position: absolute;
+    width: var(--hero-split-floating-width);
+    inset-inline-end: var(--hero-split-floating-inset-inline-end);
+    bottom: var(--hero-split-floating-inset-bottom);
+    z-index: 1;
+  }
+  .hero--split .hero__floating-image img,
+  .hero--split .hero__floating-image > *:not(img) {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
   .hero--split .hero__buttons {
     flex-direction: row;
     align-items: center;