@deriv-web-design/ui 0.1.9 → 0.1.11

package/block-registry.json

@@ -2836,7 +2836,8 @@
       "deriv",
       "dark",
       "search",
-      "help-centre"
+      "help-centre",
+      "navbar"
     ],
     "sectionType": "header",
     "global": false,
@@ -2851,7 +2852,8 @@
       "secondaryButton",
       "leftVisual",
       "rightVisual",
-      "search"
+      "search",
+      "underNavbar"
     ],
     "variants": [
       "visuals",
@@ -2878,7 +2880,8 @@
       "secondaryButton": true,
       "eyebrow": true,
       "parallax": true,
-      "search": true
+      "search": true,
+      "navbarClearance": true
     },
     "imageRoles": [
       "left-visual",
@@ -2960,6 +2963,12 @@
         "required": true,
         "maxLength": 80
       },
+      "underNavbar": {
+        "type": "boolean",
+        "required": false,
+        "description": "Set true when the fixed Navbar sits above this header (header is the first section on the page). Reserves top clearance equal to the navbar's footprint so the centred title does not slide under the fixed pill. Defaults to false.",
+        "default": false
+      },
       "variant": {
         "type": "string",
         "required": true,
@@ -3409,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",
@@ -3491,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

@@ -2014,6 +2014,12 @@
           "required": true,
           "description": "Main heading"
         },
+        "underNavbar": {
+          "type": "boolean",
+          "required": false,
+          "description": "Set to `true` when the fixed `Navbar` is rendered above this header (it is the first section on the page). Reserves top clearance equal to the navbar's footprint so the vertically-centred title never slides under the fixed pill. Defaults to `false` — leave it off when there is no navbar above the header.",
+          "default": false
+        },
         "variant": {
           "type": "HeaderVariant",
           "required": true,
@@ -2284,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,7 +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-padding-top-desktop: var(--spacing-96);
+  --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);
@@ -2909,6 +2912,7 @@
   gap: var(--spacing-24);
 }
 .hero--split {
+  background-position: left center;
   animation: hero-split-shrink linear both;
   animation-timeline: view();
   animation-range: exit 0% exit 40%;
@@ -2978,9 +2982,21 @@
   height: 100%;
   display: block;
 }
+.hero--split .hero__floating-image {
+  display: none;
+  pointer-events: none;
+}
+.hero--split .hero__text {
+  gap: 0;
+}
 .hero--split .hero__subtitle {
-  font-size: var(--typography-h4-font-size);
-  line-height: var(--typography-h4-line-height);
+  font-size: var(--typography-h5-font-size);
+  line-height: var(--typography-h5-line-height);
+  font-weight: var(--typography-h5-font-weight);
+}
+.hero--split .hero__description {
+  margin-top: var(--spacing-16);
+  opacity: 1;
 }
 .hero--split .hero__buttons {
   align-items: stretch;
@@ -3206,51 +3222,59 @@
   }
   .hero--split .hero__inner {
     max-width: var(--content-width-1280);
-    padding-top: var(--hero-split-padding-top-desktop);
-    padding-bottom: var(--spacing-96);
+    padding-top: 0;
+    padding-bottom: 0;
     padding-left: var(--spacing-32);
     padding-right: var(--spacing-32);
     height: 100vh;
+    min-height: var(--hero-split-min-height);
     justify-content: center;
     align-items: flex-start;
   }
   .hero--split .hero__content {
     flex-direction: column;
-    gap: var(--spacing-32);
+    gap: var(--spacing-24);
     max-width: 600px;
   }
   .hero--split .hero__left {
     width: 100%;
   }
   .hero--split .hero__body {
-    gap: var(--spacing-32);
-  }
-  .hero--split .hero__subtitle {
-    line-height: var(--typography-h5-line-height);
+    gap: var(--spacing-24);
   }
   .hero--split .hero__image-slot {
     position: absolute;
-    top: var(--spacing-72);
-    right: auto;
-    left: 50%;
+    inset: auto -4% -14% auto;
     transform: none;
-    z-index: 4;
+    z-index: 1;
     width: 50%;
-    height: calc(100% - 5px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    height: 100%;
+    display: block;
     overflow: visible;
     pointer-events: none;
     max-width: none;
   }
   .hero--split .hero__image-slot img {
     height: 100%;
-    width: auto;
+    width: 100%;
     max-height: none;
     max-width: none;
     object-fit: contain;
-    object-position: center;
+    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;
@@ -3261,10 +3285,14 @@
   .hero--split .hero__overlay {
     background:
       linear-gradient(
-        to right,
-        var(--hero-dark-bg) 0%,
-        var(--color-opacity-slate-88) 40%,
-        var(--color-opacity-slate-24) 100%);
+        180deg,
+        rgba(0, 0, 0, 0.4) 0%,
+        rgba(255, 255, 255, 0) 12%),
+      linear-gradient(
+        84.29deg,
+        rgba(0, 0, 0, 0.2) 22%,
+        rgba(143, 143, 143, 0.04) 84%,
+        rgba(0, 0, 0, 0) 100%);
   }
   .hero--centered .hero__inner {
     padding-top: var(--hero-padding-top-desktop);
@@ -3318,6 +3346,8 @@
   --header-text-light: var(--color-slate-50);
   --header-dark-min-height: 420px;
   --header-dark-min-height-desktop: 460px;
+  --header-navbar-clearance: 0px;
+  --header-light-min-height: 540px;
   --header-subtitle-size: var(--typography-body-md-font-size);
   --header-subtitle-lh: var(--typography-body-md-line-height);
   --header-subtitle-weight: var(--font-weight-semi-bold);
@@ -3333,10 +3363,13 @@
   box-sizing: border-box;
   overflow: hidden;
   background-color: var(--header-light-bg);
-  min-height: 540px;
+  min-height: calc(var(--header-light-min-height) + var(--header-navbar-clearance));
   display: flex;
   align-items: center;
 }
+.header--under-navbar {
+  --header-navbar-clearance: var(--navbar-height, 4rem);
+}
 .header__grid {
   position: absolute;
   inset: 0;
@@ -3372,12 +3405,12 @@
   max-width: var(--content-width-1280);
   margin: 0 auto;
   box-sizing: border-box;
-  padding: var(--spacing-24) var(--spacing-16);
+  padding: calc(var(--spacing-24) + var(--header-navbar-clearance)) var(--spacing-16) var(--spacing-24);
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
-  min-height: 540px;
+  min-height: calc(var(--header-light-min-height) + var(--header-navbar-clearance));
 }
 .header__content {
   display: flex;
@@ -3463,11 +3496,11 @@
 .header--dark,
 .header--dark-search {
   background-color: var(--header-dark-bg);
-  min-height: var(--header-dark-min-height);
+  min-height: calc(var(--header-dark-min-height) + var(--header-navbar-clearance));
 }
 .header--dark .header__inner,
 .header--dark-search .header__inner {
-  min-height: var(--header-dark-min-height);
+  min-height: calc(var(--header-dark-min-height) + var(--header-navbar-clearance));
 }
 .header--dark .header__grid,
 .header--dark-search .header__grid {
@@ -3521,7 +3554,7 @@
 }
 @media (min-width: 768px) {
   .header__inner {
-    padding: var(--spacing-40) var(--spacing-24);
+    padding: calc(var(--spacing-40) + var(--header-navbar-clearance)) var(--spacing-24) var(--spacing-40);
     align-items: center;
   }
   .header__content {
@@ -3539,8 +3572,11 @@
   }
 }
 @media (min-width: 992px) {
+  .header--under-navbar {
+    --header-navbar-clearance: calc(var(--navbar-height, 4rem) + var(--spacing-16) * 2);
+  }
   .header__inner {
-    padding: var(--spacing-48) var(--spacing-32);
+    padding: calc(var(--spacing-48) + var(--header-navbar-clearance)) var(--spacing-32) var(--spacing-48);
     position: relative;
   }
   .header__content {
@@ -3551,7 +3587,7 @@
   .header--dark-search,
   .header--dark .header__inner,
   .header--dark-search .header__inner {
-    min-height: var(--header-dark-min-height-desktop);
+    min-height: calc(var(--header-dark-min-height-desktop) + var(--header-navbar-clearance));
   }
   .header__buttons {
     flex-direction: row;