Implement Briefly ad in onboarding flow (#33567)

GitOrigin-RevId: 78c7c38878024aaaf79def6ac7ca164d92a59a57

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": "",

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);
   }
 }
 

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);
 }

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",

services/web/public/img/briefly-bg.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" overflow="visible" preserveAspectRatio="none" style="display:block" viewBox="0 0 199.814 191.619"><g filter="url(#a)"><path fill="url(#b)" fill-opacity=".4" d="M69.309 75.802 98.169 1.33l32.122 75.802 28.861-74.47 40.662 95.956-38.72 93-30.93-73.513-30.053 72.182-30.93-73.513-30.052 72.183L0 95.957 37.188 0z"/></g><defs><linearGradient id="b" x1="179.1" x2="66.632" y1="-173.473" y2="191.62" gradientUnits="userSpaceOnUse"><stop stop-color="#d0c158"/><stop offset="1" stop-color="#c9ede1"/></linearGradient><filter id="a" width="199.814" height="191.619" x="0" y="0" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feTurbulence baseFrequency="1 1" numOctaves="3" result="noise" seed="4080" stitchTiles="stitch" type="fractalNoise"/><feColorMatrix in="noise" result="alphaNoise" type="luminanceToAlpha"/><feComponentTransfer in="alphaNoise" result="coloredNoise1"><feFuncA tableValues="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0" type="discrete"/></feComponentTransfer><feComposite in="coloredNoise1" in2="shape" operator="in" result="noise1Clipped"/><feFlood flood-color="rgba(0, 0, 0, 0.05)" result="color1Flood"/><feComposite in="color1Flood" in2="noise1Clipped" operator="in" result="color1"/><feMerge result="effect1_noise_0_241"><feMergeNode in="shape"/><feMergeNode in="color1"/></feMerge></filter></defs></svg>