Merge pull request #16598 from overleaf/ds-business-page-redesign

This adds the sticky tags under the hero section image

GitOrigin-RevId: 918ac369d28c2128e13106a65a0c04b23af9e066

services/web/frontend/stylesheets/app/website-redesign.less

@@ -249,6 +249,50 @@
     }
   }
 
+  .bg-vivid-tangerine {
+    background-color: var(--vivid-tangerine);
+  }
+  .bg-mint-green {
+    background-color: var(--mint-green);
+  }
+  .bg-light-pastel-purple {
+    background-color: var(--light-pastel-purple);
+  }
+
+  .sticky-tags-container {
+    margin-top: -20px;
+    .sticky-tag {
+      padding: 6px 10px;
+      width: fit-content;
+      font-size: 1.8rem;
+      font-weight: 400;
+      font-family: 'DM Mono', monospace;
+      font-feature-settings: 'ss05';
+      border-radius: 10px;
+      color: black;
+      position: absolute;
+    }
+
+    .tag-top {
+      transform: rotate(4.88deg);
+      right: 40px;
+      top: -10px;
+      z-index: 1;
+    }
+    .tag-middle {
+      transform: rotate(0.31deg);
+      right: 60px;
+      top: 45px;
+      z-index: 2;
+    }
+    .tag-bottom {
+      transform: rotate(-5.84deg);
+      right: 20px;
+      top: 98px;
+      z-index: 1;
+    }
+  }
+
   .top-image-cards {
     .top-image-card {
       > img.img-responsive {

services/web/frontend/stylesheets/variables/colors.less

@@ -94,6 +94,8 @@
 
 // == Website Redesign ==
 @emerald-green: #098842;
+@vivid-tangerine: #f1a695;
+@light-pastel-purple: #b199c8;
 @mint-green: #80cb9c;
 @deep-green: #0f2715;
 @sapphire-blue: #4354a3;

services/web/frontend/stylesheets/variables/css-variables.less

@@ -83,6 +83,8 @@
   // website-redesign
   --emerald-green: @emerald-green;
   --mint-green: @mint-green;
+  --vivid-tangerine: @vivid-tangerine;
+  --light-pastel-purple: @light-pastel-purple;
   --deep-green: @deep-green;
   --sapphire-blue: @sapphire-blue;
   --sapphire-blue-dark: @sapphire-blue-dark;