Merge pull request #17936 from overleaf/mf-pattern-cta-card

[web][website-redesign] Add fading background pattern for CTA cards on website redesigned pages

GitOrigin-RevId: 7836fd5aa980e7e9b36ff10767ec5ef41dd748cd

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

@@ -1,3 +1,5 @@
+@cta-card-bg-color: var(--dark-jungle-green);
+
 .website-redesign {
   // hero section of features, enterprises, and universities will have an image that will overflow the page
   overflow-x: hidden;
@@ -653,7 +655,14 @@
     display: flex;
     justify-content: space-between;
     padding: 64px;
-    background: var(--dark-jungle-green);
+    background-image: linear-gradient(
+        to right,
+        rgba(0, 0, 0, 0.4) 0%,
+        @cta-card-bg-color 20%,
+        @cta-card-bg-color 100%
+      ),
+      url('../../../public/img/website-redesign/overleaf-pattern-purple.png');
+    background-size: cover;
     color: var(--white);
     border-radius: 8px;
 
@@ -686,8 +695,16 @@
     flex-direction: column;
     align-items: center;
     padding: 64px;
-    background: var(--dark-jungle-green);
     color: var(--white);
+    background-image: linear-gradient(
+        to right,
+        rgba(0, 0, 0, 0.4) 0%,
+        @cta-card-bg-color 25%,
+        @cta-card-bg-color 75%,
+        rgba(0, 0, 0, 0.4) 100%
+      ),
+      url('../../../public/img/website-redesign/overleaf-pattern-purple.png');
+    background-size: cover;
     border-radius: 8px;
 
     @media (max-width: @screen-sm-max) {