feat(nav): reshape Getting Started around Agent Setup, Use Cases and Support

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} />

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

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

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/
 ---

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:

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/
 ---

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:

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' },
 			],
 		},
 	},

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')),

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' },
 			],
 		},
 	},

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;

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',
 				},
 			],

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',
 				},
 			],

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) ?? ''),