From 1275903bf3c3e818a663788491363fc70a978d4d Mon Sep 17 00:00:00 2001
From: bcotrim <bernardo.cotrim@a8c.com>
Date: Mon, 3 Aug 2026 11:11:24 +0100
Subject: [PATCH 1/4] Parameterize EmptyBackground size and containment

---
 .../session-view/empty-background/index.tsx   | 50 +++++++++++++------
 .../empty-background/style.module.css         |  6 +++
 2 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/apps/ui/src/ui-classic/components/session-view/empty-background/index.tsx b/apps/ui/src/ui-classic/components/session-view/empty-background/index.tsx
index 9d33a4ac53..073af3c303 100644
--- a/apps/ui/src/ui-classic/components/session-view/empty-background/index.tsx
+++ b/apps/ui/src/ui-classic/components/session-view/empty-background/index.tsx
@@ -2,9 +2,8 @@ import { useEffect, useRef } from 'react';
 import styles from './style.module.css';
 import logoSrc from './wordpress-logo.webp';
 
-const SIZE = 320;
-const PAD = 130;
-const CANVAS_SIZE = SIZE + PAD * 2;
+const DEFAULT_LOGO_SIZE = 320;
+const DEFAULT_PADDING = 130;
 const RES = 6;
 const RECT_SIZE = 4;
 const MAX_DPR = 2;
@@ -93,7 +92,25 @@ type ActiveRipple = {
 	maxRadiusSquared: number;
 };
 
-export function EmptyBackground() {
+interface EmptyBackgroundProps {
+	/** Rendered logo size in CSS pixels. */
+	logoSize?: number;
+	/** Room around the logo for displaced particles to roam. */
+	padding?: number;
+	/**
+	 * Default true: clip painting to the host box (`contain: paint`). Set
+	 * false when the host box is smaller than the canvas so the effect can
+	 * spread beyond it without getting cut off.
+	 */
+	contained?: boolean;
+}
+
+export function EmptyBackground( {
+	logoSize = DEFAULT_LOGO_SIZE,
+	padding = DEFAULT_PADDING,
+	contained = true,
+}: EmptyBackgroundProps = {} ) {
+	const canvasSize = logoSize + padding * 2;
 	const canvasRef = useRef< HTMLCanvasElement >( null );
 
 	useEffect( () => {
@@ -104,9 +121,9 @@ export function EmptyBackground() {
 
 		const canvasElement = canvas;
 		const dpr = Math.min( window.devicePixelRatio || 1, MAX_DPR );
-		canvasElement.width = Math.round( CANVAS_SIZE * dpr );
-		canvasElement.height = Math.round( CANVAS_SIZE * dpr );
-		canvasElement.style.setProperty( '--empty-background-canvas-size', `${ CANVAS_SIZE }px` );
+		canvasElement.width = Math.round( canvasSize * dpr );
+		canvasElement.height = Math.round( canvasSize * dpr );
+		canvasElement.style.setProperty( '--empty-background-canvas-size', `${ canvasSize }px` );
 
 		const ctx = canvasElement.getContext( '2d', { alpha: true } );
 		if ( ! ctx ) {
@@ -168,7 +185,7 @@ export function EmptyBackground() {
 			bounds.top = rect.top;
 			bounds.right = rect.right;
 			bounds.bottom = rect.bottom;
-			bounds.scale = rect.width > 0 ? CANVAS_SIZE / rect.width : 1;
+			bounds.scale = rect.width > 0 ? canvasSize / rect.width : 1;
 		}
 
 		function clearScheduledWave() {
@@ -199,7 +216,7 @@ export function EmptyBackground() {
 		}
 
 		function drawStatic() {
-			context.clearRect( 0, 0, CANVAS_SIZE, CANVAS_SIZE );
+			context.clearRect( 0, 0, canvasSize, canvasSize );
 			context.fillStyle = BASE_COLOR;
 
 			for ( let i = 0; i < particles.length; i++ ) {
@@ -289,7 +306,7 @@ export function EmptyBackground() {
 			const pointerEase = scaleEasingForFrameFactor( POINTER_EASE, frameFactor );
 			const spring = SPRING * frameFactor;
 			const damping = Math.pow( DAMPING, frameFactor );
-			context.clearRect( 0, 0, CANVAS_SIZE, CANVAS_SIZE );
+			context.clearRect( 0, 0, canvasSize, canvasSize );
 
 			const activeRipples: ActiveRipple[] = [];
 			for ( let i = ripples.length - 1; i >= 0; i-- ) {
@@ -492,11 +509,11 @@ export function EmptyBackground() {
 			offCtx.drawImage( img, 0, 0 );
 			const { data } = offCtx.getImageData( 0, 0, img.width, img.height );
 
-			const scale = Math.min( SIZE / img.width, SIZE / img.height ) * 0.92;
+			const scale = Math.min( logoSize / img.width, logoSize / img.height ) * 0.92;
 			const drawW = img.width * scale;
 			const drawH = img.height * scale;
-			const offsetX = ( CANVAS_SIZE - drawW ) / 2;
-			const offsetY = ( CANVAS_SIZE - drawH ) / 2;
+			const offsetX = ( canvasSize - drawW ) / 2;
+			const offsetY = ( canvasSize - drawH ) / 2;
 
 			for ( let y = 0; y < drawH; y += RES ) {
 				for ( let x = 0; x < drawW; x += RES ) {
@@ -666,10 +683,13 @@ export function EmptyBackground() {
 			resizeObserver?.disconnect();
 			intersectionObserver?.disconnect();
 		};
-	}, [] );
+	}, [ canvasSize, logoSize ] );
 
 	return (
-		<div className={ styles.root } aria-hidden="true">
+		<div
+			className={ contained ? styles.root : `${ styles.root } ${ styles.spill }` }
+			aria-hidden="true"
+		>
 			<canvas ref={ canvasRef } className={ styles.canvas } />
 		</div>
 	);
diff --git a/apps/ui/src/ui-classic/components/session-view/empty-background/style.module.css b/apps/ui/src/ui-classic/components/session-view/empty-background/style.module.css
index 4289f035cb..15d0a74182 100644
--- a/apps/ui/src/ui-classic/components/session-view/empty-background/style.module.css
+++ b/apps/ui/src/ui-classic/components/session-view/empty-background/style.module.css
@@ -8,6 +8,12 @@
 	contain: layout paint;
 }
 
+/* Uncontained hosts let the canvas paint beyond the box (see the
+   `contained` prop). */
+.spill {
+	contain: layout;
+}
+
 .canvas {
 	display: block;
 	width: min(100%, var(--empty-background-canvas-size, 580px));

From 7edbb5127efa495564f32a3c8a25d47d4665d8aa Mon Sep 17 00:00:00 2001
From: bcotrim <bernardo.cotrim@a8c.com>
Date: Mon, 3 Aug 2026 11:11:32 +0100
Subject: [PATCH 2/4] Add the NUX welcome screen and onboarding concept tour

---
 apps/ui/src/components/auth-actions/index.tsx |  61 ++++
 .../components/auth-actions/style.module.css  |  41 +++
 apps/ui/src/components/feature-list/index.tsx |  31 ++
 .../components/feature-list/style.module.css  |  44 +++
 .../agent-pixel-field.tsx                     | 326 ++++++++++++++++++
 .../onboarding-illustrations/index.tsx        |  41 +++
 .../onboarding-illustrations/style.module.css | 129 ++++++-
 apps/ui/src/lib/docs-links.ts                 |   6 +
 .../components/wizard-page/index.tsx          | 101 ++++++
 .../components/wizard-page/style.module.css   |   7 +
 .../router/layout-onboarding/index.tsx        |   5 +-
 .../router/layout-onboarding/style.module.css |   7 +
 .../router/route-onboarding-connect/index.tsx |  43 +--
 .../route-onboarding-connect/style.module.css |  19 -
 .../router/route-onboarding-tour/index.tsx    | 147 ++++++++
 .../route-onboarding-tour/style.module.css    |  43 +++
 .../ui-classic/router/route-welcome/index.tsx | 200 +++++++----
 .../router/route-welcome/style.module.css     | 282 +++++++++++++--
 apps/ui/src/ui-classic/router/router.tsx      |   2 +
 19 files changed, 1379 insertions(+), 156 deletions(-)
 create mode 100644 apps/ui/src/components/auth-actions/index.tsx
 create mode 100644 apps/ui/src/components/auth-actions/style.module.css
 create mode 100644 apps/ui/src/components/feature-list/index.tsx
 create mode 100644 apps/ui/src/components/feature-list/style.module.css
 create mode 100644 apps/ui/src/components/onboarding-illustrations/agent-pixel-field.tsx
 create mode 100644 apps/ui/src/ui-classic/components/wizard-page/index.tsx
 create mode 100644 apps/ui/src/ui-classic/components/wizard-page/style.module.css
 create mode 100644 apps/ui/src/ui-classic/router/route-onboarding-tour/index.tsx
 create mode 100644 apps/ui/src/ui-classic/router/route-onboarding-tour/style.module.css

diff --git a/apps/ui/src/components/auth-actions/index.tsx b/apps/ui/src/components/auth-actions/index.tsx
new file mode 100644
index 0000000000..5cf579d4a4
--- /dev/null
+++ b/apps/ui/src/components/auth-actions/index.tsx
@@ -0,0 +1,61 @@
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/ui';
+import { useLogin } from '@/data/queries/use-auth-user';
+import { useOffline } from '@/hooks/use-offline';
+import styles from './style.module.css';
+
+interface AuthActionsProps {
+	className?: string;
+}
+
+// Shared by the welcome and connect screens so the two sign-in prompts
+// can't drift apart.
+export function AuthActions( { className }: AuthActionsProps ) {
+	const isOffline = useOffline();
+	const login = useLogin();
+	const signup = useLogin( { signup: true } );
+	const authError = login.error ?? signup.error;
+	const offlineMessage = __( "You're currently offline." );
+
+	return (
+		<div className={ className ? `${ styles.root } ${ className }` : styles.root }>
+			<div className={ styles.actions }>
+				<Button
+					type="button"
+					variant="minimal"
+					tone="neutral"
+					disabled={ isOffline || login.isPending }
+					title={ isOffline ? offlineMessage : undefined }
+					loading={ signup.isPending }
+					onClick={ () => signup.mutate() }
+				>
+					{ __( 'Sign up' ) }
+					<span aria-hidden className={ styles.arrow }>
+						{ '↗' }
+					</span>
+				</Button>
+				<Button
+					type="button"
+					variant="solid"
+					tone="brand"
+					disabled={ isOffline || signup.isPending }
+					title={ isOffline ? offlineMessage : undefined }
+					loading={ login.isPending }
+					onClick={ () => login.mutate() }
+				>
+					{ __( 'Log in with WordPress.com' ) }
+					<span aria-hidden className={ styles.arrow }>
+						{ '↗' }
+					</span>
+				</Button>
+			</div>
+			{ authError && (
+				<p role="alert" className={ styles.error }>
+					{ authError instanceof Error
+						? authError.message
+						: __( 'Authentication failed. Please try again.' ) }
+				</p>
+			) }
+		</div>
+	);
+}
diff --git a/apps/ui/src/components/auth-actions/style.module.css b/apps/ui/src/components/auth-actions/style.module.css
new file mode 100644
index 0000000000..2b58e13ad4
--- /dev/null
+++ b/apps/ui/src/components/auth-actions/style.module.css
@@ -0,0 +1,41 @@
+.root {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.actions {
+	display: flex;
+	align-items: center;
+	gap: 16px;
+}
+
+.actions > * {
+	flex-shrink: 0;
+	white-space: nowrap;
+}
+
+.arrow {
+	margin-inline-start: 4px;
+	display: inline-block;
+}
+
+[dir='rtl'] .arrow {
+	transform: scaleX(-1);
+}
+
+.error {
+	margin: 0;
+	padding: 10px 12px;
+	border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-error);
+	border-radius: 6px;
+	background: var(--wpds-color-bg-surface-error-weak);
+	color: var(--wpds-color-fg-content-error);
+}
+
+@media (max-width: 600px) {
+	.actions {
+		align-items: stretch;
+		flex-direction: column;
+	}
+}
diff --git a/apps/ui/src/components/feature-list/index.tsx b/apps/ui/src/components/feature-list/index.tsx
new file mode 100644
index 0000000000..22d12dbea2
--- /dev/null
+++ b/apps/ui/src/components/feature-list/index.tsx
@@ -0,0 +1,31 @@
+import { check } from '@wordpress/icons';
+import { Icon } from '@wordpress/ui';
+import styles from './style.module.css';
+
+export interface Feature {
+	title: string;
+	body: string;
+}
+
+interface FeatureListProps {
+	features: Feature[];
+	className?: string;
+}
+
+// The onboarding flow's checkmark feature columns, shared by the welcome
+// screen and the tour steps so the two can't drift apart.
+export function FeatureList( { features, className }: FeatureListProps ) {
+	return (
+		<ul className={ className ? `${ styles.features } ${ className }` : styles.features }>
+			{ features.map( ( { title, body } ) => (
+				<li key={ title }>
+					<h3 className={ styles.featureTitle }>
+						<Icon icon={ check } size={ 16 } />
+						{ title }
+					</h3>
+					<p className={ styles.featureBody }>{ body }</p>
+				</li>
+			) ) }
+		</ul>
+	);
+}
diff --git a/apps/ui/src/components/feature-list/style.module.css b/apps/ui/src/components/feature-list/style.module.css
new file mode 100644
index 0000000000..4d8abcd31a
--- /dev/null
+++ b/apps/ui/src/components/feature-list/style.module.css
@@ -0,0 +1,44 @@
+/* Three left-aligned checkmark feature columns sharing one quiet bordered
+   container. Wider than the content column to make use of the horizontal
+   space. */
+.features {
+	list-style: none;
+	margin: 16px 0 0;
+	padding: 16px 20px 20px;
+	border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral);
+	border-radius: 8px;
+	display: flex;
+	gap: 24px;
+	width: min(880px, calc(100vw - 100px));
+	text-align: start;
+}
+
+.features li {
+	flex: 1 1 0;
+	min-width: 0;
+}
+
+.featureTitle {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	font-size: 13px;
+	font-weight: var(--wpds-typography-font-weight-medium);
+	margin: 0 0 2px;
+	text-wrap: balance;
+}
+
+.featureTitle svg {
+	fill: var(--wpds-color-fg-interactive-brand);
+	flex-shrink: 0;
+}
+
+.featureBody {
+	color: var(--wpds-color-fg-content-neutral-weak);
+	font-size: 12px;
+	line-height: 1.4;
+	margin: 0;
+	/* Align with the title text, past the checkmark. */
+	margin-inline-start: 22px;
+	text-wrap: pretty;
+}
diff --git a/apps/ui/src/components/onboarding-illustrations/agent-pixel-field.tsx b/apps/ui/src/components/onboarding-illustrations/agent-pixel-field.tsx
new file mode 100644
index 0000000000..6c3fc2d0b0
--- /dev/null
+++ b/apps/ui/src/components/onboarding-illustrations/agent-pixel-field.tsx
@@ -0,0 +1,326 @@
+/**
+ * Interactive pixel field for the onboarding tour's "agent" step: a wide
+ * rectangle of pixels echoing the welcome screen's pixel W logo. Bands of
+ * light wash diagonally through the grid in a continuous cascade. Unlike the
+ * W logo toy, the pixels never move — the pointer is a roaming glow that
+ * brightens the wave around it, and clicks send a color-only ripple ring
+ * through the grid. Reduced motion renders the static grid.
+ */
+
+import { useEffect, useRef } from 'react';
+import styles from './style.module.css';
+
+// Logical canvas size, scaled down responsively by CSS.
+const WIDTH = 880;
+const HEIGHT = 150;
+const INSET = 12;
+const PITCH = 12;
+const RECT_SIZE = 7;
+const MAX_DPR = 2;
+
+// Pointer glow: a soft light that brightens pixels near the cursor.
+const GLOW_RADIUS = 130;
+const GLOW_RADIUS_SQUARED = GLOW_RADIUS * GLOW_RADIUS;
+const GLOW_STRENGTH = 0.85;
+const POINTER_EASE = 0.12;
+
+// Click ripple: an expanding ring of brightness, no displacement.
+const RIPPLE_DURATION = 1400;
+const RIPPLE_RADIUS = 380;
+const RIPPLE_BAND = 46;
+const MAX_RIPPLES = 4;
+
+// Two traveling bands at different angles and speeds keep the wash
+// continuous — one is always somewhere in the field.
+const WASH_1 = { dirX: 0.349, dirY: 0.937, period: 210, speed: 0.085, weight: 1 };
+const WASH_2 = { dirX: 0.898, dirY: 0.439, period: 300, speed: 0.05, weight: 0.55 };
+const WASH_BAND = 0.45;
+
+// Three-stop blue ramp: deep blue at rest, brand blue mid-wash, light blue
+// at the crest — same hues as the W logo toy but anchored darker.
+const DARK_BLUE: [ number, number, number ] = [ 30, 44, 140 ];
+const BLUE: [ number, number, number ] = [ 56, 88, 233 ];
+const LIGHT_BLUE: [ number, number, number ] = [ 220, 230, 255 ];
+const COLOR_STEPS = 18;
+
+function lerpChannel( from: number, to: number, t: number ) {
+	return Math.round( from + ( to - from ) * t );
+}
+
+const COLOR_STYLES = Array.from( { length: COLOR_STEPS + 1 }, ( _, step ) => {
+	const t = step / COLOR_STEPS;
+	const [ from, to, localT ] =
+		t < 0.5 ? [ DARK_BLUE, BLUE, t * 2 ] : [ BLUE, LIGHT_BLUE, ( t - 0.5 ) * 2 ];
+	const r = lerpChannel( from[ 0 ], to[ 0 ], localT );
+	const g = lerpChannel( from[ 1 ], to[ 1 ], localT );
+	const b = lerpChannel( from[ 2 ], to[ 2 ], localT );
+	const a = ( 0.6 + 0.4 * t ).toFixed( 3 );
+	return `rgba(${ r }, ${ g }, ${ b }, ${ a })`;
+} );
+const BASE_COLOR = COLOR_STYLES[ 0 ];
+
+function getColorStyle( intensity: number ) {
+	const step = Math.min( COLOR_STEPS, Math.max( 0, Math.round( intensity * COLOR_STEPS ) ) );
+	return COLOR_STYLES[ step ];
+}
+
+function washIntensity( x: number, y: number, elapsed: number, wash: typeof WASH_1 ): number {
+	const proj = x * wash.dirX + y * wash.dirY - elapsed * wash.speed;
+	const phase = ( ( proj % wash.period ) + wash.period ) % wash.period;
+	const d = phase / wash.period;
+	if ( d >= WASH_BAND ) {
+		return 0;
+	}
+	// Smooth bell across the band so edges fade in and out.
+	return Math.sin( ( d / WASH_BAND ) * Math.PI ) * wash.weight;
+}
+
+type Pixel = { x: number; y: number; shimmer: number };
+type Ripple = { x: number; y: number; start: number };
+
+export function AgentPixelField() {
+	const canvasRef = useRef< HTMLCanvasElement >( null );
+
+	useEffect( () => {
+		const canvas = canvasRef.current;
+		if ( ! canvas ) {
+			return;
+		}
+
+		const canvasElement = canvas;
+		const dpr = Math.min( window.devicePixelRatio || 1, MAX_DPR );
+		canvasElement.width = Math.round( WIDTH * dpr );
+		canvasElement.height = Math.round( HEIGHT * dpr );
+
+		const ctx = canvasElement.getContext( '2d', { alpha: true } );
+		if ( ! ctx ) {
+			return;
+		}
+		const context = ctx;
+		context.scale( dpr, dpr );
+		context.imageSmoothingEnabled = false;
+
+		const pixels: Pixel[] = [];
+		for ( let y = INSET; y <= HEIGHT - INSET - RECT_SIZE; y += PITCH ) {
+			for ( let x = INSET; x <= WIDTH - INSET - RECT_SIZE; x += PITCH ) {
+				pixels.push( { x, y, shimmer: 0.5 + Math.random() * 0.5 } );
+			}
+		}
+
+		const ripples: Ripple[] = [];
+		const reducedMotionQuery =
+			typeof window.matchMedia === 'function'
+				? window.matchMedia( '(prefers-reduced-motion: reduce)' )
+				: null;
+		const animationStart = performance.now();
+		const bounds = { left: 0, top: 0, scale: 1 };
+
+		let raf: number | null = null;
+		let cancelled = false;
+		let hover = false;
+		let mouseX = -9999;
+		let mouseY = -9999;
+		let targetMouseX = -9999;
+		let targetMouseY = -9999;
+		let pageVisible = ! document.hidden;
+		let isIntersecting = true;
+		let reducedMotion = reducedMotionQuery?.matches ?? false;
+
+		function canAnimate() {
+			return ! cancelled && ! reducedMotion && pageVisible && isIntersecting;
+		}
+
+		function updateBounds() {
+			const rect = canvasElement.getBoundingClientRect();
+			bounds.left = rect.left;
+			bounds.top = rect.top;
+			bounds.scale = rect.width > 0 ? WIDTH / rect.width : 1;
+		}
+
+		function drawStatic() {
+			context.clearRect( 0, 0, WIDTH, HEIGHT );
+			context.fillStyle = BASE_COLOR;
+			for ( let i = 0; i < pixels.length; i++ ) {
+				context.fillRect( pixels[ i ].x, pixels[ i ].y, RECT_SIZE, RECT_SIZE );
+			}
+		}
+
+		function cancelLoop() {
+			if ( raf !== null ) {
+				cancelAnimationFrame( raf );
+				raf = null;
+			}
+		}
+
+		function ensureLoop() {
+			if ( canAnimate() && raf === null ) {
+				raf = requestAnimationFrame( tick );
+			}
+		}
+
+		function syncAnimationState() {
+			if ( ! canAnimate() ) {
+				cancelLoop();
+				ripples.length = 0;
+				drawStatic();
+				return;
+			}
+			ensureLoop();
+		}
+
+		function tick( timestamp: number ) {
+			raf = null;
+			if ( ! canAnimate() ) {
+				syncAnimationState();
+				return;
+			}
+
+			const elapsed = timestamp - animationStart;
+
+			if ( hover ) {
+				mouseX += ( targetMouseX - mouseX ) * POINTER_EASE;
+				mouseY += ( targetMouseY - mouseY ) * POINTER_EASE;
+			}
+
+			// Resolve active ripples once per frame.
+			const activeRipples: Array< { x: number; y: number; radius: number; fade: number } > = [];
+			for ( let i = ripples.length - 1; i >= 0; i-- ) {
+				const t = ( timestamp - ripples[ i ].start ) / RIPPLE_DURATION;
+				if ( t > 1 ) {
+					ripples.splice( i, 1 );
+					continue;
+				}
+				const eased = 1 - Math.pow( 1 - t, 3 );
+				activeRipples.push( {
+					x: ripples[ i ].x,
+					y: ripples[ i ].y,
+					radius: eased * RIPPLE_RADIUS,
+					fade: 1 - t,
+				} );
+			}
+
+			context.clearRect( 0, 0, WIDTH, HEIGHT );
+
+			for ( let i = 0; i < pixels.length; i++ ) {
+				const px = pixels[ i ];
+				let intensity =
+					Math.max(
+						washIntensity( px.x, px.y, elapsed, WASH_1 ),
+						washIntensity( px.x, px.y, elapsed, WASH_2 )
+					) * px.shimmer;
+
+				if ( hover ) {
+					const dx = px.x - mouseX;
+					const dy = px.y - mouseY;
+					const distanceSquared = dx * dx + dy * dy;
+					if ( distanceSquared < GLOW_RADIUS_SQUARED ) {
+						const proximity = 1 - Math.sqrt( distanceSquared ) / GLOW_RADIUS;
+						const glow = proximity * proximity * ( 3 - 2 * proximity ) * GLOW_STRENGTH;
+						intensity = Math.max( intensity, glow * px.shimmer );
+					}
+				}
+
+				for ( let r = 0; r < activeRipples.length; r++ ) {
+					const ripple = activeRipples[ r ];
+					const bandDistance = Math.abs(
+						Math.hypot( px.x - ripple.x, px.y - ripple.y ) - ripple.radius
+					);
+					if ( bandDistance < RIPPLE_BAND ) {
+						const rippleIntensity = ( 1 - bandDistance / RIPPLE_BAND ) * ripple.fade;
+						intensity = Math.max( intensity, rippleIntensity );
+					}
+				}
+
+				context.fillStyle = getColorStyle( Math.min( 1, intensity ) );
+				context.fillRect( px.x, px.y, RECT_SIZE, RECT_SIZE );
+			}
+
+			// The wash never rests, so the loop runs whenever we're visible.
+			ensureLoop();
+		}
+
+		const setPointerFromEvent = ( event: MouseEvent ) => {
+			targetMouseX = ( event.clientX - bounds.left ) * bounds.scale;
+			targetMouseY = ( event.clientY - bounds.top ) * bounds.scale;
+			if ( mouseX < -1000 || mouseY < -1000 ) {
+				mouseX = targetMouseX;
+				mouseY = targetMouseY;
+			}
+		};
+		const onMove = ( event: MouseEvent ) => {
+			setPointerFromEvent( event );
+		};
+		const onEnter = ( event: MouseEvent ) => {
+			hover = true;
+			updateBounds();
+			setPointerFromEvent( event );
+		};
+		const onLeave = () => {
+			hover = false;
+			mouseX = -9999;
+			mouseY = -9999;
+			targetMouseX = -9999;
+			targetMouseY = -9999;
+		};
+		const onClick = ( event: MouseEvent ) => {
+			if ( ! canAnimate() ) {
+				return;
+			}
+			updateBounds();
+			ripples.push( {
+				x: ( event.clientX - bounds.left ) * bounds.scale,
+				y: ( event.clientY - bounds.top ) * bounds.scale,
+				start: performance.now(),
+			} );
+			if ( ripples.length > MAX_RIPPLES ) {
+				ripples.splice( 0, ripples.length - MAX_RIPPLES );
+			}
+		};
+		const onVisibilityChange = () => {
+			pageVisible = ! document.hidden;
+			syncAnimationState();
+		};
+		const onReducedMotionChange = ( event: MediaQueryListEvent ) => {
+			reducedMotion = event.matches;
+			syncAnimationState();
+		};
+
+		updateBounds();
+		canvasElement.addEventListener( 'mousemove', onMove, { passive: true } );
+		canvasElement.addEventListener( 'mouseenter', onEnter, { passive: true } );
+		canvasElement.addEventListener( 'mouseleave', onLeave, { passive: true } );
+		canvasElement.addEventListener( 'click', onClick );
+		document.addEventListener( 'visibilitychange', onVisibilityChange );
+		reducedMotionQuery?.addEventListener( 'change', onReducedMotionChange );
+
+		const resizeObserver =
+			typeof ResizeObserver !== 'undefined' ? new ResizeObserver( () => updateBounds() ) : null;
+		resizeObserver?.observe( canvasElement );
+
+		const intersectionObserver =
+			typeof IntersectionObserver !== 'undefined'
+				? new IntersectionObserver( ( entries ) => {
+						isIntersecting = entries.some( ( entry ) => entry.isIntersecting );
+						syncAnimationState();
+				  } )
+				: null;
+		intersectionObserver?.observe( canvasElement );
+
+		syncAnimationState();
+
+		return () => {
+			cancelled = true;
+			cancelLoop();
+			canvasElement.removeEventListener( 'mousemove', onMove );
+			canvasElement.removeEventListener( 'mouseenter', onEnter );
+			canvasElement.removeEventListener( 'mouseleave', onLeave );
+			canvasElement.removeEventListener( 'click', onClick );
+			document.removeEventListener( 'visibilitychange', onVisibilityChange );
+			reducedMotionQuery?.removeEventListener( 'change', onReducedMotionChange );
+			resizeObserver?.disconnect();
+			intersectionObserver?.disconnect();
+		};
+	}, [] );
+
+	return <canvas ref={ canvasRef } className={ styles.pixelField } aria-hidden="true" />;
+}
diff --git a/apps/ui/src/components/onboarding-illustrations/index.tsx b/apps/ui/src/components/onboarding-illustrations/index.tsx
index dd290c2961..e50b3e97fa 100644
--- a/apps/ui/src/components/onboarding-illustrations/index.tsx
+++ b/apps/ui/src/components/onboarding-illustrations/index.tsx
@@ -81,6 +81,47 @@ export function ConnectSiteIllustration() {
 	);
 }
 
+export function SiteListIllustration() {
+	return (
+		<svg
+			width="200"
+			height="130"
+			viewBox="0 0 200 130"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-hidden="true"
+			data-keep-size
+		>
+			<rect x="2" y="2" width="196" height="126" rx="12" stroke={ STROKE } strokeWidth="4" />
+			<rect x="20" y="27" width="76" height="8" rx="4" fill={ STROKE } fillOpacity="0.2" />
+			<rect x="20" y="61" width="98" height="8" rx="4" fill={ STROKE } fillOpacity="0.2" />
+			<rect x="20" y="95" width="58" height="8" rx="4" fill={ STROKE } fillOpacity="0.2" />
+			<circle cx="176" cy="31" r="4" fill="#16a34a" />
+			{ /* Starting site: dashed ring spins while the dot pulses amber, then
+			     both resolve into the steady running green as the ping fires. */ }
+			<circle
+				cx="176"
+				cy="65"
+				r="8"
+				stroke={ STROKE }
+				strokeLinecap="round"
+				strokeDasharray="1 5"
+				className={ styles.startingRing }
+			/>
+			<circle
+				cx="176"
+				cy="65"
+				r="6"
+				stroke="#16a34a"
+				strokeWidth="2"
+				className={ styles.startupPing }
+			/>
+			<circle cx="176" cy="65" r="4" className={ styles.startingDot } />
+			<circle cx="176" cy="99" r="4" fill="#16a34a" />
+		</svg>
+	);
+}
+
 export function DropBackupIllustration() {
 	return (
 		<svg
diff --git a/apps/ui/src/components/onboarding-illustrations/style.module.css b/apps/ui/src/components/onboarding-illustrations/style.module.css
index c98b831ae8..656e0eff79 100644
--- a/apps/ui/src/components/onboarding-illustrations/style.module.css
+++ b/apps/ui/src/components/onboarding-illustrations/style.module.css
@@ -36,6 +36,130 @@
 	animation: card-shift 3s ease-in-out infinite;
 }
 
+/* Site-list startup sequence (SiteListIllustration): the middle row plays a
+   one-shot boot — off, pulsing amber behind a spinning dashed ring, then
+   steady green with a ping. Played once and held; a loop read as a crash. */
+.startingDot {
+	fill: #16a34a;
+	animation: site-turn-on 7s forwards;
+}
+
+.startingRing {
+	transform-box: fill-box;
+	transform-origin: center;
+	opacity: 0;
+	animation: starting-ring 7s forwards, spin 20s linear infinite;
+}
+
+.startupPing {
+	transform-box: fill-box;
+	transform-origin: center;
+	opacity: 0;
+	animation: startup-ping 7s ease-out forwards;
+}
+
+/* Agent pixel field (agent-pixel-field.tsx): a fixed 880-wide logical canvas
+   that scales down responsively on narrow windows. The canvas is interactive
+   (pointer scatter, click ripples) but isn't a control. */
+.pixelField {
+	display: block;
+	width: min(880px, calc(100vw - 100px));
+	height: auto;
+	cursor: default;
+}
+
+@keyframes site-turn-on {
+	0%,
+	20% {
+		fill: #a16207;
+		opacity: 0;
+	}
+
+	24%,
+	64% {
+		fill: #a16207;
+	}
+
+	24% {
+		opacity: 1;
+	}
+
+	29% {
+		opacity: 0.25;
+	}
+
+	34% {
+		opacity: 1;
+	}
+
+	39% {
+		opacity: 0.25;
+	}
+
+	44% {
+		opacity: 1;
+	}
+
+	49% {
+		opacity: 0.25;
+	}
+
+	54% {
+		opacity: 1;
+	}
+
+	59% {
+		opacity: 0.25;
+	}
+
+	64% {
+		opacity: 1;
+	}
+
+	72%,
+	100% {
+		fill: #16a34a;
+		opacity: 1;
+	}
+}
+
+@keyframes starting-ring {
+	0%,
+	18% {
+		opacity: 0;
+	}
+
+	23%,
+	64% {
+		opacity: 1;
+	}
+
+	71%,
+	100% {
+		opacity: 0;
+	}
+}
+
+/* Sonar ping when the site lands running: a green ring expands out from
+   the dot and dissolves. */
+@keyframes startup-ping {
+	0%,
+	71% {
+		opacity: 0;
+		transform: scale(0.7);
+	}
+
+	73% {
+		opacity: 0.9;
+	}
+
+	88%,
+	100% {
+		opacity: 0;
+		transform: scale(3);
+	}
+}
+
 @keyframes spin {
 	from {
 		transform: rotate(0deg);
@@ -72,7 +196,10 @@
 	.spin,
 	.host:hover .hoverSpinReverse,
 	.host:hover .arrowNudge,
-	.host:hover .cardShift {
+	.host:hover .cardShift,
+	.startingDot,
+	.startingRing,
+	.startupPing {
 		animation: none;
 	}
 }
diff --git a/apps/ui/src/lib/docs-links.ts b/apps/ui/src/lib/docs-links.ts
index eee053f8b7..7b33c362f5 100644
--- a/apps/ui/src/lib/docs-links.ts
+++ b/apps/ui/src/lib/docs-links.ts
@@ -33,6 +33,12 @@ const DOCS_LINKS = {
 		en: 'https://developer.wordpress.com/docs/developer-tools/studio/sync/#supported-sites',
 		es: 'https://developer.wordpress.com/es/docs/herramientas-para-desarrolladores/studio/sync/#sitios-compatibles',
 	},
+	a8cTos: {
+		en: 'https://wordpress.com/tos/',
+	},
+	a8cPrivacyPolicy: {
+		en: 'https://automattic.com/privacy/',
+	},
 } as const satisfies Record< string, TranslatedLink >;
 
 export const REPORT_ISSUE_URL = 'https://github.com/Automattic/studio/issues/new/choose';
diff --git a/apps/ui/src/ui-classic/components/wizard-page/index.tsx b/apps/ui/src/ui-classic/components/wizard-page/index.tsx
new file mode 100644
index 0000000000..04b3906b27
--- /dev/null
+++ b/apps/ui/src/ui-classic/components/wizard-page/index.tsx
@@ -0,0 +1,101 @@
+import { __ } from '@wordpress/i18n';
+import { chevronLeft } from '@wordpress/icons';
+import { Button, Icon } from '@wordpress/ui';
+import { OnboardingFooter } from '@/components/onboarding-footer';
+import sharedStyles from '../../router/layout-onboarding/style.module.css';
+import styles from './style.module.css';
+import type { ReactNode } from 'react';
+
+interface WizardPrimaryAction {
+	label: string;
+	onClick: () => void;
+	disabled?: boolean;
+	loading?: boolean;
+}
+
+interface WizardPageProps {
+	title: string;
+	subtitle?: string;
+	/** Decorative visual rendered above the title. */
+	illustration?: ReactNode;
+	children: ReactNode;
+	/**
+	 * Renders the standard Back button pinned bottom-left. Omit on pages
+	 * that have nowhere to go back to (the layout's close button covers
+	 * users who arrived with existing sites).
+	 */
+	onBack?: () => void;
+	backLabel?: string;
+	/**
+	 * Bottom-right primary action (Continue, Start building, …). Omit on
+	 * picker pages whose cards navigate by themselves.
+	 */
+	primaryAction?: WizardPrimaryAction;
+}
+
+/**
+ * One step of an onboarding-style wizard, rendered inside the onboarding
+ * layout: shared title/subtitle typography, the step's content, and the
+ * standard fixed footer. Step sequencing belongs to the route (keep the
+ * current step in a search param so moving between steps is a navigation
+ * and picks up the flow's view transitions — see route-onboarding-tour).
+ */
+export function WizardPage( {
+	title,
+	subtitle,
+	illustration,
+	children,
+	onBack,
+	backLabel,
+	primaryAction,
+}: WizardPageProps ) {
+	const hasFooter = Boolean( onBack || primaryAction );
+	return (
+		<div
+			className={
+				hasFooter ? `${ sharedStyles.page } ${ styles.pageWithFooter }` : sharedStyles.page
+			}
+		>
+			{ illustration }
+			<h1 className={ sharedStyles.title }>{ title }</h1>
+			{ subtitle ? <p className={ sharedStyles.subtitle }>{ subtitle }</p> : null }
+			{ children }
+			{ hasFooter && (
+				<WizardFooter onBack={ onBack } backLabel={ backLabel } primaryAction={ primaryAction } />
+			) }
+		</div>
+	);
+}
+
+function WizardFooter( {
+	onBack,
+	backLabel,
+	primaryAction,
+}: Pick< WizardPageProps, 'onBack' | 'backLabel' | 'primaryAction' > ) {
+	return (
+		<OnboardingFooter>
+			{ /* The footer pins its first child bottom-left; keep the slot
+			     occupied so a lone primary action stays bottom-right. */ }
+			{ onBack ? (
+				<Button type="button" variant="minimal" tone="neutral" onClick={ onBack }>
+					<Icon icon={ chevronLeft } size={ 16 } />
+					<span>{ backLabel ?? __( 'Back' ) }</span>
+				</Button>
+			) : (
+				<span aria-hidden="true" />
+			) }
+			{ primaryAction && (
+				<Button
+					type="button"
+					variant="solid"
+					tone="brand"
+					disabled={ primaryAction.disabled }
+					loading={ primaryAction.loading }
+					onClick={ primaryAction.onClick }
+				>
+					{ primaryAction.label }
+				</Button>
+			) }
+		</OnboardingFooter>
+	);
+}
diff --git a/apps/ui/src/ui-classic/components/wizard-page/style.module.css b/apps/ui/src/ui-classic/components/wizard-page/style.module.css
new file mode 100644
index 0000000000..6ae2fed603
--- /dev/null
+++ b/apps/ui/src/ui-classic/components/wizard-page/style.module.css
@@ -0,0 +1,7 @@
+/* `layout-onboarding`'s .page reserves 72px at the bottom to clear the fixed
+   footer, but the layout centres the whole content box (`margin-block: auto`)
+   — so padding on one side only lifts the visible content half that distance.
+   Matching it at the top restores true centring while keeping the clearance. */
+.pageWithFooter {
+	padding-top: 72px;
+}
diff --git a/apps/ui/src/ui-classic/router/layout-onboarding/index.tsx b/apps/ui/src/ui-classic/router/layout-onboarding/index.tsx
index 7fdaae7e9c..ec3a047582 100644
--- a/apps/ui/src/ui-classic/router/layout-onboarding/index.tsx
+++ b/apps/ui/src/ui-classic/router/layout-onboarding/index.tsx
@@ -80,7 +80,10 @@ export function OnboardingShell() {
 		<OnboardingShellView
 			hasSites={ ( sites?.length ?? 0 ) > 0 }
 			isWide={ matches.some(
-				( match ) => match.pathname === '/onboarding' || match.pathname === '/onboarding/connect'
+				( match ) =>
+					match.pathname === '/onboarding' ||
+					match.pathname === '/onboarding/connect' ||
+					match.pathname === '/onboarding/tour'
 			) }
 			pathname={ pathname }
 			onClose={ () => void navigate( { to: '/' } ) }
diff --git a/apps/ui/src/ui-classic/router/layout-onboarding/style.module.css b/apps/ui/src/ui-classic/router/layout-onboarding/style.module.css
index e9cc12620c..5bb591e010 100644
--- a/apps/ui/src/ui-classic/router/layout-onboarding/style.module.css
+++ b/apps/ui/src/ui-classic/router/layout-onboarding/style.module.css
@@ -50,3 +50,10 @@
 	pointer-events: none;
 	z-index: -1;
 }
+
+/* Translucent surface that lets the dot grid show through, softened.
+   Compose into a rule with `composes: glassSurface from '…'`. */
+.glassSurface {
+	background: color-mix(in srgb, var(--wpds-color-bg-surface-neutral-strong) 50%, transparent);
+	backdrop-filter: blur(12px);
+}
diff --git a/apps/ui/src/ui-classic/router/route-onboarding-connect/index.tsx b/apps/ui/src/ui-classic/router/route-onboarding-connect/index.tsx
index d3f3f9c165..df840be4fd 100644
--- a/apps/ui/src/ui-classic/router/route-onboarding-connect/index.tsx
+++ b/apps/ui/src/ui-classic/router/route-onboarding-connect/index.tsx
@@ -5,10 +5,11 @@ import { check, chevronLeft, external, search } from '@wordpress/icons';
 import { Badge, Button, Icon } from '@wordpress/ui';
 import { clsx } from 'clsx';
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { AuthActions } from '@/components/auth-actions';
 import { OnboardingFooter } from '@/components/onboarding-footer';
 import { toast } from '@/data/app-messages';
 import { useConnector } from '@/data/core';
-import { useAuthUser, useLogin } from '@/data/queries/use-auth-user';
+import { useAuthUser } from '@/data/queries/use-auth-user';
 import { useCreateSite, useDeleteSite, useSites, useStartSite } from '@/data/queries/use-sites';
 import { usePullSiteFromLive } from '@/data/queries/use-sync-site';
 import { useUserLocale } from '@/data/queries/use-user-locale';
@@ -144,11 +145,6 @@ function RemoteSiteCard( {
 }
 
 function SignedOutView() {
-	const isOffline = useOffline();
-	const login = useLogin();
-	const signup = useLogin( { signup: true } );
-	const authError = login.error ?? signup.error;
-
 	return (
 		<div className={ styles.signedOut }>
 			<ul className={ styles.benefits }>
@@ -165,40 +161,7 @@ function SignedOutView() {
 					<span>{ __( 'Supports staging and production sites.' ) }</span>
 				</li>
 			</ul>
-			<div className={ styles.authActions }>
-				<Button
-					type="button"
-					variant="minimal"
-					tone="neutral"
-					disabled={ isOffline || login.isPending }
-					loading={ signup.isPending }
-					onClick={ () => signup.mutate() }
-				>
-					<span>{ __( 'Sign up' ) }</span>
-					<Icon icon={ external } size={ 14 } aria-hidden="true" />
-				</Button>
-				<Button
-					type="button"
-					variant="solid"
-					tone="brand"
-					disabled={ isOffline || signup.isPending }
-					loading={ login.isPending }
-					onClick={ () => login.mutate() }
-				>
-					<span>{ __( 'Log in with WordPress.com' ) }</span>
-					<Icon icon={ external } size={ 14 } aria-hidden="true" />
-				</Button>
-			</div>
-			{ isOffline && (
-				<p className={ styles.hint }>{ __( "You're offline. Reconnect to sign in." ) }</p>
-			) }
-			{ authError && (
-				<p role="alert" className={ styles.error }>
-					{ authError instanceof Error
-						? authError.message
-						: __( 'Authentication failed. Please try again.' ) }
-				</p>
-			) }
+			<AuthActions className={ styles.authActions } />
 		</div>
 	);
 }
diff --git a/apps/ui/src/ui-classic/router/route-onboarding-connect/style.module.css b/apps/ui/src/ui-classic/router/route-onboarding-connect/style.module.css
index 2856c9087b..c2488bd517 100644
--- a/apps/ui/src/ui-classic/router/route-onboarding-connect/style.module.css
+++ b/apps/ui/src/ui-classic/router/route-onboarding-connect/style.module.css
@@ -33,14 +33,10 @@
 }
 
 .authActions {
-	display: flex;
-	align-items: center;
-	gap: 12px;
 	padding-top: 16px;
 	border-top: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral);
 }
 
-.hint,
 .state p {
 	margin: 0;
 	color: var(--wpds-color-fg-content-neutral-weak);
@@ -265,22 +261,7 @@
 	color: var(--wpds-color-fg-content-error);
 }
 
-.error {
-	max-width: 680px;
-	margin: 24px auto 0;
-	padding: 10px 12px;
-	border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-error);
-	border-radius: 6px;
-	background: var(--wpds-color-bg-surface-error-weak);
-	color: var(--wpds-color-fg-content-error);
-}
-
 @media (max-width: 600px) {
-	.authActions {
-		align-items: stretch;
-		flex-direction: column;
-	}
-
 	.siteGrid {
 		grid-template-columns: minmax(0, 1fr);
 	}
diff --git a/apps/ui/src/ui-classic/router/route-onboarding-tour/index.tsx b/apps/ui/src/ui-classic/router/route-onboarding-tour/index.tsx
new file mode 100644
index 0000000000..f980e736b9
--- /dev/null
+++ b/apps/ui/src/ui-classic/router/route-onboarding-tour/index.tsx
@@ -0,0 +1,147 @@
+import { createRoute, useNavigate } from '@tanstack/react-router';
+import { __ } from '@wordpress/i18n';
+import { useCallback } from 'react';
+import { AuthActions } from '@/components/auth-actions';
+import { FeatureList } from '@/components/feature-list';
+import { SiteListIllustration } from '@/components/onboarding-illustrations';
+import { AgentPixelField } from '@/components/onboarding-illustrations/agent-pixel-field';
+import { useConnector } from '@/data/core';
+import { useAuthUser } from '@/data/queries/use-auth-user';
+import { WizardPage } from '../../components/wizard-page';
+import { onboardingLayoutRoute } from '../layout-onboarding';
+import styles from './style.module.css';
+
+function useSteps() {
+	return [
+		{
+			title: __( 'Sites run right on your machine' ),
+			subtitle: __(
+				'Every Studio site is a real WordPress install that lives locally, PHP and database included.'
+			),
+			illustration: (
+				<div className={ styles.tourIllustration }>
+					<SiteListIllustration />
+				</div>
+			),
+			points: [
+				{
+					title: __( 'Zero setup' ),
+					body: __(
+						'No servers to set up, no accounts to create. A fresh site is ready in seconds.'
+					),
+				},
+				{
+					title: __( 'Works offline' ),
+					body: __( 'Your sites don’t need the internet. Build on a plane, at a café, anywhere.' ),
+				},
+				{
+					title: __( 'Safe to break' ),
+					body: __(
+						'Experiment freely. If something breaks, just start over. Nothing is at stake.'
+					),
+				},
+			],
+		},
+		{
+			title: __( 'Build with Studio Code' ),
+			subtitle: __( 'Studio Code is an AI collaborator that works on your sites with you.' ),
+			illustration: (
+				<div className={ styles.tourPixelField }>
+					<AgentPixelField />
+				</div>
+			),
+			points: [
+				{
+					title: __( 'Chat to build' ),
+					body: __(
+						'Describe what you want. Studio Code designs, writes code, and edits your site.'
+					),
+				},
+				{
+					title: __( 'Sites, plugins, and themes' ),
+					body: __( 'Build whole sites, or scaffold a plugin or theme and take it anywhere.' ),
+				},
+				{
+					title: __( 'Anything you can imagine' ),
+					body: __( 'If WordPress can do it, you can build it in your Studio.' ),
+				},
+			],
+		},
+	];
+}
+
+export function OnboardingTourPage() {
+	const navigate = useNavigate();
+	const connector = useConnector();
+	// Users who skipped login on the welcome screen arrive at the Studio Code
+	// step signed out; since the agent needs a WordPress.com account, this
+	// step doubles as the second (and last) login prompt in the flow.
+	const { data: authUser } = useAuthUser();
+	// The step lives in the URL so moving between steps is a navigation and
+	// picks up the onboarding flow's view transitions.
+	const { step: stepSearch } = onboardingTourRoute.useSearch();
+	const steps = useSteps();
+	const stepIndex = stepSearch === 'agent' ? 1 : 0;
+
+	const step = steps[ stepIndex ];
+	const isLastStep = stepIndex === steps.length - 1;
+	// The last step doubles as the login prompt; when the user is signed out the
+	// primary action skips it rather than simply continuing.
+	const isLoginStep = isLastStep && ! authUser;
+
+	const finishTour = useCallback( async () => {
+		await connector.setOnboardingCompleted( true );
+		void navigate( { to: '/onboarding' } );
+	}, [ connector, navigate ] );
+
+	return (
+		<WizardPage
+			title={ step.title }
+			subtitle={ step.subtitle }
+			illustration={ step.illustration }
+			onBack={ () => {
+				if ( stepIndex === 0 ) {
+					void navigate( { to: '/welcome' } );
+				} else {
+					void navigate( { to: '/onboarding/tour', search: {} } );
+				}
+			} }
+			primaryAction={ {
+				label: isLoginStep ? __( 'Skip log in' ) : __( 'Continue' ),
+				onClick: () => {
+					if ( isLastStep ) {
+						void finishTour();
+					} else {
+						void navigate( { to: '/onboarding/tour', search: { step: 'agent' } } );
+					}
+				},
+			} }
+		>
+			<FeatureList features={ step.points } className={ styles.tourFeatures } />
+			{ isLoginStep && (
+				<div className={ styles.tourAuth }>
+					<p className={ styles.tourAuthText }>
+						{ __( 'AI features require a free WordPress.com account.' ) }
+					</p>
+					<AuthActions />
+				</div>
+			) }
+		</WizardPage>
+	);
+}
+
+interface TourSearch {
+	step?: 'agent';
+}
+
+export const onboardingTourRoute = createRoute( {
+	getParentRoute: () => onboardingLayoutRoute,
+	path: '/onboarding/tour',
+	validateSearch: ( search: Record< string, unknown > ): TourSearch => {
+		if ( search.step === 'agent' ) {
+			return { step: 'agent' };
+		}
+		return {};
+	},
+	component: OnboardingTourPage,
+} );
diff --git a/apps/ui/src/ui-classic/router/route-onboarding-tour/style.module.css b/apps/ui/src/ui-classic/router/route-onboarding-tour/style.module.css
new file mode 100644
index 0000000000..eefbbeb6b3
--- /dev/null
+++ b/apps/ui/src/ui-classic/router/route-onboarding-tour/style.module.css
@@ -0,0 +1,43 @@
+/* The shared feature columns are centered by a flex parent on the welcome
+   screen; inside the onboarding page they need to center themselves. The
+   glass surface matches the flow-picker cards. */
+.tourFeatures {
+	composes: glassSurface from '../layout-onboarding/style.module.css';
+	margin-inline: auto;
+	margin-top: 32px;
+}
+
+/* Signed-out call to action under the Studio Code step's feature list: a
+   short line and the same Sign up / Log in pair as the welcome screen. */
+.tourAuth {
+	margin-top: 32px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 12px;
+}
+
+.tourAuthText {
+	margin: 0;
+	color: var(--wpds-color-fg-content-neutral-weak);
+}
+
+/* The agent step's pixel field sits bare — no card, no glass — so it reads
+   as a loose field of pixels. It stays interactive, so no pointer-events
+   suppression here. */
+.tourPixelField {
+	display: inline-block;
+	margin-bottom: 24px;
+	line-height: 0;
+}
+
+/* Decorative mini site list above the title (see SiteListIllustration).
+   The wrapper shrink-wraps the SVG and lends it the shared glass surface —
+   the radius matches the outer edge of the card's 4px stroke (rx 12 + 2). */
+.tourIllustration {
+	composes: glassSurface from '../layout-onboarding/style.module.css';
+	display: inline-block;
+	margin-bottom: 40px;
+	border-radius: 14px;
+	line-height: 0;
+}
diff --git a/apps/ui/src/ui-classic/router/route-welcome/index.tsx b/apps/ui/src/ui-classic/router/route-welcome/index.tsx
index ef366b3415..4a53d4e494 100644
--- a/apps/ui/src/ui-classic/router/route-welcome/index.tsx
+++ b/apps/ui/src/ui-classic/router/route-welcome/index.tsx
@@ -1,93 +1,177 @@
 import { createRoute, redirect, useNavigate } from '@tanstack/react-router';
 import { CheckboxControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/ui';
+import { chevronRight } from '@wordpress/icons';
+import { Button, Icon } from '@wordpress/ui';
 import { useCallback, useEffect, useRef } from 'react';
+import { AuthActions } from '@/components/auth-actions';
+import { DotGrid } from '@/components/dot-grid';
+import { FeatureList } from '@/components/feature-list';
+import { Gravatar } from '@/components/gravatar';
 import { useConnector } from '@/data/core';
-import { useAuthUser, useLogin } from '@/data/queries/use-auth-user';
+import { useAuthUser, useLogout } from '@/data/queries/use-auth-user';
 import { SITES_QUERY_KEY } from '@/data/queries/use-sites';
+import { useUserLocale } from '@/data/queries/use-user-locale';
 import { useSaveUserPreferences, useUserPreferences } from '@/data/queries/use-user-preferences';
+import { usePrefersColorScheme } from '@/hooks/use-prefers-color-scheme';
+import { getLocalizedLink } from '@/lib/docs-links';
+import { EmptyBackground } from '../../components/session-view/empty-background';
 import { rootRoute } from '../layout-root';
 import styles from './style.module.css';
 
-function WelcomePage() {
-	const connector = useConnector();
+export function WelcomePage() {
 	const navigate = useNavigate();
+	const connector = useConnector();
+	const logout = useLogout();
 	const { data: authUser } = useAuthUser();
-	const login = useLogin();
-	const signup = useLogin( { signup: true } );
+	const locale = useUserLocale();
 	const { data: preferences } = useUserPreferences();
 	const saveUserPreferences = useSaveUserPreferences();
+	const isDark = usePrefersColorScheme() === 'dark';
+
+	// The welcome screen owns the account story: these are the features a
+	// WordPress.com login unlocks.
+	const features = [
+		{
+			title: __( 'Studio Code' ),
+			body: __( 'An AI collaborator that designs, writes code, and builds sites with you.' ),
+		},
+		{
+			title: __( 'Sync with live sites' ),
+			body: __( 'Push and pull changes to WordPress.com or Pressable anytime.' ),
+		},
+		{
+			title: __( 'Preview links' ),
+			body: __( 'Share a temporary copy of any site with anyone.' ),
+		},
+	];
 
-	const continueToOnboarding = useCallback( async () => {
-		await connector.setOnboardingCompleted( true );
-		void navigate( { to: '/onboarding' } );
-	}, [ connector, navigate ] );
+	// The tour marks onboarding complete when it finishes; the welcome only
+	// hands off to it.
+	const continueToTour = useCallback( () => {
+		void navigate( { to: '/onboarding/tour' } );
+	}, [ navigate ] );
 
-	// Auto-advance on a fresh login (signed-out → signed-in while this screen
-	// is up). An already-authenticated user revisiting the welcome screen
-	// (e.g. via browser back) won't be bounced.
+	// Auto-advance only on a fresh login (signed-out → signed-in while this
+	// screen is up). An already-authenticated user can revisit the welcome
+	// without being bounced straight onward.
 	const previousAuthRef = useRef< typeof authUser >( undefined );
 	useEffect( () => {
 		const previous = previousAuthRef.current;
 		previousAuthRef.current = authUser;
 		if ( authUser && previous === null ) {
-			void continueToOnboarding();
+			continueToTour();
 		}
-	}, [ authUser, continueToOnboarding ] );
+	}, [ authUser, continueToTour ] );
+
+	const openLegalLink = ( key: 'a8cTos' | 'a8cPrivacyPolicy' ) =>
+		void connector.openExternalUrl( getLocalizedLink( locale, key ) );
 
 	return (
-		<div className={ styles.root }>
-			<h1 className={ styles.heading }>{ __( 'Welcome to Studio' ) }</h1>
-			<p className={ styles.subtitle }>
-				{ __( 'Sign in with a free WordPress.com account to unlock everything Studio offers.' ) }
-			</p>
-			<ul className={ styles.features }>
-				<li>{ __( 'Chat with a WordPress expert that builds and edits your site' ) }</li>
-				<li>{ __( 'Share your work instantly with preview links' ) }</li>
-				<li>{ __( 'Publish to a live WordPress.com site when ready' ) }</li>
-			</ul>
-			<div className={ styles.actions }>
-				<Button
-					type="button"
-					variant="solid"
-					tone="brand"
-					loading={ login.isPending }
-					onClick={ () => login.mutate() }
-				>
-					{ __( 'Log in with WordPress.com' ) }
-				</Button>
-				<Button
-					type="button"
-					variant="outline"
-					tone="neutral"
-					loading={ signup.isPending }
-					onClick={ () => signup.mutate() }
-				>
-					{ __( 'Sign up' ) }
-				</Button>
+		<div className={ styles.page }>
+			{ /* Same decorative backdrop as the onboarding shell, so the
+			     welcome reads as the start of that flow. */ }
+			<div aria-hidden="true" className={ styles.pageDotGrid }>
+				<DotGrid spacing={ 32 } crossSize={ 5 } opacity={ 0.2 } intro={ false } />
+			</div>
+			<div aria-hidden="true">
+				<div className={ `${ styles.dragEdge } ${ styles.dragEdgeTop }` } />
+				<div className={ `${ styles.dragEdge } ${ styles.dragEdgeLeft }` } />
+				<div className={ `${ styles.dragEdge } ${ styles.dragEdgeBottom }` } />
 			</div>
+
 			<Button
 				type="button"
 				variant="minimal"
 				tone="neutral"
-				className={ styles.skip }
-				onClick={ () => void continueToOnboarding() }
+				className={ styles.skipButton }
+				onClick={ continueToTour }
 			>
-				{ __( 'Skip for now' ) }
+				<span>{ authUser ? __( 'Continue' ) : __( 'Skip' ) }</span>
+				<Icon icon={ chevronRight } size={ 16 } />
 			</Button>
+
+			<div className={ styles.contentArea }>
+				<div className={ styles.content }>
+					<div className={ styles.logoToy }>
+						<EmptyBackground logoSize={ 380 } padding={ 200 } contained={ false } />
+					</div>
+					{ /* Overlaps the lower part of the toy; the scrim blurs the
+					     particles behind the text with a soft top fade. */ }
+					<div className={ styles.contentBody }>
+						<div aria-hidden="true" className={ styles.contentScrim } />
+						<h1 className={ styles.title }>{ __( 'WordPress Studio' ) }</h1>
+						<p className={ styles.subtitle }>
+							{ __( 'Your local studio for building WordPress sites, plugins, and themes.' ) }
+						</p>
+
+						<FeatureList features={ features } />
+					</div>
+				</div>
+
+				<div className={ styles.analyticsPreference }>
+					<CheckboxControl
+						__nextHasNoMarginBottom
+						label={ __( 'Help improve Studio by sharing anonymous usage statistics' ) }
+						checked={ preferences?.analyticsEnabled ?? true }
+						onChange={ ( analyticsEnabled ) =>
+							saveUserPreferences.mutate( {
+								analyticsEnabled,
+								source: { surface: 'onboarding' },
+							} )
+						}
+					/>
+				</div>
+			</div>
+
 			<div className={ styles.footer }>
-				<CheckboxControl
-					__nextHasNoMarginBottom
-					label={ __( 'Help improve Studio by sharing anonymous usage statistics' ) }
-					checked={ preferences?.analyticsEnabled ?? true }
-					onChange={ ( analyticsEnabled ) =>
-						saveUserPreferences.mutate( {
-							analyticsEnabled,
-							source: { surface: 'onboarding' },
-						} )
-					}
-				/>
+				<p className={ styles.legal }>
+					{ __( 'By continuing, you agree to our' ) }{ ' ' }
+					<button
+						type="button"
+						className={ styles.linkButton }
+						onClick={ () => openLegalLink( 'a8cTos' ) }
+					>
+						{ __( 'Terms of Service' ) }
+					</button>{ ' ' }
+					{ __( 'and have read our' ) }{ ' ' }
+					<span className={ styles.noWrap }>
+						<button
+							type="button"
+							className={ styles.linkButton }
+							onClick={ () => openLegalLink( 'a8cPrivacyPolicy' ) }
+						>
+							{ __( 'Privacy Policy' ) }
+						</button>
+						.
+					</span>
+				</p>
+
+				<div className={ styles.footerActions }>
+					{ authUser ? (
+						<>
+							<span className={ styles.identity }>
+								<Gravatar
+									email={ authUser.email }
+									isDark={ isDark }
+									className={ styles.identityAvatar }
+								/>
+								{ authUser.displayName }
+							</span>
+							<Button
+								type="button"
+								variant="outline"
+								tone="neutral"
+								loading={ logout.isPending }
+								onClick={ () => logout.mutate() }
+							>
+								{ __( 'Log out' ) }
+							</Button>
+						</>
+					) : (
+						<AuthActions />
+					) }
+				</div>
 			</div>
 		</div>
 	);
diff --git a/apps/ui/src/ui-classic/router/route-welcome/style.module.css b/apps/ui/src/ui-classic/router/route-welcome/style.module.css
index 42d5cce564..dc47f65568 100644
--- a/apps/ui/src/ui-classic/router/route-welcome/style.module.css
+++ b/apps/ui/src/ui-classic/router/route-welcome/style.module.css
@@ -1,65 +1,273 @@
-.root {
+/* Full-window welcome canvas: centered content above a real footer row
+   (legal left, actions right). The footer is a flex sibling rather than
+   pinned, so a short window shrinks the content instead of letting it
+   collide with the legal text — the app can be resized to 600px tall. */
+.page {
+	/* No global border-box reset in this app — without it the padding adds
+	   to the 100vh and the document scrolls, pushing the footer offscreen. */
+	box-sizing: border-box;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	height: 100vh;
+	padding: 40px 50px 20px;
+	overflow: hidden;
+	background: var(--wpds-color-bg-surface-neutral);
+	/* New stacking context so the dot grid's negative z-index stays behind
+	   this page's content without escaping below ancestors. */
+	isolation: isolate;
+}
+
+/* Takes whatever height the footer doesn't need, and centres within it. */
+.contentArea {
+	flex: 1 1 auto;
+	min-height: 0;
 	display: flex;
 	flex-direction: column;
-	align-items: center;
 	justify-content: center;
-	min-height: 100vh;
-	padding: 48px 32px;
+	align-items: center;
+}
+
+.footer {
+	/* Positioned for the same reason as .analyticsPreference: the content
+	   scrim's backdrop-filter would otherwise blur the footer along with the
+	   dot grid behind it. */
+	position: relative;
+	z-index: 1;
+	flex: 0 0 auto;
+	display: flex;
+	align-items: flex-end;
+	justify-content: space-between;
+	gap: 24px;
+	padding-top: 16px;
+}
+
+/* Decorative dot-grid backdrop, same treatment as the onboarding shell. */
+.pageDotGrid {
+	position: fixed;
+	inset: 0;
+	overflow: hidden;
+	pointer-events: none;
+	z-index: -1;
+}
+
+/* Window drag strips along the chromeless edges — same pattern as
+   onboarding-layout. Interactive elements overlapping them stay clickable
+   via the global no-drag rule. */
+.dragEdge {
+	position: fixed;
+	pointer-events: none;
+	-webkit-app-region: drag;
+}
+
+.dragEdgeTop {
+	top: 0;
+	left: 0;
+	right: 0;
+	height: 36px;
+}
+
+.dragEdgeLeft {
+	top: 36px;
+	left: 0;
+	bottom: 0;
+	width: 16px;
+}
+
+.dragEdgeBottom {
+	left: 16px;
+	right: 0;
+	bottom: 0;
+	height: 16px;
+}
+
+.skipButton {
+	position: absolute;
+	top: 16px;
+	right: 16px;
+}
+
+.content {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 	text-align: center;
-	box-sizing: border-box;
+	max-width: 640px;
+	text-wrap: pretty;
 }
 
-.heading {
-	font-size: var(--wpds-typography-font-size-2xl);
-	font-weight: var(--wpds-typography-font-weight-regular);
-	margin: 0 0 8px;
+/* Layout stage for the toy: sized for the 380px logo itself; the canvas is
+   wider/taller (logo + particle padding) and spills past this box without
+   clipping (contained={false}), so displaced pixels roam freely. */
+.logoToy {
+	position: relative;
+	width: 780px;
+	height: 420px;
 }
 
-.subtitle {
-	margin: 0 0 32px;
-	color: var(--wpds-color-fg-content-neutral-weak);
-	font-size: var(--wpds-typography-font-size-md);
-	max-width: 400px;
+/* The toy reacts to hover/click but isn't a control — don't advertise it
+   with a pointer cursor (the shared canvas style sets one). */
+.logoToy canvas {
+	cursor: default;
 }
 
-.features {
-	list-style: none;
-	margin: 0 0 32px;
-	padding: 0;
+/* Text block pulled up over the lower part of the toy. Decorative copy:
+   not selectable, and transparent to the pointer so hovering "through" it
+   still drives the toy's particles underneath. */
+.contentBody {
+	position: relative;
 	display: flex;
 	flex-direction: column;
+	align-items: center;
 	gap: 12px;
-	text-align: left;
-	max-width: 360px;
+	margin-top: -140px;
+	padding-top: 40px;
+	pointer-events: none;
+	user-select: none;
 }
 
-.features li {
-	font-size: var(--wpds-typography-font-size-sm);
-	color: var(--wpds-color-fg-content-neutral-weak);
-	padding-left: 24px;
+/* The absolutely-positioned scrim would otherwise paint above its static
+   siblings; positioning them keeps the text on top (later DOM order). */
+.contentBody > :not(.contentScrim) {
 	position: relative;
 }
 
-.features li::before {
-	content: '✓';
+/* Progressive blur behind the overlapping text — same pattern as the
+   onboarding footer scrim: the backdrop blur fades in from the top so the
+   toy's particles soften under the text without a hard edge.
+   Oversized on purpose: it reaches past the viewport on the sides and
+   bottom and lets .page's overflow clipping trim it, so the blur covers
+   everything below the title (text, footer, buttons) while the dot grid
+   behind it stays soft. */
+.contentScrim {
 	position: absolute;
-	left: 0;
-	color: var(--wpds-color-fg-content-neutral);
+	top: -56px;
+	left: -100vw;
+	right: -100vw;
+	bottom: -100vh;
+	pointer-events: none;
+	backdrop-filter: blur(12px);
+	background: linear-gradient(
+		to bottom,
+		transparent,
+		color-mix(in srgb, var(--wpds-color-bg-surface-neutral) 55%, transparent) 96px
+	);
+	-webkit-mask-image: linear-gradient(to bottom, transparent, black 96px);
+	mask-image: linear-gradient(to bottom, transparent, black 96px);
+}
+
+.title {
+	margin: 0;
+	text-wrap: balance;
+}
+
+.subtitle {
+	color: var(--wpds-color-fg-content-neutral-weak);
+	max-width: 440px;
+	margin: 0;
+}
+
+/* Bottom-left, opposite the action buttons — one footer row with them. */
+.legal {
+	max-width: 340px;
+	margin: 0;
+	color: var(--wpds-color-fg-content-neutral-weak);
+	font-size: 12px;
+	line-height: 20px;
+	text-wrap: pretty;
+}
+
+.noWrap {
+	white-space: nowrap;
+}
+
+/* Same treatment as the shared learn-more link (a button that opens an
+   external URL through the connector). */
+.linkButton {
+	background: none;
+	border: none;
+	padding: 0;
+	font: inherit;
+	color: var(--wpds-color-fg-interactive-brand);
+	text-decoration: underline;
+	cursor: pointer;
+	white-space: nowrap;
+}
+
+.linkButton:hover,
+.linkButton:focus-visible {
+	text-decoration: none;
+}
+
+.linkButton:disabled {
+	color: var(--wpds-color-fg-interactive-neutral-disabled);
+	cursor: default;
 }
 
-.actions {
+.footerActions {
 	display: flex;
-	flex-direction: column;
+	align-items: center;
+	gap: 16px;
+}
+
+.footerActions > * {
+	flex-shrink: 0;
+	white-space: nowrap;
+}
+
+/* Sits just below the benefits card, centered in the content column.
+   Positioned so it paints above the content scrim (a positioned element
+   with backdrop-filter) instead of being washed out behind it. */
+.analyticsPreference {
+	position: relative;
+	z-index: 1;
+	flex: 0 0 auto;
+	margin-top: 20px;
+	color: var(--wpds-color-fg-content-neutral-weak);
+	font-size: var(--wpds-typography-font-size-sm);
+}
+
+/* Signed-in identity shown in place of the auth buttons. */
+.identity {
+	display: inline-flex;
+	align-items: center;
 	gap: 8px;
-	width: 280px;
+	font-size: 13px;
+	font-weight: var(--wpds-typography-font-weight-medium);
 }
 
-.skip {
-	margin-top: 16px;
+.identityAvatar {
+	width: 24px;
+	height: 24px;
 }
 
-.footer {
-	margin-top: 32px;
-	display: flex;
-	justify-content: center;
+/* The toy is the only part with slack, so it absorbs the loss as the window
+   gets shorter (down to the app's 600px minimum). The canvas is sized by
+   `min(100%, …)`, so shrinking the stage scales it down; the text block's
+   overlap eases off with it. */
+@media (max-height: 800px) {
+	.logoToy {
+		width: 620px;
+		height: 320px;
+	}
+
+	.contentBody {
+		margin-top: -110px;
+	}
+}
+
+@media (max-height: 700px) {
+	.logoToy {
+		width: 480px;
+		height: 230px;
+	}
+
+	.contentBody {
+		margin-top: -80px;
+		padding-top: 28px;
+	}
+
+	.contentScrim {
+		top: -40px;
+	}
 }
diff --git a/apps/ui/src/ui-classic/router/router.tsx b/apps/ui/src/ui-classic/router/router.tsx
index 5f73ce531f..7564887bfe 100644
--- a/apps/ui/src/ui-classic/router/router.tsx
+++ b/apps/ui/src/ui-classic/router/router.tsx
@@ -11,6 +11,7 @@ import { onboardingConnectRoute } from './route-onboarding-connect';
 import { onboardingCreateRoute } from './route-onboarding-create';
 import { onboardingHomeRoute } from './route-onboarding-home';
 import { onboardingImportRoute } from './route-onboarding-import';
+import { onboardingTourRoute } from './route-onboarding-tour';
 import { sessionDetailRoute } from './route-session-detail';
 import { settingsRoute } from './route-settings';
 import { siteOverviewRoute } from './route-site-overview';
@@ -30,6 +31,7 @@ const routeTree = rootRoute.addChildren( [
 	] ),
 	onboardingLayoutRoute.addChildren( [
 		onboardingHomeRoute,
+		onboardingTourRoute,
 		onboardingConnectRoute,
 		onboardingCreateRoute,
 		onboardingBlueprintRoute,

From 0ab2f296436b8d52b2c94f7da7cf968374adc852 Mon Sep 17 00:00:00 2001
From: bcotrim <bernardo.cotrim@a8c.com>
Date: Mon, 3 Aug 2026 11:25:58 +0100
Subject: [PATCH 3/4] Inline the single-use WizardPage into the tour and trim
 unused props

---
 apps/ui/src/components/auth-actions/index.tsx |  18 ++--
 apps/ui/src/components/feature-list/index.tsx |  10 +-
 .../components/wizard-page/index.tsx          | 101 ------------------
 .../components/wizard-page/style.module.css   |   7 --
 .../router/route-onboarding-tour/index.tsx    |  63 ++++++-----
 .../route-onboarding-tour/style.module.css    |   8 ++
 6 files changed, 60 insertions(+), 147 deletions(-)
 delete mode 100644 apps/ui/src/ui-classic/components/wizard-page/index.tsx
 delete mode 100644 apps/ui/src/ui-classic/components/wizard-page/style.module.css

diff --git a/apps/ui/src/components/auth-actions/index.tsx b/apps/ui/src/components/auth-actions/index.tsx
index 5cf579d4a4..c8abbad482 100644
--- a/apps/ui/src/components/auth-actions/index.tsx
+++ b/apps/ui/src/components/auth-actions/index.tsx
@@ -1,5 +1,6 @@
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/ui';
+import { clsx } from 'clsx';
 import { useLogin } from '@/data/queries/use-auth-user';
 import { useOffline } from '@/hooks/use-offline';
 import styles from './style.module.css';
@@ -8,7 +9,7 @@ interface AuthActionsProps {
 	className?: string;
 }
 
-// Shared by the welcome and connect screens so the two sign-in prompts
+// Shared by the welcome, tour and connect screens so the sign-in prompts
 // can't drift apart.
 export function AuthActions( { className }: AuthActionsProps ) {
 	const isOffline = useOffline();
@@ -16,9 +17,14 @@ export function AuthActions( { className }: AuthActionsProps ) {
 	const signup = useLogin( { signup: true } );
 	const authError = login.error ?? signup.error;
 	const offlineMessage = __( "You're currently offline." );
+	const arrow = (
+		<span aria-hidden className={ styles.arrow }>
+			{ '↗' }
+		</span>
+	);
 
 	return (
-		<div className={ className ? `${ styles.root } ${ className }` : styles.root }>
+		<div className={ clsx( styles.root, className ) }>
 			<div className={ styles.actions }>
 				<Button
 					type="button"
@@ -30,9 +36,7 @@ export function AuthActions( { className }: AuthActionsProps ) {
 					onClick={ () => signup.mutate() }
 				>
 					{ __( 'Sign up' ) }
-					<span aria-hidden className={ styles.arrow }>
-						{ '↗' }
-					</span>
+					{ arrow }
 				</Button>
 				<Button
 					type="button"
@@ -44,9 +48,7 @@ export function AuthActions( { className }: AuthActionsProps ) {
 					onClick={ () => login.mutate() }
 				>
 					{ __( 'Log in with WordPress.com' ) }
-					<span aria-hidden className={ styles.arrow }>
-						{ '↗' }
-					</span>
+					{ arrow }
 				</Button>
 			</div>
 			{ authError && (
diff --git a/apps/ui/src/components/feature-list/index.tsx b/apps/ui/src/components/feature-list/index.tsx
index 22d12dbea2..02e5cbfe61 100644
--- a/apps/ui/src/components/feature-list/index.tsx
+++ b/apps/ui/src/components/feature-list/index.tsx
@@ -1,14 +1,10 @@
 import { check } from '@wordpress/icons';
 import { Icon } from '@wordpress/ui';
+import { clsx } from 'clsx';
 import styles from './style.module.css';
 
-export interface Feature {
-	title: string;
-	body: string;
-}
-
 interface FeatureListProps {
-	features: Feature[];
+	features: { title: string; body: string }[];
 	className?: string;
 }
 
@@ -16,7 +12,7 @@ interface FeatureListProps {
 // screen and the tour steps so the two can't drift apart.
 export function FeatureList( { features, className }: FeatureListProps ) {
 	return (
-		<ul className={ className ? `${ styles.features } ${ className }` : styles.features }>
+		<ul className={ clsx( styles.features, className ) }>
 			{ features.map( ( { title, body } ) => (
 				<li key={ title }>
 					<h3 className={ styles.featureTitle }>
diff --git a/apps/ui/src/ui-classic/components/wizard-page/index.tsx b/apps/ui/src/ui-classic/components/wizard-page/index.tsx
deleted file mode 100644
index 04b3906b27..0000000000
--- a/apps/ui/src/ui-classic/components/wizard-page/index.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { chevronLeft } from '@wordpress/icons';
-import { Button, Icon } from '@wordpress/ui';
-import { OnboardingFooter } from '@/components/onboarding-footer';
-import sharedStyles from '../../router/layout-onboarding/style.module.css';
-import styles from './style.module.css';
-import type { ReactNode } from 'react';
-
-interface WizardPrimaryAction {
-	label: string;
-	onClick: () => void;
-	disabled?: boolean;
-	loading?: boolean;
-}
-
-interface WizardPageProps {
-	title: string;
-	subtitle?: string;
-	/** Decorative visual rendered above the title. */
-	illustration?: ReactNode;
-	children: ReactNode;
-	/**
-	 * Renders the standard Back button pinned bottom-left. Omit on pages
-	 * that have nowhere to go back to (the layout's close button covers
-	 * users who arrived with existing sites).
-	 */
-	onBack?: () => void;
-	backLabel?: string;
-	/**
-	 * Bottom-right primary action (Continue, Start building, …). Omit on
-	 * picker pages whose cards navigate by themselves.
-	 */
-	primaryAction?: WizardPrimaryAction;
-}
-
-/**
- * One step of an onboarding-style wizard, rendered inside the onboarding
- * layout: shared title/subtitle typography, the step's content, and the
- * standard fixed footer. Step sequencing belongs to the route (keep the
- * current step in a search param so moving between steps is a navigation
- * and picks up the flow's view transitions — see route-onboarding-tour).
- */
-export function WizardPage( {
-	title,
-	subtitle,
-	illustration,
-	children,
-	onBack,
-	backLabel,
-	primaryAction,
-}: WizardPageProps ) {
-	const hasFooter = Boolean( onBack || primaryAction );
-	return (
-		<div
-			className={
-				hasFooter ? `${ sharedStyles.page } ${ styles.pageWithFooter }` : sharedStyles.page
-			}
-		>
-			{ illustration }
-			<h1 className={ sharedStyles.title }>{ title }</h1>
-			{ subtitle ? <p className={ sharedStyles.subtitle }>{ subtitle }</p> : null }
-			{ children }
-			{ hasFooter && (
-				<WizardFooter onBack={ onBack } backLabel={ backLabel } primaryAction={ primaryAction } />
-			) }
-		</div>
-	);
-}
-
-function WizardFooter( {
-	onBack,
-	backLabel,
-	primaryAction,
-}: Pick< WizardPageProps, 'onBack' | 'backLabel' | 'primaryAction' > ) {
-	return (
-		<OnboardingFooter>
-			{ /* The footer pins its first child bottom-left; keep the slot
-			     occupied so a lone primary action stays bottom-right. */ }
-			{ onBack ? (
-				<Button type="button" variant="minimal" tone="neutral" onClick={ onBack }>
-					<Icon icon={ chevronLeft } size={ 16 } />
-					<span>{ backLabel ?? __( 'Back' ) }</span>
-				</Button>
-			) : (
-				<span aria-hidden="true" />
-			) }
-			{ primaryAction && (
-				<Button
-					type="button"
-					variant="solid"
-					tone="brand"
-					disabled={ primaryAction.disabled }
-					loading={ primaryAction.loading }
-					onClick={ primaryAction.onClick }
-				>
-					{ primaryAction.label }
-				</Button>
-			) }
-		</OnboardingFooter>
-	);
-}
diff --git a/apps/ui/src/ui-classic/components/wizard-page/style.module.css b/apps/ui/src/ui-classic/components/wizard-page/style.module.css
deleted file mode 100644
index 6ae2fed603..0000000000
--- a/apps/ui/src/ui-classic/components/wizard-page/style.module.css
+++ /dev/null
@@ -1,7 +0,0 @@
-/* `layout-onboarding`'s .page reserves 72px at the bottom to clear the fixed
-   footer, but the layout centres the whole content box (`margin-block: auto`)
-   — so padding on one side only lifts the visible content half that distance.
-   Matching it at the top restores true centring while keeping the clearance. */
-.pageWithFooter {
-	padding-top: 72px;
-}
diff --git a/apps/ui/src/ui-classic/router/route-onboarding-tour/index.tsx b/apps/ui/src/ui-classic/router/route-onboarding-tour/index.tsx
index f980e736b9..2c0d589205 100644
--- a/apps/ui/src/ui-classic/router/route-onboarding-tour/index.tsx
+++ b/apps/ui/src/ui-classic/router/route-onboarding-tour/index.tsx
@@ -1,14 +1,18 @@
 import { createRoute, useNavigate } from '@tanstack/react-router';
 import { __ } from '@wordpress/i18n';
+import { chevronLeft } from '@wordpress/icons';
+import { Button, Icon } from '@wordpress/ui';
+import { clsx } from 'clsx';
 import { useCallback } from 'react';
 import { AuthActions } from '@/components/auth-actions';
 import { FeatureList } from '@/components/feature-list';
+import { OnboardingFooter } from '@/components/onboarding-footer';
 import { SiteListIllustration } from '@/components/onboarding-illustrations';
 import { AgentPixelField } from '@/components/onboarding-illustrations/agent-pixel-field';
 import { useConnector } from '@/data/core';
 import { useAuthUser } from '@/data/queries/use-auth-user';
-import { WizardPage } from '../../components/wizard-page';
 import { onboardingLayoutRoute } from '../layout-onboarding';
+import sharedStyles from '../layout-onboarding/style.module.css';
 import styles from './style.module.css';
 
 function useSteps() {
@@ -95,28 +99,10 @@ export function OnboardingTourPage() {
 	}, [ connector, navigate ] );
 
 	return (
-		<WizardPage
-			title={ step.title }
-			subtitle={ step.subtitle }
-			illustration={ step.illustration }
-			onBack={ () => {
-				if ( stepIndex === 0 ) {
-					void navigate( { to: '/welcome' } );
-				} else {
-					void navigate( { to: '/onboarding/tour', search: {} } );
-				}
-			} }
-			primaryAction={ {
-				label: isLoginStep ? __( 'Skip log in' ) : __( 'Continue' ),
-				onClick: () => {
-					if ( isLastStep ) {
-						void finishTour();
-					} else {
-						void navigate( { to: '/onboarding/tour', search: { step: 'agent' } } );
-					}
-				},
-			} }
-		>
+		<div className={ clsx( sharedStyles.page, styles.tourPage ) }>
+			{ step.illustration }
+			<h1 className={ sharedStyles.title }>{ step.title }</h1>
+			<p className={ sharedStyles.subtitle }>{ step.subtitle }</p>
 			<FeatureList features={ step.points } className={ styles.tourFeatures } />
 			{ isLoginStep && (
 				<div className={ styles.tourAuth }>
@@ -126,7 +112,36 @@ export function OnboardingTourPage() {
 					<AuthActions />
 				</div>
 			) }
-		</WizardPage>
+			<OnboardingFooter>
+				<Button
+					type="button"
+					variant="minimal"
+					tone="neutral"
+					onClick={ () =>
+						void navigate(
+							stepIndex === 0 ? { to: '/welcome' } : { to: '/onboarding/tour', search: {} }
+						)
+					}
+				>
+					<Icon icon={ chevronLeft } size={ 16 } />
+					<span>{ __( 'Back' ) }</span>
+				</Button>
+				<Button
+					type="button"
+					variant="solid"
+					tone="brand"
+					onClick={ () => {
+						if ( isLastStep ) {
+							void finishTour();
+						} else {
+							void navigate( { to: '/onboarding/tour', search: { step: 'agent' } } );
+						}
+					} }
+				>
+					{ isLoginStep ? __( 'Skip log in' ) : __( 'Continue' ) }
+				</Button>
+			</OnboardingFooter>
+		</div>
 	);
 }
 
diff --git a/apps/ui/src/ui-classic/router/route-onboarding-tour/style.module.css b/apps/ui/src/ui-classic/router/route-onboarding-tour/style.module.css
index eefbbeb6b3..fd4c4b7485 100644
--- a/apps/ui/src/ui-classic/router/route-onboarding-tour/style.module.css
+++ b/apps/ui/src/ui-classic/router/route-onboarding-tour/style.module.css
@@ -1,3 +1,11 @@
+/* `layout-onboarding`'s .page reserves 72px at the bottom to clear the fixed
+   footer, but the layout centres the whole content box (`margin-block: auto`)
+   — so padding on one side only lifts the visible content half that distance.
+   Matching it at the top restores true centring while keeping the clearance. */
+.tourPage {
+	padding-top: 72px;
+}
+
 /* The shared feature columns are centered by a flex parent on the welcome
    screen; inside the onboarding page they need to center themselves. The
    glass surface matches the flow-picker cards. */

From 1ba27d5e8dab491b52f178ee38f6ac77d01da3d7 Mon Sep 17 00:00:00 2001
From: bcotrim <bernardo.cotrim@a8c.com>
Date: Mon, 3 Aug 2026 16:43:38 +0100
Subject: [PATCH 4/4] Use one interpolated string for the welcome legal consent
 line

---
 .../ui-classic/router/route-welcome/index.tsx | 41 ++++++++++---------
 .../router/route-welcome/style.module.css     |  4 --
 2 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/apps/ui/src/ui-classic/router/route-welcome/index.tsx b/apps/ui/src/ui-classic/router/route-welcome/index.tsx
index 4a53d4e494..267c67b5eb 100644
--- a/apps/ui/src/ui-classic/router/route-welcome/index.tsx
+++ b/apps/ui/src/ui-classic/router/route-welcome/index.tsx
@@ -1,5 +1,6 @@
 import { createRoute, redirect, useNavigate } from '@tanstack/react-router';
 import { CheckboxControl } from '@wordpress/components';
+import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { chevronRight } from '@wordpress/icons';
 import { Button, Icon } from '@wordpress/ui';
@@ -126,25 +127,27 @@ export function WelcomePage() {
 
 			<div className={ styles.footer }>
 				<p className={ styles.legal }>
-					{ __( 'By continuing, you agree to our' ) }{ ' ' }
-					<button
-						type="button"
-						className={ styles.linkButton }
-						onClick={ () => openLegalLink( 'a8cTos' ) }
-					>
-						{ __( 'Terms of Service' ) }
-					</button>{ ' ' }
-					{ __( 'and have read our' ) }{ ' ' }
-					<span className={ styles.noWrap }>
-						<button
-							type="button"
-							className={ styles.linkButton }
-							onClick={ () => openLegalLink( 'a8cPrivacyPolicy' ) }
-						>
-							{ __( 'Privacy Policy' ) }
-						</button>
-						.
-					</span>
+					{ createInterpolateElement(
+						__(
+							'By continuing, you agree to our <tos_link>Terms of Service</tos_link> and have read our <privacy_link>Privacy Policy</privacy_link>.'
+						),
+						{
+							tos_link: (
+								<button
+									type="button"
+									className={ styles.linkButton }
+									onClick={ () => openLegalLink( 'a8cTos' ) }
+								/>
+							),
+							privacy_link: (
+								<button
+									type="button"
+									className={ styles.linkButton }
+									onClick={ () => openLegalLink( 'a8cPrivacyPolicy' ) }
+								/>
+							),
+						}
+					) }
 				</p>
 
 				<div className={ styles.footerActions }>
diff --git a/apps/ui/src/ui-classic/router/route-welcome/style.module.css b/apps/ui/src/ui-classic/router/route-welcome/style.module.css
index dc47f65568..2d1a064b69 100644
--- a/apps/ui/src/ui-classic/router/route-welcome/style.module.css
+++ b/apps/ui/src/ui-classic/router/route-welcome/style.module.css
@@ -177,10 +177,6 @@
 	text-wrap: pretty;
 }
 
-.noWrap {
-	white-space: nowrap;
-}
-
 /* Same treatment as the shared learn-more link (a button that opens an
    external URL through the connector). */
 .linkButton {