From 090ae2409e803cea456176daa9081a129cdfba44 Mon Sep 17 00:00:00 2001
From: Marcus Souza <marcus.souza@azion.com>
Date: Tue, 29 Sep 2026 22:13:02 -0300
Subject: [PATCH] feat(nav): reshape Getting Started around Agent Setup, Use
 Cases and Support

Getting Started gains an Overview row for the docs home, Support moves
under Agent Setup, Architectures becomes Use Cases with one dropdown per
Solution, the Developer tools hub opens from its top-nav trigger, and
the home's Copy prompt button shows the agent marks.

Squashed from:

- feat(nav): open the Developer tools hub from its top-nav trigger, drop its sidebar row
  The Developer tools trigger keeps its hover panel and now visits the hub
  when clicked. webkit's NavigationMenu.Trigger is either a link or a panel
  opener, never both, so the visit is a click handler on the button.

  topnav.json names the hub tree as devtoolsHome, which gives the trigger
  its destination and adds an Overview row to the mobile directory. The
  hub's row leaves root.json, and the machine index lists the hub through
  the top nav, as it already did for the guides hub, so llms.txt keeps it.

- feat(nav): move Support into Getting Started, under Agent Setup
  The row leaves the Manage group, so the machine index now files
  Support's pages under Getting Started as well.

- feat(nav): rename Architectures to Use Cases and list it under Agent Setup
  The tree title, the root sidebar row, the docs home card, the hub hero
  and directory strings, the hub pages' frontmatter and the style guide's
  hub example all name the section Use Cases. URLs, the tree id and the
  namespace stay as they are.

- feat(nav): fold each Use Cases Solution into a dropdown row
  The five labeled groups become dropdown rows in one group, the shape the
  guides tree uses; each row keeps its URL segment, so every computed
  permalink is unchanged. The hub page builds its card sections from
  labeled groups, so it now reads dropdown rows as sections too.

- feat(use-cases): drop the Deploy a template action from the hub hero
  The hero keeps its title and description only; the hero type no longer
  borrows the Developer tools shape, and the markdown twin stops printing
  the link.

- feat(nav): add an Overview row for the docs home to Getting Started
  The docs home is not a content page, so a new `home` row kind resolves
  to the current language's docs base. The row leads the Getting Started
  group, opens no tree, and highlights on the home.

- feat(home): show the agent marks on the Copy prompt button
  The webkit highlight button takes a label only, so the button is composed
  from the same layers the Console's copy-prompt component uses: the spinning
  glow, the accent base and the hover scrim, with the label followed by the
  Claude, Codex, Gemini and Cursor marks in mono. Same props, same clipboard
  behavior and copied state on the docs and devtools homes in both languages.
---
 src/components/homes/ArchitecturesHome.astro  |   8 +-
 src/components/webkit/CopyPromptButton.vue    |  52 ++-
 src/components/webkit/DocsTopNav.vue          |  32 +-
 .../en/homes/architctures/architectures.mdx   |   8 +-
 .../style-guide/content/navigation-hubs.mdx   |   2 +-
 .../pt-br/homes/arquiteturas/arquiteturas.mdx |   6 +-
 .../conteudo/hubs-de-navegacao.mdx            |   2 +-
 src/data/architectures-home/en.ts             |  14 +-
 src/data/architectures-home/index.ts          |   1 -
 src/data/architectures-home/pt-br.ts          |  14 +-
 src/data/architectures-home/types.ts          |   6 +-
 src/data/docs-home/en.ts                      |   4 +-
 src/data/docs-home/pt-br.ts                   |   4 +-
 src/nav/resolve.ts                            |  20 +-
 src/nav/root.json                             |  19 +-
 src/nav/schema.ts                             |   9 +-
 src/nav/topnav.json                           |   1 +
 src/nav/trees/architectures.json              | 326 +++++++++---------
 src/util/machineIndex.ts                      |   2 +
 19 files changed, 289 insertions(+), 241 deletions(-)

diff --git a/src/components/homes/ArchitecturesHome.astro b/src/components/homes/ArchitecturesHome.astro
index 8dc172e66a..1bbba8da8a 100644
--- a/src/components/homes/ArchitecturesHome.astro
+++ b/src/components/homes/ArchitecturesHome.astro
@@ -1,10 +1,9 @@
 ---
 /*
-  The Architectures home, on the Developer tools home's anatomy: a hero with one way in
-  (the guides hub), then one directory whose groups and rows are the architectures tree's,
+  The Architectures home, on the Developer tools home's anatomy: a hero with no action,
+  then one directory whose groups and rows are the architectures tree's,
   so it always matches the rail. Each group is a Solution; each card is one architecture.
 */
-import Button from '@aziontech/webkit/button';
 import DocCard from '@aziontech/webkit/doc-card';
 import DocCardGroup from '@aziontech/webkit/doc-card-group';
 import HeroTitle from '@aziontech/webkit/hero-title';
@@ -25,9 +24,6 @@ const cols = (count: number) => (count >= 4 ? 4 : count >= 3 ? 3 : 2);
 
 <div data-doc-chrome class="mb-(--spacing-12) sm:mb-(--spacing-16)">
 	<HeroTitle title={hero.title} description={hero.description} />
-	<div class="mt-(--spacing-xl) flex flex-wrap items-center gap-(--spacing-sm)">
-		<Button label={hero.buttonLabel} href={hero.buttonLink} kind="primary" size="large" />
-	</div>
 </div>
 
 <SectionHeading id={directory.heading.slug} text={directory.heading.text} />
diff --git a/src/components/webkit/CopyPromptButton.vue b/src/components/webkit/CopyPromptButton.vue
index fd610bbc61..521c50a2a5 100644
--- a/src/components/webkit/CopyPromptButton.vue
+++ b/src/components/webkit/CopyPromptButton.vue
@@ -1,15 +1,50 @@
 <template>
 	<Tooltip :text="tooltip" placement="top">
-		<span aria-live="polite">
-			<ButtonHighlight :label="copied ? copiedLabel : label" @click="copy" />
-		</span>
+		<!-- The webkit highlight button takes a label only, so the button is composed here with
+		     the same layers: a spinning glow, the accent base, and a scrim that lifts on hover. -->
+		<button
+			type="button"
+			:data-state="copied ? 'copied' : 'default'"
+			:data-testid="testId"
+			class="group/highlight relative isolate inline-flex h-10 max-w-full items-center justify-center overflow-hidden rounded-(--shape-elements) border-(length:--border-width-default) border-(--border-default) p-px transition-colors duration-fast-02 ease-productive-entrance focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas) motion-reduce:transition-none"
+			@click="copy"
+		>
+			<span
+				aria-hidden="true"
+				class="pointer-events-none absolute inset-0 animate-spin [animation-duration:8s] [animation-timing-function:linear] [background:linear-gradient(90deg,var(--color-base-white),var(--color-blue-500),var(--color-brand-primary-500))] filter-[blur(12px)] motion-reduce:animate-none"
+			/>
+			<span
+				aria-hidden="true"
+				class="pointer-events-none absolute inset-px rounded-[inherit] bg-[linear-gradient(120deg,var(--color-brand-accent-900)_17%,var(--color-brand-accent-100)_53%,var(--color-brand-accent-600)_96%)] transition-opacity duration-moderate-02 ease-out group-hover/highlight:opacity-25 motion-reduce:transition-none"
+			/>
+			<span
+				aria-hidden="true"
+				class="pointer-events-none absolute inset-px rounded-[inherit] bg-(--bg-backdrop) transition-opacity duration-moderate-02 ease-out group-hover/highlight:opacity-25 motion-reduce:transition-none"
+			/>
+			<span
+				class="relative z-1 flex h-full w-full min-w-0 items-center justify-center gap-(--spacing-xs) px-(--spacing-md) text-label-md text-(--color-base-white) sm:gap-(--spacing-sm)"
+			>
+				<span aria-live="polite" class="min-w-0 truncate sm:whitespace-nowrap">
+					{{ copied ? copiedLabel : label }}
+				</span>
+				<span
+					aria-hidden="true"
+					class="ml-(--spacing-xxs) flex shrink-0 items-center gap-(--spacing-xxs) sm:gap-(--spacing-xs)"
+				>
+					<AgentMark v-for="name in MARKS" :key="name" :name="name" mono class="size-(--size-5)" />
+				</span>
+			</span>
+		</button>
 	</Tooltip>
 </template>
 
 <script setup lang="ts">
-import ButtonHighlight from '@aziontech/webkit/button-highlight';
 import Tooltip from '@aziontech/webkit/tooltip';
-import { onBeforeUnmount, ref } from 'vue';
+import { computed, onBeforeUnmount, ref, useAttrs } from 'vue';
+
+import AgentMark, { type AgentName } from './AgentMark.vue';
+
+defineOptions({ name: 'CopyPromptButton' });
 
 interface Props {
 	/** Text copied to the clipboard on activation. */
@@ -28,9 +63,16 @@ const props = withDefaults(defineProps<Props>(), {
 	tooltip: 'Copies a setup prompt for your AI coding tool',
 });
 
+/** The agents shown after the label, in the order the Console shows them. */
+const MARKS: AgentName[] = ['claude', 'codex', 'gemini', 'cursor'];
+
+const attrs = useAttrs();
+
 const copied = ref(false);
 let timer: ReturnType<typeof setTimeout> | null = null;
 
+const testId = computed(() => (attrs['data-testid'] as string | undefined) ?? 'copy-prompt-button');
+
 async function copy() {
 	try {
 		await navigator.clipboard.writeText(props.prompt);
diff --git a/src/components/webkit/DocsTopNav.vue b/src/components/webkit/DocsTopNav.vue
index f28738ea94..9bc29e2c18 100644
--- a/src/components/webkit/DocsTopNav.vue
+++ b/src/components/webkit/DocsTopNav.vue
@@ -10,7 +10,10 @@
 				<!-- eslint-enable webkit/no-style-override -->
 				<template v-for="item in items" :key="item.value">
 					<NavigationMenu.Item v-if="item.columns" :value="item.value">
-						<NavigationMenu.Trigger>
+						<!-- Hover opens the panel; a click on the trigger itself visits the section's
+						     landing. webkit's Trigger is a button — given an `href` it renders as a
+						     plain link and never opens its panel — so the visit is made by hand. -->
+						<NavigationMenu.Trigger @click="visit(item.href)">
 							{{ item.label }}
 							<NavigationMenu.Icon>
 								<svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
@@ -33,23 +36,6 @@
 								class="grid gap-(--spacing-lg) p-(--spacing-md)"
 								:style="{ gridTemplateColumns: `repeat(${item.columns.length}, 18rem)` }"
 							>
-								<!-- The section's landing, above the columns. The trigger stays a button:
-								     with an `href` it renders as a plain link and never opens its panel.
-								     Design-system gap: a List without `label` is a horizontal row, so the
-								     entry's hover surface spans its text, not the panel. -->
-								<div v-if="item.home?.href" class="col-span-full">
-									<NavigationMenu.List :highlight="false">
-										<NavigationMenu.Item
-											layout="entry"
-											:href="item.home.href"
-											:description="item.home.description"
-											featured
-											close-on-click
-										>
-											{{ item.home.label }}
-										</NavigationMenu.Item>
-									</NavigationMenu.List>
-								</div>
 								<NavigationMenu.List
 									v-for="column in item.columns"
 									:key="column.label"
@@ -104,8 +90,8 @@ interface Column {
 }
 
 type Item =
-	| { value: string; label: string; columns: Column[]; home?: Entry | null; href?: never }
-	| { value: string; label: string; href?: string; columns?: never; home?: never };
+	| { value: string; label: string; columns: Column[]; href?: string }
+	| { value: string; label: string; href?: string; columns?: never };
 
 const props = withDefaults(
 	defineProps<{
@@ -139,12 +125,16 @@ const items = computed<Item[]>(() => [
 					value: 'devtools',
 					label: props.labels.devtools,
 					columns: props.devtools,
-					home: props.devtoolsHome,
+					href: props.devtoolsHome?.href,
 				},
 		  ]
 		: []),
 ]);
 
+function visit(href?: string) {
+	if (href) window.location.assign(href);
+}
+
 // `NavigationMenu.Portal` may only mount client-side; webkit publishes no
 // `use-mounted` composable, so guard it with the plain Vue equivalent.
 const isMounted = ref(false);
diff --git a/src/content/docs/en/homes/architctures/architectures.mdx b/src/content/docs/en/homes/architctures/architectures.mdx
index 6b87ef6ca8..840f3846aa 100644
--- a/src/content/docs/en/homes/architctures/architectures.mdx
+++ b/src/content/docs/en/homes/architctures/architectures.mdx
@@ -1,9 +1,9 @@
 ---
-title: Architectures
+title: Use Cases
 description: >-
-  Validated designs that show how Azion products combine to implement a use
-  case, grouped by the solution each one serves.
-meta_tags: 'architectures, reference architecture, solutions, use cases, design'
+  Validated designs that show how Azion products combine to solve each use
+  case, grouped by the solution it serves.
+meta_tags: 'use cases, architectures, reference architecture, solutions, design'
 namespace: documentation_architectures
 permalink: /documentation/architectures/
 ---
diff --git a/src/content/docs/en/pages/style-guide/content/navigation-hubs.mdx b/src/content/docs/en/pages/style-guide/content/navigation-hubs.mdx
index f6e502a3f7..1ea76bb22d 100644
--- a/src/content/docs/en/pages/style-guide/content/navigation-hubs.mdx
+++ b/src/content/docs/en/pages/style-guide/content/navigation-hubs.mdx
@@ -103,7 +103,7 @@ import GuidesTable from '~/components/GuidesTable.astro'
 
 ## Examples
 
-- [Architectures](/en/documentation/architectures/) - One line of orientation, then the designs grouped by Solution.
+- [Use Cases](/en/documentation/architectures/) - One line of orientation, then the designs grouped by Solution.
 - [Cache guides and tutorials](/en/documentation/build/cache/guides/) - The table shape: one sentence, then every guide and tutorial with its date and difficulty.
 
 An Object Storage hub, trimmed to its orientation sentence and first group:
diff --git a/src/content/docs/pt-br/homes/arquiteturas/arquiteturas.mdx b/src/content/docs/pt-br/homes/arquiteturas/arquiteturas.mdx
index bc5537345e..1e39c9143f 100644
--- a/src/content/docs/pt-br/homes/arquiteturas/arquiteturas.mdx
+++ b/src/content/docs/pt-br/homes/arquiteturas/arquiteturas.mdx
@@ -1,9 +1,9 @@
 ---
-title: Arquiteturas
+title: Casos de uso
 description: >-
   Designs validados que mostram como os produtos Azion se combinam para
-  implementar um caso de uso, agrupados pela solução que cada um atende.
-meta_tags: 'arquiteturas, arquitetura de referência, soluções, casos de uso, design'
+  resolver cada caso de uso, agrupados pela solução que cada um atende.
+meta_tags: 'casos de uso, arquiteturas, arquitetura de referência, soluções, design'
 namespace: documentation_architectures
 permalink: /documentacao/arquiteturas/
 ---
diff --git a/src/content/docs/pt-br/pages/guia-de-estilo/conteudo/hubs-de-navegacao.mdx b/src/content/docs/pt-br/pages/guia-de-estilo/conteudo/hubs-de-navegacao.mdx
index 49c6caafb2..98351b9a6f 100644
--- a/src/content/docs/pt-br/pages/guia-de-estilo/conteudo/hubs-de-navegacao.mdx
+++ b/src/content/docs/pt-br/pages/guia-de-estilo/conteudo/hubs-de-navegacao.mdx
@@ -103,7 +103,7 @@ import GuidesTable from '~/components/GuidesTable.astro'
 
 ## Exemplos
 
-- [Arquiteturas](/pt-br/documentacao/arquiteturas/) - Uma linha de orientação, e depois os designs agrupados por solução.
+- [Casos de uso](/pt-br/documentacao/arquiteturas/) - Uma linha de orientação, e depois os designs agrupados por solução.
 - [Guias e tutoriais do Cache](/pt-br/documentacao/build/cache/guias/) - A forma em tabela: uma frase, e depois cada guia e tutorial com sua data e dificuldade.
 
 Um hub de Object Storage, cortado até a frase de orientação e o primeiro grupo. O exemplo está em inglês; a versão em português segue a mesma forma:
diff --git a/src/data/architectures-home/en.ts b/src/data/architectures-home/en.ts
index ba6955b1df..87fdeac1ae 100644
--- a/src/data/architectures-home/en.ts
+++ b/src/data/architectures-home/en.ts
@@ -4,17 +4,15 @@ export const en: ArchitecturesHomeContent = {
 	lang: 'en',
 
 	hero: {
-		title: 'Architectures',
+		title: 'Use Cases',
 		description:
-			'Validated designs that show how Azion products combine to implement a use case: the components, the flows, and the decisions behind each one.',
-		buttonLabel: 'Deploy a template',
-		buttonLink: '/en/documentation/marketplace/templates/',
+			'Each use case is a validated design that shows how Azion products combine to solve it: the components, the flows, and the decisions behind each one.',
 	},
 
 	directory: {
-		heading: { depth: 2, slug: 'all-architectures', text: 'All architectures' },
-		intro: 'Every architecture, grouped by the solution it serves.',
-		cardLink: 'Read the architecture',
+		heading: { depth: 2, slug: 'all-use-cases', text: 'All use cases' },
+		intro: 'Every use case, grouped by the solution it serves.',
+		cardLink: 'Read the use case',
 		icons: {
 			'build-and-run-applications': 'ai ai-build-pillar',
 			'improve-performance-and-reliability': 'pi pi-gauge',
@@ -27,7 +25,7 @@ export const en: ArchitecturesHomeContent = {
 			links: [
 				{ label: 'Guides', href: '/en/documentation/guides/' },
 				{ label: 'How Azion works', href: '/en/documentation/fundamentals/how-it-works/' },
-				{ label: 'architectures llms.txt', href: '/en/documentation/architectures/llms.txt' },
+				{ label: 'use cases llms.txt', href: '/en/documentation/architectures/llms.txt' },
 			],
 		},
 	},
diff --git a/src/data/architectures-home/index.ts b/src/data/architectures-home/index.ts
index e178999be1..cabe4a4e78 100644
--- a/src/data/architectures-home/index.ts
+++ b/src/data/architectures-home/index.ts
@@ -25,7 +25,6 @@ export function architecturesHomeMarkdown(lang: Lang, groups: HubGroup[]): strin
 
 	return [
 		hero.description,
-		`[${hero.buttonLabel}](${hero.buttonLink})`,
 		`## ${directory.heading.text}`,
 		directory.intro,
 		...groups.map((group) => [`### ${group.label}`, '', ...group.items.map(entry)].join('\n')),
diff --git a/src/data/architectures-home/pt-br.ts b/src/data/architectures-home/pt-br.ts
index ea69b97912..cfdfe89dab 100644
--- a/src/data/architectures-home/pt-br.ts
+++ b/src/data/architectures-home/pt-br.ts
@@ -4,17 +4,15 @@ export const ptBr: ArchitecturesHomeContent = {
 	lang: 'pt-br',
 
 	hero: {
-		title: 'Arquiteturas',
+		title: 'Casos de uso',
 		description:
-			'Designs validados que mostram como os produtos Azion se combinam para implementar um caso de uso: os componentes, os fluxos e as decisões por trás de cada um.',
-		buttonLabel: 'Implante um template',
-		buttonLink: '/pt-br/documentacao/marketplace/templates/',
+			'Cada caso de uso é um design validado que mostra como os produtos Azion se combinam para resolvê-lo: os componentes, os fluxos e as decisões por trás de cada um.',
 	},
 
 	directory: {
-		heading: { depth: 2, slug: 'todas-as-arquiteturas', text: 'Todas as arquiteturas' },
-		intro: 'Toda arquitetura, agrupada pela solução que atende.',
-		cardLink: 'Leia a arquitetura',
+		heading: { depth: 2, slug: 'todos-os-casos-de-uso', text: 'Todos os casos de uso' },
+		intro: 'Todo caso de uso, agrupado pela solução que atende.',
+		cardLink: 'Leia o caso de uso',
 		icons: {
 			'build-and-run-applications': 'ai ai-build-pillar',
 			'improve-performance-and-reliability': 'pi pi-gauge',
@@ -27,7 +25,7 @@ export const ptBr: ArchitecturesHomeContent = {
 			links: [
 				{ label: 'Guias', href: '/pt-br/documentacao/guias/' },
 				{ label: 'Como a Azion funciona', href: '/pt-br/documentacao/fundamentos/como-funciona/' },
-				{ label: 'llms.txt das arquiteturas', href: '/pt-br/documentacao/arquiteturas/llms.txt' },
+				{ label: 'llms.txt dos casos de uso', href: '/pt-br/documentacao/arquiteturas/llms.txt' },
 			],
 		},
 	},
diff --git a/src/data/architectures-home/types.ts b/src/data/architectures-home/types.ts
index e33fc91511..3ff7453a5e 100644
--- a/src/data/architectures-home/types.ts
+++ b/src/data/architectures-home/types.ts
@@ -1,9 +1,11 @@
 import type { Heading, Lang, SectionFooter } from '~/data/docs-home/types';
-import type { DevtoolsHero } from '~/data/devtools-home/types';
 
 export interface ArchitecturesHomeContent {
 	lang: Lang;
-	hero: DevtoolsHero;
+	hero: {
+		title: string;
+		description: string;
+	};
 	directory: {
 		heading: Heading;
 		intro: string;
diff --git a/src/data/docs-home/en.ts b/src/data/docs-home/en.ts
index d7041f04f9..35514e466a 100644
--- a/src/data/docs-home/en.ts
+++ b/src/data/docs-home/en.ts
@@ -112,9 +112,9 @@ export const en: DocsHomeContent = {
 				},
 				{
 					icon: 'pi pi-sitemap',
-					title: 'Explore architectures',
+					title: 'Explore use cases',
 					href: '/en/documentation/architectures/',
-					body: 'Validated designs that combine Azion products, grouped by the solution each one serves.',
+					body: 'Validated designs that show how Azion products combine to solve each use case, grouped by solution.',
 					class: 'sm:col-span-2',
 				},
 			],
diff --git a/src/data/docs-home/pt-br.ts b/src/data/docs-home/pt-br.ts
index 713664ea8c..df62366eaa 100644
--- a/src/data/docs-home/pt-br.ts
+++ b/src/data/docs-home/pt-br.ts
@@ -111,9 +111,9 @@ export const ptBr: DocsHomeContent = {
 				},
 				{
 					icon: 'pi pi-sitemap',
-					title: 'Explore as arquiteturas',
+					title: 'Explore os casos de uso',
 					href: '/pt-br/documentacao/arquiteturas/',
-					body: 'Designs validados que combinam produtos Azion, agrupados pela solução que cada um atende.',
+					body: 'Designs validados que mostram como os produtos Azion se combinam para resolver cada caso de uso, agrupados por solução.',
 					class: 'sm:col-span-2',
 				},
 			],
diff --git a/src/nav/resolve.ts b/src/nav/resolve.ts
index 080481eb58..ba4f76547c 100644
--- a/src/nav/resolve.ts
+++ b/src/nav/resolve.ts
@@ -172,6 +172,7 @@ function nodeHref(data: NavData, node: NavNode, lang: Lang, owner?: NavTree): st
 
 	if (node.href) return node.href;
 	if (node.llms) return owner ? `${treeBase(owner, lang)}llms.txt` : undefined;
+	if (node.home) return `/${lang}/${DOCS_BASE[lang]}/`;
 	if (node.tree) {
 		const tree = data.trees.get(node.tree);
 		if (!tree) return undefined;
@@ -206,6 +207,7 @@ function nodeIdentity(node: NavNode, lang: Lang, index: number): string {
 	if (node.tree) return `tree:${node.tree}`;
 	if (node.href) return `href:${slugify(node.href)}`;
 	if (node.llms) return 'llms';
+	if (node.home) return 'home';
 	const label = text(node.label, lang);
 	return label ? slugify(label) : `row-${index}`;
 }
@@ -293,7 +295,7 @@ function openedTree(
 	href: string | undefined,
 	ctx: MenuContext
 ): string | undefined {
-	if (node.href || node.llms || node.placeholder || !href) return undefined;
+	if (node.href || node.llms || node.home || node.placeholder || !href) return undefined;
 	const target = ctx.index.get(normalize(href))?.treeId;
 	if (!target || target === ctx.treeId) return undefined;
 	return data.trees.get(target)?.inline ? undefined : target;
@@ -635,13 +637,21 @@ export interface HubGroup {
 	items: HubTool[];
 }
 
-/** A hub tree's rows, in the labeled groups its rail shows; the unlabeled Overview group is skipped.
- * A row that points at a tree yields that tree's root (Developer tools); a row that points at a page
- * yields the page (Architectures). Cross-links and placeholders are not the hub's own rows. */
+/** A hub tree's rows, in the labeled sections its rail shows: a labeled group (Developer tools)
+ * or a dropdown row inside an unlabeled group (Use Cases); the Overview row is skipped. A row
+ * that points at a tree yields that tree's root; a row that points at a page yields the page.
+ * Cross-links and placeholders are not the hub's own rows. */
 export function buildHubDirectory(data: NavData, treeId: string, lang: Lang): HubGroup[] {
 	const hub = data.trees.get(treeId);
 	if (!hub) return [];
-	return hub.groups
+	const sections: NavGroup[] = hub.groups.flatMap((group) =>
+		group.label
+			? [group]
+			: group.items
+					.filter((row) => row.label && row.items?.length)
+					.map((row) => ({ label: row.label, segment: row.segment, items: row.items ?? [] }))
+	);
+	return sections
 		.map((group) => ({
 			label: text(group.label, lang) ?? '',
 			slug: slugify(text(group.label, lang) ?? ''),
diff --git a/src/nav/root.json b/src/nav/root.json
index af0f7e94f4..de111b1821 100644
--- a/src/nav/root.json
+++ b/src/nav/root.json
@@ -6,11 +6,24 @@
         "pt-br": "Primeiros passos"
       },
       "items": [
+        {
+          "home": true,
+          "label": {
+            "en": "Overview",
+            "pt-br": "Visão geral"
+          }
+        },
         {
           "tree": "fundamentals"
         },
         {
           "tree": "agent-setup"
+        },
+        {
+          "tree": "architectures"
+        },
+        {
+          "tree": "support"
         }
       ]
     },
@@ -18,9 +31,6 @@
       "items": [
         {
           "tree": "platform"
-        },
-        {
-          "tree": "devtools"
         }
       ]
     },
@@ -108,9 +118,6 @@
         "en": "Manage"
       },
       "items": [
-        {
-          "tree": "support"
-        },
         {
           "tree": "services"
         },
diff --git a/src/nav/schema.ts b/src/nav/schema.ts
index 6aac25d0de..823da783f4 100644
--- a/src/nav/schema.ts
+++ b/src/nav/schema.ts
@@ -49,6 +49,8 @@ const baseNode = z.object({
 	linkOnly: z.boolean().optional(),
 	/** The owning section's llms.txt: the row links the index the section publishes for agents. */
 	llms: z.boolean().optional(),
+	/** The documentation home of the current language. */
+	home: z.boolean().optional(),
 	placeholder: z.boolean().optional(),
 	products: z.array(z.string().min(1)).optional(),
 	kind: guideKind.optional(),
@@ -58,12 +60,13 @@ export type NavNode = z.infer<typeof baseNode> & { items?: NavNode[] };
 
 export const navNode: z.ZodType<NavNode> = baseNode
 	.extend({ items: z.lazy(() => z.array(navNode)).optional() })
-	.refine((n) => [n.page, n.tree, n.href, n.llms].filter(Boolean).length <= 1, {
+	.refine((n) => [n.page, n.tree, n.href, n.llms, n.home].filter(Boolean).length <= 1, {
 		message:
-			'a row points at a page, a tree, an href or the section llms.txt — never more than one',
+			'a row points at a page, a tree, an href, the section llms.txt or the docs home — never more than one',
 	})
 	.refine(
-		(n) => Boolean(n.page || n.tree || n.href || n.llms || n.items?.length || n.placeholder),
+		(n) =>
+			Boolean(n.page || n.tree || n.href || n.llms || n.home || n.items?.length || n.placeholder),
 		{
 			message: 'a row needs a destination or children',
 		}
diff --git a/src/nav/topnav.json b/src/nav/topnav.json
index 6c8ca192ab..77c3842ebf 100644
--- a/src/nav/topnav.json
+++ b/src/nav/topnav.json
@@ -139,5 +139,6 @@
       ]
     }
   ],
+  "devtoolsHome": "devtools",
   "guides": "guides"
 }
diff --git a/src/nav/trees/architectures.json b/src/nav/trees/architectures.json
index 71c59400e0..4c0296499d 100644
--- a/src/nav/trees/architectures.json
+++ b/src/nav/trees/architectures.json
@@ -1,8 +1,8 @@
 {
   "id": "architectures",
   "title": {
-    "en": "Architectures",
-    "pt-br": "Arquiteturas"
+    "en": "Use Cases",
+    "pt-br": "Casos de uso"
   },
   "description": {
     "en": "Validated designs that show how Azion products combine to implement a use case",
@@ -23,177 +23,177 @@
             "en": "Overview",
             "pt-br": "Visão geral"
           }
-        }
-      ]
-    },
-    {
-      "label": {
-        "en": "Build and run applications",
-        "pt-br": "Construir e executar aplicações"
-      },
-      "segment": {
-        "en": "build-and-run-applications",
-        "pt-br": "construir-e-executar-aplicacoes"
-      },
-      "items": [
-        {
-          "page": "docs_arch_jamstack_deploy",
-          "kind": "architecture",
-          "products": ["applications"]
-        },
-        {
-          "page": "docs_arch_app_modernization",
-          "kind": "architecture",
-          "products": ["applications"]
-        },
-        {
-          "page": "docs_arch_microservices",
-          "kind": "architecture",
-          "products": ["functions", "applications"]
-        },
-        {
-          "page": "docs_arch_edge_native",
-          "kind": "architecture",
-          "products": ["applications"]
-        },
-        {
-          "page": "docs_arch_edge_enhancement",
-          "kind": "architecture",
-          "products": ["applications"]
-        },
-        {
-          "page": "docs_arch_serverless_apps",
-          "kind": "architecture",
-          "products": ["applications"]
-        },
-        {
-          "page": "docs_arch_infra_auto_apps",
-          "kind": "architecture",
-          "products": ["orchestrator"]
-        },
-        {
-          "page": "docs_arch_infra_auto_apps_delivery",
-          "kind": "architecture",
-          "products": ["applications", "orchestrator"]
-        }
-      ]
-    },
-    {
-      "label": {
-        "en": "Improve application performance and reliability",
-        "pt-br": "Melhorar a performance e a confiabilidade das aplicações"
-      },
-      "segment": {
-        "en": "improve-performance-and-reliability",
-        "pt-br": "melhorar-performance-e-confiabilidade"
-      },
-      "items": [
-        {
-          "page": "docs_arch_application_acceleration",
-          "kind": "architecture",
-          "products": ["application-accelerator", "applications"]
-        },
-        {
-          "page": "docs_arch_content_delivery",
-          "kind": "architecture",
-          "products": ["applications"]
-        },
-        {
-          "page": "docs_arch_image_processing",
-          "kind": "architecture",
-          "products": ["image-processor", "applications"]
-        }
-      ]
-    },
-    {
-      "label": {
-        "en": "Build and run AI workloads",
-        "pt-br": "Construir e executar workloads de AI"
-      },
-      "segment": {
-        "en": "build-and-run-ai-workloads",
-        "pt-br": "construir-e-executar-workloads-de-ai"
-      },
-      "items": [
-        {
-          "page": "ai_agent_autonomous_security",
-          "kind": "architecture",
-          "products": ["ai-inference"]
-        },
-        {
-          "page": "docs_arch_ai_inference",
-          "kind": "architecture",
-          "products": ["applications", "ai-inference"]
-        },
-        {
-          "page": "docs_arch_ai_agent_third_party_llm",
-          "kind": "architecture",
-          "products": ["ai-inference"]
-        },
-        {
-          "page": "docs_arch_AI_agent_copilot",
-          "kind": "architecture",
-          "products": ["ai-inference"]
-        }
-      ]
-    },
-    {
-      "label": {
-        "en": "Secure applications and networks",
-        "pt-br": "Proteger aplicações e redes"
-      },
-      "segment": {
-        "en": "secure-applications-and-networks",
-        "pt-br": "proteger-aplicacoes-e-redes"
-      },
-      "items": [
-        {
-          "page": "docs_arch_security_modernization_with_edge",
-          "kind": "architecture",
-          "products": ["firewall", "waf"]
-        },
-        {
-          "page": "docs_arch_waap",
-          "kind": "architecture",
-          "products": ["applications", "firewall"]
         },
         {
-          "page": "docs_arch_security_automation_with_edge",
-          "kind": "architecture"
+          "label": {
+            "en": "Build and run applications",
+            "pt-br": "Construir e executar aplicações"
+          },
+          "segment": {
+            "en": "build-and-run-applications",
+            "pt-br": "construir-e-executar-aplicacoes"
+          },
+          "items": [
+            {
+              "page": "docs_arch_jamstack_deploy",
+              "kind": "architecture",
+              "products": ["applications"]
+            },
+            {
+              "page": "docs_arch_app_modernization",
+              "kind": "architecture",
+              "products": ["applications"]
+            },
+            {
+              "page": "docs_arch_microservices",
+              "kind": "architecture",
+              "products": ["functions", "applications"]
+            },
+            {
+              "page": "docs_arch_edge_native",
+              "kind": "architecture",
+              "products": ["applications"]
+            },
+            {
+              "page": "docs_arch_edge_enhancement",
+              "kind": "architecture",
+              "products": ["applications"]
+            },
+            {
+              "page": "docs_arch_serverless_apps",
+              "kind": "architecture",
+              "products": ["applications"]
+            },
+            {
+              "page": "docs_arch_infra_auto_apps",
+              "kind": "architecture",
+              "products": ["orchestrator"]
+            },
+            {
+              "page": "docs_arch_infra_auto_apps_delivery",
+              "kind": "architecture",
+              "products": ["applications", "orchestrator"]
+            }
+          ]
         },
         {
-          "page": "docs_arch_api_gateways_security",
-          "kind": "architecture"
+          "label": {
+            "en": "Improve application performance and reliability",
+            "pt-br": "Melhorar a performance e a confiabilidade das aplicações"
+          },
+          "segment": {
+            "en": "improve-performance-and-reliability",
+            "pt-br": "melhorar-performance-e-confiabilidade"
+          },
+          "items": [
+            {
+              "page": "docs_arch_application_acceleration",
+              "kind": "architecture",
+              "products": ["application-accelerator", "applications"]
+            },
+            {
+              "page": "docs_arch_content_delivery",
+              "kind": "architecture",
+              "products": ["applications"]
+            },
+            {
+              "page": "docs_arch_image_processing",
+              "kind": "architecture",
+              "products": ["image-processor", "applications"]
+            }
+          ]
         },
         {
-          "page": "docs_arch_bot_management",
-          "kind": "architecture",
-          "products": ["bot-manager", "applications"]
+          "label": {
+            "en": "Build and run AI workloads",
+            "pt-br": "Construir e executar workloads de AI"
+          },
+          "segment": {
+            "en": "build-and-run-ai-workloads",
+            "pt-br": "construir-e-executar-workloads-de-ai"
+          },
+          "items": [
+            {
+              "page": "ai_agent_autonomous_security",
+              "kind": "architecture",
+              "products": ["ai-inference"]
+            },
+            {
+              "page": "docs_arch_ai_inference",
+              "kind": "architecture",
+              "products": ["applications", "ai-inference"]
+            },
+            {
+              "page": "docs_arch_ai_agent_third_party_llm",
+              "kind": "architecture",
+              "products": ["ai-inference"]
+            },
+            {
+              "page": "docs_arch_AI_agent_copilot",
+              "kind": "architecture",
+              "products": ["ai-inference"]
+            }
+          ]
         },
         {
-          "page": "docs_arch_online_fraud_prevention",
-          "kind": "architecture",
-          "products": ["firewall"]
+          "label": {
+            "en": "Secure applications and networks",
+            "pt-br": "Proteger aplicações e redes"
+          },
+          "segment": {
+            "en": "secure-applications-and-networks",
+            "pt-br": "proteger-aplicacoes-e-redes"
+          },
+          "items": [
+            {
+              "page": "docs_arch_security_modernization_with_edge",
+              "kind": "architecture",
+              "products": ["firewall", "waf"]
+            },
+            {
+              "page": "docs_arch_waap",
+              "kind": "architecture",
+              "products": ["applications", "firewall"]
+            },
+            {
+              "page": "docs_arch_security_automation_with_edge",
+              "kind": "architecture"
+            },
+            {
+              "page": "docs_arch_api_gateways_security",
+              "kind": "architecture"
+            },
+            {
+              "page": "docs_arch_bot_management",
+              "kind": "architecture",
+              "products": ["bot-manager", "applications"]
+            },
+            {
+              "page": "docs_arch_online_fraud_prevention",
+              "kind": "architecture",
+              "products": ["firewall"]
+            },
+            {
+              "page": "docs_arch_governance_risk_compliance",
+              "kind": "architecture"
+            }
+          ]
         },
         {
-          "page": "docs_arch_governance_risk_compliance",
-          "kind": "architecture"
-        }
-      ]
-    },
-    {
-      "label": {
-        "en": "Deliver media and streaming content",
-        "pt-br": "Entregar mídia e conteúdo de streaming"
-      },
-      "segment": {
-        "en": "deliver-media-and-streaming",
-        "pt-br": "entregar-midia-e-streaming"
-      },
-      "items": [
-        {
-          "page": "docs_arch_live_streaming_delivery",
-          "kind": "architecture"
+          "label": {
+            "en": "Deliver media and streaming content",
+            "pt-br": "Entregar mídia e conteúdo de streaming"
+          },
+          "segment": {
+            "en": "deliver-media-and-streaming",
+            "pt-br": "entregar-midia-e-streaming"
+          },
+          "items": [
+            {
+              "page": "docs_arch_live_streaming_delivery",
+              "kind": "architecture"
+            }
+          ]
         }
       ]
     }
diff --git a/src/util/machineIndex.ts b/src/util/machineIndex.ts
index ac7dd30654..32238db4f6 100644
--- a/src/util/machineIndex.ts
+++ b/src/util/machineIndex.ts
@@ -88,6 +88,8 @@ function reachableTrees(data: NavData): string[] {
 	if (data.topnav) {
 		for (const column of [...data.topnav.products, ...data.topnav.devtools]) visit(column.items);
 		if (!listed.includes(data.topnav.guides)) listed.push(data.topnav.guides);
+		const hub = data.topnav.devtoolsHome;
+		if (hub && !listed.includes(hub)) listed.push(hub);
 	}
 
 	// A page's owner is the tree that lists it as a plain row; a linkOnly row is a cross-link.