From 760555e5e899e0d9a5fa214e8b75ab4601062b0c Mon Sep 17 00:00:00 2001 From: Davinder Singh Date: Thu, 25 Sep 2025 10:39:57 +0100 Subject: [PATCH] Introducing group discount banner on plans page (#28666) * adding placeholder mixin for the group discount banner * adding desktop version * adding mobile size screen content * format:fix * adding variable * adding new copy * moving the mixin in the correct place * adding translations and lint:fix GitOrigin-RevId: 23e72ffd5d25b474fa3bbbde396dc7a75748fb48 --- .../web/frontend/stylesheets/pages/plans.scss | 55 +++++++++++++++++++ services/web/locales/en.json | 2 + .../stickers/collaborate-green.svg | 9 +++ 3 files changed, 66 insertions(+) create mode 100644 services/web/public/img/website-redesign/stickers/collaborate-green.svg diff --git a/services/web/frontend/stylesheets/pages/plans.scss b/services/web/frontend/stylesheets/pages/plans.scss index bbdb371e89..b00f7ac24f 100644 --- a/services/web/frontend/stylesheets/pages/plans.scss +++ b/services/web/frontend/stylesheets/pages/plans.scss @@ -345,6 +345,61 @@ $z-index-group-member-picker-list: 1; } } + .group-discount-banner { + border: 1px solid var(--neutral-20); + border-radius: var(--border-radius-base); + width: 50%; + max-width: 576px; + margin: auto; + margin-top: var(--spacing-06); + margin-bottom: var(--spacing-10); + display: flex; + gap: var(--spacing-06); + padding: var(--spacing-06); + + @include media-breakpoint-down(md) { + width: 100%; + } + + .group-icon { + flex-grow: 2; + } + + .text-and-cta { + flex-grow: 8; + display: flex; + gap: var(--spacing-06); + + @include media-breakpoint-down(lg) { + flex-direction: column; + } + + .group-discount-text { + flex-grow: 6; + + p { + margin-bottom: 0; + } + + h3 { + margin-top: 0; + } + + .group-discount-text-heading { + font-size: var(--font-size-03); + font-weight: 600; + line-height: var(--line-height-02); + margin-bottom: var(--spacing-02); + color: var(--neutral-90); + } + } + + .group-discount-cta { + flex-grow: 3; + } + } + } + .plans-new-table { width: 100%; diff --git a/services/web/locales/en.json b/services/web/locales/en.json index 1955cad3a7..0892d5c844 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -323,6 +323,7 @@ "characters": "Characters", "chat": "Chat", "chat_error": "Could not load chat messages, please try again.", + "chat_with_sales_team_50_or_more": "Chat with our sales team about larger discounts for groups of 50 or more.", "check_error_logs": "Check error logs", "check_your_email": "Check your email", "checking": "Checking", @@ -1179,6 +1180,7 @@ "labs_program_benefits": "By signing up for Overleaf Labs you can get your hands on in-development features and try them out as much as you like. All we ask in return is your honest feedback to help us develop and improve. It’s important to note that features available in this program are still being tested and actively developed. This means they could change, be removed, or become part of a premium plan.", "language": "Language", "language_suggestions": "Language suggestions", + "larger_discounts_available": "Larger discounts available", "last_active": "Last Active", "last_active_description": "Last time a project was opened.", "last_edit": "Last edit", diff --git a/services/web/public/img/website-redesign/stickers/collaborate-green.svg b/services/web/public/img/website-redesign/stickers/collaborate-green.svg new file mode 100644 index 0000000000..fcf1b6cca5 --- /dev/null +++ b/services/web/public/img/website-redesign/stickers/collaborate-green.svg @@ -0,0 +1,9 @@ + + + + + + + + +