From 85e55ebf5a75092cf429f630006a374ca67731fe Mon Sep 17 00:00:00 2001 From: Tim Down <158919+timdown@users.noreply.github.com> Date: Tue, 12 May 2026 10:44:57 +0100 Subject: [PATCH] Implement Briefly ad in onboarding flow (#33567) GitOrigin-RevId: 78c7c38878024aaaf79def6ac7ca164d92a59a57 --- .../web/frontend/extracted-translations.json | 11 ++++ .../stylesheets/ciam/ciam-layout.scss | 8 ++- .../stylesheets/ciam/ciam-onboarding.scss | 63 +++++++++++++++++++ services/web/locales/en.json | 11 ++++ .../apple-download-on-the-app-store.svg | 1 + .../img/app-stores/get-it-on-google-play.svg | 1 + services/web/public/img/briefly-bg.svg | 1 + 7 files changed, 94 insertions(+), 2 deletions(-) create mode 100644 services/web/public/img/app-stores/apple-download-on-the-app-store.svg create mode 100644 services/web/public/img/app-stores/get-it-on-google-play.svg create mode 100644 services/web/public/img/briefly-bg.svg diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index bf8c4cb487..377ebc54cc 100644 --- a/services/web/frontend/extracted-translations.json +++ b/services/web/frontend/extracted-translations.json @@ -219,6 +219,17 @@ "bold": "", "booktabs": "", "breadcrumbs": "", + "briefly_app_store_android": "", + "briefly_app_store_ios": "", + "briefly_continue_to_overleaf": "", + "briefly_feature_1": "", + "briefly_feature_2": "", + "briefly_feature_3": "", + "briefly_feature_4": "", + "briefly_feature_5": "", + "briefly_onboarding_title": "", + "briefly_qr_alt_android": "", + "briefly_qr_alt_ios": "", "browser": "", "bullet_list": "", "buy_licenses": "", diff --git a/services/web/frontend/stylesheets/ciam/ciam-layout.scss b/services/web/frontend/stylesheets/ciam/ciam-layout.scss index 9118fa963b..eee77760b1 100644 --- a/services/web/frontend/stylesheets/ciam/ciam-layout.scss +++ b/services/web/frontend/stylesheets/ciam/ciam-layout.scss @@ -100,17 +100,21 @@ .ciam-card { @include ciam-vertically-spaced; + --ciam-card-padding-x: var(--ds-spacing-400); + --ciam-card-padding-y: var(--ds-spacing-800); + background-color: var(--bg-light-primary); box-shadow: 0 4px 6px -4px rgb(0 0 0 / 10%), 0 1px 29px -3px rgb(0 0 0 / 16%); - padding: var(--ds-spacing-800) var(--ds-spacing-400); + padding: var(--ciam-card-padding-y) var(--ciam-card-padding-x); border-radius: var(--ds-border-radius-400); max-width: 464px; margin: 0 auto; @include media-breakpoint-up(sm) { - padding: var(--ds-spacing-1300); + --ciam-card-padding-x: var(--ds-spacing-1300); + --ciam-card-padding-y: var(--ds-spacing-1300); } } diff --git a/services/web/frontend/stylesheets/ciam/ciam-onboarding.scss b/services/web/frontend/stylesheets/ciam/ciam-onboarding.scss index 1c4beb2185..1a9e5fb5ea 100644 --- a/services/web/frontend/stylesheets/ciam/ciam-onboarding.scss +++ b/services/web/frontend/stylesheets/ciam/ciam-onboarding.scss @@ -1,5 +1,15 @@ +// Warm off-white background + diamond decoration — Briefly step only. +.ciam-card:has(.onboarding-step-briefly) { + background-color: #f8f4ef; + background-image: url('../../../public/img/briefly-bg.svg'); + background-repeat: no-repeat; + background-position: right -38px bottom 85px; + background-size: 220px 200px; +} + .btn.btn-ds.ciam-onboarding-back-button { --bs-btn-padding-x: 0; + --bs-btn-bg: transparent; --bs-btn-hover-bg: transparent; } @@ -24,6 +34,59 @@ } } +.onboarding-step-briefly { + .briefly-heading-row { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--ds-spacing-200); + } + + .briefly-logo { + height: 40px; + } + + .briefly-paper-plane { + width: 160px; + flex-shrink: 0; + margin-right: calc(-1 * var(--ciam-card-padding-x)); + + @include media-breakpoint-up(sm) { + width: 200px; + } + } + + .briefly-features { + padding: 0 0 var(--ds-spacing-400) 0; + } + + .briefly-stores { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--ds-spacing-300); + } + + .briefly-store-col { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--ds-spacing-250); + } + + .briefly-qr-code { + width: 130px; + height: 130px; + + @include media-breakpoint-down(sm) { + display: none; + } + } + + .briefly-store-link img { + height: 40px; + } +} + .ciam-used-latex-options { padding-bottom: var(--ds-spacing-200); } diff --git a/services/web/locales/en.json b/services/web/locales/en.json index 09167de7dc..b6285c2d98 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -294,6 +294,17 @@ "bold": "Bold", "booktabs": "Booktabs", "breadcrumbs": "Breadcrumbs", + "briefly_app_store_android": "Get it on Google Play", + "briefly_app_store_ios": "Download on the App Store", + "briefly_continue_to_overleaf": "Continue to Overleaf", + "briefly_feature_1": "Get daily AI briefs on research that matters to you", + "briefly_feature_2": "Access your Overleaf projects anywhere, at any time", + "briefly_feature_3": "Stay on top of your collaborators’ comments", + "briefly_feature_4": "Discover the papers your field is talking about", + "briefly_feature_5": "Listen to your daily briefs as audio summaries", + "briefly_onboarding_title": "Take Overleaf with you: download Briefly", + "briefly_qr_alt_android": "QR code to download Briefly on Google Play", + "briefly_qr_alt_ios": "QR code to download Briefly on the Apple App Store", "browser": "Browser", "built_in": "Built-In", "bullet_list": "Bullet list", diff --git a/services/web/public/img/app-stores/apple-download-on-the-app-store.svg b/services/web/public/img/app-stores/apple-download-on-the-app-store.svg new file mode 100644 index 0000000000..0e2bc9d910 --- /dev/null +++ b/services/web/public/img/app-stores/apple-download-on-the-app-store.svg @@ -0,0 +1 @@ +Download_on_the_App_Store_Badge_US-UK_RGB_blk_4SVG_092917 diff --git a/services/web/public/img/app-stores/get-it-on-google-play.svg b/services/web/public/img/app-stores/get-it-on-google-play.svg new file mode 100644 index 0000000000..14614da204 --- /dev/null +++ b/services/web/public/img/app-stores/get-it-on-google-play.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/services/web/public/img/briefly-bg.svg b/services/web/public/img/briefly-bg.svg new file mode 100644 index 0000000000..612f7c7b96 --- /dev/null +++ b/services/web/public/img/briefly-bg.svg @@ -0,0 +1 @@ + \ No newline at end of file