Merge pull request #16625 from overleaf/mf-features-section-homepage

[website-redesign] Implement visual branding for features section on homepage

GitOrigin-RevId: 52fa09eec3cc5af27eb5041e3751ea089cdbffba

services/web/frontend/stylesheets/app/homepage.less

@@ -561,4 +561,16 @@
     font-size: 1.125rem;
     line-height: 1.333;
   }
+
+  #home-features-arrow-green {
+    position: absolute;
+    left: 173px;
+    top: -122px;
+
+    @media (max-width: @screen-sm-max) {
+      height: 100px;
+      left: 111px;
+      top: -84px;
+    }
+  }
 }

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

@@ -22,14 +22,27 @@
   h2 {
     font-weight: 600;
     font-size: 2.25rem;
-    line-height: 3rem;
+    line-height: 1.333;
     margin-top: 0;
+
+    @media (max-width: @screen-sm-max) {
+      font-size: 1.875rem;
+    }
   }
 
   h3 {
     font-weight: 600;
   }
 
+  h1,
+  h2,
+  h3 {
+    > span.mono-text {
+      display: block;
+      margin-bottom: @margin-xs;
+    }
+  }
+
   // override .btn default style
   .btn {
     font-weight: 600;
@@ -212,14 +225,14 @@
     }
 
     .features-card-video {
+      display: flex;
+      justify-content: center;
+
       video {
         box-shadow: 0px 4px 6px 0px rgba(30, 37, 48, 0.12),
           0px 8px 16px 0px rgba(30, 37, 48, 0.12);
         max-height: 100%;
         width: auto;
-      }
-
-      video.video-responsive {
         width: 100%;
       }
 
@@ -618,19 +631,29 @@
   }
 
   .text-with-bg {
-    display: inline-block;
+    font-family: 'DM Mono', monospace;
+    font-feature-settings: 'ss05';
     padding: 0 @padding-sm;
     margin: 0 6px;
     border-radius: 10px;
     margin-top: 5px;
-  }
 
-  .purple-bg {
-    background-color: var(--ceil);
-  }
+    // will make all spans content inline while avoiding overflowing the viewport in mobile
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/display#flow-root
+    // https://css-tricks.com/display-flow-root/
+    display: inline flow-root;
 
-  .yellow-bg {
-    background-color: var(--caramel);
+    &.tangerine-bg {
+      background-color: var(--vivid-tangerine);
+    }
+
+    &.purple-bg {
+      background-color: var(--ceil);
+    }
+
+    &.yellow-bg {
+      background-color: var(--caramel);
+    }
   }
 
   .security-info {
@@ -692,12 +715,6 @@
     font-weight: 500;
     line-height: 1.5rem;
     margin: 0;
-
-    ~ h1,
-    ~ h2,
-    ~ h3 {
-      margin-top: 8px;
-    }
   }
 
   .link-with-arrow {

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

@@ -102,6 +102,7 @@
 @deep-green: #0f2715;
 @sapphire-blue: #4354a3;
 @sapphire-blue-dark: #3c4c93;
+@vivid-tangerine: #f1a695;
 
 // == ol-* legacy variables ==
 // These will eventually be removed and replaced with above names

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

@@ -90,4 +90,5 @@
   --deep-green: @deep-green;
   --sapphire-blue: @sapphire-blue;
   --sapphire-blue-dark: @sapphire-blue-dark;
+  --vivid-tangerine: @vivid-tangerine;
 }

services/web/public/img/website-redesign/arrow-green.svg

@@ -0,0 +1,9 @@
+<svg width="151" height="146" viewBox="0 0 151 146" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_3314_7287" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="6" y="8" width="138" height="130">
+<path d="M30.3406 8.2646L143.958 34.2871L120.495 137.448L6.87688 111.426L30.3406 8.2646Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_3314_7287)">
+<path d="M17.4669 64.8433C17.1787 66.1244 17.0252 67.4471 17.0434 68.7582L17.1851 95.7378C17.2103 98.9406 17.2349 106.457 23.0882 112.264C26.5807 115.729 34.2735 120.689 46.5813 114.897L70.742 103.487C75.126 101.419 78.2917 97.3984 79.4064 92.4598C80.4303 87.975 79.662 83.246 77.2962 79.4903C76.9324 78.9149 76.5397 78.3617 76.1187 77.841C89.6781 68.0779 106.518 62.8423 123.383 63.7903C131.439 64.2391 138.292 59.1032 140.064 51.302C141.196 46.3114 140.035 40.8867 136.967 36.7923C133.955 32.7856 129.334 30.3228 124.293 30.0453C96.1137 28.4736 68.0203 39.0426 47.0946 58.0356C46.6176 57.4373 46.1016 56.862 45.5379 56.3307C42.1853 53.1305 37.6654 51.4137 33.1235 51.6108C25.5877 51.9405 19.15 57.3736 17.446 64.8345L17.4669 64.8433Z" fill="#80CB9C"/>
+<path d="M123.642 42.0933C129.783 42.4384 130.257 52.0909 124.076 51.7485C93.9411 50.0657 64.0853 65.1495 47.6577 90.459C51.9334 88.4386 56.2098 86.4284 60.4848 84.3978C62.8336 83.2817 65.6202 83.5295 67.122 85.9198C68.3741 87.92 67.9756 91.4569 65.6073 92.5845C60.1125 95.1761 54.6183 97.7779 49.1235 100.37C46.5681 101.581 44.0222 102.782 41.4763 103.983C38.2219 105.506 34.5036 106.624 31.5553 103.701C29.3799 101.55 29.2372 98.559 29.2246 95.6911C29.208 92.7624 29.192 89.8438 29.1753 86.9151C29.1483 80.8537 29.1106 74.783 29.0735 68.7223C29.058 66.1089 31.0009 63.7996 33.6711 63.679C36.1998 63.5679 38.6762 65.668 38.7025 68.2909C38.734 73.3753 38.7561 78.4705 38.7781 83.5657C38.7837 84.5419 38.7893 85.5182 38.7948 86.4944C56.7028 58.0424 89.9741 40.2236 123.632 42.1041L123.642 42.0933Z" fill="#13120D"/>
+</g>
+</svg>

services/web/public/img/website-redesign/book-pink.svg

@@ -0,0 +1,12 @@
+<svg width="63" height="52" viewBox="0 0 63 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M62.1273 37.2645L52.9374 7.55509C51.8409 4.05935 48.5242 1.72125 44.8739 1.85863C44.1698 1.88513 43.4692 2.00409 42.7905 2.21482L36.829 4.05029C36.4441 4.17588 36.0976 4.33707 35.7511 4.49826C34.3395 3.47732 32.5912 2.87646 30.7012 2.9476L24.1047 3.19587C22.4185 3.25933 20.863 3.83639 19.5993 4.77283C18.2689 3.93402 16.6744 3.47552 14.9882 3.53898L8.39168 3.78726C3.92607 3.95533 0.430697 7.71647 0.597733 12.1546L1.57778 43.6174C1.74621 48.0925 5.5144 51.5802 9.99854 51.4115L10.1282 51.4066L16.9332 50.7801C18.5624 50.6818 20.0623 50.1068 21.2903 49.2087C22.6208 50.0475 24.2153 50.506 25.9015 50.4426L32.1274 50.2083C36.2965 50.0513 39.5684 46.7616 39.8813 42.7498L40.5193 44.911C41.5113 48.0958 44.5239 50.2417 47.8592 50.1162L48.4151 50.0952C49.1192 50.0687 49.8199 49.9498 50.48 49.7397L50.6268 49.6972L56.9216 47.3492C58.9191 46.6814 60.5558 45.305 61.5431 43.4345C62.5475 41.5264 62.7619 39.3331 62.1273 37.2645Z" fill="#F1A4A1"/>
+<path d="M9.82563 46.7879C7.89856 46.8604 6.28362 45.3656 6.21123 43.4425L5.23189 11.9981C5.1595 10.075 6.65752 8.46304 8.58459 8.39052L15.1811 8.14225C17.1082 8.06972 18.7231 9.56448 18.7955 11.4877L19.9647 42.5545C20.0371 44.4776 18.5391 46.0896 16.612 46.1621L9.82563 46.7879ZM8.69107 11.2198C8.32048 11.2338 8.03515 11.5408 8.04907 11.9106L9.02842 43.3549C9.04234 43.7248 9.34994 44.0095 9.72053 43.9956L16.5069 43.3698C16.8775 43.3558 17.1629 43.0488 17.149 42.6789L15.9797 11.6122C15.9658 11.2423 15.6582 10.9576 15.2876 10.9715L8.69107 11.2198Z" fill="black"/>
+<path d="M10.3526 17.75C9.57436 17.7793 8.92069 17.1743 8.89146 16.3976C8.86223 15.621 9.46857 14.9685 10.2468 14.9392L14.1461 14.5147C14.9243 14.4854 15.578 15.0904 15.6072 15.8671C15.6365 16.6438 15.0301 17.2962 14.2519 17.3255L10.3526 17.75Z" fill="black"/>
+<path d="M11.1959 40.1621C10.4177 40.1914 9.76401 39.5864 9.73478 38.8097C9.70555 38.033 10.3119 37.3806 11.0901 37.3513L15.2407 37.1951C16.019 37.1658 16.6726 37.7708 16.7019 38.5475C16.7311 39.3242 16.1248 39.9766 15.3465 40.0059L11.1959 40.1621Z" fill="black"/>
+<path d="M25.7348 45.8399C23.8077 45.9124 22.1928 44.4177 22.1204 42.4945L20.9512 11.4277C20.8788 9.50451 22.3768 7.89259 24.3039 7.82006L30.9004 7.57179C32.8274 7.49926 34.4424 8.99402 34.5148 10.9172L35.3134 41.9979C35.3858 43.9211 33.8878 45.533 31.9607 45.6056L25.7348 45.8399ZM25.0211 10.6079C24.317 10.6344 23.7456 11.2299 23.7728 11.9511L24.9184 42.3892C24.9323 42.759 25.2399 43.0437 25.6105 43.0298L31.8364 42.7955C32.207 42.7815 32.4923 42.4745 32.4784 42.1046L31.6797 11.0239C31.6658 10.6541 31.3582 10.3693 30.9876 10.3833L25.0211 10.6079Z" fill="black"/>
+<path d="M25.6722 16.6191C24.894 16.6484 24.2403 16.0434 24.2111 15.2667C24.1819 14.4901 24.7882 13.8376 25.5664 13.8083L29.724 13.837C30.5023 13.8077 31.1559 14.4128 31.1852 15.1894C31.2144 15.9661 30.608 16.6185 29.8298 16.6478L25.6722 16.6191Z" fill="black"/>
+<path d="M26.5367 39.5859C25.7585 39.6152 25.1048 39.0102 25.0756 38.2335C25.0464 37.4569 25.6527 36.8044 26.4309 36.7751L30.5816 36.6189C31.3598 36.5896 32.0135 37.1946 32.0427 37.9713C32.0719 38.748 31.4656 39.4004 30.6873 39.4297L26.5367 39.5859Z" fill="black"/>
+<path d="M47.6879 45.4949C46.4464 45.5417 45.3218 44.7507 44.9431 43.5612L35.9001 12.8278C35.3303 10.9974 36.3703 9.0509 38.2045 8.48188L44.166 6.64641C44.4597 6.56128 44.7548 6.51314 45.0513 6.50198C46.6263 6.4427 48.0557 7.44445 48.5204 8.94546L57.7103 38.6548C57.9853 39.5519 57.8904 40.4814 57.4578 41.3125C57.0252 42.1435 56.287 42.7454 55.4067 43.0193L49.1489 45.3659C48.8552 45.451 48.5601 45.4992 48.2637 45.5103L47.7078 45.5312L47.6879 45.4949ZM45.1564 9.29429C45.1564 9.29429 45.0452 9.29848 44.9903 9.31906L39.0288 11.1545C38.8634 11.1978 38.72 11.3328 38.6329 11.4842C38.5459 11.6357 38.5343 11.8213 38.5776 11.9863L47.4528 42.2075C47.538 42.5006 47.8236 42.6936 48.1201 42.6824L54.5625 40.3103C54.7278 40.2671 54.8719 40.1505 54.9583 39.9806C55.0454 39.8292 55.0569 39.6436 55.0136 39.4785L45.8237 9.76917C45.7384 9.47609 45.4528 9.28314 45.1564 9.29429Z" fill="black"/>
+<path d="M41.4855 16.8577C41.115 16.8716 40.7573 16.737 40.4696 16.4885C40.182 16.2401 40.039 15.8936 40.0244 15.5053C40.0008 14.8766 40.406 14.3058 41.0113 14.1163L44.9733 12.8931C45.083 12.852 45.2121 12.8286 45.3418 12.8237C45.9718 12.8 46.5437 13.2044 46.7334 13.8084C46.9651 14.5404 46.5496 15.3338 45.8161 15.5651L41.8355 16.789C41.7257 16.8301 41.5967 16.8535 41.467 16.8584L41.4855 16.8577Z" fill="black"/>
+<path d="M48.0168 38.9451C47.2351 38.882 46.6713 38.1995 46.7347 37.4193C46.7852 36.7878 47.2667 36.2697 47.8932 36.1535L51.9636 34.8522C52.0933 34.8473 52.2045 34.8431 52.3342 34.8382C52.967 34.8885 53.4861 35.369 53.6024 35.9942C53.7428 36.7667 53.2319 37.4896 52.4578 37.6299L48.3874 38.9312C48.2577 38.9361 48.1465 38.9403 48.0168 38.9451Z" fill="black"/>
+</svg>

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

@@ -1,10 +0,0 @@
-<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_854_11994" 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_854_11994)">
-<path d="M25 31.316H21.9C21.5 31.316 21.2041 31.1368 21.0125 30.7785C20.8208 30.4202 20.8416 30.0743 21.075 29.741L28.55 18.991C28.7166 18.7577 28.9333 18.5952 29.2 18.5035C29.4666 18.4118 29.7416 18.416 30.025 18.516C30.3083 18.616 30.5166 18.791 30.65 19.041C30.7833 19.291 30.8333 19.5577 30.8 19.841L30 26.316H33.875C34.3083 26.316 34.6125 26.5077 34.7875 26.891C34.9625 27.2743 34.9083 27.6327 34.625 27.966L26.4 37.816C26.2166 38.0327 25.9916 38.1743 25.725 38.241C25.4583 38.3077 25.2 38.2827 24.95 38.166C24.7 38.0493 24.5041 37.8702 24.3625 37.6285C24.2208 37.3868 24.1666 37.1243 24.2 36.841L25 31.316Z" fill="#138A07"/>
-</g>
-</svg>

services/web/public/img/website-redesign/lightning-yellow.svg

@@ -0,0 +1,11 @@
+<svg width="51" height="63" viewBox="0 0 51 63" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3314_7299)">
+<path d="M20.7098 60.6238C19.6288 60.5671 18.5852 60.3409 17.5791 59.9451C13.5828 58.3635 11.0505 54.4286 11.2761 50.1238L11.5839 44.2509L10.8158 44.2106C7.00384 44.0109 3.70069 41.7223 2.20157 38.2132C0.674004 34.7027 1.253 30.7308 3.71712 27.8011L22.1801 5.89871C24.1577 3.54383 27.1939 2.21641 30.3232 2.3804C31.4042 2.43705 32.4762 2.66476 33.4824 3.06054C37.4517 4.61218 39.9825 8.57553 39.7569 12.8804L39.4491 18.7533L40.2172 18.7935C44.0292 18.9933 47.3323 21.2819 48.8314 24.791C50.359 28.3015 49.78 32.2734 47.3159 35.2031L28.826 57.0755C26.8184 59.4574 23.7837 60.7563 20.6829 60.5938L20.7098 60.6238Z" fill="#F9D38F"/>
+<path d="M39.8435 25.9197L31.9636 25.5067L32.6449 12.5066C32.7091 11.2807 31.9978 10.1571 30.8239 9.69534C29.6785 9.23508 28.3774 9.56712 27.587 10.4977L9.12699 32.343C8.42638 33.1925 8.25283 34.3269 8.68564 35.3215C9.11845 36.3162 10.0812 36.9956 11.1623 37.0522L19.0422 37.4652L18.3609 50.4654C18.2967 51.6913 19.008 52.8149 20.1819 53.2766C20.4619 53.377 20.7718 53.4505 21.0847 53.4669C21.9666 53.5131 22.8125 53.1572 23.4203 52.4458L41.8803 30.6004C42.5809 29.7509 42.7545 28.6165 42.3216 27.6219C41.8888 26.6272 40.9545 25.9493 39.845 25.8912L39.8435 25.9197ZM23.8626 44.0071L24.3093 35.4828C24.3915 33.9148 23.1786 32.5648 21.6139 32.4828L16.0382 32.1906L27.1702 18.9949L26.7235 27.5191C26.6413 29.0871 27.8542 30.4371 29.4188 30.5191L34.9945 30.8113L23.8626 44.0071Z" fill="#010101"/>
+</g>
+<defs>
+<clipPath id="clip0_3314_7299">
+<rect width="48" height="58.6667" fill="white" transform="translate(3.07031 0.951172) rotate(3)"/>
+</clipPath>
+</defs>
+</svg>