[web] Implement homepage redesign (#15905)

* Implement homepage redesign for large screen width

* Implement the UI of `new-design-registration` variant of the homepage redesign

* Add quick placeholder/template for the website-redesign header/footer

Co-authored-by: Thomas Mees <thomas.mees@overleaf.com>
GitOrigin-RevId: 8cff6def8aa560f2e11230dae264cb19feede054

services/web/app/views/layout-website-redesign.pug

@@ -0,0 +1,23 @@
+extends ./layout-base
+
+include ./_mixins/formMessages
+
+block entrypointVar
+	- entrypoint = 'marketing'
+
+block body
+	if (typeof(suppressNavbar) == "undefined")
+		include layout/navbar-website-redesign
+
+	block content
+
+	if (typeof(suppressFooter) == "undefined")
+		if showThinFooter
+			include layout/footer-marketing
+		else
+			include layout/fat-footer-website-redesign
+
+	if (typeof(suppressCookieBanner) == 'undefined')
+		include _cookie_banner
+
+	!= moduleIncludes("contactModal-marketing", locals)

services/web/app/views/layout/fat-footer-website-redesign.pug

@@ -0,0 +1,79 @@
+footer.fat-footer.hidden-print.website-redesign
+	.fat-footer-container(role="navigation" aria-label=translate('footer_navigation'))
+		.fat-footer-sections(class=hideFatFooter ? 'hidden' : undefined)
+			.footer-section#footer-brand
+				a(href='/', aria-label=settings.appName).footer-brand
+					
+			.footer-section
+				h2.footer-section-heading #{translate('About')}
+					
+				ul.list-unstyled
+					li
+						a(href="/about") #{translate('footer_about_us')}
+					li
+						a(href="/about/values") #{translate('our_values')}
+					li
+						a(href="/about/careers") #{translate('careers')}
+					li
+						a(href="/for/press") !{translate('press_and_awards')}
+					li
+						a(href="/blog") #{translate('blog')}
+						
+			.footer-section
+				h2.footer-section-heading #{translate('learn')}
+		
+				ul.list-unstyled
+					li
+						a(href="/learn/latex/Learn_LaTeX_in_30_minutes") #{translate('latex_in_thirty_minutes')}
+					li
+						a(href="/latex/templates") #{translate('templates')}
+					li
+						a(href="/events/webinars") #{translate('webinars')}
+					li
+						a(href="/learn/latex/Tutorials") #{translate('tutorials')}
+					li
+						a(href="/learn/latex/Inserting_Images") #{translate('how_to_insert_images')}
+					li
+						a(href="/learn/latex/Tables") #{translate('how_to_create_tables')}
+						
+			.footer-section
+				h2.footer-section-heading !{translate('footer_plans_and_pricing')}
+		
+				ul.list-unstyled
+					li
+						a(href="/learn/how-to/Overleaf_premium_features") #{translate('premium_features')}
+					li
+						a(href="/user/subscription/plans?itm_referrer=footer-for-indv-groups") !{translate('for_individuals_and_groups')}
+					li
+						a(href="/for/enterprises") #{translate('for_enterprise')}
+					li
+						a(href="/for/universities") #{translate('for_universities')}
+					li
+						a(href="/user/subscription/plans?itm_referrer=footer-for-students#view=student") #{translate('for_students')}
+						
+			.footer-section
+				h2.footer-section-heading #{translate('get_involved')}
+		
+				ul.list-unstyled
+					li
+						a(href="/for/community/advisors") #{translate('become_an_advisor')}
+					li
+						a(href="https://forms.gle/67PSpN1bLnjGCmPQ9") #{translate('let_us_know_what_you_think')}
+					if user
+						li
+							a(href="/beta/participate") #{translate('join_beta_program')}
+						li
+							a(href="/user/bonus") #{translate('refer_a_friend')}
+		
+			.footer-section
+				h2.footer-section-heading #{translate('help')}
+		
+				ul.list-unstyled
+					li
+						a(href="/learn") #{translate('Documentation')} 
+					li
+						a(href="/contact") #{translate('footer_contact_us')}  
+					li
+						a(href="https://status.overleaf.com/") #{translate('website_status')}
+					
+		include fat-footer-base

services/web/app/views/layout/navbar-website-redesign.pug

@@ -0,0 +1,178 @@
+nav.navbar.navbar-default.navbar-main.website-redesign
+	.container-fluid
+		.navbar-header
+			if (typeof(suppressNavbarRight) == "undefined")
+				button.navbar-toggle.collapsed(
+					type="button",
+					data-toggle="collapse",
+					data-target="[data-ol-navbar-main-collapse]"
+					aria-label="Toggle " + translate('navigation')
+				)
+					i.fa.fa-bars(aria-hidden="true")
+			- var enableUpgradeButton = projectDashboardReact && usersBestSubscription && usersBestSubscription.type === 'free'
+			if (enableUpgradeButton)
+				a.btn.btn-primary.pull-right.me-2.visible-xs(
+					href="/user/subscription/plans"
+					event-tracking="upgrade-button-click"
+					event-tracking-mb="true"
+					event-tracking-label="upgrade"
+					event-tracking-trigger="click"
+					event-segmentation='{"source": "dashboard-top", "project-dashboard-react": "enabled", "is-dashboard-sidebar-hidden": "true", "is-screen-width-less-than-768px": "true"}'
+				) #{translate("upgrade")}
+			if settings.nav.custom_logo
+				a(href='/', aria-label=settings.appName, style='background-image:url("'+settings.nav.custom_logo+'")').navbar-brand
+			else if (nav.title)
+				a(href='/', aria-label=settings.appName).navbar-title #{nav.title}
+			else
+				a(href='/', aria-label=settings.appName).navbar-brand
+
+		- var canDisplayAdminMenu = hasAdminAccess()
+		- var canDisplayAdminRedirect = canRedirectToAdminDomain()
+		- var canDisplaySplitTestMenu = hasFeature('saas') && (canDisplayAdminMenu || (getSessionUser() && getSessionUser().staffAccess && (getSessionUser().staffAccess.splitTestMetrics || getSessionUser().staffAccess.splitTestManagement)))
+		- var canDisplaySurveyMenu = hasFeature('saas') && canDisplayAdminMenu
+
+		if (typeof(suppressNavbarRight) == "undefined")
+			.navbar-collapse.collapse(data-ol-navbar-main-collapse)
+				ul.nav.navbar-nav.navbar-right
+					if (canDisplayAdminMenu || canDisplayAdminRedirect || canDisplaySplitTestMenu)
+						li.dropdown.subdued
+							a.dropdown-toggle(
+								href="#",
+								role="button",
+								aria-haspopup="true",
+								aria-expanded="false",
+								data-toggle="dropdown"
+							)
+								| Admin
+								span.caret
+							ul.dropdown-menu
+								if canDisplayAdminMenu
+									li
+										a(href="/admin") Manage Site
+									li
+										a(href="/admin/user") Manage Users
+									li
+										a(href="/admin/project") Project URL Lookup
+								if canDisplayAdminRedirect
+									li
+										a(href=settings.adminUrl) Switch to Admin
+								if canDisplaySplitTestMenu
+									li
+										a(href="/admin/split-test") Manage Feature Flags
+								if canDisplaySurveyMenu
+									li
+										a(href="/admin/survey") Manage Surveys
+
+					// loop over header_extras
+					each item in nav.header_extras
+						-
+							if ((item.only_when_logged_in && getSessionUser())
+											|| (item.only_when_logged_out && (!getSessionUser()))
+											|| (!item.only_when_logged_out && !item.only_when_logged_in && !item.only_content_pages)
+											|| (item.only_content_pages && (typeof(suppressNavContentLinks) == "undefined" || !suppressNavContentLinks))
+							){
+								var showNavItem = true
+							} else {
+								var showNavItem = false
+							}
+
+						if showNavItem
+							if item.dropdown
+								li.dropdown(class=item.class)
+									a.dropdown-toggle(
+										href="#",
+										role="button",
+										aria-haspopup="true",
+										aria-expanded="false",
+										data-toggle="dropdown"
+									)
+										| !{translate(item.text)}
+										span.caret
+									ul.dropdown-menu
+										each child in item.dropdown
+											if child.divider
+												li.divider
+											else if child.isContactUs
+												li
+													a(data-ol-open-contact-form-modal="contact-us" href)
+														span(event-tracking="menu-clicked-contact" event-tracking-mb="true" event-tracking-trigger="click")
+															| #{translate("contact_us")}
+											else
+												li
+													if child.url
+														a(
+															href=child.url,
+															class=child.class,
+															event-tracking=child.event
+															event-tracking-mb="true"
+															event-tracking-trigger="click"
+															event-segmentation=child.eventSegmentation
+														) !{translate(child.text)}
+													else
+														| !{translate(child.text)}
+							else
+								li(class=item.class)
+									if item.url
+										a(
+											href=item.url,
+											class=item.class,
+											event-tracking=item.event
+											event-tracking-mb="true"
+											event-tracking-trigger="click"
+										) !{translate(item.text)}
+									else
+										| !{translate(item.text)}
+
+					// logged out
+					if !getSessionUser()
+						// register link
+						if hasFeature('registration-page')
+							li
+								a(
+									href="/register"
+									event-tracking="menu-clicked-register"
+									event-tracking-action="clicked"
+									event-tracking-trigger="click"
+									event-tracking-mb="true"
+									event-segmentation={ page: currentUrl }
+								) #{translate('register')}
+
+						// login link
+						li
+							a(
+								href="/login"
+								event-tracking="menu-clicked-login"
+								event-tracking-action="clicked"
+								event-tracking-trigger="click"
+								event-tracking-mb="true"
+								event-segmentation={ page: currentUrl }
+							) #{translate('log_in')}
+
+					// projects link and account menu
+					if getSessionUser()
+						li
+							a(href="/project") #{translate('Projects')}
+						li.dropdown
+							a.dropdown-toggle(
+								href="#",
+								role="button",
+								aria-haspopup="true",
+								aria-expanded="false",
+								data-toggle="dropdown"
+							)
+								| #{translate('Account')}
+								span.caret
+							ul.dropdown-menu
+								li
+									div.subdued #{getSessionUser().email}
+								li.divider.hidden-xs.hidden-sm
+								li
+									a(href="/user/settings") #{translate('Account Settings')}
+								if nav.showSubscriptionLink
+									li
+										a(href="/user/subscription") #{translate('subscription')}
+								li.divider.hidden-xs.hidden-sm
+								li
+									form(method="POST" action="/logout")
+										input(name='_csrf', type='hidden', value=csrfToken)
+										button.btn-link.text-left.dropdown-menu-button #{translate('log_out')}

services/web/frontend/fonts/dm-mono.css

@@ -0,0 +1,41 @@
+@font-face {
+  font-family: 'DM Mono';
+  font-style: normal;
+  font-weight: 300;
+  src: url('dm-mono/DMMono-Light.woff2') format('woff2'),
+}
+
+@font-face {
+  font-family: 'DM Mono';
+  font-style: italic;
+  font-weight: 300;
+  src: url('dm-mono/DMMono-LightItalic.woff2') format('woff2'),
+}
+
+@font-face {
+  font-family: 'DM Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: url('dm-mono/DMMono-Regular.woff2') format('woff2'),
+}
+
+@font-face {
+  font-family: 'DM Mono';
+  font-style: italic;
+  font-weight: 400;
+  src: url('dm-mono/DMMono-Italic.woff2') format('woff2'),
+}
+
+@font-face {
+  font-family: 'DM Mono';
+  font-style: normal;
+  font-weight: 500;
+  src: url('dm-mono/DMMono-Medium.woff2') format('woff2'),
+}
+
+@font-face {
+  font-family: 'DM Mono';
+  font-style: italic;
+  font-weight: 500;
+  src: url('dm-mono/DMMono-MediumItalic.woff2') format('woff2'),
+}

services/web/frontend/fonts/dm-mono/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The DM Mono Project Authors (https://www.github.com/googlefonts/dm-mono)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

services/web/frontend/fonts/noto-sans.css

@@ -0,0 +1,134 @@
+/* Noto Sans - Thin */
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 100;
+  src: url('noto-sans/NotoSans-Thin.woff2') format('woff2'),
+}
+
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: italic;
+  font-weight: 100;
+  src: url('noto-sans/NotoSans-ThinItalic.woff2') format('woff2'),
+}
+
+/* Noto Sans - ExtraLight */
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 200;
+  src: url('noto-sans/NotoSans-ExtraLight.woff2') format('woff2'),
+}
+
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: italic;
+  font-weight: 200;
+  src: url('noto-sans/NotoSans-ExtraLightItalic.woff2') format('woff2'),
+}
+
+/* Noto Sans - Light */
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 300;
+  src: url('noto-sans/NotoSans-Light.woff2') format('woff2'),
+}
+
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: italic;
+  font-weight: 300;
+  src: url('noto-sans/NotoSans-LightItalic.woff2') format('woff2'),
+}
+
+/* Noto Sans - Regular */
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: url('noto-sans/NotoSans-Regular.woff2') format('woff2'),
+}
+
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: italic;
+  font-weight: 400;
+  src: url('noto-sans/NotoSans-Italic.woff2') format('woff2'),
+}
+
+/* Noto Sans - Medium */
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 500;
+  src: url('noto-sans/NotoSans-Medium.woff2') format('woff2'),
+}
+
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: italic;
+  font-weight: 500;
+  src: url('noto-sans/NotoSans-MediumItalic.woff2') format('woff2'),
+}
+
+/* Noto Sans - SemiBold */
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 600;
+  src: url('noto-sans/NotoSans-SemiBold.woff2') format('woff2'),
+}
+
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: italic;
+  font-weight: 600;
+  src: url('noto-sans/NotoSans-SemiBoldItalic.woff2') format('woff2'),
+}
+
+/* Noto Sans - Bold */
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: url('noto-sans/NotoSans-Bold.woff2') format('woff2'),
+}
+
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: italic;
+  font-weight: 700;
+  src: url('noto-sans/NotoSans-BoldItalic.woff2') format('woff2'),
+}
+
+/* Noto Sans - ExtraBold */
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 800;
+  src: url('noto-sans/NotoSans-ExtraBold.woff2') format('woff2'),
+}
+
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: italic;
+  font-weight: 800;
+  src: url('noto-sans/NotoSans-ExtraBoldItalic.woff2') format('woff2'),
+}
+
+/* Noto Sans - Black */
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 900;
+  src: url('noto-sans/NotoSans-Black.woff2') format('woff2'),
+}
+
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: italic;
+  font-weight: 900;
+  src: url('noto-sans/NotoSans-BlackItalic.woff2') format('woff2'),
+}

services/web/frontend/fonts/noto-sans/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2015-2021 Google LLC. All Rights Reserved.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

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

@@ -329,3 +329,135 @@
     }
   }
 }
+
+.website-redesign {
+  .home-top {
+    padding-top: @header-height;
+    p {
+      margin: 0;
+    }
+
+    .home-top-card {
+      margin-top: @margin-lg;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .home-top-begin-text {
+        display: flex;
+        color: #5f5ff0;
+        font-size: 65px;
+        line-height: 80px;
+        font-family: 'DM Mono', monospace;
+        align-self: flex-start;
+        width: 100%;
+
+        @media (max-width: @screen-sm-max) {
+          text-align: center;
+          flex-direction: column;
+          align-items: center;
+        }
+      }
+
+      .home-top-parenthesis-text {
+        color: #bbdbb8;
+        font-size: 65px;
+        line-height: 80px;
+      }
+    }
+  }
+
+  .home-registration {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 20px;
+
+    .home-registration-sso {
+      display: flex;
+      gap: 16px;
+
+      @media (max-width: @screen-sm-max) {
+        flex-direction: column;
+        width: 100%;
+      }
+
+      .form-group {
+        .hp-login-btn {
+          width: 100%;
+        }
+      }
+    }
+
+    .home-registration-separator {
+      margin: 0 0 4px;
+      color: @neutral-90;
+
+      > span {
+        vertical-align: middle;
+        &::before,
+        &::after {
+          content: '';
+          display: inline-block;
+          vertical-align: middle;
+          width: 196px;
+          height: 1px;
+          background-color: @neutral-20;
+
+          @media (max-width: @screen-sm-max) {
+            flex-direction: column;
+            width: 100%;
+            width: 156px;
+          }
+        }
+
+        &::before {
+          margin-right: 20px;
+
+          @media (max-width: @screen-sm-max) {
+            margin-right: 5px;
+          }
+        }
+
+        &::after {
+          margin-left: 20px;
+
+          @media (max-width: @screen-sm-max) {
+            margin-left: 5px;
+          }
+        }
+      }
+    }
+
+    .home-registration-password {
+      display: flex;
+      flex-direction: column;
+
+      .home-registration-password-input {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+        margin-bottom: 0;
+      }
+    }
+
+    .home-registration-sign-up {
+      display: block;
+      margin-top: 10px;
+      width: 100%;
+      margin-bottom: 0;
+
+      > button {
+        width: 100%;
+      }
+    }
+
+    .tos-agreement-notice {
+      a {
+        color: @green-60;
+        text-decoration: underline;
+        font-weight: 400;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,339 @@
+.website-redesign {
+  p,
+  h2,
+  h3,
+  a {
+    font-family: 'Noto Sans', sans-serif;
+  }
+
+  h2 {
+    font-weight: 600;
+    font-size: 2.25rem;
+    line-height: 3rem;
+    margin-top: 0;
+  }
+
+  h3 {
+    font-weight: 600;
+  }
+
+  a {
+    font-weight: 600;
+  }
+
+  .img-rounded {
+    // TODO: design specifies 'border-radius-large' which is 5px, but uses 16px
+    border-radius: 16px;
+  }
+
+  .plans-cards {
+    @media (min-width: @screen-md-min) {
+      display: flex; /* equal heights */
+      flex-wrap: wrap;
+    }
+
+    .plans-card-container {
+      min-height: 348px;
+
+      @media (max-width: @screen-sm-max) {
+        margin-bottom: 16px;
+        height: 398px;
+      }
+    }
+
+    .plans-card {
+      border-radius: 8px;
+      padding: 0;
+      height: 100%;
+
+      .plans-card-inner {
+        padding: 36px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        font-size: 16px;
+
+        .plans-card-inner-title {
+          font-size: 20px;
+          font-weight: 600;
+          margin-top: 0;
+        }
+
+        ul {
+          list-style-type: none;
+          padding: 0;
+          margin: 0;
+
+          li {
+            margin-bottom: 8px;
+          }
+        }
+
+        .plans-card-inner-footer {
+          margin-top: auto;
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+        }
+      }
+
+      &.grey-border {
+        border: 2px solid #e7e9ee;
+      }
+
+      // workaround for border that contains both linear-gradient and border radius
+      // https://stackoverflow.com/a/53037637
+      &.blue-gradient-highlighted {
+        border: double 2px transparent;
+        border-radius: 8px;
+        background-image: linear-gradient(white, white),
+          linear-gradient(245.63deg, #214475 0%, #254c84 28.54%, #6597e0 96.69%);
+        background-origin: border-box;
+        background-clip: content-box, border-box;
+
+        .plans-card-inner-title {
+          background: linear-gradient(
+            245.63deg,
+            #214475 0%,
+            #254c84 28.54%,
+            #6597e0 96.69%
+          );
+          background-clip: text;
+          color: transparent;
+        }
+      }
+    }
+  }
+
+  .info-cards {
+    .info-card-container {
+      height: 348px;
+      margin-bottom: 16px;
+
+      .info-card {
+        border-radius: 8px;
+        height: 100%;
+        box-shadow: 0px 2px 4px 0px #1e253029;
+        border-top: 8px solid #2f4858;
+        padding: 48px 40px 48px 40px;
+      }
+    }
+  }
+
+  .features-card {
+    .features-card-image {
+      img.img-responsive {
+        width: 100%;
+      }
+
+      @media (max-width: @screen-sm-max) {
+        margin-bottom: 50px;
+      }
+    }
+
+    .features-card-description {
+      p {
+        margin-bottom: 10px;
+      }
+
+      ul {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+
+        li {
+          margin-bottom: 8px;
+        }
+      }
+
+      .premium-badge {
+        .premium-badge-img {
+          margin-left: 10px;
+        }
+
+        @media (max-width: @screen-xs-max) {
+          display: flex;
+          .premium-badge-img {
+            width: 87px;
+            margin-left: auto;
+          }
+        }
+      }
+    }
+  }
+
+  .top-image-cards {
+    .top-image-card {
+      > img.img-responsive {
+        width: 100%;
+      }
+
+      .top-image-card-title {
+        font-size: 24px;
+        margin-top: 16px;
+        margin-bottom: 8px;
+
+        a {
+          width: 100%;
+          color: @neutral-90;
+          display: inline-flex;
+          justify-content: space-between;
+        }
+
+        i.material-symbols-rounded {
+          vertical-align: middle;
+          text-decoration: none;
+        }
+      }
+
+      .top-image-card-text {
+        font-size: 16px;
+      }
+
+      &:not(:last-of-type) {
+        @media (max-width: @screen-sm-max) {
+          margin-bottom: 40px;
+        }
+      }
+    }
+  }
+
+  .cta-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 64px;
+    background: #2f4858;
+    color: white;
+    border-radius: 8px;
+
+    .cta-card-title {
+      font-size: 52px;
+      font-weight: 500;
+      font-family: 'DM Mono', monospace;
+      margin-bottom: 8px;
+
+      span.purple-color {
+        color: #939aff;
+      }
+
+      span.lime-color {
+        color: #7ee787;
+      }
+    }
+
+    .cta-card-buttons {
+      margin-top: 24px;
+      display: flex;
+      gap: 12px;
+    }
+  }
+
+  .testimonial-media {
+    border-radius: 24px;
+
+    .testimonial-media-text-container {
+      display: flex;
+      flex-direction: column;
+      min-height: 352px;
+      background-color: #2f4858;
+      color: white;
+      border-top-left-radius: 24px;
+      border-top-right-radius: 0;
+      border-bottom-left-radius: 24px;
+      padding: 96px 64px;
+
+      @media (max-width: @screen-sm-max) {
+        border-top-left-radius: 24px;
+        border-top-right-radius: 24px;
+        border-bottom-left-radius: 0;
+        min-height: 316px;
+        padding: 56px 24px;
+      }
+
+      .testimonial-media-text {
+        margin-bottom: auto;
+        font-size: 28px;
+        font-weight: 600;
+        line-height: 38px;
+
+        @media (max-width: @screen-sm-max) {
+          font-size: 24px;
+          line-height: 32px;
+        }
+      }
+    }
+
+    .testimonial-media-video {
+      height: 100%;
+      min-height: 352px;
+      background-color: @neutral-20;
+      border-top-right-radius: 24px;
+      border-bottom-right-radius: 24px;
+      border-bottom-left-radius: 0;
+
+      @media (max-width: @screen-sm-max) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 24px;
+        border-bottom-left-radius: 24px;
+      }
+    }
+  }
+
+  .mono-text {
+    font-family: 'DM Mono', monospace;
+    color: @green-60;
+    font-feature-settings: 'ss05';
+    font-size: 1.125rem;
+    font-weight: 500;
+    line-height: 1.5rem;
+    margin: 0;
+  }
+
+  .green-link {
+    color: @green-60;
+
+    i.material-symbols-rounded {
+      vertical-align: middle;
+      padding-bottom: 3px;
+      font-size: 24px;
+    }
+
+    &:hover {
+      color: @green-70;
+      .right-arrow {
+        background: @green-70;
+      }
+    }
+  }
+
+  .btn-blue-gradient {
+    background: linear-gradient(
+      245.63deg,
+      #214475 0%,
+      #254c84 28.54%,
+      #6597e0 96.69%
+    );
+    color: white;
+  }
+
+  .round-background {
+    border-radius: 50%;
+    font-size: 25px;
+    top: 4px;
+    vertical-align: middle;
+    margin-right: 8px;
+  }
+
+  .green-round-background {
+    .round-background;
+    background: @green-10;
+    color: @green-40;
+  }
+
+  .blue-round-background {
+    .round-background;
+    background: @blue-10;
+    color: @blue-40;
+  }
+}

services/web/frontend/stylesheets/components/footer.less

@@ -297,3 +297,18 @@ footer.site-footer {
     }
   }
 }
+
+.website-redesign {
+  &.fat-footer {
+    background: @white;
+    color: @neutral-90;
+
+    a {
+      color: @neutral-90;
+    }
+  }
+
+  .footer-brand {
+    background-image: @navbar-brand-image-url-website-redesign;
+  }
+}

services/web/frontend/stylesheets/components/navbar.less

@@ -614,3 +614,66 @@
     top: @navbar-default-padding-v;
   }
 }
+
+.website-redesign {
+  &.navbar-default {
+    background-color: @navbar-default-bg-website-redesign;
+
+    .navbar-brand {
+      background-image: @navbar-brand-image-url-website-redesign;
+    }
+
+    .navbar-text {
+      color: @navbar-default-color-website-redesign;
+    }
+
+    .navbar-nav {
+      > li > a {
+        color: @navbar-default-link-color-website-redesign;
+        // border: 2px solid transparent;
+        font-size: @navbar-btn-font-size; // TODO
+        font-weight: @navbar-btn-font-weight; // TODO
+        line-height: @navbar-btn-line-height; // TODO
+        background-color: @navbar-default-link-bg; // TODO
+
+        &:hover,
+        &:focus {
+          color: #fff;
+          background-color: @navbar-default-link-hover-bg; // TODO
+          // border: 2px solid @navbar-default-link-hover-color; // TODO
+        }
+      }
+      > .active > a {
+        &,
+        &:hover,
+        &:focus {
+          color: @navbar-default-link-active-color; // TODO
+          background-color: @navbar-default-link-active-bg; // TODO
+        }
+      }
+      > .disabled > a {
+        &,
+        &:hover,
+        &:focus {
+          color: @navbar-default-link-disabled-color; // TODO
+          background-color: @navbar-default-link-disabled-bg; // TODO
+        }
+      }
+
+      > li.subdued > a {
+        color: @navbar-subdued-color-website-redesign;
+        &:hover,
+        &:focus {
+          color: @navbar-subdued-hover-color-website-redesign;
+          background-color: @navbar-subdued-hover-bg-website-redesign;
+        }
+        &:focus {
+          .tab-focus();
+        }
+        @media (min-width: @grid-float-breakpoint) {
+          padding: @navbar-subdued-padding;
+        }
+      }
+    }
+  }
+}

services/web/frontend/stylesheets/core/scaffolding.less

@@ -184,3 +184,7 @@ hr {
 .row-spaced-large {
   margin-top: @line-height-computed * 2;
 }
+
+.row-spaced-extra-large {
+  margin-top: @line-height-computed * 4;
+}

services/web/frontend/stylesheets/core/variables.less

@@ -47,6 +47,7 @@
 @green-10: #ebf6ea;
 @green-20: #bbdbb8;
 @green-50: #138a07;
+@green-60: #246b1e;
 @green-70: #1f5919;
 @green-30: #8cca86;
 @red: #a93529;

services/web/frontend/stylesheets/main-style.less

@@ -1,4 +1,6 @@
 @import (less) '../fonts/lato.css';
+@import (less) '../fonts/dm-mono.css';
+@import (less) '../fonts/noto-sans.css';
 @import (less) '../fonts/merriweather.css';
 @import (less) '../fonts/source-code-pro.css';
 @import (less) '../fonts/stix-two-math.css';
@@ -131,6 +133,7 @@
 @import 'app/publisher-hub.less';
 @import 'app/admin-hub.less';
 @import 'app/import.less';
+@import 'app/website-redesign.less';
 // Pages
 @import 'app/about.less';
 @import 'app/blog-posts.less';

services/web/frontend/stylesheets/variables/all.less

@@ -389,11 +389,14 @@
 @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
 
 @navbar-default-color: #fff;
+@navbar-default-color-website-redesign: @neutral-90;
 @navbar-default-bg: @neutral-90;
+@navbar-default-bg-website-redesign: @white;
 @navbar-default-border: transparent;
 
 // Navbar links
 @navbar-default-link-color: #fff;
+@navbar-default-link-color-website-redesign: @neutral-90;
 @navbar-default-link-border-color: @navbar-default-link-color;
 @navbar-default-link-hover-color: @green;
 @navbar-default-link-hover-bg: @green;
@@ -758,9 +761,13 @@
 @navbar-subdued-padding: (@padding-base-vertical + 1)
   (@padding-base-horizontal + 1) (@padding-base-vertical + 2);
 @navbar-subdued-color: #fff;
+@navbar-subdued-color-website-redesign: @neutral-90;
 @navbar-subdued-hover-bg: #fff;
+@navbar-subdued-hover-bg-website-redesign: @neutral-90;
 @navbar-subdued-hover-color: @green;
+@navbar-subdued-hover-color-website-redesign: @green; // TODO
 @navbar-brand-image-url: url(../../../public/img/ol-brand/overleaf-white.svg);
+@navbar-brand-image-url-website-redesign: url(../../../public/img/ol-brand/overleaf.svg);
 
 @dropdown-divider-margin: 6px;
 @dropdown-item-padding: 4px 20px;

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

@@ -0,0 +1,10 @@
+<svg width="56" height="57" viewBox="0 0 56 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4" y="4.31592" width="48" height="48" rx="24" fill="#BBDBB8"/>
+<rect x="4" y="4.31592" width="48" height="48" rx="24" stroke="#EBF6EA" stroke-width="8"/>
+<mask id="mask0_854_11994" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="16" y="16" width="24" height="25">
+<rect x="16" y="16.3159" width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_854_11994)">
+<path d="M25 31.316H21.9C21.5 31.316 21.2041 31.1368 21.0125 30.7785C20.8208 30.4202 20.8416 30.0743 21.075 29.741L28.55 18.991C28.7166 18.7577 28.9333 18.5952 29.2 18.5035C29.4666 18.4118 29.7416 18.416 30.025 18.516C30.3083 18.616 30.5166 18.791 30.65 19.041C30.7833 19.291 30.8333 19.5577 30.8 19.841L30 26.316H33.875C34.3083 26.316 34.6125 26.5077 34.7875 26.891C34.9625 27.2743 34.9083 27.6327 34.625 27.966L26.4 37.816C26.2166 38.0327 25.9916 38.1743 25.725 38.241C25.4583 38.3077 25.2 38.2827 24.95 38.166C24.7 38.0493 24.5041 37.8702 24.3625 37.6285C24.2208 37.3868 24.1666 37.1243 24.2 36.841L25 31.316Z" fill="#138A07"/>
+</g>
+</svg>