Merge pull request #16070 from overleaf/mf-website-redesign-features

[web] Implement new features overview page

GitOrigin-RevId: b93ba66b25826a4add0c47228546c11e5c21ce4c

services/web/frontend/stylesheets/app/cms-page.less

@@ -458,3 +458,34 @@
     }
   }
 }
+
+.website-redesign {
+  // mobile breakpoint is md in website redesign
+  @media (max-width: @screen-sm-max) {
+    .col-xs-padding-sm {
+      .col-xs-12:not(:first-child) {
+        padding-top: @padding-sm;
+      }
+    }
+    .col-xs-padding-md {
+      .col-xs-12:not(:first-child) {
+        padding-top: @padding-md;
+      }
+    }
+    .col-xs-padding-lg {
+      .col-xs-12:not(:first-child) {
+        padding-top: @padding-lg;
+      }
+    }
+    .col-xs-padding-xl {
+      .col-xs-12:not(:first-child) {
+        padding-top: @padding-xl;
+      }
+    }
+    .col-xs-padding-xxl {
+      .col-xs-12:not(:first-child) {
+        padding-top: @padding-xxl;
+      }
+    }
+  }
+}

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

@@ -1,11 +1,21 @@
 .website-redesign {
   p,
+  h1,
   h2,
   h3,
-  a {
+  h4,
+  a,
+  strong,
+  span {
     font-family: 'Noto Sans', sans-serif;
   }
 
+  h1 {
+    font-size: 3rem;
+    font-weight: 600;
+    line-height: 4rem;
+  }
+
   h2 {
     font-weight: 600;
     font-size: 2.25rem;
@@ -133,6 +143,11 @@
     }
 
     .features-card-description {
+      h3 {
+        font-size: 1.875rem; // 30px
+        line-height: 2.5rem; // 40px
+      }
+
       p {
         margin-bottom: 10px;
       }
@@ -143,11 +158,10 @@
         margin: 0;
 
         li {
-          margin-bottom: 8px;
+          margin-bottom: 16px;
+          display: flex;
 
           @media (max-width: @screen-sm-max) {
-            display: flex;
-
             i {
               height: 25px; // force height if text wraps to multiple lines
             }
@@ -157,6 +171,18 @@
               height: 20px; // force height if text wraps to multiple lines
             }
           }
+
+          h4 {
+            display: flex;
+            margin-top: 0;
+            margin-bottom: 8px;
+            font-size: 20px;
+            font-weight: 600;
+          }
+
+          p {
+            margin-bottom: 0;
+          }
         }
       }
     }
@@ -166,6 +192,7 @@
     .top-image-card {
       > img.img-responsive {
         width: 100%;
+        border-radius: 8px;
       }
 
       .top-image-card-title {
@@ -178,6 +205,7 @@
           color: var(--neutral-90);
           display: inline-flex;
           justify-content: space-between;
+          text-decoration: none;
         }
 
         i.material-symbols-rounded {
@@ -207,8 +235,12 @@
     color: var(--white);
     border-radius: 8px;
 
+    @media (max-width: @screen-sm-max) {
+      padding: 48px 24px 48px 24px;
+    }
+
     .cta-card-title {
-      font-size: 52px;
+      font-size: 3.25rem; // 52px
       font-weight: 500;
       font-family: 'DM Mono', monospace;
       margin-bottom: 8px;
@@ -220,12 +252,85 @@
       span.lime-color {
         color: #7ee787;
       }
+
+      @media (max-width: @screen-sm-max) {
+        font-size: 2.25rem; // 36px
+      }
     }
 
-    .cta-card-buttons {
+    .cta-card-quote {
-      margin-top: 24px;
+      font-size: 1.875rem; // 30px
+      font-weight: 600;
+      line-height: 2.5rem; // 40px
+      letter-spacing: 0em;
+      text-align: center;
+    }
+  }
+
+  .quote-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 48px;
+    background: #2f4858;
+    color: white;
+    border-radius: 16px;
+
+    .quote-card-quote {
+      font-size: 1.875rem; // 30px
+      font-weight: 600;
+      line-height: 2.5rem; // 40px
+      letter-spacing: 0em;
+      text-align: center;
+
+      @media (max-width: @screen-sm-max) {
+        font-size: 1.5rem; // 24px
+        line-height: 2rem; // 32px
+      }
+    }
+
+    .quote-card-img {
+      margin-top: 32px;
+      margin-bottom: 16px;
+    }
+
+    @media (max-width: @screen-sm-max) {
+      padding: 56px 24px 56px 24px;
+    }
+  }
+
+  .integrations-card {
+    h3 {
       display: flex;
-      gap: 12px;
+      align-items: center;
+
+      @media (max-width: @screen-sm-max) {
+        .label-premium {
+          margin-left: auto;
+          height: 20px;
+        }
+      }
+    }
+
+    .integrations-icons {
+      img {
+        width: 6rem; // 96px
+        height: 6rem; // 96px
+      }
+
+      .first-row,
+      .second-row {
+        display: flex;
+      }
+
+      .first-row {
+        justify-content: space-between;
+      }
+
+      .second-row {
+        margin-top: 40px;
+        justify-content: space-evenly;
+      }
     }
   }
 
@@ -288,6 +393,12 @@
     font-weight: 500;
     line-height: 1.5rem;
     margin: 0;
+
+    ~ h1,
+    ~ h2,
+    ~ h3 {
+      margin-top: 8px;
+    }
   }
 
   .green-link {
@@ -322,6 +433,8 @@
     top: 4px;
     vertical-align: middle;
     margin-right: 8px;
+    width: 25px;
+    height: 25px;
   }
 
   .green-round-background {
@@ -376,4 +489,34 @@
       }
     }
   }
+
+  .circle-img {
+    height: 64px;
+    max-width: 64px;
+  }
+
+  .premium-badge {
+    .premium-badge-img {
+      margin-left: 10px;
+    }
+
+    @media (max-width: @screen-xs-max) {
+      display: flex;
+      .premium-badge-img {
+        width: 87px;
+        margin-left: auto;
+      }
+    }
+  }
+
+  .responsive-button-container {
+    display: flex;
+    margin-top: 24px;
+    gap: 16px;
+
+    @media (max-width: @screen-sm-max) {
+      flex-direction: column;
+      width: 100%;
+    }
+  }
 }

services/web/public/img/third-party-icons/dropbox-round.svg

@@ -0,0 +1,23 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dd_1211_38203)">
+<circle cx="48" cy="48" r="42" fill="#0F287F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33 24L18 33L33 42L18 51L33 60L48 51L63 60L78 51L63 42L78 33L63 24L48 33L33 24ZM48 33L63 42L48 51L33 42L48 33Z" fill="#DAF8FE"/>
+<path d="M33 66L48 57L63 66L48 75L33 66Z" fill="#DAF8FE"/>
+</g>
+<defs>
+<filter id="filter0_dd_1211_38203" x="-3" y="-2" width="102" height="102" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.06 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1211_38203"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_1211_38203" result="effect2_dropShadow_1211_38203"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1211_38203" result="shape"/>
+</filter>
+</defs>
+</svg>

services/web/public/img/third-party-icons/mendeley.svg

@@ -0,0 +1,3 @@
+<svg width="96" height="54" viewBox="0 0 96 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M95.9946 44.6795C95.6148 34.2771 83.7916 37.0489 80.6087 30.6665C77.4996 24.4352 82.8447 22.2991 82.8447 15.3447C82.8447 7.10651 75.9002 0.428223 67.3348 0.428223C56.2755 0.428223 56.4306 9.37915 48.0011 9.37915H48C39.5705 9.37915 39.7256 0.428223 28.6663 0.428223C20.0998 0.428223 13.1563 7.10755 13.1563 15.3447C13.1563 22.2991 18.5003 24.4342 15.3924 30.6665C12.2084 37.0489 0.38629 34.2771 0.00541443 44.6795C-0.174325 49.5874 4.14583 53.5711 9.25234 53.5711C14.3589 53.5711 18.526 49.5906 18.4982 44.6795C18.4747 40.6647 15.6181 39.235 16.6441 34.4511H16.6462C17.4711 30.4498 21.9261 27.0215 27.6745 26.3328C34.1152 25.5606 41.3946 28.62 41.3946 35.5275C41.3946 39.805 38.7606 40.3833 38.7606 44.6795C38.7606 49.3988 42.7597 53.5711 47.9936 53.5711C53.2274 53.5711 57.2394 49.3988 57.2394 44.6795C57.2394 40.3844 54.6054 39.805 54.6054 35.5275C54.6054 28.6189 61.8838 25.5606 68.3266 26.3328C74.075 27.0215 78.5299 30.4487 79.3537 34.4501H79.3559C80.3819 39.235 77.5253 40.6647 77.5018 44.6795C77.474 49.5895 81.6422 53.5711 86.7487 53.5711C91.8552 53.5711 96.1743 49.5864 95.9946 44.6795ZM48.0075 29.8965C42.901 29.8965 38.7606 25.916 38.7606 21.0039C38.7606 16.0939 42.901 12.1124 48.0075 12.1124C53.114 12.1124 57.2533 16.0929 57.2533 21.0039C57.2533 25.9149 53.114 29.8965 48.0075 29.8965Z" fill="#E5222E"/>
+</svg>