Merge pull request #22290 from overleaf/as-bs5-homepage

Migrate homepage to Bootstrap 5

GitOrigin-RevId: 02f29964d770f512780c6f71229f246a5939657c

services/web/app/src/Features/StaticPages/HomeController.mjs

@@ -6,14 +6,12 @@ import ErrorController from '../Errors/ErrorController.js'
 import SessionManager from '../Authentication/SessionManager.js'
 import { expressify } from '@overleaf/promise-utils'
 import logger from '@overleaf/logger'
+import SplitTestHandler from '../SplitTests/SplitTestHandler.js'
 
 const __dirname = new URL('.', import.meta.url).pathname
 
 const homepageExists = fs.existsSync(
-  Path.join(
-    __dirname,
-    '/../../../views/external/home/website-redesign/index.pug'
-  )
+  Path.join(__dirname, '/../../../views/external/home/index.pug')
 )
 
 async function index(req, res) {
@@ -34,7 +32,18 @@ async function home(req, res) {
       page: req.path,
     })
 
-    res.render('external/home/website-redesign/index')
+    const homeVariant = await SplitTestHandler.promises.getAssignment(
+      req,
+      res,
+      'bs5-homepage'
+    )
+    const isBS5page = homeVariant.variant === 'enabled'
+
+    if (isBS5page) {
+      res.render('external/home/index')
+    } else {
+      res.render('external/home/bootstrap3/index')
+    }
   } else {
     res.redirect('/login')
   }

services/web/frontend/stylesheets/bootstrap-5/base/colors.scss

@@ -4,6 +4,7 @@ $ceil: #9597c9;
 $caramel: #f9d38f;
 $dark-jungle-green: #0f271a;
 $sapphire-blue: #4354a3;
+$sapphire-blue-dark: #3c4c93;
 $purple-bright: #939aff;
 $green-bright: #13c965;
 
@@ -13,6 +14,7 @@ $green-bright: #13c965;
   --caramel: #{$caramel};
   --dark-jungle-green: #{$dark-jungle-green};
   --sapphire-blue: #{$sapphire-blue};
+  --sapphire-blue-dark: #{$sapphire-blue-dark};
   --green-bright: #{$green-bright};
   --purple-bright: #{$purple-bright};
 }

services/web/frontend/stylesheets/bootstrap-5/components/button.scss

@@ -102,6 +102,34 @@
       $borderless: false
     );
   }
+
+  &.btn-blue {
+    @include ol-button-variant(
+      $color: var(--content-primary-dark),
+      $background: var(--sapphire-blue),
+      $border: var(--sapphire-blue),
+      $hover-background: (
+        var(--sapphire-blue-dark),
+      ),
+      $hover-border: (
+        var(--sapphire-blue-dark),
+      ),
+      $borderless: false
+    );
+  }
+
+  &.btn-social {
+    @extend .btn-secondary;
+
+    padding-left: var(--spacing-03);
+
+    .btn-social-icon {
+      height: 24px;
+      width: 24px;
+      padding: var(--spacing-01);
+      margin-right: var(--spacing-02);
+    }
+  }
 }
 
 // Link buttons

services/web/frontend/stylesheets/bootstrap-5/components/card.scss

@@ -80,6 +80,28 @@
     }
   }
 
+  &.card-blue-border {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5 {
+      color: var(--sapphire-blue);
+    }
+
+    background-color: white;
+    border-radius: var(--spacing-04);
+    border: 2px solid var(--sapphire-blue);
+
+    .card-body {
+      padding: var(--spacing-10);
+    }
+
+    .btn {
+      width: 100%;
+    }
+  }
+
   &.card-pattern {
     border-radius: var(--border-radius-medium);
     color: var(--white);

services/web/frontend/stylesheets/bootstrap-5/components/list.scss

@@ -8,6 +8,7 @@
   }
 
   li {
+    min-height: $icon-size;
     background-size: $icon-size $icon-size;
     margin-bottom: var(--spacing-05);
     padding-left: calc(var(--spacing-05) + $icon-size);

services/web/frontend/stylesheets/bootstrap-5/pages/all.scss

@@ -34,3 +34,4 @@
 @import 'group-settings';
 @import 'templates-v2';
 @import 'login-register';
+@import 'homepage';

services/web/frontend/stylesheets/bootstrap-5/pages/homepage.scss

@@ -0,0 +1,329 @@
+.homepage-container {
+  padding-top: $header-height;
+
+  .home-animation-text-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .home-begin-text {
+      font-weight: 400;
+      display: flex;
+      color: #5f5ff0;
+      font-size: 4rem;
+      line-height: 1.25;
+      font-family: 'DM Mono', monospace;
+      align-self: flex-start;
+      width: 100%;
+      margin-top: 0;
+
+      @include media-breakpoint-down(lg) {
+        text-align: center;
+        flex-direction: column;
+        align-items: center;
+        font-size: 2.25rem;
+      }
+    }
+
+    .home-parenthesis-text {
+      color: #bbdbb8;
+      font-size: 4rem;
+      line-height: 1.25;
+      display: inherit;
+
+      span {
+        /* specifity workaround, otherwise .website-redesign span would take precedence */
+        font-family: 'DM Mono', monospace;
+      }
+
+      #home-animation-text {
+        color: var(--neutral-70);
+      }
+
+      @include media-breakpoint-down(lg) {
+        font-size: 2.25rem;
+      }
+    }
+  }
+
+  .home-top-text {
+    @include heading-sm;
+
+    text-align: center;
+    font-weight: 400;
+
+    @include media-breakpoint-down(lg) {
+      @include heading-xs;
+
+      padding: 0 var(--spacing-16);
+    }
+
+    @include media-breakpoint-down(md) {
+      padding: 0 var(--spacing-07);
+    }
+
+    // force different line for desktop on both text
+    > span:first-of-type {
+      display: block;
+
+      @include media-breakpoint-down(lg) {
+        display: inline;
+      }
+    }
+
+    // need to have an extra space only for mobile
+    // since on mobile all the text are inline
+    .dash-text {
+      @include media-breakpoint-down(lg) {
+        &::after {
+          content: ' ';
+        }
+      }
+    }
+  }
+
+  .home-registration {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: var(--spacing-07);
+
+    .home-registration-sso {
+      display: flex;
+      gap: 16px;
+
+      .btn {
+        width: 100%;
+      }
+
+      @include media-breakpoint-down(md) {
+        flex-direction: column;
+        width: 100%;
+      }
+    }
+
+    .home-registration-separator {
+      margin: var(--spacing-04) 0;
+      color: var(--neutral-90);
+
+      > span {
+        vertical-align: middle;
+
+        &::before,
+        &::after {
+          content: '';
+          display: inline-block;
+          vertical-align: middle;
+          width: 196px;
+          height: 1px;
+          background-color: var(--neutral-20);
+
+          @include media-breakpoint-down(lg) {
+            flex-direction: column;
+            width: 156px;
+          }
+        }
+
+        &::before {
+          margin-right: var(--spacing-07);
+
+          @include media-breakpoint-down(lg) {
+            margin-right: var(--spacing-03);
+          }
+        }
+
+        &::after {
+          margin-left: var(--spacing-07);
+
+          @include media-breakpoint-down(lg) {
+            margin-left: var(--spacing-03);
+          }
+        }
+      }
+    }
+
+    .home-registration-password {
+      display: flex;
+      flex-direction: column;
+
+      .home-registration-password-input {
+        display: flex;
+        flex-direction: row;
+        gap: var(--spacing-06);
+        margin-bottom: 0;
+      }
+
+      input {
+        flex: 1;
+      }
+    }
+
+    .home-registration-sign-up {
+      display: block;
+      margin-top: var(--spacing-06);
+      width: 100%;
+      margin-bottom: 0;
+
+      > button {
+        width: 100%;
+      }
+    }
+
+    .tos-agreement-notice {
+      font-size: 0.75rem;
+    }
+  }
+
+  .editor-pdf-video {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 585px;
+    padding: 0 var(--spacing-06);
+
+    @include media-breakpoint-down(lg) {
+      height: auto;
+    }
+
+    video {
+      box-shadow: 0 60px 25px -15px rgb(16 24 40 / 20%);
+      max-height: 100%;
+      width: auto;
+      padding: 0;
+
+      @include media-breakpoint-down(lg) {
+        width: 100%;
+      }
+    }
+  }
+
+  .home-millions-user-text {
+    @include heading-sm;
+
+    text-align: center;
+
+    @include media-breakpoint-down(lg) {
+      @include body-base;
+    }
+  }
+
+  .organization-logos-container {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+
+    @include media-breakpoint-down(lg) {
+      flex-wrap: wrap;
+      gap: var(--spacing-09);
+    }
+
+    .organization-logo {
+      object-fit: contain;
+      max-height: 62px;
+
+      &.samsung-logo {
+        max-height: 110px;
+        height: 110px;
+      }
+
+      @include media-breakpoint-down(lg) {
+        max-height: 40px;
+        flex-basis: 34%;
+      }
+    }
+  }
+
+  .header-description {
+    @include heading-sm;
+
+    p {
+      margin-bottom: 0;
+    }
+  }
+
+  #home-features-arrow-green {
+    position: absolute;
+    left: 154px;
+    top: -98px;
+
+    @include media-breakpoint-down(lg) {
+      height: 100px;
+      left: 120px;
+      top: -60px;
+    }
+  }
+
+  #home-rocket-yellow {
+    position: absolute;
+    right: 30px;
+    bottom: 0;
+
+    @include media-breakpoint-down(xl) {
+      height: 100px;
+      right: 30px;
+      bottom: -84px;
+    }
+
+    @include media-breakpoint-down(lg) {
+      height: 70px;
+      right: 0;
+      bottom: unset;
+      top: -59px;
+    }
+  }
+
+  .template-card {
+    > img.img-responsive {
+      width: 100%;
+      border-radius: var(--border-radius-medium);
+    }
+
+    .template-card-title {
+      @include heading-md;
+
+      margin-top: var(--spacing-06);
+      margin-bottom: var(--spacing-04);
+
+      i.material-symbols {
+        vertical-align: middle;
+        text-decoration: none;
+      }
+    }
+
+    &:not(:last-of-type) {
+      @include media-breakpoint-down(lg) {
+        margin-bottom: var(--spacing-10);
+      }
+    }
+  }
+
+  .plans-card {
+    min-height: 348px;
+    height: 100%;
+
+    .card-body {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .card-title {
+      @include heading-sm;
+
+      padding: 0;
+    }
+
+    .plans-card-footer {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-05);
+      margin-top: auto;
+    }
+  }
+
+  .customer-story-card-title {
+    @include heading-md;
+
+    margin-top: var(--spacing-08);
+    margin-bottom: var(--spacing-05);
+  }
+}

services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss

@@ -261,4 +261,104 @@
 
     background: var(--green-30);
   }
+
+  .features-card {
+    display: flex; /* equal heights */
+    flex-wrap: wrap;
+    align-items: center;
+
+    .features-card-media,
+    .features-card-media-right {
+      padding-top: var(--spacing-08);
+      position: relative;
+
+      img.img-responsive {
+        width: 100%;
+      }
+
+      video {
+        box-shadow:
+          0 4px 6px 0 rgb(30 37 48 / 12%),
+          0 8px 16px 0 rgb(30 37 48 / 12%);
+        max-height: 100%;
+        width: auto;
+        width: 100%;
+      }
+
+      @include media-breakpoint-down(lg) {
+        margin-bottom: var(--spacing-11);
+      }
+    }
+
+    @include media-breakpoint-up(lg) {
+      .features-card-media-right {
+        padding-left: var(--spacing-13);
+      }
+
+      .features-card-media {
+        padding-right: var(--spacing-13);
+      }
+    }
+
+    .features-card-description,
+    .features-card-description-list {
+      padding-top: var(--spacing-06);
+
+      p {
+        margin-bottom: var(--spacing-06);
+        font-size: 1.125rem;
+        line-height: 1.333;
+
+        @include media-breakpoint-down(lg) {
+          font-size: 1rem;
+          line-height: 1.375;
+        }
+      }
+    }
+
+    .features-card-description {
+      h3 {
+        font-size: 1.5rem;
+        line-height: 1.4;
+        margin-bottom: var(--spacing-04);
+      }
+    }
+
+    .features-card-description-list {
+      h3 {
+        font-size: 1.875rem;
+        line-height: 1.5;
+      }
+
+      ul.list-simple-text,
+      ul.list-heading-text {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+
+        li {
+          margin-bottom: var(--spacing-05);
+          font-size: 1.125rem;
+          line-height: 1.333;
+          display: flex;
+
+          @include media-breakpoint-down(lg) {
+            font-size: 1rem;
+            line-height: 1.375;
+          }
+        }
+      }
+
+      ul.list-heading-text {
+        li {
+          h4 {
+            margin-top: 0;
+            margin-bottom: var(--spacing-04);
+            font-size: 20px;
+            font-weight: 600;
+          }
+        }
+      }
+    }
+  }
 }