Merge pull request #16627 from overleaf/ds-enterprise-page-videos

Website redesign - Final round of changes on enterprise page

GitOrigin-RevId: 78695d3395fdf0cdc5234ee8041efdcc2fde02ec

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

@@ -507,27 +507,6 @@
     }
   }
 
-  .homepage-hero {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 585px;
-
-    @media (max-width: @screen-sm-max) {
-      height: auto;
-    }
-
-    video {
-      box-shadow: 0px 60px 25px -15px rgba(16, 24, 40, 0.2);
-      max-height: 100%;
-      width: auto;
-
-      @media (max-width: @screen-sm-max) {
-        width: 100%;
-      }
-    }
-  }
-
   .home-register-newsletter-checkbox {
     font-size: 0.75rem;
     margin-top: 10px;

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

@@ -149,6 +149,53 @@
     }
   }
 
+  .security-heading-section {
+    @media (max-width: @screen-sm-max) {
+      p {
+        text-align: left;
+      }
+
+      h2 {
+        width: 100%;
+        text-align: left;
+      }
+    }
+
+    .heading-and-stickers-container {
+      display: flex;
+      justify-content: center;
+
+      .lock-sticker {
+        width: 70px;
+        position: absolute;
+        top: -95px;
+        right: -90px;
+
+        @media (max-width: @screen-lg) {
+          right: -145px;
+        }
+
+        @media (max-width: @screen-sm-max) {
+          display: none;
+        }
+      }
+
+      .arrow-sticker {
+        width: 140px;
+        position: absolute;
+        top: -50px;
+        right: -55px;
+
+        @media (max-width: @screen-lg) {
+          right: -110px;
+        }
+        @media (max-width: @screen-sm-max) {
+          display: none;
+        }
+      }
+    }
+  }
+
   .features-card {
     display: flex; /* equal heights */
     flex-wrap: wrap;
@@ -164,6 +211,30 @@
       }
     }
 
+    .features-card-video {
+      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%;
+      }
+
+      video.video-w-md-90 {
+        width: 90%;
+        @media (max-width: @screen-sm-max) {
+          width: 100%;
+        }
+      }
+
+      @media (max-width: @screen-sm-max) {
+        margin-bottom: 50px;
+      }
+    }
+
     .features-card-description,
     .features-card-description-list {
       padding-top: 16px;
@@ -788,4 +859,25 @@
       }
     }
   }
+
+  .editor-pdf-video {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 585px;
+
+    @media (max-width: @screen-sm-max) {
+      height: auto;
+    }
+
+    video {
+      box-shadow: 0px 60px 25px -15px rgba(16, 24, 40, 0.2);
+      max-height: 100%;
+      width: auto;
+
+      @media (max-width: @screen-sm-max) {
+        width: 100%;
+      }
+    }
+  }
 }

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

@@ -0,0 +1,16 @@
+<svg width="186" height="189" viewBox="0 0 186 189" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3314_12590)">
+<mask id="mask0_3314_12590" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="29" y="27" width="128" height="136">
+<path d="M131.703 162.014L156.552 49.5977L54.749 27.0954L29.9007 139.512L131.703 162.014Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_3314_12590)">
+<path d="M75.8669 149.676C74.6041 149.393 73.361 148.973 72.201 148.405L48.2304 136.914C45.3884 135.542 38.7041 132.354 36.0058 124.681C34.3956 120.103 33.2297 111.144 43.5909 102.594L63.9667 85.8257C67.6622 82.7823 72.5811 81.6489 77.451 82.7338C81.8783 83.7086 85.7657 86.3866 88.1108 90.0811C88.4696 90.6484 88.7963 91.2321 89.0821 91.8273C103.51 83.832 115.291 71.0001 121.576 55.541C124.581 48.1588 132.052 44.2022 139.75 45.9059C144.673 46.9978 149.015 50.319 151.364 54.7838C153.66 59.161 153.9 64.325 152.016 68.9431C141.505 94.7676 120.216 115.402 94.4541 126.087C94.7854 126.765 95.0797 127.468 95.3147 128.195C96.7479 132.537 96.3665 137.296 94.271 141.269C90.792 147.859 83.2315 151.319 75.8659 149.698L75.8669 149.676Z" fill="#DADBEB"/>
+<path d="M141.01 64.4486C143.298 58.8196 134.901 54.3302 132.593 59.9942C121.354 87.6116 95.2991 107.918 65.8122 111.926C69.4191 108.959 73.0173 105.987 76.6329 103.025C78.6198 101.398 79.5769 98.805 78.0828 96.4571C76.8305 94.4965 73.5118 93.3625 71.5064 95.0023C66.8754 98.8172 62.2356 102.627 57.6045 106.442C55.4453 108.214 53.2996 109.981 51.154 111.749C48.4213 114.013 45.854 116.863 47.2108 120.726C48.2072 123.575 50.8113 124.962 53.3604 126.182C55.9619 127.43 58.5547 128.674 61.1563 129.922C66.5436 132.5 71.9348 135.091 77.3173 137.677C79.6385 138.791 82.5166 138.029 83.7528 135.696C84.9206 133.484 84.0968 130.388 81.7718 129.26C77.2565 127.09 72.7275 124.924 68.1986 122.758C67.3314 122.342 66.4643 121.926 65.5971 121.51C98.5087 117.504 128.444 95.2997 140.996 64.4525L141.01 64.4486Z" fill="#13120D"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_3314_12590">
+<rect width="140.29" height="133.01" fill="white" transform="translate(185.516 65.793) rotate(119.214)"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -0,0 +1,16 @@
+<svg width="53" height="53" viewBox="0 0 53 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3314_12419)">
+<path d="M47.1527 39.369C47.5087 38.568 47.7306 37.7077 47.808 36.8236C48.0807 33.7059 46.524 30.8423 44.0311 29.2936C44.3142 28.9077 44.5721 28.4318 44.782 27.8343C45.0505 27.0696 45.2108 26.1599 45.2142 25.4087C45.2162 25.0496 45.2128 24.712 45.2041 24.3924C45.1187 20.8437 43.4367 17.5256 40.6155 15.3726C38.8013 13.9858 35.8609 12.6912 35.7349 11.4081C35.7281 11.3598 35.7253 11.3083 35.7185 11.26C35.7317 11.1512 35.7489 11.0391 35.7584 10.9299C36.071 7.35745 34.1579 4.20978 31.1615 2.88455C30.4939 2.55487 29.7466 2.33919 28.9135 2.2663C28.8735 2.2628 28.8298 2.25898 28.7898 2.25548C28.7498 2.25198 28.7061 2.24816 28.6661 2.24466C27.833 2.17177 27.0596 2.25441 26.3449 2.46315C23.1636 3.25157 20.7333 6.01558 20.4208 9.58806C20.4109 9.70084 20.4086 9.81061 20.4027 9.92007C20.3877 9.96641 20.3723 10.0164 20.3609 10.063C20.014 11.3047 16.8932 12.0728 14.866 13.1198C11.7137 14.7502 9.4812 17.7258 8.78084 21.2057C8.71677 21.519 8.65475 21.8509 8.59446 22.2049C8.46373 22.9449 8.46719 23.869 8.59885 24.6687C8.70181 25.2935 8.87285 25.8107 9.0849 26.2362C6.36094 27.3285 4.33063 29.8783 4.05786 32.996C3.98052 33.88 4.05329 34.7662 4.26116 35.6165C2.47972 37.1652 1.45084 39.414 1.19813 42.3026L1.0323 44.1979C0.828921 46.5226 2.54851 48.5719 4.87317 48.7753L44.2686 52.222C46.5933 52.4253 48.6426 50.7057 48.846 48.3811L49.0118 46.4857C49.2645 43.5972 48.6418 41.2039 47.1564 39.3693L47.1527 39.369Z" fill="#B199C8"/>
+<path d="M21.2483 22.5534L33.883 23.6588C34.3123 23.6964 34.6881 23.381 34.7257 22.9517L34.9481 20.4088C35.1133 18.5207 34.5221 16.647 33.3074 15.1954C32.8792 14.6851 32.3827 14.2421 31.8392 13.8756C32.5942 13.0399 33.09 11.9395 33.1986 10.699C33.4503 7.82133 31.5304 5.29625 28.6528 5.04449C25.7752 4.79273 23.2316 6.92365 22.9795 9.80491C22.8691 11.0673 23.2154 12.2633 23.8822 13.2308C23.3167 13.4929 22.7852 13.8276 22.2989 14.2323C20.847 15.4506 20.2814 17.2231 20.1162 19.1112L19.9503 21.0065C19.8816 21.7923 20.4625 22.4847 21.2483 22.5534ZM28.4003 7.88906C29.7099 8.00364 30.4646 9.14008 30.3501 10.4497C30.2355 11.7594 29.2913 12.7472 27.9852 12.633C26.6792 12.5187 25.7062 11.3632 25.8208 10.0535C25.9354 8.74382 27.0906 7.77447 28.4003 7.88906ZM23.0247 18.6325C23.096 17.8176 23.4392 17.0374 24.0513 16.4935C24.8026 15.826 25.6818 15.5804 26.6952 15.4784C27.0317 15.4455 27.3725 15.446 27.7109 15.4756L28.584 15.552C29.9863 15.6967 30.3893 16.1608 31.1196 17.0312C31.8499 17.9016 32.2059 19.0288 32.1069 20.1602C32.084 20.4221 31.8545 20.6147 31.5926 20.5918L23.3999 19.875C23.138 19.8521 22.9454 19.6226 22.9683 19.3607L23.0317 18.6367L23.0247 18.6325Z" fill="#1D0F04"/>
+<path d="M44.7303 41.0411C44.302 40.5308 43.8056 40.0878 43.2621 39.7213C44.0171 38.8856 44.5129 37.7852 44.6214 36.5447C44.8732 33.667 42.9533 31.142 40.0756 30.8902C37.198 30.6384 34.6545 32.7693 34.4024 35.6506C34.292 36.913 34.6382 38.109 35.3051 39.0765C34.7396 39.3386 34.2081 39.6733 33.7218 40.078C32.2698 41.2963 31.7042 43.0688 31.539 44.9569L31.3732 46.8522C31.3045 47.638 31.8854 48.3304 32.6712 48.3991L45.3058 49.5045C45.7351 49.5421 46.111 49.2267 46.1485 48.7974L46.371 46.2545C46.5362 44.3664 45.9449 42.4927 44.7303 41.0411ZM39.8231 33.7348C41.1328 33.8493 41.8875 34.9858 41.7729 36.2954C41.6583 37.6051 40.7141 38.5929 39.4081 38.4787C38.1021 38.3644 37.1291 37.2089 37.2436 35.8992C37.3582 34.5895 38.5135 33.6202 39.8231 33.7348ZM43.0118 46.4371L34.8191 45.7204C34.5572 45.6975 34.3646 45.468 34.3875 45.2061L34.4509 44.4821C34.5222 43.6672 34.8654 42.8871 35.4775 42.3431C36.2287 41.6757 37.108 41.43 38.1214 41.3281C38.4578 41.2952 38.7987 41.2957 39.137 41.3253L40.0101 41.4017C41.4125 41.5463 41.8154 42.0105 42.5458 42.8809C43.2761 43.7512 43.632 44.8785 43.5331 46.0099C43.5101 46.2718 43.2807 46.4643 43.0187 46.4414L43.0118 46.4371Z" fill="#1D0F04"/>
+<path d="M15.9301 37.3307C16.685 36.4949 17.1809 35.3946 17.2894 34.154C17.5412 31.2764 15.6212 28.7513 12.7436 28.4996C9.86599 28.2478 7.32245 30.3787 7.07037 33.26C6.95993 34.5224 7.30618 35.7184 7.97303 36.6858C7.40756 36.948 6.87606 37.2827 6.38976 37.6874C4.93782 38.9057 4.37218 40.6781 4.20699 42.5662L4.04117 44.4616C3.97242 45.2474 4.55337 45.9397 5.33916 46.0085L17.9738 47.1139C18.4031 47.1514 18.7789 46.8361 18.8165 46.4068L19.039 43.8639C19.2041 41.9758 18.6129 40.1021 17.3982 38.6505C16.97 38.1401 16.4735 37.6971 15.9301 37.3307ZM12.4908 31.3478C13.8004 31.4623 14.5551 32.5988 14.4406 33.9085C14.326 35.2181 13.3818 36.2059 12.0757 36.0917C10.7697 35.9774 9.79672 34.8219 9.9113 33.5122C10.0259 32.2025 11.1811 31.2332 12.4908 31.3478ZM15.6794 44.0502L7.48676 43.3334C7.22482 43.3105 7.03228 43.081 7.0552 42.8191L7.11854 42.0951C7.18983 41.2802 7.53302 40.5001 8.14514 39.9561C8.89637 39.2887 9.77567 39.043 10.789 38.9411C11.1255 38.9082 11.4664 38.9087 11.8047 38.9383L12.6778 39.0147C14.0801 39.1594 14.4831 39.6235 15.2134 40.4939C15.9438 41.3643 16.2997 42.4915 16.2007 43.6229C16.1778 43.8848 15.9483 44.0773 15.6864 44.0544L15.6794 44.0502Z" fill="#1D0F04"/>
+<path d="M39.6665 26.5558C39.5908 27.4216 40.3092 28.1773 41.2175 28.1028C41.9265 28.0439 42.5086 27.424 42.5194 26.7138C42.6124 21.2928 41.9526 19.9521 40.2585 17.2341C39.9403 16.7224 39.3481 16.4103 38.7536 16.5013C37.6985 16.6619 37.1999 17.8353 38.21 19.4047C39.6308 21.6845 39.9186 23.6745 39.6665 26.5558Z" fill="#1D0F04"/>
+<path d="M30.2399 38.0993C29.0817 38.3902 28.6317 38.5048 27.8527 38.5687C25.9772 38.7198 24.0954 38.3572 22.4031 37.5457C22.1111 37.4065 21.8263 37.2679 21.5441 37.1406C20.8285 36.8141 19.9799 37.1284 19.653 37.8476C19.3262 38.5668 19.6445 39.4122 20.36 39.7387C21.9985 40.8718 23.0779 41.1459 24.9078 41.306C26.7377 41.4661 28.0001 41.5765 30.7937 40.6515C31.5551 40.4542 32.0157 39.6734 31.8184 38.9119C31.621 38.1505 31.0049 37.9023 30.2395 38.103L30.2399 38.0993Z" fill="#1D0F04"/>
+<path d="M12.2098 25.4692C13.2068 26.0147 13.9942 25.1011 14.063 24.3153C14.3151 21.434 14.9276 19.5448 16.7227 17.5463C17.6 16.527 17.8771 15.2462 17.1903 14.8415C16.602 14.3172 15.6999 14.3629 15.1755 14.9512C13.2712 17.6952 12.4136 17.9025 11.5792 22.705C11.4452 23.4814 11.5241 25.094 12.2134 25.4695L12.2098 25.4692Z" fill="#1D0F04"/>
+</g>
+<defs>
+<clipPath id="clip0_3314_12419">
+<rect width="48" height="48.4382" fill="white" transform="translate(4.87793 0.15625) rotate(5)"/>
+</clipPath>
+</defs>
+</svg>