create-sdd-ai-stack 0.1.17

package/stacks/git.md

@@ -0,0 +1,51 @@
+# 🌿 GIT
+
+## 🚨 Regras não-negociáveis
+
+1. **Identidade fixa:** `Marcelino Sandroni <marcelino.sandroni@gmail.com>`. Configure uma vez:
+   ```bash
+   git config user.name  "Marcelino Sandroni"
+   git config user.email "marcelino.sandroni@gmail.com"
+   ```
+2. **Conventional Commits obrigatório:**
+   ```
+   <tipo>(<escopo>): descrição curta imperativa. (Agent: <Ferramenta> - <Modelo>)
+   ```
+   Tipos: `feat`, `fix`, `refactor`, `test`, `docs`, `chore`, `perf`, `style`, `build`, `ci`.
+3. **Escopo = a área** (`feat(chat)`, `fix(auth)`, `docs(sdd)`). Sem escopo, `feat:`.
+4. **Uma task = um commit.** Não commite task de outra junto.
+5. **Gitflow simplificado:** `main` = produção, `feat/`, `fix/`, `chore/` para trabalho. PR vai para `main`.
+6. **Nunca commite:** `node_modules`, `.env`, `.env.local`, `.next`, build output, `*.log`, credencial.
+7. **Antes de commitar:** `git status`, `git diff`, `git log --oneline -10`. Stage só o que é da task.
+8. **Sem `--force`, sem `git config` hack, sem amend de commit já pushado.**
+
+## 🏷️ Versionamento (SemVer + Tags)
+
+- `MAJOR.MINOR.PATCH` — `feat`→MINOR, `fix`→PATCH, breaking→MAJOR.
+- Tag no merge da fase: `git tag v1.2.0` (anotada).
+- Fechou fase? Arquive em `specs/history/phases/`, gere tag, um commit de arquivamento.
+
+## 🧭 Fluxo diário
+
+```bash
+git checkout -b feat/billing          # 1. branch
+# ... codar e testar ...
+git add -A                             # 2. stage (só da task)
+git commit -m "feat(billing): cria slice de assinatura. (Agent: Cursor - Claude)"
+git push -u origin feat/billing        # 3. push
+# 4. abrir PR contra main
+```
+
+## 🔁 Atualizando este core (submodule)
+
+```bash
+git submodule update --remote --merge SDD   # puxa regras mais novas
+git add SDD && git commit -m "chore(sdd): atualiza core para vX.Y.Z"
+```
+
+## 🚫 Nunca
+
+- Commitar com mensagem vaga ("update", "fix", ".").
+- `git add -A` com lixo não relacionado na working tree.
+- Commitar direto na `main` em trabalho em andamento.
+- Reescrever histórico público.

package/stacks/shadcn.md

@@ -0,0 +1,52 @@
+# 🧩 SHADCN/UI
+
+> **Biblioteca de UI OFICIAL do template.** Componentes vão para `src/shared/ui/`.
+
+## 🚨 Regras não-negociáveis
+
+1. **shadcn/ui é a única lib de UI.** Proibido MUI, AntD, Bootstrap, Chakra, styled-components.
+2. **Componente novo entra na pasta, não no registry.** `npx shadcn@latest add <comp>` e o arquivo nasce em `src/shared/ui/`.
+3. **Depois de adicionar, EDITE o componente local.** Ele é seu agora. Alinhe com [../DESIGN.md](../DESIGN.md) (tokens, raio, borda).
+4. **Todo componente novo precisa de:** `aria-*` nos que têm função, foco visível, e estado `disabled` real (não só visual).
+5. **Variante com `cva` (class-variance-authority).** Nunca `if/else` de className.
+6. **Ícone:** `lucide-react`. Tamanho default 16, stroke 2. Nada de SVG colado na mão.
+
+## 🧪 Fluxo para adicionar componente
+
+```bash
+# 1. Instala e cria o arquivo
+npx shadcn@latest add dialog
+
+# 2. Verifique onde caiu: src/shared/ui/dialog.tsx
+
+# 3. Edite o arquivo: troque as classes pelo DESIGN (tokens, rounded, border)
+```
+
+## 🎨 Sobreposição com o DESIGN
+
+O shadcn traz um theme genérico. **O DESIGN.md manda.** Checklist ao tocar um componente:
+
+- [ ] Cor de fundo/borda/text usando tokens do `globals.css` (`bg-surface-container`, `border-border-prominent`)
+- [ ] Raio: `rounded-md` (0.375rem) em input/botão, `rounded-lg` (0.5rem) em card
+- [ ] Borda hairline `1px`, **sem sombra pesada**
+- [ ] Botão primário: `bg-primary text-on-primary hover:bg-primary/90` com glow lime sutil
+- [ ] Foco: `focus-visible:ring-2 focus-visible:ring-primary`
+
+## 📂 Onde cada coisa mora
+
+| Tipo | Caminho |
+| --- | --- |
+| Primitive genérica (Button, Dialog, Input) | `src/shared/ui/` |
+| Componente de domínio (UserCard, InvoiceRow) | `src/features/<x>/ui/` |
+| Composição (form + action + validação) | `src/features/<x>/ui/` |
+| Hook de UI (useToast, useMediaQuery) | `src/shared/hooks/` |
+
+## 🚫 Anti-padrões
+
+| ❌ Não faça | ✅ Faça |
+| --- | --- |
+| `<div onClick>` como botão | `<button type="button">` |
+| Wrapper de `Dialog` com estado próprio espalhado | Estado no pai, ou `useActionState` |
+| Criar componente que é 90% igual ao do shadcn | Editar o existente |
+| Props customizadas com 8 booleanos | `variant` + `size` com cva |
+| Acessibilidade ignorada em modal/drawer | `DialogTitle`, `DialogDescription`, foco preso |

package/stacks/tailwind.md

@@ -0,0 +1,65 @@
+# 🎨 TAILWIND CSS (v4)
+
+> Stack de estilo do template. **Dark mode only.** Tokens completos em [../DESIGN.md](../DESIGN.md).
+
+## 🚨 Regras não-negociáveis
+
+1. **Nunca escreva cor/rgba literal em classe.** Use os tokens: `bg-surface`, `text-text-secondary`, `border-border-subtle`.
+2. **Nunca use `style={{}}` inline** (exceto variável de valor dinâmico do design).
+3. **Tokens vivem em `src/app/globals.css` no bloco `@theme`.** Para mudar o design, muda **lá** — nunca em componente.
+4. **Mobile-first.** Estilo base é mobile; breakpoint é o upgrade (`sm: md: lg:`).
+5. **Grid de 12 colunas, max-width 1320px, gutter 1.5rem/2rem.** Não inventa outro grid.
+6. **`<Image>` sempre com `sizes` explícito** em grid/lista (evita baixar imagem de 4k no celular).
+7. **Ordem das classes = mobile → estado → breakpoint.** Ajuda a leitura e o diff.
+
+## 🧱 Classes de componente (via `@layer components`)
+
+O template define os primitivos. **Não repita a classe longa em 40 lugares** — use a variante.
+
+```tsx
+<a className="btn-primary">Salvar</a>
+<a className="btn-secondary">Cancelar</a>
+<span className="chip">React 19</span>          // chip inativo
+<span className="chip chip-active">Ativo</span> // chip ativo (lime)
+<div className="card">…</div>                   // card padrão
+<div className="card-metric">…</div>            // KPI card
+<label className="field-label">E-mail</label>
+<input className="field" />
+```
+
+## 🎯 Padrões de uso
+
+```tsx
+// ✅ grid responsivo com 12 colunas no desktop
+<div className="mx-auto w-full max-w-[1320px] px-6 lg:px-8">
+  <div className="grid grid-cols-4 gap-4 md:grid-cols-8 lg:grid-cols-12">
+    <div className="col-span-4 lg:col-span-6">…</div>
+  </div>
+</div>
+
+// ✅ glassmorphism (nav/status bar)
+<header className="sticky top-0 z-50 border-b border-border-subtle bg-surface-raised/80 backdrop-blur-xl">
+
+// ✅ glow lime no KPI
+<div className="card-metric hover:shadow-[0_0_24px_var(--kpi-accent-glow)]">
+
+// ❌ proibido
+<div style={{ background: "#BAF336" }} />
+<div className="bg-[#BAF336] text-[#0A0D12]" />
+```
+
+## 🚫 Proibido
+
+| Padrão | Por quê |
+| --- | --- |
+| Cor literal (`#hex`, `rgb()`) em classe | Quebra o tema e o dark mode |
+| `!important` | Esconde erro de especificidade |
+| Classes arbitrárias sem necessidade | Cria CSS não rastreável |
+| `tailwind.config.js` quando Tailwind v4 usa `@theme` no CSS | Duas fontes de verdade |
+| Animações custom sem `prefers-reduced-motion` | Acessibilidade |
+
+## ✅ Acessibilidade (obrigatório)
+
+- Foco **sempre visível**: use o token `focus-visible:ring-primary` no padrão de input/botão.
+- Alvo de toque mínimo **44px** em mobile.
+- Contraste: texto secundário (`#94A3B8`) sobre surface (`#11151C`) passa; texto muted (`#56657A`) só em detalhe decorativo.

package/stacks/testing.md

@@ -0,0 +1,74 @@
+# 🧪 TESTES
+
+> Meta: **100% de cobertura nos fluxos críticos** (use cases, actions, mutations). UI visual tem E2E obrigatório.
+
+## 📐 Pirâmide do projeto
+
+| Tipo | Ferramenta | Onde | Quantos |
+| --- | --- | --- | --- |
+| **Unit** | Vitest | `tests/unit` | use cases, helpers puros, validações |
+| **Integração** | Vitest + DB mock | `tests/integration` | repositórios, actions, server components |
+| **E2E** | Playwright | `tests/e2e` | fluxo real do usuário ponta a ponta |
+
+## 🚨 Regras não-negociáveis
+
+1. **Toda task precisa de teste.** Sem teste = task não está pronta. ([../specs/PLAN.md](../specs/PLAN.md) e Definition of Done)
+2. **Mokar dados, nunca chamar API de terceiro real** em teste unitário/integração. E2E pode usar sandbox.
+3. **Nome do teste descreve comportamento**, não implementação: `deve_negar_acesso_quando_usuario_bloqueado` > `teste2`.
+4. **Teste de UI = E2E com Playwright.** Não teste componente por snapshot (snapshot é mentira).
+5. **Prova de vida obrigatória:** pra marcar task `[x]`, cole o output verde do terminal na resposta.
+6. **E2E precisa de evidência visual:** screenshot ou trace anexado.
+
+## 🧩 Exemplo — unit de use case
+
+```ts
+// tests/unit/features/billing/create-subscription.test.ts
+import { describe, it, expect, vi } from "vitest";
+import { CreateSubscriptionUseCase } from "@/features/billing/application/create-subscription";
+
+describe("CreateSubscriptionUseCase", () => {
+  it("deve_negar_acesso_quando_usuario_bloqueado", async () => {
+    const repo = { create: vi.fn() };
+    const useCase = new CreateSubscriptionUseCase(repo as never);
+    await expect(
+      useCase.execute({ userId: "u1", planId: "p1", blocked: true }),
+    ).rejects.toThrow("Acesso negado");
+    expect(repo.create).not.toHaveBeenCalled();
+  });
+});
+```
+
+## 🧩 Exemplo — E2E Playwright
+
+```ts
+// tests/e2e/billing.spec.ts
+import { test, expect } from "@playwright/test";
+
+test("usuário assina um plano e vê o status", async ({ page }) => {
+  await page.goto("/billing");
+  await page.getByRole("button", { name: "Assinar Pro" }).click();
+  await expect(page.getByTestId("subscription-status")).toHaveText("Ativo");
+  await page.screenshot({ path: "tests/e2e/screenshots/billing-ativo.png" });
+});
+```
+
+## ▶️ Comandos
+
+```bash
+cd client   # ou a raiz, dependendo do template
+npm run test:unit        # Vitest watch
+npm run test:unit -- --run   # uma passada
+npm run test:coverage    # cobertura
+npm run test:e2e         # Playwright
+npm run test:e2e:ui      # Playwright com UI
+```
+
+## 🚫 Anti-padrões
+
+| ❌ | ✅ |
+| --- | --- |
+| Testar implementação (mock demais) | Testar comportamento observável |
+| Snapshot de componente inteiro | E2E com `getByRole` |
+| sleep fixo (`waitForTimeout`) | `await expect(...).toBeVisible()` (auto-wait) |
+| `test.skip` silencioso | Issue registrada |
+| Sem mock de terceiro (gastando $$) | MSW / fake local |

package/stacks/typescript.md

@@ -0,0 +1,58 @@
+# 🔷 TYPESCRIPT
+
+## 🚨 Regras não-negociáveis
+
+1. **`strict: true` é obrigatório.** Sem exceção. `tsconfig.json` do template já vem assim.
+2. **`any` é PROIBIDO** no código de produção. Se você não dá, use `unknown` + narrowing.
+3. **Interface (`I*`) mora junto da implementação**, dentro do slice. Nada de pasta global de tipos.
+4. **`type` para união/interseção, `interface` para contrato de classe.** Consistência acima de preferência.
+5. **Funções que recebem `unknown` da fronteira validam com Zod dentro da mesma função.**
+6. **Retorno sempre explícito** em função exportada quando não for óbvio.
+7. **`as` só com justificativa em comentário.** Se precisa de `as`, o modelo está errado.
+
+## 🧩 Padrões
+
+```ts
+// ✅ Contrato de domínio (dentro de features/x/domain/)
+export interface IChatRepository {
+  save(userId: string, text: string): Promise<ChatMessage>;
+}
+
+// ✅ Validação de fronteira
+import { z } from "zod";
+const CreateUserSchema = z.object({
+  email: z.email(),
+  name: z.string().min(1).max(120),
+});
+export type CreateUserInput = z.infer<typeof CreateUserSchema>;
+```
+
+## 🚫 Proibido
+
+| Padrão | Por quê | Use em vez disso |
+| --- | --- | --- |
+| `any` | some o type-check | `unknown` + guard |
+| `enum` | complica serialização e narrow | `as const` + uniões literais |
+| `!` non-null assertion | estouro em runtime | optional chaining + early return |
+| `as unknown as T` | compilador não entendeu | reescreva o tipo |
+| `namespace` | colisões + bundle | `module` ou escopo de pasta |
+| `function` em vez de arrow | ruído | arrow function (exceto método de classe) |
+| `@ts-ignore` | debt invisível | `@ts-expect-error` + comentário |
+
+## 📐 Configuração mínima do template
+
+```jsonc
+// tsconfig.json
+{
+  "compilerOptions": {
+    "strict": true,
+    "noUncheckedIndexedAccess": true,  // index access seguro
+    "noImplicitOverride": true,        // todo override explícito
+    "noFallthroughCasesInSwitch": true,
+    "verbatimModuleSyntax": true,      // type-only import obrigatório
+    "paths": { "@/*": ["./src/*"] }
+  }
+}
+```
+
+> `verbatimModuleSyntax` obriga `import type { X } from ...`. Isso é de propósito: mantém o bundle limpo.

package/template/next/.env.example

@@ -0,0 +1,4 @@
+# Nunca commite este arquivo. Use .env.local (gitignored).
+NODE_ENV=development
+DATABASE_URL=
+AUTH_SECRET=

package/template/next/README.md

@@ -0,0 +1,47 @@
+# 🚀 [NOME DO APP]
+
+> Projeto gerado com **SDD AI Stack** — `npx create-sdd-ai-stack`.
+> As regras de desenvolvimento moram em [`SDD/`](./SDD). **Leia [`SDD/AGENTS.md`](./SDD/AGENTS.md) antes de codar.**
+
+## Stack
+
+- **Next.js 16** (App Router, React 19.2, Turbopack, Cache Components)
+- **TypeScript** strict + path alias `@/*`
+- **Tailwind CSS v4** (tokens no `src/app/globals.css`)
+- **Biome** (lint + format)
+- **Vitest** (unit/integr) + **Playwright** (E2E)
+
+## Comandos
+
+```bash
+npm run dev         # http://localhost:3000
+npm run build       # build de produção
+npm run typecheck   # tsc --noEmit
+npm run lint        # biome check
+npm run test:unit   # vitest (watch)
+npm run test:coverage
+npm run test:e2e    # playwright
+```
+
+## Regras do projeto
+
+Todas as regras vivem em `SDD/`:
+
+| Documento | Escopo |
+| --- | --- |
+| [`SDD/AGENTS.md`](./SDD/AGENTS.md) | Leis do agente + fluxo de entrega |
+| [`SDD/NEXT.md`](./SDD/NEXT.md) | Next.js 16 (padrão) |
+| [`SDD/DESIGN.md`](./SDD/DESIGN.md) | Design system |
+| [`SDD/NODE.md`](./SDD/NODE.md) | Node.js (workers, cron) |
+| [`SDD/REACT.md`](./SDD/REACT.md) | React |
+| [`SDD/ARCHITECTURE.md`](./SDD/ARCHITECTURE.md) | Arquitetura global |
+| [`SDD/stacks/`](./SDD/stacks) | TypeScript, Tailwind, shadcn, testes, DB, IA, Git, CI |
+| [`SDD/specs/PLAN.md`](./SDD/specs/PLAN.md) | Tarefa atual |
+
+## Fluxo obrigatório
+
+1. Pegue a próxima task em `SDD/specs/PLAN.md`
+2. Implemente **um passo** por vez
+3. Rode `typecheck` + `test:unit` + `test:e2e`
+4. Cole a evidência verde no terminal
+5. Marque `[x]` no PLAN e commite

package/template/next/biome.json

@@ -0,0 +1,36 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.5.14/schema.json",
+  "vcs": { "enabled": true, "clientKind": "git", "useIgnoreFile": true },
+  "files": {
+    "includes": ["**", "!**/node_modules", "!**/.next", "!**/SDD", "!**/coverage"]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 90
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "preset": "recommended",
+      "correctness": {
+        "noUnusedVariables": "error"
+      },
+      "suspicious": {
+        "noExplicitAny": "error"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double",
+      "semicolons": "always"
+    }
+  },
+  "css": {
+    "parser": {
+      "tailwindDirectives": true
+    }
+  }
+}

package/template/next/gitignore

@@ -0,0 +1,32 @@
+node_modules/
+.next/
+out/
+build/
+dist/
+coverage/
+test-results/
+playwright-report/
+blob-report/
+.playwright/
+
+.env
+.env.local
+.env*.local
+!.env.example
+
+*.log
+npm-debug.log*
+yarn-error.log*
+
+.DS_Store
+Thumbs.db
+
+.vscode/*
+!.vscode/extensions.json
+.idea/
+
+.vercel
+*.tsbuildinfo
+next-env.d.ts
+
+SDD/node_modules/

package/template/next/next.config.ts

@@ -0,0 +1,12 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  // PPR + "use cache" + cacheLife. Ver SDD/NEXT.md §6
+  cacheComponents: true,
+  reactCompiler: true,
+  images: {
+    remotePatterns: [{ protocol: "https", hostname: "**" }],
+  },
+};
+
+export default nextConfig;

package/template/next/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "sdd-ai-stack-next",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "engines": {
+    "node": ">=20.9.0"
+  },
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "biome check .",
+    "lint:fix": "biome check --write .",
+    "format": "biome format --write .",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:unit": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui"
+  },
+  "dependencies": {
+    "next": "^16.3.7",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "server-only": "^0.0.1",
+    "zod": "^4.6.5",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.3.1",
+    "lucide-react": "^0.469.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.0.0",
+    "@playwright/test": "^1.63.0",
+    "@tailwindcss/postcss": "^4.3.3",
+    "@types/node": "^22.10.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitest/coverage-v8": "^5.0.2",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^7.0.2",
+    "vitest": "^5.0.2"
+  }
+}

package/template/next/playwright.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./tests/e2e",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  reporter: [["list"], ["html", { open: "never" }]],
+  use: {
+    baseURL: "http://localhost:3000",
+    trace: "on-first-retry",
+    screenshot: "only-on-failure",
+  },
+  projects: [{ name: "chromium", use: { ...devices["Desktop Chrome"] } }],
+  webServer: {
+    command: "npm run dev",
+    url: "http://localhost:3000",
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000,
+  },
+});

package/template/next/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

package/template/next/src/app/(app)/app/page.tsx

@@ -0,0 +1,18 @@
+export default function AppPage() {
+  return (
+    <main className="container-grid py-16">
+      <h1 className="text-headline-lg">Área logada</h1>
+      <p className="mt-3 text-body-md text-text-secondary">
+        Crie aqui a primeira feature. Copie a estrutura de{" "}
+        <code className="text-code-inline text-primary">src/features/example</code>.
+      </p>
+
+      <div className="mt-8 flex flex-wrap gap-2">
+        <span className="chip chip-active">Next.js 16</span>
+        <span className="chip">React 19</span>
+        <span className="chip">TypeScript</span>
+        <span className="chip">Tailwind v4</span>
+      </div>
+    </main>
+  );
+}

package/template/next/src/app/(app)/error.tsx

@@ -0,0 +1,30 @@
+"use client";
+import { AlertTriangle } from "lucide-react";
+
+export default function ErrorPage({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <main className="container-grid flex min-h-screen flex-col items-start justify-center py-24">
+      <span className="chip" style={{ borderColor: "var(--color-error)" }}>
+        <AlertTriangle size={12} />
+        Erro
+      </span>
+      <h1 className="mt-6 text-headline-lg">Algo quebrou.</h1>
+      <p className="mt-3 max-w-lg text-body-md text-text-secondary">
+        O erro foi registrado. Tente novamente — se persistir, o digest abaixo identifica
+        a ocorrência.
+      </p>
+      {error.digest ? (
+        <p className="mt-4 text-code-inline text-text-muted">digest: {error.digest}</p>
+      ) : null}
+      <button type="button" onClick={reset} className="btn-primary mt-8">
+        Tentar novamente
+      </button>
+    </main>
+  );
+}

package/template/next/src/app/(app)/layout.tsx

@@ -0,0 +1,25 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Home",
+  description: "Área logada da aplicação.",
+};
+
+export default function AppLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <div className="min-h-screen">
+      {/* Nav rail: glassmorphism. Ver SDD/DESIGN.md §3 */}
+      <header className="sticky top-0 z-50 border-b border-border-subtle bg-surface-raised/80 backdrop-blur-xl">
+        <div className="container-grid flex h-14 items-center justify-between">
+          <span className="text-headline-sm font-semibold">[APP]</span>
+          <nav className="flex items-center gap-1">
+            <a href="/app" className="btn-ghost">
+              App
+            </a>
+          </nav>
+        </div>
+      </header>
+      {children}
+    </div>
+  );
+}

package/template/next/src/app/(marketing)/page.tsx

@@ -0,0 +1,73 @@
+export default function HomePage() {
+  return (
+    <main className="container-grid py-16 lg:py-24">
+      <p className="label-mono">Executive Engineering</p>
+
+      <h1 className="mt-4 text-display-hero-mobile font-extrabold tracking-tight text-balance lg:text-display-hero">
+        [HERO HEADLINE AQUI]
+      </h1>
+
+      <p className="mt-6 max-w-2xl text-body-lg text-text-secondary">
+        [Subtítulo de uma linha explicando o impacto operacional e financeiro do produto.]
+      </p>
+
+      <div className="mt-10 flex flex-wrap gap-3">
+        <a href="#principal" className="btn-primary">
+          Ação Executiva
+        </a>
+        <a href="#detalhe" className="btn-secondary">
+          Deep Dive
+        </a>
+      </div>
+
+      <section
+        id="principal"
+        className="mt-24 grid grid-cols-4 gap-4 md:grid-cols-8 lg:mt-36 lg:grid-cols-12"
+      >
+        <KpiCard label="Economia anual" value="R$ 24M" sub="12 serviços migrados" />
+        <KpiCard label="Throughput" value="100M/dia" sub="msgs processadas" />
+        <KpiCard label="Latência p99" value="42ms" sub="região São Paulo" />
+        <KpiCard label="Assets sob custódia" value="R$ 100bi" sub="auditoria ok" />
+      </section>
+
+      <section id="detalhe" className="mt-20">
+        <p className="label-mono">Stack</p>
+        <h2 className="mt-3 text-headline-md">Tecnologia em produção</h2>
+        <div className="mt-6 flex flex-wrap gap-2">
+          {STACK.map((tech) => (
+            <span key={tech} className="chip">
+              {tech}
+            </span>
+          ))}
+        </div>
+      </section>
+    </main>
+  );
+}
+
+const STACK = [
+  "Next.js 16",
+  "React 19",
+  "TypeScript",
+  "Tailwind v4",
+  "PostgreSQL",
+  "Prisma",
+  "Zod",
+  "Vitest",
+  "Playwright",
+];
+
+function KpiCard({ label, value, sub }: { label: string; value: string; sub: string }) {
+  return (
+    <div className="card-metric col-span-4 md:col-span-4 lg:col-span-3">
+      <p className="label-mono flex items-center gap-2">
+        <span className="status-dot" />
+        {label}
+      </p>
+      <p className="mt-3 text-metric-stat-mobile font-bold tracking-tight text-primary lg:text-metric-stat">
+        {value}
+      </p>
+      <p className="mt-2 text-body-sm text-text-secondary">{sub}</p>
+    </div>
+  );
+}