Merge pull request #16085 from overleaf/mf-website-redesign-business

[web] Implement new enterprises/business page

GitOrigin-RevId: 456834604a51cb0a9a5de0c3ac406f33069df9fb

services/web/frontend/fonts/material-symbols.css

@@ -26,3 +26,7 @@
 .material-symbols.material-symbols-rounded {
   font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
 }
+
+.material-symbols-xl {
+  font-size: 56px;
+}

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

@@ -385,6 +385,21 @@
     }
   }
 
+  .security-info {
+    .security-info-first-row {
+      margin-bottom: 32px;
+      @media (max-width: @screen-sm-max) {
+        margin-bottom: 0;
+      }
+    }
+
+    .security-info-item {
+      @media (max-width: @screen-sm-max) {
+        margin-bottom: 16px;
+      }
+    }
+  }
+
   .mono-text {
     font-family: 'DM Mono', monospace;
     color: var(--green-60);
@@ -401,14 +416,17 @@
     }
   }
 
-  .green-link {
-    color: var(--green-60);
-
+  .link-with-arrow {
     i.material-symbols-rounded {
       vertical-align: middle;
       padding-bottom: 3px;
       font-size: 24px;
     }
+  }
+
+  .green-link {
+    .link-with-arrow;
+    color: @green-60;
 
     &:hover {
       color: var(--green-70);
@@ -418,6 +436,11 @@
     }
   }
 
+  .white-link {
+    .link-with-arrow;
+    color: white;
+  }
+
   .btn-blue-gradient {
     background: var(--premium-gradient);
     color: var(--white);
@@ -514,6 +537,10 @@
     margin-top: 24px;
     gap: 16px;
 
+    &.centered-buttons {
+      justify-content: center;
+    }
+
     @media (max-width: @screen-sm-max) {
       flex-direction: column;
       width: 100%;

services/web/public/img/website-redesign/certified-round.svg

@@ -0,0 +1,10 @@
+<svg width="56" height="57" viewBox="0 0 56 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4" y="4.31592" width="48" height="48" rx="24" fill="#BBDBB8"/>
+<rect x="4" y="4.31592" width="48" height="48" rx="24" stroke="#EBF6EA" stroke-width="8"/>
+<mask id="mask0_1294_25630" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="15" y="16" width="25" height="24">
+<rect x="15.833" y="16" width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_1294_25630)">
+<path d="M27.833 27.925L26.133 29.225C26.033 29.3083 25.933 29.3125 25.833 29.2375C25.733 29.1625 25.6997 29.0667 25.733 28.95L26.383 26.85L24.633 25.45C24.5497 25.3667 24.5247 25.2708 24.558 25.1625C24.5913 25.0542 24.6663 25 24.783 25H26.933L27.583 22.95C27.6163 22.8333 27.6997 22.775 27.833 22.775C27.9663 22.775 28.0497 22.8333 28.083 22.95L28.733 25H30.858C30.9747 25 31.0538 25.0542 31.0955 25.1625C31.1372 25.2708 31.1163 25.3667 31.033 25.45L29.258 26.85L29.908 28.95C29.9413 29.0667 29.908 29.1625 29.808 29.2375C29.708 29.3125 29.608 29.3083 29.508 29.225L27.833 27.925ZM27.833 37L23.158 38.55C22.8247 38.6667 22.5205 38.625 22.2455 38.425C21.9705 38.225 21.833 37.9583 21.833 37.625V31.275C21.1997 30.575 20.708 29.775 20.358 28.875C20.008 27.975 19.833 27.0167 19.833 26C19.833 23.7667 20.608 21.875 22.158 20.325C23.708 18.775 25.5997 18 27.833 18C30.0663 18 31.958 18.775 33.508 20.325C35.058 21.875 35.833 23.7667 35.833 26C35.833 27.0167 35.658 27.975 35.308 28.875C34.958 29.775 34.4663 30.575 33.833 31.275V37.625C33.833 37.9583 33.6955 38.225 33.4205 38.425C33.1455 38.625 32.8413 38.6667 32.508 38.55L27.833 37ZM27.833 32C29.4997 32 30.9163 31.4167 32.083 30.25C33.2497 29.0833 33.833 27.6667 33.833 26C33.833 24.3333 33.2497 22.9167 32.083 21.75C30.9163 20.5833 29.4997 20 27.833 20C26.1663 20 24.7497 20.5833 23.583 21.75C22.4163 22.9167 21.833 24.3333 21.833 26C21.833 27.6667 22.4163 29.0833 23.583 30.25C24.7497 31.4167 26.1663 32 27.833 32Z" fill="#138A07"/>
+</g>
+</svg>

services/web/public/img/website-redesign/compliance-round.svg

@@ -0,0 +1,10 @@
+<svg width="56" height="57" viewBox="0 0 56 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4" y="4.31592" width="48" height="48" rx="24" fill="#BBDBB8"/>
+<rect x="4" y="4.31592" width="48" height="48" rx="24" stroke="#EBF6EA" stroke-width="8"/>
+<mask id="mask0_1294_25642" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="16" y="16" width="24" height="24">
+<rect x="16" y="16" width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_1294_25642)">
+<path d="M26.95 28.6999L25.55 27.2999C25.35 27.0999 25.1167 26.9999 24.85 26.9999C24.5833 26.9999 24.35 27.0999 24.15 27.2999C23.95 27.4999 23.85 27.7374 23.85 28.0124C23.85 28.2874 23.95 28.5249 24.15 28.7249L26.25 30.8499C26.45 31.0499 26.6833 31.1499 26.95 31.1499C27.2167 31.1499 27.45 31.0499 27.65 30.8499L31.9 26.5999C32.1 26.3999 32.2 26.1624 32.2 25.8874C32.2 25.6124 32.1 25.3749 31.9 25.1749C31.7 24.9749 31.4625 24.8749 31.1875 24.8749C30.9125 24.8749 30.675 24.9749 30.475 25.1749L26.95 28.6999ZM28 37.8999C27.8833 37.8999 27.775 37.8916 27.675 37.8749C27.575 37.8582 27.475 37.8332 27.375 37.7999C25.125 37.0499 23.3333 35.6624 22 33.6374C20.6667 31.6124 20 29.4332 20 27.0999V22.3749C20 21.9582 20.1208 21.5832 20.3625 21.2499C20.6042 20.9166 20.9167 20.6749 21.3 20.5249L27.3 18.2749C27.5333 18.1916 27.7667 18.1499 28 18.1499C28.2333 18.1499 28.4667 18.1916 28.7 18.2749L34.7 20.5249C35.0833 20.6749 35.3958 20.9166 35.6375 21.2499C35.8792 21.5832 36 21.9582 36 22.3749V27.0999C36 29.4332 35.3333 31.6124 34 33.6374C32.6667 35.6624 30.875 37.0499 28.625 37.7999C28.525 37.8332 28.425 37.8582 28.325 37.8749C28.225 37.8916 28.1167 37.8999 28 37.8999Z" fill="#138A07"/>
+</g>
+</svg>

services/web/public/img/website-redesign/group-round.svg

@@ -0,0 +1,10 @@
+<svg width="56" height="57" viewBox="0 0 56 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4" y="4.31592" width="48" height="48" rx="24" fill="#BBDBB8"/>
+<rect x="4" y="4.31592" width="48" height="48" rx="24" stroke="#EBF6EA" stroke-width="8"/>
+<mask id="mask0_1294_25638" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="15" y="16" width="25" height="24">
+<rect x="15.667" y="16" width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_1294_25638)">
+<path d="M19.667 29.525L22.192 27L19.667 24.475L17.142 27L19.667 29.525ZM33.167 29L35.667 25L38.167 29H33.167ZM27.667 28C26.8337 28 26.1253 27.7083 25.542 27.125C24.9587 26.5417 24.667 25.8333 24.667 25C24.667 24.15 24.9587 23.4375 25.542 22.8625C26.1253 22.2875 26.8337 22 27.667 22C28.517 22 29.2295 22.2875 29.8045 22.8625C30.3795 23.4375 30.667 24.15 30.667 25C30.667 25.8333 30.3795 26.5417 29.8045 27.125C29.2295 27.7083 28.517 28 27.667 28ZM15.667 33V32.425C15.667 31.6917 16.0378 31.1042 16.7795 30.6625C17.5212 30.2208 18.4837 30 19.667 30C19.8837 30 20.092 30.0042 20.292 30.0125C20.492 30.0208 20.6837 30.0417 20.867 30.075C20.6337 30.4083 20.4587 30.7667 20.342 31.15C20.2253 31.5333 20.167 31.9417 20.167 32.375V34H16.667C16.3837 34 16.1462 33.9042 15.9545 33.7125C15.7628 33.5208 15.667 33.2833 15.667 33ZM21.667 33V32.375C21.667 31.2917 22.2212 30.4167 23.3295 29.75C24.4378 29.0833 25.8837 28.75 27.667 28.75C29.467 28.75 30.917 29.0833 32.017 29.75C33.117 30.4167 33.667 31.2917 33.667 32.375V33C33.667 33.2833 33.5712 33.5208 33.3795 33.7125C33.1878 33.9042 32.9503 34 32.667 34H22.667C22.3837 34 22.1462 33.9042 21.9545 33.7125C21.7628 33.5208 21.667 33.2833 21.667 33ZM35.667 30C36.867 30 37.8337 30.2208 38.567 30.6625C39.3003 31.1042 39.667 31.6917 39.667 32.425V33C39.667 33.2833 39.5712 33.5208 39.3795 33.7125C39.1878 33.9042 38.9503 34 38.667 34H35.167V32.375C35.167 31.9417 35.1128 31.5333 35.0045 31.15C34.8962 30.7667 34.7337 30.4083 34.517 30.075C34.7003 30.0417 34.8878 30.0208 35.0795 30.0125C35.2712 30.0042 35.467 30 35.667 30Z" fill="#138A07"/>
+</g>
+</svg>

services/web/public/img/website-redesign/lock-round.svg

@@ -0,0 +1,10 @@
+<svg width="56" height="57" viewBox="0 0 56 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4" y="4.31592" width="48" height="48" rx="24" fill="#BBDBB8"/>
+<rect x="4" y="4.31592" width="48" height="48" rx="24" stroke="#EBF6EA" stroke-width="8"/>
+<mask id="mask0_1294_25634" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="16" y="16" width="25" height="24">
+<rect x="16.333" y="16" width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_1294_25634)">
+<path d="M22.333 38C21.783 38 21.3122 37.8042 20.9205 37.4125C20.5288 37.0208 20.333 36.55 20.333 36V26C20.333 25.45 20.5288 24.9792 20.9205 24.5875C21.3122 24.1958 21.783 24 22.333 24H23.333V22C23.333 20.6167 23.8205 19.4375 24.7955 18.4625C25.7705 17.4875 26.9497 17 28.333 17C29.7163 17 30.8955 17.4875 31.8705 18.4625C32.8455 19.4375 33.333 20.6167 33.333 22V24H34.333C34.883 24 35.3538 24.1958 35.7455 24.5875C36.1372 24.9792 36.333 25.45 36.333 26V36C36.333 36.55 36.1372 37.0208 35.7455 37.4125C35.3538 37.8042 34.883 38 34.333 38H22.333ZM28.333 33C28.883 33 29.3538 32.8042 29.7455 32.4125C30.1372 32.0208 30.333 31.55 30.333 31C30.333 30.45 30.1372 29.9792 29.7455 29.5875C29.3538 29.1958 28.883 29 28.333 29C27.783 29 27.3122 29.1958 26.9205 29.5875C26.5288 29.9792 26.333 30.45 26.333 31C26.333 31.55 26.5288 32.0208 26.9205 32.4125C27.3122 32.8042 27.783 33 28.333 33ZM25.333 24H31.333V22C31.333 21.1667 31.0413 20.4583 30.458 19.875C29.8747 19.2917 29.1663 19 28.333 19C27.4997 19 26.7913 19.2917 26.208 19.875C25.6247 20.4583 25.333 21.1667 25.333 22V24Z" fill="#138A07"/>
+</g>
+</svg>

services/web/public/img/website-redesign/shield-round.svg

@@ -0,0 +1,10 @@
+<svg width="56" height="57" viewBox="0 0 56 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4" y="4.31592" width="48" height="48" rx="24" fill="#BBDBB8"/>
+<rect x="4" y="4.31592" width="48" height="48" rx="24" stroke="#EBF6EA" stroke-width="8"/>
+<mask id="mask0_1294_25626" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="16" y="16" width="24" height="24">
+<rect x="16" y="16" width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_1294_25626)">
+<path d="M28 35.8999C29.6167 35.3999 30.9667 34.4124 32.05 32.9374C33.1333 31.4624 33.7667 29.8166 33.95 27.9999H28V20.1249L22 22.3749V27.5499C22 27.6666 22.0167 27.8166 22.05 27.9999H28V35.8999ZM28 37.8999C27.8833 37.8999 27.775 37.8916 27.675 37.8749C27.575 37.8582 27.475 37.8332 27.375 37.7999C25.125 37.0499 23.3333 35.6624 22 33.6374C20.6667 31.6124 20 29.4332 20 27.0999V22.3749C20 21.9582 20.1208 21.5832 20.3625 21.2499C20.6042 20.9166 20.9167 20.6749 21.3 20.5249L27.3 18.2749C27.5333 18.1916 27.7667 18.1499 28 18.1499C28.2333 18.1499 28.4667 18.1916 28.7 18.2749L34.7 20.5249C35.0833 20.6749 35.3958 20.9166 35.6375 21.2499C35.8792 21.5832 36 21.9582 36 22.3749V27.0999C36 29.4332 35.3333 31.6124 34 33.6374C32.6667 35.6624 30.875 37.0499 28.625 37.7999C28.525 37.8332 28.425 37.8582 28.325 37.8749C28.225 37.8916 28.1167 37.8999 28 37.8999Z" fill="#138A07"/>
+</g>
+</svg>

services/web/public/img/website-redesign/writing-round.svg

@@ -0,0 +1,10 @@
+<svg width="56" height="57" viewBox="0 0 56 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4" y="4.31592" width="48" height="48" rx="24" fill="#BBDBB8"/>
+<rect x="4" y="4.31592" width="48" height="48" rx="24" stroke="#EBF6EA" stroke-width="8"/>
+<mask id="mask0_1231_32125" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="16" y="16" width="24" height="25">
+<rect x="16" y="16.3159" width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_1231_32125)">
+<path d="M22 38.3159C21.45 38.3159 20.9792 38.1201 20.5875 37.7284C20.1958 37.3368 20 36.8659 20 36.3159V20.3159C20 19.7659 20.1958 19.2951 20.5875 18.9034C20.9792 18.5118 21.45 18.3159 22 18.3159H29.175C29.4417 18.3159 29.6958 18.3659 29.9375 18.4659C30.1792 18.5659 30.3917 18.7076 30.575 18.8909L35.425 23.7409C35.6083 23.9243 35.75 24.1368 35.85 24.3784C35.95 24.6201 36 24.8743 36 25.1409V27.3159C35.6167 27.3993 35.2583 27.5326 34.925 27.7159C34.5917 27.8993 34.2833 28.1326 34 28.4159L28.6 33.8159C28.4167 33.9993 28.2708 34.2118 28.1625 34.4534C28.0542 34.6951 28 34.9493 28 35.2159V38.3159H22ZM30 37.3159V35.6659C30 35.5326 30.025 35.4034 30.075 35.2784C30.125 35.1534 30.2 35.0409 30.3 34.9409L35.525 29.7409C35.675 29.5909 35.8417 29.4826 36.025 29.4159C36.2083 29.3493 36.3917 29.3159 36.575 29.3159C36.775 29.3159 36.9667 29.3534 37.15 29.4284C37.3333 29.5034 37.5 29.6159 37.65 29.7659L38.575 30.6909C38.7083 30.8409 38.8125 31.0076 38.8875 31.1909C38.9625 31.3743 39 31.5576 39 31.7409C39 31.9243 38.9667 32.1118 38.9 32.3034C38.8333 32.4951 38.725 32.6659 38.575 32.8159L33.375 38.0159C33.275 38.1159 33.1625 38.1909 33.0375 38.2409C32.9125 38.2909 32.7833 38.3159 32.65 38.3159H31C30.7167 38.3159 30.4792 38.2201 30.2875 38.0284C30.0958 37.8368 30 37.5993 30 37.3159ZM36.575 32.7159L37.5 31.7409L36.575 30.8159L35.625 31.7659L36.575 32.7159ZM30 25.3159H34L29 20.3159V24.3159C29 24.5993 29.0958 24.8368 29.2875 25.0284C29.4792 25.2201 29.7167 25.3159 30 25.3159Z" fill="#138A07"/>
+</g>
+</svg>