Merge pull request #16178 from overleaf/tm-website-redesign-why-latex

Implement Why Latex? page

GitOrigin-RevId: 7596673d2261331040a6ff53de279445acafbcf8

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

@@ -27,10 +27,6 @@
     font-weight: 600;
   }
 
-  a {
-    font-weight: 600;
-  }
-
   .img-rounded {
     // TODO: design specifies 'border-radius-large' which is 5px, but uses 16px
     border-radius: 16px;
@@ -113,6 +109,11 @@
   }
 
   .info-cards {
+    @media (min-width: @screen-md-min) {
+      display: flex; /* equal heights */
+      flex-wrap: wrap;
+    }
+
     .info-card-container {
       min-height: 348px;
       margin-bottom: 16px;
@@ -132,6 +133,10 @@
   }
 
   .features-card {
+    display: flex; /* equal heights */
+    flex-wrap: wrap;
+    align-items: center;
+
     .features-card-image {
       img.img-responsive {
         width: 100%;
@@ -202,6 +207,7 @@
 
         a {
           width: 100%;
+          font-weight: 600;
           color: var(--neutral-90);
           display: inline-flex;
           justify-content: space-between;
@@ -400,6 +406,42 @@
     }
   }
 
+  .resources {
+    @media (min-width: @screen-md-min) {
+      display: flex; /* equal heights */
+      flex-wrap: wrap;
+    }
+    .resources-card {
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: column;
+      margin-bottom: 48px;
+      align-content: flex-start;
+
+      @media (max-width: @screen-sm-max) {
+        margin-bottom: 16px;
+      }
+
+      img {
+        width: 56px;
+      }
+
+      h3 {
+        width: 100%;
+      }
+
+      a {
+        margin-top: auto;
+      }
+    }
+  }
+
+  .centered-block {
+    @media (min-width: @screen-md-min) {
+      text-align: center;
+    }
+  }
+
   .mono-text {
     font-family: 'DM Mono', monospace;
     color: var(--green-60);
@@ -542,7 +584,7 @@
     }
 
     @media (max-width: @screen-sm-max) {
-      flex-direction: column;
+      flex-direction: column-reverse;
       width: 100%;
     }
   }

services/web/public/img/website-redesign/book-4-round.svg

@@ -0,0 +1,10 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4" y="4" width="48" height="48" rx="24" fill="#BBDBB8"/>
+<rect x="4" y="4" width="48" height="48" rx="24" stroke="#EBF6EA" stroke-width="8"/>
+<mask id="mask0_1238_23822" 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_1238_23822)">
+<path d="M24 32C24.2833 32 24.5208 31.9042 24.7125 31.7125C24.9042 31.5208 25 31.2833 25 31V21C25 20.7167 24.9042 20.4792 24.7125 20.2875C24.5208 20.0958 24.2833 20 24 20C23.7167 20 23.4792 20.0958 23.2875 20.2875C23.0958 20.4792 23 20.7167 23 21V31C23 31.2833 23.0958 31.5208 23.2875 31.7125C23.4792 31.9042 23.7167 32 24 32ZM22 38C21.1667 38 20.4583 37.7083 19.875 37.125C19.2917 36.5417 19 35.8333 19 35V21C19 20.1667 19.2917 19.4583 19.875 18.875C20.4583 18.2917 21.1667 18 22 18H31C31.55 18 32.0208 18.1958 32.4125 18.5875C32.8042 18.9792 33 19.45 33 20V32C33 32.55 32.8042 33.0208 32.4125 33.4125C32.0208 33.8042 31.55 34 31 34H22C21.7167 34 21.4792 34.0958 21.2875 34.2875C21.0958 34.4792 21 34.7167 21 35C21 35.2833 21.0958 35.5208 21.2875 35.7125C21.4792 35.9042 21.7167 36 22 36H35V21C35 20.7167 35.0958 20.4792 35.2875 20.2875C35.4792 20.0958 35.7167 20 36 20C36.2833 20 36.5208 20.0958 36.7125 20.2875C36.9042 20.4792 37 20.7167 37 21V36C37 36.55 36.8042 37.0208 36.4125 37.4125C36.0208 37.8042 35.55 38 35 38H22Z" fill="#138A07"/>
+</g>
+</svg>

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

@@ -0,0 +1,10 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4" y="4" width="48" height="48" rx="24" fill="#BBDBB8"/>
+<rect x="4" y="4" width="48" height="48" rx="24" stroke="#EBF6EA" stroke-width="8"/>
+<mask id="mask0_1773_217944" 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_1773_217944)">
+<path d="M24.8 26.9501L26.95 24.7751L25.55 23.3501L25.15 23.7501C24.9667 23.9334 24.7375 24.0292 24.4625 24.0376C24.1875 24.0459 23.95 23.9501 23.75 23.7501C23.55 23.5501 23.45 23.3126 23.45 23.0376C23.45 22.7626 23.55 22.5251 23.75 22.3251L24.125 21.9501L23 20.8251L20.825 23.0001L24.8 26.9501ZM33 35.1751L35.175 33.0001L34.05 31.8751L33.65 32.2501C33.45 32.4501 33.2167 32.5501 32.95 32.5501C32.6833 32.5501 32.45 32.4501 32.25 32.2501C32.05 32.0501 31.95 31.8167 31.95 31.5501C31.95 31.2834 32.05 31.0501 32.25 30.8501L32.625 30.4501L31.2 29.0501L29.05 31.2001L33 35.1751ZM32.225 22.4251L33.625 23.8251L35.025 22.4251L33.6 21.0001L32.225 22.4251ZM20 37.0001C19.7167 37.0001 19.4792 36.9042 19.2875 36.7126C19.0958 36.5209 19 36.2834 19 36.0001V33.1751C19 33.0417 19.025 32.9126 19.075 32.7876C19.125 32.6626 19.2 32.5501 19.3 32.4501L23.375 28.3751L19.05 24.0501C18.7667 23.7667 18.625 23.4167 18.625 23.0001C18.625 22.5834 18.7667 22.2334 19.05 21.9501L21.95 19.0501C22.2333 18.7667 22.5833 18.6292 23 18.6376C23.4167 18.6459 23.7667 18.7917 24.05 19.0751L28.4 23.4001L32.175 19.6001C32.375 19.4001 32.6 19.2501 32.85 19.1501C33.1 19.0501 33.3583 19.0001 33.625 19.0001C33.8917 19.0001 34.15 19.0501 34.4 19.1501C34.65 19.2501 34.875 19.4001 35.075 19.6001L36.4 20.9501C36.6 21.1501 36.75 21.3751 36.85 21.6251C36.95 21.8751 37 22.1334 37 22.4001C37 22.6667 36.95 22.9209 36.85 23.1626C36.75 23.4042 36.6 23.6251 36.4 23.8251L32.625 27.6251L36.95 31.9501C37.2333 32.2334 37.375 32.5834 37.375 33.0001C37.375 33.4167 37.2333 33.7667 36.95 34.0501L34.05 36.9501C33.7667 37.2334 33.4167 37.3751 33 37.3751C32.5833 37.3751 32.2333 37.2334 31.95 36.9501L27.625 32.6251L23.55 36.7001C23.45 36.8001 23.3375 36.8751 23.2125 36.9251C23.0875 36.9751 22.9583 37.0001 22.825 37.0001H20Z" fill="#138A07"/>
+</g>
+</svg>

services/web/public/img/website-redesign/live-tv-round.svg

@@ -0,0 +1,10 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4" y="4" width="48" height="48" rx="24" fill="#BBDBB8"/>
+<rect x="4" y="4" width="48" height="48" rx="24" stroke="#EBF6EA" stroke-width="8"/>
+<mask id="mask0_1294_25809" 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_25809)">
+<path d="M27.05 30.5L31.2 27.85C31.5 27.65 31.65 27.3667 31.65 27C31.65 26.6333 31.5 26.35 31.2 26.15L27.05 23.5C26.7167 23.2833 26.375 23.2667 26.025 23.45C25.675 23.6333 25.5 23.925 25.5 24.325V29.675C25.5 30.075 25.675 30.3667 26.025 30.55C26.375 30.7333 26.7167 30.7167 27.05 30.5ZM20 35C19.45 35 18.9792 34.8042 18.5875 34.4125C18.1958 34.0208 18 33.55 18 33V21C18 20.45 18.1958 19.9792 18.5875 19.5875C18.9792 19.1958 19.45 19 20 19H36C36.55 19 37.0208 19.1958 37.4125 19.5875C37.8042 19.9792 38 20.45 38 21V33C38 33.55 37.8042 34.0208 37.4125 34.4125C37.0208 34.8042 36.55 35 36 35H32V36C32 36.2833 31.9042 36.5208 31.7125 36.7125C31.5208 36.9042 31.2833 37 31 37H25C24.7167 37 24.4792 36.9042 24.2875 36.7125C24.0958 36.5208 24 36.2833 24 36V35H20Z" fill="#138A07"/>
+</g>
+</svg>

services/web/public/img/website-redesign/local-library-round.svg

@@ -0,0 +1,10 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4" y="4" width="48" height="48" rx="24" fill="#BBDBB8"/>
+<rect x="4" y="4" width="48" height="48" rx="24" stroke="#EBF6EA" stroke-width="8"/>
+<mask id="mask0_1294_25817" 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_25817)">
+<path d="M22 38C21.45 38 20.9792 37.8042 20.5875 37.4125C20.1958 37.0208 20 36.55 20 36V20C20 19.45 20.1958 18.9792 20.5875 18.5875C20.9792 18.1958 21.45 18 22 18H29.175C29.4417 18 29.6958 18.05 29.9375 18.15C30.1792 18.25 30.3917 18.3917 30.575 18.575L35.425 23.425C35.6083 23.6083 35.75 23.8208 35.85 24.0625C35.95 24.3042 36 24.5583 36 24.825V27C35.6167 27.0833 35.2583 27.2167 34.925 27.4C34.5917 27.5833 34.2833 27.8167 34 28.1L28.6 33.5C28.4167 33.6833 28.2708 33.8958 28.1625 34.1375C28.0542 34.3792 28 34.6333 28 34.9V38H22ZM30 37V35.35C30 35.2167 30.025 35.0875 30.075 34.9625C30.125 34.8375 30.2 34.725 30.3 34.625L35.525 29.425C35.675 29.275 35.8417 29.1667 36.025 29.1C36.2083 29.0333 36.3917 29 36.575 29C36.775 29 36.9667 29.0375 37.15 29.1125C37.3333 29.1875 37.5 29.3 37.65 29.45L38.575 30.375C38.7083 30.525 38.8125 30.6917 38.8875 30.875C38.9625 31.0583 39 31.2417 39 31.425C39 31.6083 38.9667 31.7958 38.9 31.9875C38.8333 32.1792 38.725 32.35 38.575 32.5L33.375 37.7C33.275 37.8 33.1625 37.875 33.0375 37.925C32.9125 37.975 32.7833 38 32.65 38H31C30.7167 38 30.4792 37.9042 30.2875 37.7125C30.0958 37.5208 30 37.2833 30 37ZM36.575 32.4L37.5 31.425L36.575 30.5L35.625 31.45L36.575 32.4ZM30 25H34L29 20V24C29 24.2833 29.0958 24.5208 29.2875 24.7125C29.4792 24.9042 29.7167 25 30 25Z" fill="#138A07"/>
+</g>
+</svg>

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

@@ -0,0 +1,10 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4" y="4" width="48" height="48" rx="24" fill="#BBDBB8"/>
+<rect x="4" y="4" width="48" height="48" rx="24" stroke="#EBF6EA" stroke-width="8"/>
+<mask id="mask0_1294_25821" 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_25821)">
+<path d="M21 37C20.45 37 19.9792 36.8042 19.5875 36.4125C19.1958 36.0208 19 35.55 19 35V21C19 20.45 19.1958 19.9792 19.5875 19.5875C19.9792 19.1958 20.45 19 21 19H35C35.55 19 36.0208 19.1958 36.4125 19.5875C36.8042 19.9792 37 20.45 37 21V35C37 35.55 36.8042 36.0208 36.4125 36.4125C36.0208 36.8042 35.55 37 35 37H21ZM21 35H35V23H21V35ZM28 33C26.6333 33 25.4125 32.6292 24.3375 31.8875C23.2625 31.1458 22.4833 30.1833 22 29C22.4833 27.8167 23.2625 26.8542 24.3375 26.1125C25.4125 25.3708 26.6333 25 28 25C29.3667 25 30.5875 25.3708 31.6625 26.1125C32.7375 26.8542 33.5167 27.8167 34 29C33.5167 30.1833 32.7375 31.1458 31.6625 31.8875C30.5875 32.6292 29.3667 33 28 33ZM28 30.5C27.5833 30.5 27.2292 30.3542 26.9375 30.0625C26.6458 29.7708 26.5 29.4167 26.5 29C26.5 28.5833 26.6458 28.2292 26.9375 27.9375C27.2292 27.6458 27.5833 27.5 28 27.5C28.4167 27.5 28.7708 27.6458 29.0625 27.9375C29.3542 28.2292 29.5 28.5833 29.5 29C29.5 29.4167 29.3542 29.7708 29.0625 30.0625C28.7708 30.3542 28.4167 30.5 28 30.5ZM28 31.5C28.7 31.5 29.2917 31.2583 29.775 30.775C30.2583 30.2917 30.5 29.7 30.5 29C30.5 28.3 30.2583 27.7083 29.775 27.225C29.2917 26.7417 28.7 26.5 28 26.5C27.3 26.5 26.7083 26.7417 26.225 27.225C25.7417 27.7083 25.5 28.3 25.5 29C25.5 29.7 25.7417 30.2917 26.225 30.775C26.7083 31.2583 27.3 31.5 28 31.5Z" fill="#138A07"/>
+</g>
+</svg>

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

@@ -0,0 +1,10 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4" y="4" width="48" height="48" rx="24" fill="#BBDBB8"/>
+<rect x="4" y="4" width="48" height="48" rx="24" stroke="#EBF6EA" stroke-width="8"/>
+<mask id="mask0_1294_25825" 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_25825)">
+<path d="M36.9996 31.9999V26.0999L28.9496 30.4749C28.6496 30.6416 28.3329 30.7249 27.9996 30.7249C27.6663 30.7249 27.3496 30.6416 27.0496 30.4749L18.5996 25.8749C18.4163 25.7749 18.2871 25.6499 18.2121 25.4999C18.1371 25.3499 18.0996 25.1832 18.0996 24.9999C18.0996 24.8166 18.1371 24.6499 18.2121 24.4999C18.2871 24.3499 18.4163 24.2249 18.5996 24.1249L27.0496 19.5249C27.1996 19.4416 27.3538 19.3791 27.5121 19.3374C27.6704 19.2957 27.8329 19.2749 27.9996 19.2749C28.1663 19.2749 28.3288 19.2957 28.4871 19.3374C28.6454 19.3791 28.7996 19.4416 28.9496 19.5249L38.4746 24.7249C38.6413 24.8082 38.7704 24.9291 38.8621 25.0874C38.9538 25.2457 38.9996 25.4166 38.9996 25.5999V31.9999C38.9996 32.2832 38.9038 32.5207 38.7121 32.7124C38.5204 32.9041 38.2829 32.9999 37.9996 32.9999C37.7163 32.9999 37.4788 32.9041 37.2871 32.7124C37.0954 32.5207 36.9996 32.2832 36.9996 31.9999ZM27.0496 36.4749L22.0496 33.7749C21.7163 33.5916 21.4579 33.3416 21.2746 33.0249C21.0913 32.7082 20.9996 32.3666 20.9996 31.9999V28.1999L27.0496 31.4749C27.3496 31.6416 27.6663 31.7249 27.9996 31.7249C28.3329 31.7249 28.6496 31.6416 28.9496 31.4749L34.9996 28.1999V31.9999C34.9996 32.3666 34.9079 32.7082 34.7246 33.0249C34.5413 33.3416 34.2829 33.5916 33.9496 33.7749L28.9496 36.4749C28.7996 36.5582 28.6454 36.6207 28.4871 36.6624C28.3288 36.7041 28.1663 36.7249 27.9996 36.7249C27.8329 36.7249 27.6704 36.7041 27.5121 36.6624C27.3538 36.6207 27.1996 36.5582 27.0496 36.4749Z" fill="#138A07"/>
+</g>
+</svg>