From aceb39363c931b3af6b3d302e7bfc7a978fa32b4 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Fri, 4 Sep 2026 15:22:16 +0000 Subject: [PATCH 1/6] feat(web): animate staged rollout in production-updates section Add scroll-triggered motion to the homepage 'Next release lane' panel that teaches progressive rollout: a small cohort receives the update, health is verified, then the percentage expands with rollback kept ready. Co-authored-by: Martin DONADIEU --- .../solutions/RolloutIllustration.astro | 322 +++++++++++++++--- .../solutions/SolutionAppExample.astro | 34 +- 2 files changed, 315 insertions(+), 41 deletions(-) diff --git a/apps/web/src/components/solutions/RolloutIllustration.astro b/apps/web/src/components/solutions/RolloutIllustration.astro index 7785abeb5..80f76e4b3 100644 --- a/apps/web/src/components/solutions/RolloutIllustration.astro +++ b/apps/web/src/components/solutions/RolloutIllustration.astro @@ -1,42 +1,286 @@ --- -const { class: className, ...props } = Astro.props +interface Props { + class?: string + animated?: boolean +} + +const { class: className, animated = false, ...props } = Astro.props +const uid = `rollout-${Math.random().toString(36).slice(2, 9)}` --- - - - - - - - - - - - - Internal QA - - - 100% - - - - - - - Beta Users - - - 100% - - - - - - - Production - - - 25% - - - +
+ +
+ + + + diff --git a/apps/web/src/components/solutions/SolutionAppExample.astro b/apps/web/src/components/solutions/SolutionAppExample.astro index bd85a953b..fd0628a84 100644 --- a/apps/web/src/components/solutions/SolutionAppExample.astro +++ b/apps/web/src/components/solutions/SolutionAppExample.astro @@ -6,6 +6,7 @@ import { renameCat, shortNumber } from '@/services/misc' import { getRelativeLocaleUrl } from '@/services/links' import TeamAvatars from '@/components/TeamAvatars.astro' import HumanSupport from '@/components/HumanSupport.astro' +import RolloutIllustration from '@/components/solutions/RolloutIllustration.astro' interface Props { solution: SolutionAppExampleKey @@ -26,6 +27,7 @@ const categories = [...new Set(appExamples.map(({ app }) => renameCat(app.catego const registerUrl = getRelativeLocaleUrl(locale, 'register') const talkToTeamUrl = 'https://book.capgo.app/enterprise-inquiry/' const showExampleCtas = solution === 'enterprise' +const showRolloutIllustration = solution === 'production-updates' --- { @@ -146,9 +148,18 @@ const showExampleCtas = solution === 'enterprise'

{copy('solution_app_examples_cta_title')}

{copy('solution_app_examples_cta_text')}

+ {showRolloutIllustration && ( +
+ +
+ )} +
- {plays.map((play) => ( -
+ {plays.map((play, index) => ( +
-
+ { + animated && ( +

+ Progressive rollout illustration ready. +

+ ) + } - +

{copy('solution_app_examples_cta_title')}

{copy('solution_app_examples_cta_text')}

- {showRolloutIllustration && ( -
+ {animateRollout && ( +
)} @@ -157,8 +157,8 @@ const showRolloutIllustration = solution === 'production-updates'
{plays.map((play, index) => (
- {play} + {play}
))}
diff --git a/apps/web/src/pages/index.astro b/apps/web/src/pages/index.astro index adf621ebf..ef8902348 100644 --- a/apps/web/src/pages/index.astro +++ b/apps/web/src/pages/index.astro @@ -95,7 +95,7 @@ const content = { - + From 39f13e050151f491d0c5383bf25906688c5762d8 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Fri, 4 Sep 2026 16:33:53 +0000 Subject: [PATCH 3/6] fix(web): keep completed rollout label green via class swap Co-authored-by: Martin DONADIEU --- apps/web/src/components/solutions/RolloutIllustration.astro | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/apps/web/src/components/solutions/RolloutIllustration.astro b/apps/web/src/components/solutions/RolloutIllustration.astro index 33a4c5324..1b515dceb 100644 --- a/apps/web/src/components/solutions/RolloutIllustration.astro +++ b/apps/web/src/components/solutions/RolloutIllustration.astro @@ -140,6 +140,10 @@ const { class: className, animated = false, ...props } = Astro.props fill: #22c55e; } + .rollout-illustration--animated.is-reduced .rollout-prod-label.fill-amber-500 { + fill: #22c55e; + } + .rollout-illustration--animated.is-reduced .rollout-health, .rollout-illustration--animated.is-reduced .rollout-rollback, .rollout-illustration--animated.is-reduced .rollout-prod-icon-done { @@ -217,7 +221,7 @@ const { class: className, animated = false, ...props } = Astro.props function finish(root: HTMLElement) { root.classList.add('is-complete') const label = root.querySelector('.rollout-prod-label') - if (label) label.setAttribute('fill', '#22c55e') + if (label) label.classList.replace('fill-amber-500', 'fill-green-500') const bar = root.querySelector('.rollout-prod-bar') if (bar) bar.classList.replace('fill-amber-500', 'fill-green-500') From 607826b337943d52e68fa25553dc27e716d8df72 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Tue, 8 Sep 2026 12:00:14 +0000 Subject: [PATCH 4/6] fix(web): split rollout illustration visibility from animation Show static RolloutIllustration on production-updates solution page while keeping scroll animation homepage-only via animateRollout. Use compact viewBox/card dimensions for static usages to avoid empty bottom band. Co-authored-by: Martin DONADIEU --- .../solutions/RolloutIllustration.astro | 19 +++++++++++++------ .../solutions/SolutionAppExample.astro | 5 +++-- 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/apps/web/src/components/solutions/RolloutIllustration.astro b/apps/web/src/components/solutions/RolloutIllustration.astro index 1b515dceb..11f9daa62 100644 --- a/apps/web/src/components/solutions/RolloutIllustration.astro +++ b/apps/web/src/components/solutions/RolloutIllustration.astro @@ -5,6 +5,13 @@ interface Props { } const { class: className, animated = false, ...props } = Astro.props + +const viewBox = animated ? '0 0 600 440' : '0 0 600 400' +const cardHeight = animated ? 360 : 320 +const connectorEndY = animated ? 300 : 290 +const qaY = 80 +const betaY = animated ? 165 : 170 +const productionY = animated ? 250 : 260 ---
@@ -16,13 +23,13 @@ const { class: className, animated = false, ...props } = Astro.props ) } -

{copy('solution_app_examples_cta_title')}

{copy('solution_app_examples_cta_text')}

- {animateRollout && ( + {showRolloutIllustration && (
- +
)} From eb38aa83841e06dec045c7feaef6c8c167b933ed Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Tue, 8 Sep 2026 14:30:03 +0000 Subject: [PATCH 5/6] fix(web): green production label in reduced-motion rollout state Co-authored-by: Martin DONADIEU --- apps/web/src/components/solutions/RolloutIllustration.astro | 3 +++ 1 file changed, 3 insertions(+) diff --git a/apps/web/src/components/solutions/RolloutIllustration.astro b/apps/web/src/components/solutions/RolloutIllustration.astro index 11f9daa62..0fe8f29c4 100644 --- a/apps/web/src/components/solutions/RolloutIllustration.astro +++ b/apps/web/src/components/solutions/RolloutIllustration.astro @@ -248,6 +248,9 @@ const productionY = animated ? 250 : 260 showHealth(root) showRollback(root) + const label = root.querySelector('.rollout-prod-label') + if (label) label.classList.replace('fill-amber-500', 'fill-green-500') + const bar = root.querySelector('.rollout-prod-bar') if (bar) bar.classList.replace('fill-amber-500', 'fill-green-500') From d1bc828fb3fe14de132b8f51270e3e9f2d2270c0 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Tue, 8 Sep 2026 17:11:27 +0000 Subject: [PATCH 6/6] chore: re-trigger CodeRabbit review on HEAD Co-authored-by: Martin DONADIEU