@deriv-web-design/ui 0.1.31 → 0.1.32

package/components.manifest.json

@@ -2587,6 +2587,11 @@
           "required": true,
           "description": "Main heading"
         },
+        "trustpilot": {
+          "type": "HeroTrustpilotProps",
+          "required": false,
+          "description": "Opt-in Trustpilot band pinned to the hero's bottom edge, as on the deriv.com and deriv.com/partners homepage heroes (`home-hero_trustpilot-wrapper`). A 56px strip showing the star rating, \"Deriv scores X out of 5 based on N reviews\" (hidden below 768px) and the Trustpilot wordmark, all linking to the Trustpilot profile. Omit it and the hero renders exactly as before — nothing is added to the DOM or CSS cascade."
+        },
         "variant": {
           "type": "HeroVariant",
           "required": true,

package/dist/index.css

@@ -2847,6 +2847,17 @@
   --hero-padding-top-mobile: var(--spacing-80);
   --hero-padding-top-tablet: var(--spacing-96);
   --hero-padding-top-desktop: var(--spacing-112);
+  --hero-trustpilot-height: var(--spacing-56);
+  --hero-trustpilot-bg: var(--hero-dark-bg);
+  --hero-trustpilot-text: var(--hero-text-light);
+  --hero-trustpilot-gap: var(--spacing-16);
+  --hero-trustpilot-gap-tablet: var(--spacing-24);
+  --hero-trustpilot-focus-ring: var(--border-focus);
+  --hero-trustpilot-star-fill: #00b67a;
+  --hero-trustpilot-star-empty: var(--color-opacity-white-24);
+  --hero-trustpilot-star-glyph: var(--color-slate-50);
+  --hero-trustpilot-logo-star: #04da8d;
+  --hero-trustpilot-logo-star-shadow: #005128;
 }
 .hero {
   position: relative;
@@ -3348,6 +3359,88 @@
     max-width: 220px;
   }
 }
+.hero__trustpilot {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: var(--hero-trustpilot-height);
+  z-index: 4;
+  background-color: var(--hero-trustpilot-bg);
+}
+.hero__trustpilot-link {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--hero-trustpilot-gap);
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0 var(--spacing-16);
+  color: var(--hero-trustpilot-text);
+  text-decoration: none;
+  font-size: var(--hero-body-size);
+  line-height: var(--hero-body-lh);
+  font-weight: var(--typography-body-md-font-weight);
+}
+.hero__trustpilot-link:focus-visible {
+  outline: 2px solid var(--hero-trustpilot-focus-ring);
+  outline-offset: -4px;
+}
+.hero__trustpilot-stars,
+.hero__trustpilot-logo {
+  display: block;
+  flex-shrink: 0;
+  height: 24px;
+  width: auto;
+}
+.hero__trustpilot-star-empty {
+  fill: var(--hero-trustpilot-star-empty);
+}
+.hero__trustpilot-star-fill {
+  fill: var(--hero-trustpilot-star-fill);
+}
+.hero__trustpilot-star-glyph {
+  fill: var(--hero-trustpilot-star-glyph);
+}
+.hero__trustpilot-logo-text {
+  fill: currentColor;
+}
+.hero__trustpilot-logo-star {
+  fill: var(--hero-trustpilot-logo-star);
+}
+.hero__trustpilot-logo-star-shadow {
+  fill: var(--hero-trustpilot-logo-star-shadow);
+}
+.hero__trustpilot-text {
+  display: none;
+  white-space: nowrap;
+}
+.hero--has-trustpilot.hero--split .hero__inner {
+  padding-bottom: calc(var(--spacing-40) + var(--hero-trustpilot-height));
+}
+.hero--has-trustpilot.hero--centered .hero__content,
+.hero--has-trustpilot.hero--showcase .hero__content {
+  padding-bottom: calc(var(--spacing-48) + var(--hero-trustpilot-height));
+}
+@media (min-width: 768px) {
+  .hero__trustpilot-link {
+    gap: var(--hero-trustpilot-gap-tablet);
+    padding: 0 var(--spacing-24);
+  }
+  .hero__trustpilot-text {
+    display: inline;
+  }
+  .hero--has-trustpilot.hero--split .hero__inner {
+    padding-bottom: calc(var(--spacing-40) + var(--hero-trustpilot-height));
+  }
+}
+@media (min-width: 992px) {
+  .hero--has-trustpilot.hero--split .hero__inner {
+    padding-bottom: var(--hero-trustpilot-height);
+  }
+}
 
 /* templates/Header/Header.css */
 :root {