From b36610fb697ccc1d5a9888d5be013b8518ba2449 Mon Sep 17 00:00:00 2001 From: M Fahru Date: Wed, 11 Dec 2024 08:33:24 -0700 Subject: [PATCH] Merge pull request #22290 from overleaf/as-bs5-homepage Migrate homepage to Bootstrap 5 GitOrigin-RevId: 02f29964d770f512780c6f71229f246a5939657c --- .../Features/StaticPages/HomeController.mjs | 19 +- .../stylesheets/bootstrap-5/base/colors.scss | 2 + .../bootstrap-5/components/button.scss | 28 ++ .../bootstrap-5/components/card.scss | 22 ++ .../bootstrap-5/components/list.scss | 1 + .../stylesheets/bootstrap-5/pages/all.scss | 1 + .../bootstrap-5/pages/homepage.scss | 329 ++++++++++++++++++ .../bootstrap-5/pages/website-redesign.scss | 100 ++++++ 8 files changed, 497 insertions(+), 5 deletions(-) create mode 100644 services/web/frontend/stylesheets/bootstrap-5/pages/homepage.scss diff --git a/services/web/app/src/Features/StaticPages/HomeController.mjs b/services/web/app/src/Features/StaticPages/HomeController.mjs index 45e96b1fd8..d8251bb1d0 100644 --- a/services/web/app/src/Features/StaticPages/HomeController.mjs +++ b/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') } diff --git a/services/web/frontend/stylesheets/bootstrap-5/base/colors.scss b/services/web/frontend/stylesheets/bootstrap-5/base/colors.scss index ce03052cef..bfec9a29b8 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/base/colors.scss +++ b/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}; } diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/button.scss b/services/web/frontend/stylesheets/bootstrap-5/components/button.scss index 536799f09c..f1ab5477da 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/components/button.scss +++ b/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 diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/card.scss b/services/web/frontend/stylesheets/bootstrap-5/components/card.scss index ce15eb553c..b99c107083 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/components/card.scss +++ b/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); diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/list.scss b/services/web/frontend/stylesheets/bootstrap-5/components/list.scss index c067d769db..922f2d1fa1 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/components/list.scss +++ b/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); diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss index b2a49e3d73..32b556511b 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss @@ -34,3 +34,4 @@ @import 'group-settings'; @import 'templates-v2'; @import 'login-register'; +@import 'homepage'; diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/homepage.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/homepage.scss new file mode 100644 index 0000000000..f6b30f143f --- /dev/null +++ b/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); + } +} diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss index a1b3818aad..75bd8d6def 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss +++ b/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; + } + } + } + } + } }