Merge pull request #16668 from overleaf/tm-website-redesign-why-latex-visual-updates

Apply visual assets to why latex page

GitOrigin-RevId: e5e1cda79b9ff43fd151a07adbf666aa179b3676

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

@@ -897,4 +897,8 @@
       }
     }
   }
+
+  .overleaf-sticker {
+    float: right;
+  }
 }

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

@@ -1,10 +0,0 @@
-<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/books-sticker.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.1281 37.1961L52.9381 7.48673C51.8417 3.99099 48.525 1.65289 44.8747 1.79027C44.1705 1.81677 43.4699 1.93573 42.7913 2.14646L36.8297 3.98193C36.4448 4.10753 36.0983 4.26871 35.7518 4.4299C34.3403 3.40896 32.592 2.8081 30.7019 2.87924L24.1054 3.12751C22.4192 3.19097 20.8637 3.76803 19.6001 4.70447C18.2696 3.86566 16.6751 3.40716 14.9889 3.47062L8.39241 3.7189C3.9268 3.88697 0.431429 7.64811 0.598466 12.0862L1.57851 43.549C1.74694 48.0241 5.51513 51.5119 9.99928 51.3431L10.129 51.3382L16.9339 50.7118C18.5631 50.6134 20.0631 50.0384 21.2911 49.1404C22.6215 49.9792 24.216 50.4377 25.9022 50.3742L32.1281 50.1399C36.2973 49.983 39.5691 46.6932 39.8821 42.6815L40.5201 44.8426C41.512 48.0275 44.5246 50.1733 47.8599 50.0478L48.4158 50.0269C49.1199 50.0004 49.8206 49.8814 50.4807 49.6714L50.6275 49.6288L56.9223 47.2808C58.9198 46.6131 60.5566 45.2366 61.5438 43.3662C62.5482 41.458 62.7626 39.2648 62.1281 37.1961Z" fill="#F9D38F"/>
+<path d="M9.8249 46.7195C7.89783 46.792 6.28288 45.2973 6.2105 43.3741L5.23115 11.9298C5.15877 10.0066 6.65679 8.39469 8.58386 8.32216L15.1804 8.07389C17.1074 8.00136 18.7224 9.49612 18.7948 11.4193L19.964 42.4861C20.0364 44.4093 18.5384 46.0212 16.6113 46.0937L9.8249 46.7195ZM8.69034 11.1515C8.31975 11.1654 8.03442 11.4724 8.04834 11.8423L9.02768 43.2866C9.0416 43.6564 9.34921 43.9411 9.7198 43.9272L16.5062 43.3014C16.8768 43.2875 17.1621 42.9804 17.1482 42.6106L15.979 11.5438C15.965 11.174 15.6574 10.8892 15.2868 10.9032L8.69034 11.1515Z" fill="black"/>
+<path d="M10.3526 17.6817C9.57436 17.711 8.92069 17.1059 8.89146 16.3293C8.86223 15.5526 9.46857 14.9002 10.2468 14.8709L14.1461 14.4463C14.9243 14.417 15.578 15.0221 15.6072 15.7987C15.6365 16.5754 15.0301 17.2278 14.2519 17.2571L10.3526 17.6817Z" fill="black"/>
+<path d="M11.1957 40.0937C10.4174 40.123 9.76377 39.518 9.73454 38.7413C9.7053 37.9647 10.3116 37.3122 11.0899 37.2829L15.2405 37.1267C16.0187 37.0974 16.6724 37.7025 16.7016 38.4791C16.7309 39.2558 16.1245 39.9082 15.3463 39.9375L11.1957 40.0937Z" fill="black"/>
+<path d="M25.7348 45.7715C23.8077 45.8441 22.1928 44.3493 22.1204 42.4261L20.9512 11.3593C20.8788 9.43615 22.3768 7.82423 24.3039 7.7517L30.9004 7.50343C32.8274 7.4309 34.4424 8.92566 34.5148 10.8488L35.3134 41.9296C35.3858 43.8528 33.8878 45.4647 31.9607 45.5372L25.7348 45.7715ZM25.0211 10.5395C24.317 10.566 23.7456 11.1616 23.7728 11.8828L24.9184 42.3208C24.9323 42.6907 25.2399 42.9754 25.6105 42.9614L31.8364 42.7271C32.207 42.7132 32.4923 42.4061 32.4784 42.0363L31.6797 10.9555C31.6658 10.5857 31.3582 10.301 30.9876 10.3149L25.0211 10.5395Z" fill="black"/>
+<path d="M25.6722 16.5508C24.894 16.5801 24.2403 15.975 24.2111 15.1984C24.1819 14.4217 24.7882 13.7693 25.5664 13.74L29.724 13.7687C30.5023 13.7394 31.1559 14.3444 31.1852 15.1211C31.2144 15.8977 30.608 16.5502 29.8298 16.5795L25.6722 16.5508Z" fill="black"/>
+<path d="M26.5375 39.5176C25.7592 39.5469 25.1056 38.9418 25.0763 38.1652C25.0471 37.3885 25.6534 36.7361 26.4317 36.7068L30.5823 36.5505C31.3605 36.5213 32.0142 37.1263 32.0434 37.903C32.0727 38.6796 31.4663 39.3321 30.6881 39.3614L26.5375 39.5176Z" fill="black"/>
+<path d="M47.6871 45.4266C46.4456 45.4733 45.3211 44.6823 44.9423 43.4929L35.8994 12.7595C35.3295 10.9291 36.3696 8.98254 38.2038 8.41352L44.1653 6.57805C44.459 6.49292 44.7541 6.44478 45.0505 6.43362C46.6256 6.37434 48.0549 7.37609 48.5197 8.8771L57.7096 38.5865C57.9846 39.4835 57.8897 40.413 57.457 41.2441C57.0244 42.0752 56.2863 42.677 55.4059 42.9509L49.1482 45.2975C48.8545 45.3826 48.5594 45.4308 48.2629 45.442L47.707 45.4629L47.6871 45.4266ZM45.1556 9.22594C45.1556 9.22594 45.0445 9.23012 44.9896 9.2507L39.028 11.0862C38.8627 11.1294 38.7193 11.2645 38.6322 11.4159C38.5451 11.5673 38.5336 11.7529 38.5769 11.918L47.4521 42.1392C47.5373 42.4323 47.8229 42.6252 48.1194 42.614L54.5617 40.242C54.7271 40.1987 54.8712 40.0822 54.9576 39.9123C55.0446 39.7608 55.0562 39.5752 55.0129 39.4102L45.823 9.70081C45.7377 9.40773 45.4521 9.21478 45.1556 9.22594Z" fill="black"/>
+<path d="M41.486 16.7893C41.1154 16.8033 40.7578 16.6686 40.4701 16.4202C40.1824 16.1717 40.0395 15.8253 40.0249 15.4369C40.0012 14.8082 40.4065 14.2374 41.0117 14.048L44.9738 12.8248C45.0835 12.7836 45.2125 12.7602 45.3423 12.7553C45.9723 12.7316 46.5442 13.136 46.7339 13.74C46.9655 14.472 46.5501 15.2654 45.8165 15.4967L41.836 16.7206C41.7262 16.7618 41.5972 16.7851 41.4675 16.79L41.486 16.7893Z" fill="black"/>
+<path d="M48.0163 38.8768C47.2346 38.8136 46.6708 38.1311 46.7342 37.351C46.7847 36.7195 47.2662 36.2013 47.8927 36.0852L51.9631 34.7838C52.0928 34.779 52.204 34.7748 52.3337 34.7699C52.9665 34.8201 53.4856 35.3006 53.6019 35.9258C53.7423 36.6983 53.2314 37.4213 52.4573 37.5615L48.3869 38.8628C48.2572 38.8677 48.146 38.8719 48.0163 38.8768Z" fill="black"/>
+</svg>

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

@@ -1,10 +0,0 @@
-<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/formatting-sticker.svg

@@ -0,0 +1,14 @@
+<svg width="48" height="53" viewBox="0 0 48 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0318 49.3047C8.37955 49.0726 5.954 47.8646 4.19279 45.8924C2.38225 43.8966 1.43145 41.1794 1.59312 38.4503L3.21367 11.7765C3.38339 9.02882 4.61832 6.51569 6.69811 4.69965C8.77097 2.88942 11.4263 1.98461 14.1804 2.15488L36.208 3.49743C36.3036 3.50579 36.3929 3.5136 36.4821 3.52141C42.1182 4.0145 46.2617 8.79061 45.9192 14.3949L45.6776 18.3312L45.6457 18.3284L44.2673 41.0596C44.1034 43.8142 42.8615 46.3331 40.7817 48.1492C38.7765 49.9203 36.0483 50.8509 33.3197 50.6828L11.3065 49.3223C11.2173 49.3145 11.1216 49.3061 11.0324 49.2983L11.0318 49.3047Z" fill="#80CB9C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.9416 5.98877C10.3443 5.76399 7.26159 8.46881 7.0482 12.0093L5.42821 38.6768C5.32391 40.383 5.90961 42.0596 7.05772 43.3293C8.20471 44.6117 9.81409 45.3821 11.5458 45.4887L33.559 46.8492C35.2907 46.9558 36.9853 46.3845 38.2667 45.2502C39.5602 44.1235 40.3353 42.5338 40.4401 40.8212L42.0601 14.1537L42.092 14.1565C42.3065 10.6033 39.5665 7.55609 35.9819 7.33243L13.9543 5.98988L13.9416 5.98877ZM35.7938 10.2905C37.7231 10.4143 39.1993 12.0468 39.0888 13.9709L37.4688 40.6384C37.4018 41.5512 36.9863 42.4078 36.2966 43.0221L36.2838 43.0209C35.5941 43.6352 34.6807 43.9407 33.7407 43.8906L11.7275 42.5301C10.802 42.4619 9.93838 42.0523 9.31085 41.3678C8.6897 40.6839 8.37664 39.7828 8.4262 38.8491L10.0462 12.1816C10.1678 10.2778 11.8177 8.82245 13.7609 8.93464L35.7869 10.2963L35.7938 10.2905Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.5048 20.0851L12.8341 19.4998C12.0019 19.427 11.2792 20.054 11.224 20.8621C11.1521 21.684 11.7884 22.3992 12.6066 22.4555L22.2772 23.0408C23.1095 23.1136 23.3698 22.4462 23.4404 21.6394C23.5123 20.8175 23.3229 20.1414 22.5048 20.0851Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2844 27.566L18.0175 27.7148C18.8525 27.7572 19.5154 26.9256 19.5565 26.1009C19.5975 25.2763 18.9586 24.5915 18.1237 24.5491L12.5098 24.4568C11.6749 24.4144 10.8927 25.1896 10.8516 26.0142C10.8105 26.8389 11.4495 27.5236 12.2844 27.566Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.8173 30.0871L12.1466 29.5018C11.3144 29.429 10.5917 30.0559 10.5365 30.864C10.4646 31.686 11.1009 32.4012 11.9191 32.4574L21.5897 33.0428C22.422 33.1156 22.6823 32.4481 22.7529 31.6414C22.8248 30.8194 22.6354 30.1433 21.8173 30.0871Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.4364 34.425L11.7658 33.8397C10.9335 33.7669 10.2109 34.3938 10.1557 35.2019C10.0838 36.0239 10.7201 36.7391 11.5382 36.7953L21.2089 37.3806C22.0411 37.4535 22.3014 36.786 22.372 35.9793C22.4439 35.1573 22.2546 34.4812 21.4364 34.425Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.0067 21.2668L26.3361 20.6815C25.5038 20.6086 24.7812 21.2356 24.726 22.0437C24.6541 22.8657 25.2904 23.5809 26.1085 23.6371L35.7792 24.2224C36.6115 24.2952 36.8717 23.6278 36.9423 22.8211C37.0142 21.9991 36.8249 21.323 36.0067 21.2668Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.9266 15.2766L13.256 14.6912C12.4237 14.6184 11.7011 15.2454 11.6459 16.0535C11.574 16.8754 12.2103 17.5906 13.0285 17.6469L22.6991 18.2322C23.5314 18.305 23.7917 17.6376 23.8622 16.8308C23.9342 16.0089 23.7448 15.3328 22.9266 15.2766Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.4286 16.4562L26.758 15.8709C25.9257 15.7981 25.203 16.4251 25.1479 17.2332C25.076 18.0551 25.7122 18.7703 26.5304 18.8266L36.2011 19.4119C37.0333 19.4847 37.2936 18.8173 37.3642 18.0105C37.4361 17.1886 37.2468 16.5125 36.4286 16.4562Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.7864 28.7457L31.5195 28.8945C32.3544 28.9369 33.0173 28.1053 33.0584 27.2806C33.0995 26.456 32.4605 25.7712 31.6256 25.7288L26.0118 25.6365C25.1769 25.5941 24.3947 26.3693 24.3536 27.1939C24.3125 28.0186 24.9514 28.7033 25.7864 28.7457Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.3329 31.2687L25.6622 30.6834C24.83 30.6106 24.1073 31.2376 24.0522 32.0457C23.9803 32.8676 24.6165 33.5828 25.4347 33.6391L35.1054 34.2244C35.9376 34.2972 36.1979 33.6298 36.2685 32.823C36.3404 32.0011 36.1511 31.325 35.3329 31.2687Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.954 35.6086L25.2833 35.0233C24.4511 34.9504 23.7284 35.5774 23.6733 36.3855C23.6014 37.2075 24.2376 37.9227 25.0558 37.9789L34.7265 38.5642C35.5587 38.637 35.819 37.9696 35.8896 37.1629C35.9615 36.3409 35.7722 35.6648 34.954 35.6086Z" fill="black"/>
+</svg>

services/web/public/img/website-redesign/pi-sticker.svg

@@ -0,0 +1,4 @@
+<svg width="49" height="52" viewBox="0 0 49 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.75182 48.5467C3.94714 48.3013 1.48177 46.2315 0.763145 43.5222C0.081807 40.9468 1.08348 38.2737 3.3266 36.7219C8.4912 33.1469 9.72405 26.5243 10.6964 19.3316C10.5004 19.3308 10.2963 19.3293 10.1018 19.3123C9.49385 19.2591 8.89371 19.1168 8.31687 18.8948C6.57822 18.2281 5.13816 16.7625 4.46028 14.9879C3.81512 13.306 3.90315 11.4596 4.70087 9.90393C8.03885 3.40015 15.2328 3.23723 19.9966 3.12309C20.5616 3.10717 21.1178 3.09867 21.643 3.0711C27.7028 2.8008 33.9038 2.87771 40.0602 3.27747C43.7971 3.6044 46.3852 6.69786 46.1088 10.3248C45.8273 14.0085 42.749 16.7041 39.103 16.4586C38.0795 16.3936 37.0391 16.3352 35.9818 16.2836C35.5218 18.367 35.1414 20.4738 34.8524 22.5641C34.4713 25.3324 34.1677 27.6827 34.1524 29.9112C35.4624 28.0083 37.6813 26.9201 40.0807 27.13C42.1964 27.3151 44.1209 28.4718 45.2326 30.2353C46.3081 31.9467 46.5171 34.0397 45.7921 35.9775C44.9073 38.3423 41.4756 46.1039 34.3202 46.5724C33.7781 46.6066 33.2396 46.6004 32.7127 46.5543C26.8845 46.0444 23.2519 41.0708 21.9126 36.9594C21.5337 35.7827 21.2777 34.6005 21.1271 33.4275C19.3462 38.7524 16.4316 43.6841 11.1443 47.3546C9.83979 48.2615 8.3177 48.6674 6.76134 48.5312L6.75182 48.5467Z" fill="#F1A695"/>
+<path d="M37.8212 33.0269C37.1809 34.7433 35.1662 38.9125 32.8025 37.9215C30.289 36.8685 29.5397 33.5766 29.449 31.159C29.3333 28.0941 29.7469 24.9529 30.1669 21.9266C30.6155 18.666 31.2566 15.4467 32.0826 12.2599C32.1568 11.9723 32.1647 11.6953 32.1299 11.439C34.559 11.4964 36.9845 11.5942 39.4044 11.7569C41.8242 11.9196 42.1621 8.15101 39.7334 7.99571C33.7723 7.60486 27.8004 7.5235 21.8385 7.79421C17.4433 7.98961 11.2482 7.4721 8.8865 12.0601C8.41444 12.9745 9.12788 14.1559 9.99684 14.4933C11.0399 14.895 11.9594 14.2811 12.4301 13.383C13.0807 12.1085 15.2564 11.9803 16.5637 11.8823C16.5602 11.9228 16.5249 11.9524 16.5213 11.9929C14.7254 21.7845 15.1604 34.2707 6.01234 40.6174C4.0125 42.0025 6.45558 44.8872 8.4385 43.5088C18.517 36.5165 18.2992 23.1345 20.2825 12.322C20.3296 12.0647 20.3089 11.8342 20.2698 11.6266C21.5993 11.5551 22.9355 11.5004 24.2622 11.4613C25.6456 11.4272 27.0402 11.4511 28.4207 11.4494C27.4138 15.3963 26.6384 19.4043 26.1615 23.4548C25.7034 27.3844 25.1382 31.6967 26.3874 35.5306C27.4438 38.7678 30.2613 42.1345 33.9991 41.8897C37.614 41.6506 40.2244 37.3947 41.3559 34.3571C42.2087 32.0794 38.6644 30.7646 37.8117 33.0424L37.8212 33.0269Z" fill="#1C0000"/>
+</svg>