From 320635ea3060536794fe872114215a2ffd97f506 Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Mon, 21 Sep 2026 13:49:27 +0100
Subject: [PATCH 1/3] feat: add Connect 2026 homepage banner

---
 .../landing/Connect2026Banner.astro           | 288 ++++++++++++++++++
 src/pages/index.astro                         |   2 +
 2 files changed, 290 insertions(+)
 create mode 100644 src/components/landing/Connect2026Banner.astro

diff --git a/src/components/landing/Connect2026Banner.astro b/src/components/landing/Connect2026Banner.astro
new file mode 100644
index 00000000000..274d622f7f3
--- /dev/null
+++ b/src/components/landing/Connect2026Banner.astro
@@ -0,0 +1,288 @@
+---
+import Icon from "@cloudflare/nimbus-docs/components/Icon.astro";
+import { LinkButton } from "@/components/ui/link-button";
+
+const speakers = [
+	{
+		name: "Evan You",
+		role: "Vue.js & Vite creator",
+		src: "https://dash.cloudflare.com/images/connect-2026/avatars/evan-you.jpg",
+	},
+	{
+		name: "Tanner Linsley",
+		role: "Owner",
+		src: "https://dash.cloudflare.com/images/connect-2026/avatars/tanner-linsley.jpg",
+	},
+	{
+		name: "Corey Quinn",
+		role: "Chief Cloud Economist",
+		src: "https://dash.cloudflare.com/images/connect-2026/avatars/corey-quinn.jpg",
+	},
+	{
+		name: "Peter Steinberger",
+		role: "Member of Technical Staff",
+		src: "https://dash.cloudflare.com/images/connect-2026/avatars/peter-steinberger.jpg",
+	},
+	{
+		name: "Fred Schott",
+		role: "Astro creator",
+		src: "https://dash.cloudflare.com/images/connect-2026/avatars/fred-schott.jpg",
+	},
+];
+
+const tooltipClass =
+	"connect-speaker-tooltip border-border bg-card pointer-events-none absolute bottom-[calc(100%+0.625rem)] left-1/2 z-20 flex w-max min-w-44 max-w-60 flex-col rounded-xl border px-3.5 py-3 opacity-0 shadow-md transition-[opacity,transform] duration-150";
+---
+
+<section
+	class="bg-muted @container relative rounded-2xl py-1.5 pr-1.5"
+	data-connect-card
+	aria-labelledby="connect-card-title"
+>
+	<aside
+		class="connect-card relative isolate flex min-h-24 flex-col rounded-xl shadow-md"
+		aria-label="Cloudflare Connect 2026 announcement"
+	>
+		<div class="connect-card-content border-border bg-card flex min-w-0 flex-1 flex-col gap-4 rounded-xl border p-5">
+			<div class="min-w-0">
+				<div class="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
+					<h2
+						id="connect-card-title"
+						class="text-foreground text-lg leading-snug font-medium tracking-tight text-balance"
+					>
+						Meet the Agentic Internet Builders IRL
+					</h2>
+					<div
+						class="relative flex shrink-0 items-center pl-1"
+						aria-label="Featured speakers"
+					>
+						{speakers.map((speaker, index) => (
+							<button
+								type="button"
+								class:list={[
+									"connect-avatar relative grid size-5 shrink-0 place-items-center border-0 bg-transparent p-0 transition-transform duration-150 before:absolute before:-inset-0.5 before:content-[''] motion-reduce:transition-none",
+									index > 0 && "-ml-1.5",
+								]}
+								style={`z-index:${index}`}
+								aria-describedby={`connect-speaker-${index}`}
+							>
+								<img
+									src={speaker.src}
+									alt={speaker.name}
+									width="20"
+									height="20"
+									loading="lazy"
+									decoding="async"
+									draggable="false"
+									class="bg-card ring-card size-5 rounded-full object-cover ring-1"
+								/>
+								<span
+									id={`connect-speaker-${index}`}
+									class={tooltipClass}
+									role="tooltip"
+								>
+									<strong class="text-foreground text-base leading-snug font-medium">
+										{speaker.name}
+									</strong>
+									<small class="text-muted-foreground text-sm leading-snug">
+										{speaker.role}
+									</small>
+								</span>
+							</button>
+						))}
+						<span
+							class="connect-avatar relative -ml-1.5 grid size-5 shrink-0 place-items-center transition-transform duration-150 motion-reduce:transition-none"
+							style={`z-index:${speakers.length}`}
+						>
+							<a
+								href="https://www.cloudflare.com/connect/speakers/"
+								target="_blank"
+								rel="noreferrer"
+								aria-label="Browse all Cloudflare Connect speakers"
+								aria-describedby="connect-speaker-all"
+								class="border-border bg-muted text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-ring flex size-5 items-center justify-center rounded-full border no-underline transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 motion-reduce:transition-none"
+							>
+								<Icon name="ph:arrow-up-right" class="size-3" />
+							</a>
+							<span
+								id="connect-speaker-all"
+								class={tooltipClass}
+								role="tooltip"
+							>
+								<strong class="text-foreground text-base leading-snug font-medium">
+									Browse all
+								</strong>
+								<small class="text-muted-foreground text-sm leading-snug">
+									180+ speakers
+								</small>
+							</span>
+						</span>
+					</div>
+				</div>
+				<p class="text-muted-foreground mt-1 max-w-[520px] text-sm leading-snug text-pretty">
+					Connect brings the Cloudflare community together once a year to learn,
+					collaborate, and shape what comes next. Oct 19–21, San Francisco.
+				</p>
+			</div>
+
+			<div class="connect-card-actions flex w-full shrink-0 items-center gap-2">
+				<LinkButton
+					href="https://www.cloudflare.com/connect/"
+					target="_blank"
+					rel="noopener noreferrer"
+					variant="primary"
+					size="base"
+					class="connect-card-cta"
+				>
+					Learn more
+				</LinkButton>
+				<div class="connect-card-dismiss text-foreground grid h-11 place-items-center overflow-hidden">
+					<button
+						type="button"
+						data-connect-card-close
+						aria-label="Dismiss Cloudflare Connect announcement"
+						class="border-border hover:bg-accent grid size-7 cursor-pointer place-items-center rounded-full border bg-transparent transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 motion-reduce:transition-none"
+					>
+						<Icon name="ph:x" class="size-3.5" />
+					</button>
+				</div>
+			</div>
+		</div>
+	</aside>
+</section>
+
+<script is:inline>
+	try {
+		if (localStorage.getItem("connect-2026-announcement")) {
+			document.currentScript?.previousElementSibling?.remove();
+		}
+	} catch {
+		void 0;
+	}
+</script>
+
+<script>
+	import { mount } from "@cloudflare/nimbus-docs/client";
+
+	mount("[data-connect-card]", (card) => {
+		const close = card.querySelector<HTMLButtonElement>(
+			"[data-connect-card-close]",
+		);
+		if (!close) return () => {};
+
+		const dismiss = () => {
+			card.remove();
+			try {
+				localStorage.setItem("connect-2026-announcement", "viewed");
+			} catch {
+				return;
+			}
+		};
+		close.addEventListener("click", dismiss);
+		return () => close.removeEventListener("click", dismiss);
+	});
+</script>
+
+<style>
+	.connect-avatar:hover,
+	.connect-avatar:focus-within {
+		z-index: 10 !important;
+		transform: translateY(-2px) scale(1.08);
+	}
+
+	.connect-avatar:hover ~ .connect-avatar,
+	.connect-avatar:focus-within ~ .connect-avatar {
+		transform: translateX(6px);
+	}
+
+	.connect-speaker-tooltip {
+		transform: translate(-50%, 4px);
+	}
+
+	.connect-avatar:hover .connect-speaker-tooltip,
+	.connect-avatar:focus-within .connect-speaker-tooltip {
+		opacity: 1;
+		transform: translate(-50%, 0);
+	}
+
+	@container (max-width: 767px) {
+		.connect-speaker-tooltip {
+			left: 0;
+			transform: translateY(4px);
+		}
+
+		.connect-avatar:hover .connect-speaker-tooltip,
+		.connect-avatar:focus-within .connect-speaker-tooltip {
+			transform: translateY(0);
+		}
+	}
+
+	.connect-card-cta {
+		flex: 1 1 auto;
+	}
+
+	.connect-card-dismiss {
+		position: absolute;
+		top: 0.75rem;
+		right: 0.75rem;
+		z-index: 2;
+		width: 0;
+		opacity: 0;
+		pointer-events: none;
+		transform: translateY(1rem);
+		transition:
+			width 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
+			opacity 150ms ease-out,
+			transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
+	}
+
+	[data-connect-card]:hover .connect-card-dismiss,
+	[data-connect-card]:focus-within .connect-card-dismiss {
+		width: 2.75rem;
+		opacity: 1;
+		pointer-events: auto;
+		transform: translateY(0);
+	}
+
+	@container (min-width: 768px) {
+		.connect-card {
+			height: 6rem;
+		}
+
+		.connect-card-content {
+			flex-direction: row;
+			align-items: center;
+			justify-content: space-between;
+			padding-block: 0;
+		}
+
+		.connect-card-actions {
+			width: auto;
+		}
+
+		.connect-card-cta {
+			flex: none;
+		}
+
+		.connect-card-dismiss {
+			position: static;
+			order: -1;
+		}
+	}
+
+	@media (pointer: coarse) {
+		.connect-card-dismiss {
+			width: 2.75rem;
+			opacity: 1;
+			pointer-events: auto;
+			transform: translateY(0);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.connect-speaker-tooltip,
+		.connect-card-dismiss {
+			transition: none;
+		}
+	}
+</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 5da3d55c705..a992179930c 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -8,6 +8,7 @@ import Hero from "../components/landing/Hero.astro";
 import BuildFromScratch from "../components/landing/BuildFromScratch.astro";
 import AgentSetup from "../components/landing/AgentSetup.astro";
 import ChangelogSection from "../components/landing/ChangelogSection.astro";
+import Connect2026Banner from "../components/landing/Connect2026Banner.astro";
 import SecureSection from "../components/landing/SecureSection.astro";
 import AccelerateSection from "../components/landing/AccelerateSection.astro";
 import CommunityGrid from "../components/landing/CommunityGrid.astro";
@@ -51,6 +52,7 @@ const currentPath = Astro.url.pathname;
 						<StructuralGrid />
 						<div class="relative z-10 mx-auto max-w-[1280px] px-4 pt-16 min-[800px]:pt-[max(2rem,4vw)] lg:px-[max(2rem,4vw)]">
 							<Hero />
+							<Connect2026Banner />
 							<BuildFromScratch />
 							<AgentSetup />
 							<ChangelogSection />

From 3f8a0b0395b817c21aa000eccc22f2add5e95e98 Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Mon, 21 Sep 2026 16:54:52 +0100
Subject: [PATCH 2/3] feat: align Connect 2026 banner with dashboard

---
 .../landing/Connect2026Banner.astro           | 301 ++++++++++++++----
 .../landing/ConnectSpeakerLogo.astro          | 116 +++++++
 2 files changed, 349 insertions(+), 68 deletions(-)
 create mode 100644 src/components/landing/ConnectSpeakerLogo.astro

diff --git a/src/components/landing/Connect2026Banner.astro b/src/components/landing/Connect2026Banner.astro
index 274d622f7f3..6d2b1314d63 100644
--- a/src/components/landing/Connect2026Banner.astro
+++ b/src/components/landing/Connect2026Banner.astro
@@ -1,6 +1,7 @@
 ---
 import Icon from "@cloudflare/nimbus-docs/components/Icon.astro";
 import { LinkButton } from "@/components/ui/link-button";
+import ConnectSpeakerLogo from "./ConnectSpeakerLogo.astro";
 
 const speakers = [
 	{
@@ -29,46 +30,46 @@ const speakers = [
 		src: "https://dash.cloudflare.com/images/connect-2026/avatars/fred-schott.jpg",
 	},
 ];
-
-const tooltipClass =
-	"connect-speaker-tooltip border-border bg-card pointer-events-none absolute bottom-[calc(100%+0.625rem)] left-1/2 z-20 flex w-max min-w-44 max-w-60 flex-col rounded-xl border px-3.5 py-3 opacity-0 shadow-md transition-[opacity,transform] duration-150";
 ---
 
 <section
-	class="bg-muted @container relative rounded-2xl py-1.5 pr-1.5"
+	class="@container relative"
 	data-connect-card
 	aria-labelledby="connect-card-title"
 >
 	<aside
-		class="connect-card relative isolate flex min-h-24 flex-col rounded-xl shadow-md"
-		aria-label="Cloudflare Connect 2026 announcement"
+		class="connect-card relative flex min-h-24 flex-col rounded-xl"
+		aria-label="Connect 2026 announcement"
 	>
-		<div class="connect-card-content border-border bg-card flex min-w-0 flex-1 flex-col gap-4 rounded-xl border p-5">
-			<div class="min-w-0">
+		<div class="connect-card-content border-border bg-card relative flex min-w-0 flex-1 flex-col gap-4 rounded-xl border p-5">
+			<div class="connect-card-copy flex min-w-0 flex-col gap-1">
 				<div class="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
 					<h2
 						id="connect-card-title"
-						class="text-foreground text-lg leading-snug font-medium tracking-tight text-balance"
+						class="text-foreground min-w-0 text-lg leading-snug font-medium break-words"
 					>
 						Meet the Agentic Internet Builders IRL
 					</h2>
 					<div
 						class="relative flex shrink-0 items-center pl-1"
+						data-connect-speakers
 						aria-label="Featured speakers"
 					>
 						{speakers.map((speaker, index) => (
 							<button
 								type="button"
+								data-connect-avatar
+								data-connect-speaker-index={index}
 								class:list={[
-									"connect-avatar relative grid size-5 shrink-0 place-items-center border-0 bg-transparent p-0 transition-transform duration-150 before:absolute before:-inset-0.5 before:content-[''] motion-reduce:transition-none",
+									"connect-avatar focus-visible:outline-ring relative size-5 shrink-0 cursor-default rounded-full border-0 bg-transparent p-0 focus-visible:outline-2 focus-visible:outline-offset-2",
 									index > 0 && "-ml-1.5",
 								]}
 								style={`z-index:${index}`}
-								aria-describedby={`connect-speaker-${index}`}
+								aria-label={`${speaker.name}, ${speaker.role}`}
 							>
 								<img
 									src={speaker.src}
-									alt={speaker.name}
+									alt=""
 									width="20"
 									height="20"
 									loading="lazy"
@@ -76,22 +77,12 @@ const tooltipClass =
 									draggable="false"
 									class="bg-card ring-card size-5 rounded-full object-cover ring-1"
 								/>
-								<span
-									id={`connect-speaker-${index}`}
-									class={tooltipClass}
-									role="tooltip"
-								>
-									<strong class="text-foreground text-base leading-snug font-medium">
-										{speaker.name}
-									</strong>
-									<small class="text-muted-foreground text-sm leading-snug">
-										{speaker.role}
-									</small>
-								</span>
 							</button>
 						))}
 						<span
 							class="connect-avatar relative -ml-1.5 grid size-5 shrink-0 place-items-center transition-transform duration-150 motion-reduce:transition-none"
+							data-connect-avatar
+							data-connect-speaker-index={speakers.length}
 							style={`z-index:${speakers.length}`}
 						>
 							<a
@@ -99,33 +90,63 @@ const tooltipClass =
 								target="_blank"
 								rel="noreferrer"
 								aria-label="Browse all Cloudflare Connect speakers"
-								aria-describedby="connect-speaker-all"
 								class="border-border bg-muted text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-ring flex size-5 items-center justify-center rounded-full border no-underline transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 motion-reduce:transition-none"
 							>
 								<Icon name="ph:arrow-up-right" class="size-3" />
 							</a>
-							<span
-								id="connect-speaker-all"
-								class={tooltipClass}
-								role="tooltip"
-							>
-								<strong class="text-foreground text-base leading-snug font-medium">
-									Browse all
-								</strong>
-								<small class="text-muted-foreground text-sm leading-snug">
-									180+ speakers
-								</small>
-							</span>
 						</span>
+						<div hidden>
+							{speakers.map((speaker) => (
+								<template data-connect-speaker-template>
+									<div class="connect-speaker-tooltip">
+										<span class="flex min-w-0 flex-1 flex-col items-start justify-center">
+											<strong class="text-foreground w-fit max-w-full text-base leading-snug font-medium">
+												{speaker.name}
+											</strong>
+											<small class="text-muted-foreground w-fit max-w-full text-sm leading-snug">
+												{speaker.role}
+											</small>
+										</span>
+										<ConnectSpeakerLogo name={speaker.name} />
+									</div>
+								</template>
+							))}
+							<template data-connect-speaker-template>
+								<a
+									href="https://www.cloudflare.com/connect/speakers/"
+									target="_blank"
+									rel="noreferrer"
+									aria-label="Browse all Cloudflare Connect speakers"
+									class="connect-speaker-tooltip text-inherit no-underline"
+								>
+									<span class="flex min-w-0 flex-1 flex-col items-start justify-center">
+										<strong class="text-foreground w-fit max-w-full text-base leading-snug font-medium">
+											Browse all
+										</strong>
+										<small class="text-muted-foreground w-fit max-w-full text-sm leading-snug">
+											180+ speakers
+										</small>
+									</span>
+									<img
+										src="https://dash.cloudflare.com/images/connect-2026/avatars/connect-speakers.gif"
+										alt=""
+										aria-hidden="true"
+										width="36"
+										height="36"
+										class="size-9 shrink-0 rounded-full object-cover"
+									/>
+								</a>
+							</template>
+						</div>
 					</div>
 				</div>
-				<p class="text-muted-foreground mt-1 max-w-[520px] text-sm leading-snug text-pretty">
+				<p class="text-muted-foreground max-w-[500px] text-sm leading-snug font-normal break-words text-pretty">
 					Connect brings the Cloudflare community together once a year to learn,
 					collaborate, and shape what comes next. Oct 19–21, San Francisco.
 				</p>
 			</div>
 
-			<div class="connect-card-actions flex w-full shrink-0 items-center gap-2">
+			<div class="connect-card-actions flex w-full shrink-0 items-center gap-2 self-start">
 				<LinkButton
 					href="https://www.cloudflare.com/connect/"
 					target="_blank"
@@ -136,11 +157,11 @@ const tooltipClass =
 				>
 					Learn more
 				</LinkButton>
-				<div class="connect-card-dismiss text-foreground grid h-11 place-items-center overflow-hidden">
+				<div class="connect-card-dismiss text-foreground grid size-7 place-items-center overflow-hidden">
 					<button
 						type="button"
 						data-connect-card-close
-						aria-label="Dismiss Cloudflare Connect announcement"
+						aria-label="Dismiss Connect 2026 announcement"
 						class="border-border hover:bg-accent grid size-7 cursor-pointer place-items-center rounded-full border bg-transparent transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 motion-reduce:transition-none"
 					>
 						<Icon name="ph:x" class="size-3.5" />
@@ -163,14 +184,130 @@ const tooltipClass =
 
 <script>
 	import { mount } from "@cloudflare/nimbus-docs/client";
+	import tippy from "tippy.js";
 
 	mount("[data-connect-card]", (card) => {
+		const controller = new AbortController();
+		const { signal } = controller;
 		const close = card.querySelector<HTMLButtonElement>(
 			"[data-connect-card-close]",
 		);
-		if (!close) return () => {};
+		const speakerGroup = card.querySelector<HTMLElement>(
+			"[data-connect-speakers]",
+		);
+		const avatars = Array.from(
+			card.querySelectorAll<HTMLElement>("[data-connect-avatar]"),
+		);
+		const templates = Array.from(
+			card.querySelectorAll<HTMLTemplateElement>(
+				"[data-connect-speaker-template]",
+			),
+		);
+		let closeTimer: ReturnType<typeof setTimeout> | undefined;
+		let destroyed = false;
+
+		const dismissTooltip = close
+			? tippy(close, {
+					content: "Dismiss Connect 2026 announcement",
+					placement: "top",
+					offset: [0, 8],
+					arrow: false,
+					theme: "connect-dismiss",
+				})
+			: undefined;
+
+		const speakerTooltip = speakerGroup
+			? tippy(speakerGroup, {
+					trigger: "manual",
+					interactive: true,
+					placement: "top",
+					offset: [0, 8],
+					arrow: false,
+					theme: "connect-speaker",
+					onMount(instance) {
+						if (instance.popper.dataset.connectBound) return;
+						instance.popper.dataset.connectBound = "true";
+						instance.popper.addEventListener(
+							"mouseenter",
+							() => closeTimer && clearTimeout(closeTimer),
+							{ signal },
+						);
+						instance.popper.addEventListener("mouseleave", scheduleClose, {
+							signal,
+						});
+					},
+				})
+			: undefined;
+
+		function hideSpeaker() {
+			avatars.forEach((avatar) => {
+				delete avatar.dataset.active;
+				delete avatar.dataset.spread;
+			});
+			speakerTooltip?.hide();
+		}
+
+		function scheduleClose() {
+			if (closeTimer) clearTimeout(closeTimer);
+			closeTimer = setTimeout(hideSpeaker, 200);
+		}
+
+		function showSpeaker(avatar: HTMLElement) {
+			if (!speakerTooltip) return;
+			if (closeTimer) clearTimeout(closeTimer);
+			const index = Number(avatar.dataset.connectSpeakerIndex);
+			const template = templates[index];
+			const content = template?.content.firstElementChild?.cloneNode(true);
+			if (!(content instanceof HTMLElement)) return;
+
+			avatars.forEach((item, itemIndex) => {
+				item.dataset.active = String(itemIndex === index);
+				item.dataset.spread = String(itemIndex > index);
+			});
+			speakerTooltip.setContent(content);
+			speakerTooltip.show();
+		}
+
+		avatars.forEach((avatar) => {
+			avatar.addEventListener("mouseenter", () => showSpeaker(avatar), {
+				signal,
+			});
+			avatar.addEventListener("focusin", () => showSpeaker(avatar), {
+				signal,
+			});
+		});
+		speakerGroup?.addEventListener("mouseleave", scheduleClose, { signal });
+		speakerGroup?.addEventListener(
+			"focusout",
+			(event) => {
+				if (
+					!(event.relatedTarget instanceof Node) ||
+					!speakerGroup?.contains(event.relatedTarget)
+				) {
+					scheduleClose();
+				}
+			},
+			{ signal },
+		);
+		card.addEventListener(
+			"keydown",
+			(event) => {
+				if (event.key === "Escape") hideSpeaker();
+			},
+			{ signal },
+		);
+
+		const cleanup = () => {
+			if (destroyed) return;
+			destroyed = true;
+			controller.abort();
+			if (closeTimer) clearTimeout(closeTimer);
+			dismissTooltip?.destroy();
+			speakerTooltip?.destroy();
+		};
 
 		const dismiss = () => {
+			cleanup();
 			card.remove();
 			try {
 				localStorage.setItem("connect-2026-announcement", "viewed");
@@ -178,43 +315,59 @@ const tooltipClass =
 				return;
 			}
 		};
-		close.addEventListener("click", dismiss);
-		return () => close.removeEventListener("click", dismiss);
+		close?.addEventListener("click", dismiss, { signal });
+		return cleanup;
 	});
 </script>
 
 <style>
-	.connect-avatar:hover,
-	.connect-avatar:focus-within {
+	.connect-avatar {
+		transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
+	}
+
+	.connect-avatar[data-active="true"] {
 		z-index: 10 !important;
 		transform: translateY(-2px) scale(1.08);
 	}
 
-	.connect-avatar:hover ~ .connect-avatar,
-	.connect-avatar:focus-within ~ .connect-avatar {
+	.connect-avatar[data-spread="true"] {
 		transform: translateX(6px);
 	}
 
 	.connect-speaker-tooltip {
-		transform: translate(-50%, 4px);
+		display: flex;
+		width: 15rem;
+		align-items: center;
+		gap: 0.75rem;
+		overflow: hidden;
+		padding: 0.75rem 0.875rem;
+		font-synthesis: none;
+		overflow-wrap: anywhere;
 	}
 
-	.connect-avatar:hover .connect-speaker-tooltip,
-	.connect-avatar:focus-within .connect-speaker-tooltip {
-		opacity: 1;
-		transform: translate(-50%, 0);
+	:global(.tippy-box[data-theme~="connect-speaker"]) {
+		border: 1px solid var(--color-border) !important;
+		border-radius: 0.75rem !important;
+		background: var(--color-card) !important;
+		color: var(--color-foreground) !important;
+		box-shadow: var(--shadow-md) !important;
 	}
 
-	@container (max-width: 767px) {
-		.connect-speaker-tooltip {
-			left: 0;
-			transform: translateY(4px);
-		}
+	:global(.tippy-box[data-theme~="connect-speaker"] .tippy-content) {
+		padding: 0 !important;
+	}
 
-		.connect-avatar:hover .connect-speaker-tooltip,
-		.connect-avatar:focus-within .connect-speaker-tooltip {
-			transform: translateY(0);
-		}
+	:global(.tippy-box[data-theme~="connect-dismiss"]) {
+		border: 1px solid var(--color-border) !important;
+		border-radius: 0.375rem !important;
+		background: var(--color-card) !important;
+		color: var(--color-foreground) !important;
+		font-size: 0.75rem !important;
+		box-shadow: var(--shadow-lg) !important;
+	}
+
+	:global(.tippy-box[data-theme~="connect-dismiss"] .tippy-content) {
+		padding: 0.375rem 0.75rem !important;
 	}
 
 	.connect-card-cta {
@@ -223,8 +376,8 @@ const tooltipClass =
 
 	.connect-card-dismiss {
 		position: absolute;
-		top: 0.75rem;
-		right: 0.75rem;
+		top: 0.5rem;
+		right: 0.5rem;
 		z-index: 2;
 		width: 0;
 		opacity: 0;
@@ -232,18 +385,24 @@ const tooltipClass =
 		transform: translateY(1rem);
 		transition:
 			width 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
-			opacity 150ms ease-out,
+			opacity 220ms ease-out,
 			transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
 	}
 
 	[data-connect-card]:hover .connect-card-dismiss,
 	[data-connect-card]:focus-within .connect-card-dismiss {
-		width: 2.75rem;
+		width: 1.75rem;
 		opacity: 1;
 		pointer-events: auto;
 		transform: translateY(0);
 	}
 
+	@container (max-width: 767px) {
+		.connect-card-copy {
+			padding-right: 1.5rem;
+		}
+	}
+
 	@container (min-width: 768px) {
 		.connect-card {
 			height: 6rem;
@@ -258,6 +417,7 @@ const tooltipClass =
 
 		.connect-card-actions {
 			width: auto;
+			align-self: auto;
 		}
 
 		.connect-card-cta {
@@ -272,7 +432,7 @@ const tooltipClass =
 
 	@media (pointer: coarse) {
 		.connect-card-dismiss {
-			width: 2.75rem;
+			width: 1.75rem;
 			opacity: 1;
 			pointer-events: auto;
 			transform: translateY(0);
@@ -280,9 +440,14 @@ const tooltipClass =
 	}
 
 	@media (prefers-reduced-motion: reduce) {
-		.connect-speaker-tooltip,
+		.connect-avatar,
 		.connect-card-dismiss {
 			transition: none;
 		}
+
+		.connect-avatar[data-active="true"],
+		.connect-avatar[data-spread="true"] {
+			transform: none;
+		}
 	}
 </style>
diff --git a/src/components/landing/ConnectSpeakerLogo.astro b/src/components/landing/ConnectSpeakerLogo.astro
new file mode 100644
index 00000000000..b3ca4e30be8
--- /dev/null
+++ b/src/components/landing/ConnectSpeakerLogo.astro
@@ -0,0 +1,116 @@
+---
+interface Props {
+	name: string;
+}
+
+const { name } = Astro.props;
+const className = "h-8 w-auto shrink-0";
+---
+
+{name === "Evan You" && (
+	<svg aria-hidden="true" fill="none" viewBox="0 0 410 404" class={className}>
+		<path
+			d="M399.641 59.5246 215.643 388.545c-3.799 6.793-13.559 6.833-17.415.073L10.582 59.556c-4.201-7.366 2.098-16.29 10.446-14.797l184.195 32.923c1.175.21 2.378.208 3.553-.006l180.343-32.87c8.32-1.517 14.649 7.337 10.522 14.719Z"
+			fill="url(#connect-vite-primary)"
+		/>
+		<path
+			d="m292.965 1.574-136.164 26.681a5 5 0 0 0-4.03 4.611l-8.376 141.464c-.197 3.332 2.863 5.918 6.115 5.168l37.91-8.749c3.547-.818 6.752 2.306 6.023 5.873l-11.263 55.153c-.758 3.712 2.727 6.886 6.352 5.785l23.415-7.114c3.63-1.102 7.118 2.081 6.35 5.796l-17.899 86.633c-1.12 5.419 6.088 8.374 9.094 3.728l2.008-3.103 110.954-221.428c1.858-3.708-1.346-7.935-5.418-7.149l-39.022 7.531c-3.667.707-6.787-2.708-5.752-6.296L298.731 7.867c1.036-3.594-2.095-7.012-5.766-6.293Z"
+			fill="url(#connect-vite-bolt)"
+		/>
+		<defs>
+			<linearGradient
+				id="connect-vite-primary"
+				x1="6"
+				y1="33"
+				x2="235"
+				y2="344"
+				gradientUnits="userSpaceOnUse"
+			>
+				<stop stop-color="#41D1FF" />
+				<stop offset="1" stop-color="#BD34FE" />
+			</linearGradient>
+			<linearGradient
+				id="connect-vite-bolt"
+				x1="194.651"
+				y1="8.818"
+				x2="236.076"
+				y2="292.989"
+				gradientUnits="userSpaceOnUse"
+			>
+				<stop stop-color="#FFEA83" />
+				<stop offset=".083" stop-color="#FFDD35" />
+				<stop offset="1" stop-color="#FFA800" />
+			</linearGradient>
+		</defs>
+	</svg>
+)}
+
+{name === "Tanner Linsley" && (
+	<svg
+		aria-hidden="true"
+		viewBox="0 0 64.04 83.84"
+		class={`${className} text-foreground`}
+	>
+		<path
+			fill="currentColor"
+			d="M32.02 0C55.17 0 64.04 14.33 64.04 41.92S55.17 83.84 32.02 83.84 0 69.53 0 41.92C0 14.33 8.87 0 32.02 0Zm10.59 61.08c-3.01 0-4.65.82-5.97 1.48-1.14.57-2.03 1.02-4.01 1.02s-2.87-.45-4.01-1.02c-1.32-.66-2.96-1.48-5.97-1.48s-4.65.82-5.97 1.48c-1.14.57-2.03 1.02-4.01 1.02v4.37c3.01 0 4.65-.82 5.97-1.48 1.14-.57 2.03-1.02 4.01-1.02s2.87.45 4.01 1.02c1.32.66 2.96 1.48 5.97 1.48s4.65-.82 5.97-1.48c1.14-.57 2.03-1.02 4.01-1.02s2.87.45 4.01 1.02c1.32.66 2.96 1.48 5.97 1.48v-4.37c-1.97 0-2.87-.45-4.01-1.02-1.32-.66-2.96-1.48-5.97-1.48Zm1.43-43.79c2.27-2.05 0-5.76-2.84-4.64-1.57.63-3.05 1.53-4.37 2.72-2.06 1.87-3.45 4.22-4.2 6.78-.75-2.56-2.14-4.91-4.2-6.78-1.32-1.18-2.8-2.09-4.37-2.72-2.84-1.12-5.11 2.59-2.84 4.64l8.33 7.52c-2.72-1.84-6-2.93-9.54-2.93-1.93 0-3.78.31-5.52.91-2.92.99-2.11 5.35.96 5.35h11.62c-2.56.49-4.99 1.63-7.03 3.45-1.32 1.18-2.36 2.56-3.14 4.07-1.41 2.71 2.05 5.34 4.32 3.31l9.38-8.45-.7 23.25c0 .28-.16.55-.37.78-.3-.13-.58-.27-.9-.43-1.32-.66-2.96-1.48-5.97-1.48s-4.65.82-5.97 1.48c-1.14.57-2.03 1.02-4.01 1.02v4.37c3.01 0 4.65-.82 5.97-1.48 1.14-.57 2.03-1.02 4.01-1.02s2.87.45 4.01 1.02c1.32.66 2.96 1.48 5.97 1.48s4.65-.82 5.97-1.48c1.14-.57 2.03-1.02 4.01-1.02s2.87.45 4.01 1.02c1.32.66 2.96 1.48 5.97 1.48v-4.37c-1.97 0-2.87-.45-4.01-1.02v-.02c-1.32-.66-2.96-1.48-5.97-1.48s-4.65.82-5.97 1.48c-.34.16-.66.33-.99.46-.25-.22-.4-.51-.42-.81l-.7-23.37 9.51 8.58c2.27 2.05 5.73-.58 4.32-3.31-.78-1.5-1.82-2.89-3.14-4.07-2.03-1.84-4.46-2.96-7.03-3.45h11.62c3.08 0 3.87-4.35.96-5.35-1.73-.58-3.59-.91-5.52-.91-3.53 0-6.8 1.09-9.54 2.93l8.33-7.52Z"
+		/>
+	</svg>
+)}
+
+{name === "Corey Quinn" && (
+	<svg aria-hidden="true" fill="none" viewBox="100 0 27 26" class={className}>
+		<path
+			d="M121.64 6.564 119.754 2.527C119.295 1.544 118.291.93 117.204.967l-3.708.126a3.31 3.31 0 0 0-2.958 1.969l-1.155 2.524 4.743-.951-7.247 3.233a7.26 7.26 0 0 0-3.003 2.577c-1.451 2.255-3.546 6.03-2.437 7.551l19.162-8.638c1.066-.481 1.534-1.736 1.04-2.793Z"
+			fill="#F16503"
+		/>
+		<path
+			d="m106.486 19.367 1.886 4.036a2.72 2.72 0 0 0 2.55 1.56l3.708-.125a3.31 3.31 0 0 0 2.958-1.969l1.155-2.524-4.744.951 7.248-3.234a7.26 7.26 0 0 0 3.003-2.576c1.451-2.256 3.546-6.031 2.436-7.551l-19.161 8.638c-1.066.481-1.534 1.736-1.04 2.793Z"
+			fill="#F16503"
+		/>
+	</svg>
+)}
+
+{name === "Peter Steinberger" && (
+	<svg
+		aria-hidden="true"
+		viewBox="0 0 24 24"
+		class={`${className} text-foreground`}
+	>
+		<path
+			fill="currentColor"
+			d="M22.282 9.821a6 6 0 0 0-.516-4.91 6.05 6.05 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a6 6 0 0 0-3.998 2.9 6.05 6.05 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.05 6.05 0 0 0 6.515 2.9A6 6 0 0 0 13.26 24a6.06 6.06 0 0 0 5.772-4.206 6 6 0 0 0 3.997-2.9 6.06 6.06 0 0 0-.747-7.073M13.26 22.43a4.48 4.48 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.8.8 0 0 0 .392-.681v-6.737l2.02 1.168a.07.07 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494M3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.77.77 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646M2.34 7.896a4.5 4.5 0 0 1 2.366-1.973V11.6a.77.77 0 0 0 .388.677l5.815 3.354-2.02 1.168a.08.08 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855-5.833-3.387L15.119 7.2a.08.08 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667m2.01-3.023-.141-.085-4.774-2.782a.78.78 0 0 0-.785 0L9.409 9.23V6.897a.07.07 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08L8.704 5.46a.8.8 0 0 0-.393.681zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z"
+		/>
+	</svg>
+)}
+
+{name === "Fred Schott" && (
+	<svg
+		aria-hidden="true"
+		fill="none"
+		viewBox="0 0 85 107"
+		class={`${className} text-foreground`}
+	>
+		<path
+			d="M27.589 91.137c-4.834-4.419-6.245-13.703-4.231-20.43 3.492 4.241 8.33 5.584 13.343 6.343 7.737 1.17 15.335.732 22.522-2.804.822-.405 1.582-.943 2.481-1.489.674 1.957.85 3.932.614 5.943-.573 4.896-3.009 8.678-6.885 11.545-1.55 1.147-3.189 2.172-4.79 3.253-4.917 3.323-6.247 7.22-4.399 12.888.043.139.083.277.182.614-2.51-1.124-4.344-2.76-5.742-4.911-1.475-2.27-2.177-4.781-2.214-7.498-.019-1.322-.019-2.656-.197-3.96-.434-3.178-1.926-4.601-4.737-4.683-2.884-.084-5.166 1.699-5.771 4.507-.046.216-.113.429-.18.68Z"
+			fill="url(#connect-astro-accent)"
+		/>
+		<path
+			d="M0 69.587s14.314-6.973 28.668-6.973L39.49 29.12c.405-1.62 1.588-2.72 2.924-2.72s2.519 1.1 2.924 2.72L56.16 62.614c17 0 28.668 6.973 28.668 6.973S60.514 3.352 60.467 3.219C59.769 1.261 58.591 0 57.003 0H27.827c-1.588 0-2.718 1.261-3.464 3.219C24.311 3.35 0 69.587 0 69.587Z"
+			fill="currentColor"
+		/>
+		<defs>
+			<linearGradient
+				id="connect-astro-accent"
+				x1="22.47"
+				y1="107"
+				x2="69.145"
+				y2="84.947"
+				gradientUnits="userSpaceOnUse"
+			>
+				<stop stop-color="#D83333" />
+				<stop offset="1" stop-color="#F041FF" />
+			</linearGradient>
+		</defs>
+	</svg>
+)}

From 1546bbd564d62952b87bce4259237f2e93d1dcf9 Mon Sep 17 00:00:00 2001
From: mohamedh <mhassan@cloudflare.com>
Date: Tue, 22 Sep 2026 02:16:25 +0100
Subject: [PATCH 3/3] fix: inset Connect banner from desktop gutter

---
 src/components/landing/Connect2026Banner.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/landing/Connect2026Banner.astro b/src/components/landing/Connect2026Banner.astro
index 6d2b1314d63..d1e25896a1c 100644
--- a/src/components/landing/Connect2026Banner.astro
+++ b/src/components/landing/Connect2026Banner.astro
@@ -33,7 +33,7 @@ const speakers = [
 ---
 
 <section
-	class="@container relative"
+	class="@container relative lg:mr-4"
 	data-connect-card
 	aria-labelledby="connect-card-title"
 >