xertica-ui 2.8.0 → 2.9.7

package/CHANGELOG.md

@@ -11,6 +11,114 @@ Versioning follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
+## [2.9.7] — 2026-07-14
+
+### Fixed
+
+- **Suíte de testes com exceção não tratada bloqueando `npm publish`** — o pacote de terceiros `input-otp` agenda três `setTimeout` internos (0ms/10ms/50ms) em um `useEffect` sem função de limpeza no unmount. Ao rodar a suíte completa, o cleanup automático do Testing Library desmontava o `InputOTP` entre um teste e outro sem cancelar esses timers, que disparavam mais tarde — já fora do ambiente jsdom daquele arquivo — lançando `ReferenceError: window is not defined` como exceção não tratada. Isso fazia `vitest run` sair com erro mesmo com todos os 358 testes passando, derrubando a etapa `test:unit` do `prepublishOnly` e, com isso, qualquer tentativa de `npm publish`. Corrigido em `components/ui/input-otp/input-otp.test.tsx` usando `vi.useFakeTimers()`/`vi.useRealTimers()` ao redor de cada teste, impedindo que os timers da lib vazem para fora do ciclo de vida do teste.
+- **`npm publish` alertava sobre correção automática do campo `bin`** — `"bin": "./dist/cli.js"` (string, com prefixo `./`) era normalizado pelo próprio npm no momento do publish, gerando o aviso `npm auto-corrected some errors in your package.json`. Corrigido escrevendo `bin` já na forma canônica esperada (`{ "xertica-ui": "dist/cli.js" }`), sem mudança de comportamento — apenas elimina o aviso.
+
+---
+
+## [2.9.6] — 2026-07-14
+
+### Added
+
+- **CLI `init` pergunta o tipo de projeto antes de tudo** — novo primeiro prompt `O que você deseja criar?` com duas opções: `Full system` (o fluxo completo existente, inalterado: auth, sidebar, páginas, i18n) e `Web page` (um scaffold mínimo com apenas a landing page de marketing). Escolhendo `Web page`, o fluxo se reduz a 3 prompts — idiomas (multiselect), tema (select) e instalação de dependências (confirm) — e o projeto já sai pronto, sem nenhuma outra configuração.
+- **Novo scaffold mínimo para "Web page"** (`initPageProject` em `bin/cli.ts`) — gera um `App.tsx` que renderiza `LandingPage` (via novo `generateLandingAppTsx` em `bin/language-config.ts`) diretamente dentro de `XerticaProvider`, sem `Router`, `QueryClientProvider` ou `AuthProvider`. Não cria `AuthContext.tsx`, `AuthGuard.tsx`, `AppLayout.tsx`, `src/shared/` nem `src/features/` — apenas `src/app/App.tsx`, `src/pages/LandingPage.tsx`, i18n/locales e tokens de tema. Também omite `CLAUDE.md`/`guidelines/` (documentam a arquitetura FSD de auth, inexistente neste scaffold) e `.env.example` (chaves usadas só pelo assistente/mapa).
+- **`src/pages/LandingPage.tsx` do scaffold "Web page" ganha conteúdo de demonstração real** — em vez de um re-export de `xertica-ui/pages`, o template (`templates/src/pages/LandingPage.tsx`) agora traz a composição completa da landing page (Hero, cards, feature rows, "how it works", compliance/stats, CTA, footer) montada localmente a partir de `xertica-ui/blocks`/`xertica-ui/brand`, igual ao padrão já usado pelos demais templates (`HomeContent.tsx` etc.) — o usuário recebe algo editável como base, não uma caixa-preta importada da lib.
+- **`.xertica.json` ganha o campo `projectType: 'page' | 'system'`** — projetos escaffoldados antes desta versão não têm o campo e são tratados como `'system'` em todos os pontos que o leem, preservando compatibilidade.
+
+### Changed
+
+- **CLI `update` adaptado para os dois tipos de projeto** — em projetos `page`, o menu principal omite a opção `Assistant` (sem conceito de assistente nesse scaffold); as opções `Languages` e `Dark Mode` regeneram `App.tsx` via `generateLandingAppTsx` em vez de `generateAppTsx`; e `Project files` mostra uma lista reduzida de 2 itens (`App shell + landing page`, `Root config files`) em vez dos 5 itens do fluxo completo, evitando tentar atualizar `AppLayout.tsx`/`AuthGuard.tsx`/`src/shared/`/`src/features/`, que não existem nesse tipo de projeto.
+- **`generateAppTsx` refatorado** — a lógica de montagem da prop `availableLanguages` foi extraída para um helper interno compartilhado (`buildAvailableLanguagesProp`), reaproveitado agora também pelo novo `generateLandingAppTsx`.
+
+---
+
+## [2.9.5] — 2026-07-14
+
+### Added
+
+- **Novo isotipo `IsotypeTwist`** (`components/brand/isotype`) — quinta marca da série "isotipos": duas formas angulares sobrepostas, seguindo o mesmo mecanismo do `IsotypeFrames` (ambas 100% opacas, interseção resolvida via `mix-blend-mode: multiply` na forma da frente, com `isolate` na raiz), com duas variantes de cor registradas em `ISOTYPE_TWIST_VARIANTS`: `'magenta-blue'` (rosa + azul) e `'blue-red'` (azul + vermelho). Substitui o `IsotypeDiagonal` no painel esquerdo do `AuthPageShell` (`leftPanel="isotype"`, usado na página de login), agora renderizado com a variante `'magenta-blue'`.
+- **`SectionHeading` ganha uma barra de destaque opcional** — nova prop `accentColor` (mesma convenção `BlockColor`/`colorTokens` local dos demais blocos) renderiza uma pequena barra colorida sob o título, aproximando o padrão da referência de mockup. É opcional: sem `accentColor`, o título continua exatamente como antes.
+
+### Changed
+
+- **`SectionHeading` simplificado** — removidos o numeral fantasma (`index`) e o rótulo eyebrow, mantendo apenas o título (com barra de destaque e descrição opcionais), conforme a referência de mockup. As props `index`/`eyebrow` saem da API do componente; as chaves de tradução `ecosystem.eyebrow`, `useCases.eyebrow` e `methodology.eyebrow` (agora não usadas) foram removidas dos 6 arquivos `landing.json`. Aplicado às 3 seções que já usam `SectionHeading` na `LandingPage` (Ecossistema, Casos de uso, Metodologia).
+- **`ServiceCardGrid`/`ServiceCard` com `icon` opcional** — o chip de ícone só renderiza quando `icon` é informado, permitindo cards sem ícone (título, descrição e checklist/bullets/CTA), conforme a referência de mockup. Aplicado à seção "Casos de uso" da `LandingPage`, que passa a renderizar os 3 cards sem ícone.
+
+- **`AuthPageShell` (`leftPanel="isotype"`) com fundos invertidos** — o painel do isotipo na página de login passa a usar `bg-muted` (mais escuro) e o painel do formulário à direita passa a usar `bg-card` (Marfim, `#FFFEF8` no tema xertica, mais claro), invertendo a relação de claridade anterior entre os dois lados.
+- **`ForgotPasswordPage`, `ResetPasswordPage` e `VerifyEmailPage` trocam a foto de fundo pelo painel de isotipo** — as 3 telas usavam `AuthPageShell` com `imageSrc`/foto de herói e um overlay de gradiente que, no tema xertica (token de gradiente plano em `#1E1E1E`), ficava com o painel esquerdo escuro. Passam a usar `leftPanel="isotype"`, a mesma solução (agora clara) já aplicada à `LoginPage`, unificando a aparência das 4 telas de autenticação. Espelhado em `templates/src/features/auth/ui/{ForgotPassword,ResetPassword,VerifyEmail}Content.tsx`.
+- **`SectionHeading` perde a linha divisória superior** — removida a borda `border-t`/`pt-6` que antecedia o título (Ecossistema, Casos de uso, Metodologia na `LandingPage`); o cabeçalho agora fica sem regra visual antes do título.
+- **`CTASection` volta a ter fundo escuro** — troca o `bg-card` plano por `bg-sidebar`/`border-sidebar-border` (mesma superfície escura já usada na seção de metodologia desta página) e o texto passa a `text-sidebar-foreground`/`text-sidebar-foreground/70`, sem gradiente e sem cor hardcoded. Os botões continuam com as variantes naturais (`default`/`outline`), que já contrastam corretamente sobre `bg-sidebar`.
+- **Seção de compliance/stats da `LandingPage` reorganizada** — `ComplianceBadgeRow` (badges) e `StatBand` (números) agora ficam contidos em um único card (`border`, `bg-card`, `rounded-2xl`) com um divisor entre os dois grupos, em vez de flutuarem soltos direto sobre o fundo da página. `ComplianceBadgeRow` passa de um `flex flex-wrap` com gaps largos para um `grid grid-cols-2 sm:grid-cols-4`, alinhando os badges em colunas; o chip de ícone usa `bg-background` para manter contraste dentro do novo card.
+- **`IsotypeFrames` restrito a duas variantes de cor** — `IsotypeFrameVariantId` passa de 6 para apenas `'blue-magenta'` e `'blue-yellow'` (azul+rosa e azul+amarelo); `'green-red'`, `'green-blue'`, `'magenta-yellow'` e `'magenta-purple'` saem do registro. Único uso afetado fora do próprio componente: a seção "Onboarding" da `LandingPage`, que usava `magenta-yellow` e passa a usar `blue-yellow`. No par `blue-yellow`, o azul é o quadro de trás (posicionado mais para cima) e o amarelo o quadro da frente (posicionado mais para baixo).
+
+### Removed
+
+- **Removidas as seções de depoimento e de "pilares" da `LandingPage`** — o card de citação com `StatBand` (componentes/temas/downloads) e o grid de 4 colunas com ícones (tokens de tema, componentes acessíveis, blocos prontos, CLI de scaffolding) saem da página. As chaves de tradução `testimonial`, `pillars` e `stats.components`/`stats.themes`/`stats.downloads` (agora não usadas) foram removidas dos 6 arquivos `landing.json`.
+
+---
+
+## [2.9.4] — 2026-07-13
+
+### Added
+
+- **Novo bloco `HowItWorksSteps`** (`xertica-ui/blocks` → `marketing`) — variante horizontal do `EvidenceTimeline`: mesma badge numerada/colorida (`colorTokens` local, sem linha conectora), em grid responsivo (`grid-cols-1 sm:grid-cols-2 lg:grid-cols-4`) em vez de lista vertical com fio. Substitui o `EvidenceTimeline` na seção "Metodologia" da `LandingPage` (mesmos 4 itens/cópias); o `EvidenceTimeline` continua exportado e funcional para quem preferir o layout vertical.
+- **Novo bloco `TopAccentCards`** (`xertica-ui/blocks` → `marketing`) — par de cards com destaque de cor na borda superior (`border-t-4`), título, corpo e lista opcional de bullets simples, sem ícone/CTA. Segue a mesma convenção local de `BlockColor`/`colorTokens` dos demais blocos de marketing. Nova seção "framing" (propósito + problema) inserida na `LandingPage` logo após o `Hero`.
+
+### Changed
+
+- **`CTASection` perde o fundo em gradiente** — passa a usar um fundo plano `bg-card` com borda (`border border-border`), título em `text-foreground` e descrição em `text-muted-foreground`. Os botões `cta`/`secondaryCta` deixam de ter cor forçada (branco sobre gradiente) e usam as variantes naturais `default`/`outline`, que já contrastam corretamente sobre `bg-card`. Nenhum outro consumidor deste bloco existe fora da `LandingPage`.
+- **`PillBadge` vira um pill de verdade** — `rounded-[var(--radius)]` (6px) dá lugar a `rounded-full`, alinhando o componente ao próprio nome. Único consumidor é o eyebrow do `Hero`.
+- **Recolorida a seção "Metodologia" da `LandingPage`** — os 4 passos passam de azul/celeste/amarelo/coral para coral/celeste/azul/laranja (`chart-4`/`chart-2`/`chart-1`/`warning`), aproximando a sequência de cores da referência de mockup (vermelho/verde-azulado/roxo/laranja); como o tema `xertica` não tem roxo, `chart-1` (azul) substitui esse passo — é um desvio conhecido da referência.
+
+---
+
+## [2.9.3] — 2026-07-13
+
+### Changed
+
+- **Padronização das variantes de botão na landing page** — o botão de "iniciar sessão" (`MarketingNavbar`, desktop e mobile) e o `secondaryCta` do `Hero` passam a usar a variante `secondary` (preto). O `primaryCta` do `Hero` ("Começar agora") e o `cta` do `CTASection` continuam `default`/primary, reservado para as ações principais de conversão. A variante `outline` continua reservada para os cards (`ServiceCardGrid`). Mudança feita direto nos blocos, sem novas props — nenhum outro consumidor desses componentes existe fora da `LandingPage`.
+
+---
+
+## [2.9.2] — 2026-07-13
+
+### Changed
+
+- **Tema `xertica` deixa de ter gradientes** — `gradientStart`/`gradientEnd` (claro e escuro) passam a apontar todos para o mesmo Negro Xertica (`#1E1E1E`), então `--gradient-diagonal` resolve para um preenchimento sólido nesse tema. Afeta todo consumidor do token (banner do `CTASection` na `LandingPage`, `AuthPageShell`, etc.) sem exigir mudança em nenhum componente — os demais temas mantêm seus gradientes normalmente.
+
+---
+
+## [2.9.1] — 2026-07-13
+
+### Changed
+
+- **`StatBand` ganha alinhamento numérico e rótulo em estilo legenda** — o valor numérico agora usa `tabular-nums` (mesma técnica já usada no numeral fantasma do `SectionHeading`), e o rótulo passa de texto simples (`text-sm`) para o padrão de legenda já usado em `ServiceCardGrid` (`text-xs font-semibold uppercase tracking-wide`). Ritmo de grade mais generoso (`gap-y-8`→`gap-y-10`, `pl-8`→`pl-10` nos divisores).
+- **Espaçamento título→texto corrido padronizado em `SectionHeading`, `FeatureRow`, `CTASection` e `EvidenceTimeline`** — na referência de Swiss Design, títulos e o texto corrido que os segue precisam de um espaço deliberado entre si. O gap `mt-3`/`mt-4` (12–16px) usado nos blocos de marketing da `LandingPage` passa para `mt-6` (24px) nos três primeiros; `EvidenceTimeline`, por ser um relacionamento secundário mais denso dentro de uma lista, recebe um ajuste proporcional menor (`mt-1`→`mt-2`).
+
+---
+
+## [2.9.0] — 2026-07-13
+
+### Added
+
+- **`xertica-ui/blocks` ganha um novo namespace `marketing`** — `Hero`, `FeatureRow`, `CTASection`, `ComplianceBadgeRow`, `EvidenceTimeline`, `LogoCloud`, `MarketingFooter`, `MarketingNavbar`, `PillBadge`, `ServiceCardGrid` e `StatBand`, compondo a nova `LandingPage` (`xertica-ui/pages`, também registrada em `/landing` no template do CLI). Todos os visuais são placeholders orientados a tokens (isotipos da marca, SVGs inline), sem dependência de imagens externas.
+- **Nova marca `IsotypeDiagonal`** — quarta variação da família `isotype` (`xertica-ui/brand`), com corte diagonal fixo formando pontas triangulares nos encontros azul/verde e magenta/vermelho e na hipotenusa do amarelo, as três sobre a mesma diagonal do quadrado. `AuthPageShell` ganha a prop `leftPanel="isotype"` (painel de marca sobre `bg-sidebar`, alternativa ao par imagem+gradiente) e `gradientClassName` (override do gradiente por página); `LoginPage` e o `LoginContent` do template do CLI passam a usar `leftPanel="isotype"`, substituindo a foto de estoque (Unsplash) que usavam antes.
+- **`Button` variant `outline` ganha um token de contorno dedicado** — `--outline-border` / utilitário `border-outline-stroke` — com o mesmo mecanismo opcional (`BrandColors.outlineBorderColor`) já usado por `inputBorderColor`. Os 9 temas pré-existentes ficam pixel-idênticos (fallback para `--border`); o tema `xertica` passa a usar o mesmo Negro Xertica do contorno dos inputs.
+
+### Changed
+
+- **`Isotype` (grid plano) e `IsotypeMini` saem de rotação** nas páginas do próprio design system (Hero da `LandingPage`, cabeçalho da `HomeContent`) — continuam exportados e totalmente funcionais, apenas comentados no ponto de uso para fácil reativação futura. Só `IsotypeDiagonal` e `IsotypeFrames` seguem em uso ativo.
+
+### Fixed
+
+- **`Card` `variant="white"` podia renderizar texto ilegível no dark mode** — `text-card-foreground` (tema-reativo) era aplicado incondicionalmente, então um card forçado a branco herdava a cor de texto quase-branca do tema no dark mode. Agora `variant="white"` sempre pareia com `text-neutral-900` fixo, independente do tema/modo.
+
+---
+
 ## [2.8.0] — 2026-07-09
 
 ### Added

package/README.md

@@ -2,7 +2,7 @@
 
 > **Enterprise-grade React design system** built on Tailwind CSS v4, Radix UI, and Lucide Icons — with a robust AI-first documentation layer for precise LLM-driven composition and autonomous agent interaction.
 
-[![npm version](https://img.shields.io/badge/npm-2.7.0-blue)](https://www.npmjs.com/package/xertica-ui)
+[![npm version](https://img.shields.io/badge/npm-2.9.7-blue)](https://www.npmjs.com/package/xertica-ui)
 [![license](https://img.shields.io/badge/license-proprietary-red)](./LICENSE)
 
 ---

package/bin/cli.ts

@@ -17,6 +17,7 @@ import {
   syncLocaleFiles,
   generateI18nFile,
   generateAppTsx,
+  generateLandingAppTsx,
 } from './language-config';
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -31,6 +32,8 @@ interface XerticaConfig {
   hasAssistant: boolean;
   disableDarkMode?: boolean;
   themeId?: string;
+  /** Missing on projects scaffolded before this field existed — treat as 'system'. */
+  projectType?: 'page' | 'system';
 }
 
 async function readXerticaConfig(targetDir: string): Promise<XerticaConfig | null> {
@@ -286,6 +289,165 @@ export function TemplatePage() {
 `;
 }
 
+// ─────────────────────────────────────────────────────────────────────────────
+// package.json copy helper — shared by the 'system' and 'page' init flows.
+// ─────────────────────────────────────────────────────────────────────────────
+
+async function copyPackageJson(templatesDir: string, targetDir: string): Promise<void> {
+  const pkgTemplatePath = path.join(templatesDir, 'package.json');
+  if (await fs.pathExists(pkgTemplatePath)) {
+    const pkgContent = await fs.readJson(pkgTemplatePath);
+    const projectName = path.basename(targetDir) || 'my-xertica-app';
+    pkgContent.name = projectName.toLowerCase().replace(/[^a-z0-9-]/g, '-');
+    await fs.writeJson(path.join(targetDir, 'package.json'), pkgContent, { spaces: 2 });
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Minimal "web page" scaffold — just the marketing LandingPage, no auth shell.
+// ─────────────────────────────────────────────────────────────────────────────
+
+async function initPageProject(targetDir: string, templatesDir: string): Promise<void> {
+  const response = await prompts([
+    {
+      type: 'multiselect',
+      name: 'languages',
+      message: 'Which languages should the page support?',
+      instructions: false,
+      hint: 'Select at least 1. Single-language apps auto-hide the LanguageSelector.',
+      min: 1,
+      choices: SUPPORTED_LANGUAGES.map(l => ({
+        title: l.label,
+        value: l.code,
+        selected: true,
+      })),
+    },
+    {
+      type: 'select',
+      name: 'theme',
+      message: 'Select the default color theme for your project:',
+      choices: colorThemes.map(t => ({
+        title: t.name,
+        description: t.description,
+        value: t.id,
+      })),
+      initial: 0,
+    },
+    {
+      type: 'confirm',
+      name: 'install',
+      message: 'Install dependencies automatically?',
+      initial: true,
+    },
+  ]);
+
+  if (!response.languages || !response.theme) return;
+
+  const spinner = ora('Initializing project...').start();
+
+  try {
+    await fs.ensureDir(targetDir);
+
+    const selectedLanguages: string[] =
+      Array.isArray(response.languages) && response.languages.length > 0
+        ? response.languages
+        : DEFAULT_SELECTION;
+
+    // 1. Copy root config files (no CLAUDE.md/guidelines — those document the
+    //    FSD auth-app architecture, which this scaffold doesn't have; no
+    //    .env.example — its keys are only used by the assistant/maps pages).
+    const rootFilesToCopy = [
+      'index.html',
+      'vite.config.ts',
+      'tsconfig.json',
+      'tsconfig.node.json',
+      'postcss.config.js',
+      'vite-env.d.ts',
+      'eslint.config.js',
+      '.gitignore',
+      '.prettierrc',
+    ];
+
+    for (const file of rootFilesToCopy) {
+      const srcPath = path.join(templatesDir, file);
+      if (await fs.pathExists(srcPath)) {
+        await fs.copy(srcPath, path.join(targetDir, file));
+      }
+    }
+
+    // 2. Copy package.json
+    await copyPackageJson(templatesDir, targetDir);
+
+    // 3. Copy src/main.tsx (unchanged regardless of App.tsx variant)
+    await fs.copy(
+      path.join(templatesDir, 'src', 'main.tsx'),
+      path.join(targetDir, 'src', 'main.tsx')
+    );
+
+    // 4. Generate src/app/App.tsx rendering LandingPage directly
+    await fs.ensureDir(path.join(targetDir, 'src', 'app'));
+    await fs.writeFile(
+      path.join(targetDir, 'src', 'app', 'App.tsx'),
+      generateLandingAppTsx(selectedLanguages)
+    );
+
+    // 5. Generate i18n.ts + copy selected locales
+    await fs.writeFile(
+      path.join(targetDir, 'src', 'i18n.ts'),
+      generateI18nFile(selectedLanguages)
+    );
+    await syncLocaleFiles(templatesDir, targetDir, selectedLanguages, { pruneOthers: true });
+    await writeLanguagesConfig(targetDir, selectedLanguages);
+
+    // 6. Persist project config
+    await writeXerticaConfig(targetDir, {
+      hasAssistant: false,
+      disableDarkMode: false,
+      themeId: response.theme,
+      projectType: 'page',
+    });
+
+    // 7. Copy the LandingPage re-export shim
+    await fs.ensureDir(path.join(targetDir, 'src', 'pages'));
+    await fs.copy(
+      path.join(templatesDir, 'src', 'pages', 'LandingPage.tsx'),
+      path.join(targetDir, 'src', 'pages', 'LandingPage.tsx')
+    );
+
+    // 8. Generate theme tokens
+    const selectedTheme = colorThemes.find(t => t.id === response.theme) || colorThemes[0];
+    const tokensDir = path.join(targetDir, 'src', 'styles', 'xertica');
+    await fs.ensureDir(tokensDir);
+    await fs.copy(
+      path.join(templatesDir, 'src', 'styles', 'index.css'),
+      path.join(targetDir, 'src', 'styles', 'index.css')
+    );
+    await fs.writeFile(path.join(tokensDir, 'tokens.css'), generateTokensCss(selectedTheme));
+
+    spinner.succeed('Project initialized successfully!');
+
+    if (response.install) {
+      const installSpinner = ora('Installing dependencies...').start();
+      await execa('npm', ['install'], { cwd: targetDir });
+      installSpinner.succeed('Dependencies installed!');
+    }
+
+    console.log(chalk.green('\n✅ Done! Your Xertica UI landing page is ready.'));
+    console.log(chalk.cyan(`\n  cd ${path.relative(process.cwd(), targetDir) || '.'}`));
+    if (!response.install) {
+      console.log(chalk.cyan('  npm install'));
+    }
+    console.log(chalk.cyan('  npm run dev'));
+    console.log();
+    console.log(chalk.gray('  Edit the demo content in src/pages/LandingPage.tsx'));
+    console.log(chalk.gray('  Customize the theme in src/styles/xertica/tokens.css'));
+    console.log(chalk.gray('  To change the theme or languages later: npx xertica-ui update'));
+  } catch (error) {
+    spinner.fail('Failed to initialize project');
+    console.error(error);
+  }
+}
+
 const program = new Command();
 
 program
@@ -303,6 +465,32 @@ program
 
     console.log(chalk.blue(`🚀 Welcome to Xertica UI CLI! ${chalk.dim(`v${pkgJson.version}`)}`));
 
+    const { projectType } = await prompts({
+      type: 'select',
+      name: 'projectType',
+      message: 'What do you want to create?',
+      choices: [
+        {
+          title: 'Full system',
+          description: 'Auth, sidebar, pages, i18n — the current full scaffold',
+          value: 'system',
+        },
+        {
+          title: 'Web page',
+          description: 'Just the marketing landing page — pick a theme and languages, done',
+          value: 'page',
+        },
+      ],
+      initial: 0,
+    });
+
+    if (!projectType) return;
+
+    if (projectType === 'page') {
+      await initPageProject(targetDir, templatesDir);
+      return;
+    }
+
     const response = await prompts([
       {
         type: 'multiselect',
@@ -408,13 +596,7 @@ program
       }
 
       // 2. Copy package.json
-      const pkgTemplatePath = path.join(templatesDir, 'package.json');
-      if (await fs.pathExists(pkgTemplatePath)) {
-        const pkgContent = await fs.readJson(pkgTemplatePath);
-        const projectName = path.basename(targetDir) || 'my-xertica-app';
-        pkgContent.name = projectName.toLowerCase().replace(/[^a-z0-9-]/g, '-');
-        await fs.writeJson(path.join(targetDir, 'package.json'), pkgContent, { spaces: 2 });
-      }
+      await copyPackageJson(templatesDir, targetDir);
 
       // 3. Copy src/main.tsx
       await fs.copy(
@@ -458,7 +640,12 @@ program
       await writeLanguagesConfig(targetDir, selectedLanguages);
 
       // 6.5 Persist project feature flags (.xertica.json)
-      await writeXerticaConfig(targetDir, { hasAssistant, disableDarkMode, themeId: response.theme });
+      await writeXerticaConfig(targetDir, {
+        hasAssistant,
+        disableDarkMode,
+        themeId: response.theme,
+        projectType: 'system',
+      });
 
       // 6.4 Copy context
       await fs.ensureDir(path.join(targetDir, 'src', 'app', 'context'));
@@ -610,6 +797,8 @@ program
     console.log(chalk.blue(`🔧 Xertica UI CLI ${chalk.dim(`v${pkgJson.version}`)}`));
 
     const currentConfig = await readXerticaConfig(targetDir);
+    const projectType = currentConfig?.projectType ?? 'system';
+    const isPageProject = projectType === 'page';
 
     const { updateType } = await prompts({
       type: 'select',
@@ -626,13 +815,17 @@ program
           description: 'Add or remove supported languages (pt-BR, en, es, …)',
           value: 'languages',
         },
-        {
-          title: 'Assistant',
-          description: currentConfig?.hasAssistant
-            ? 'Remove the AI Assistant from your project'
-            : 'Add the AI Assistant to your project',
-          value: 'assistant',
-        },
+        ...(isPageProject
+          ? []
+          : [
+              {
+                title: 'Assistant',
+                description: currentConfig?.hasAssistant
+                  ? 'Remove the AI Assistant from your project'
+                  : 'Add the AI Assistant to your project',
+                value: 'assistant',
+              },
+            ]),
         {
           title: 'Dark Mode',
           description: currentConfig?.disableDarkMode
@@ -642,7 +835,9 @@ program
         },
         {
           title: 'Project files',
-          description: 'Update app shell, shared, features and pages to a specific version',
+          description: isPageProject
+            ? 'Update the app shell and landing page to a specific version'
+            : 'Update app shell, shared, features and pages to a specific version',
           value: 'project',
         },
       ],
@@ -798,7 +993,9 @@ program
         // 3) Regenerate App.tsx so the `availableLanguages` prop matches
         await fs.writeFile(
           path.join(targetDir, 'src', 'app', 'App.tsx'),
-          generateAppTsx(newCodes, currentConfig?.disableDarkMode ?? false)
+          isPageProject
+            ? generateLandingAppTsx(newCodes, currentConfig?.disableDarkMode ?? false)
+            : generateAppTsx(newCodes, currentConfig?.disableDarkMode ?? false)
         );
 
         // 4) Persist the new selection
@@ -1014,7 +1211,9 @@ program
 
         await fs.writeFile(
           path.join(targetDir, 'src', 'app', 'App.tsx'),
-          generateAppTsx(selectedCodes, newDisableDarkMode)
+          isPageProject
+            ? generateLandingAppTsx(selectedCodes, newDisableDarkMode)
+            : generateAppTsx(selectedCodes, newDisableDarkMode)
         );
 
         spinner.succeed(
@@ -1063,38 +1262,53 @@ program
       type: 'multiselect',
       name: 'filesToUpdate',
       message: 'Select which parts of the project to update:',
-      choices: [
-        {
-          title: 'App shell (src/app/)',
-          description: 'App.tsx, AppLayout.tsx',
-          value: 'app',
-          selected: true,
-        },
-        {
-          title: 'Shared utilities (src/shared/)',
-          description: 'auth.ts, navigation.ts, types',
-          value: 'shared',
-          selected: true,
-        },
-        {
-          title: 'Features (src/features/)',
-          description: 'auth, home, template UI components',
-          value: 'features',
-          selected: true,
-        },
-        {
-          title: 'Pages (src/pages/)',
-          description: 'Thin page wrapper components',
-          value: 'pages',
-          selected: true,
-        },
-        {
-          title: 'Root config files',
-          description: 'vite.config.ts, tsconfig.json, etc.',
-          value: 'config',
-          selected: false,
-        },
-      ],
+      choices: isPageProject
+        ? [
+            {
+              title: 'App shell + landing page',
+              description: 'App.tsx and the LandingPage re-export',
+              value: 'app',
+              selected: true,
+            },
+            {
+              title: 'Root config files',
+              description: 'vite.config.ts, tsconfig.json, etc.',
+              value: 'config',
+              selected: false,
+            },
+          ]
+        : [
+            {
+              title: 'App shell (src/app/)',
+              description: 'App.tsx, AppLayout.tsx',
+              value: 'app',
+              selected: true,
+            },
+            {
+              title: 'Shared utilities (src/shared/)',
+              description: 'auth.ts, navigation.ts, types',
+              value: 'shared',
+              selected: true,
+            },
+            {
+              title: 'Features (src/features/)',
+              description: 'auth, home, template UI components',
+              value: 'features',
+              selected: true,
+            },
+            {
+              title: 'Pages (src/pages/)',
+              description: 'Thin page wrapper components',
+              value: 'pages',
+              selected: true,
+            },
+            {
+              title: 'Root config files',
+              description: 'vite.config.ts, tsconfig.json, etc.',
+              value: 'config',
+              selected: false,
+            },
+          ],
     });
 
     if (!filesToUpdate || filesToUpdate.length === 0) return;
@@ -1124,13 +1338,6 @@ program
       const updatedTemplatesDir = path.join(targetDir, 'node_modules', 'xertica-ui', 'templates');
 
       if (filesToUpdate.includes('app')) {
-        // AppLayout is always safe to overwrite (no per-project config baked in)
-        await fs.copy(
-          path.join(updatedTemplatesDir, 'src', 'app', 'components', 'AppLayout.tsx'),
-          path.join(targetDir, 'src', 'app', 'components', 'AppLayout.tsx'),
-          { overwrite: true }
-        );
-
         // For App.tsx and i18n.ts we must preserve the user's language selection.
         // Read it from .languages.json (or fall back to inspecting locales/ for
         // projects scaffolded before the file existed).
@@ -1152,38 +1359,71 @@ program
 
         const projectConfig = await readXerticaConfig(targetDir);
 
-        // Regenerate App.tsx and i18n.ts honoring the persisted language set
-        await fs.writeFile(
-          path.join(targetDir, 'src', 'app', 'App.tsx'),
-          generateAppTsx(selectedCodes, projectConfig?.disableDarkMode ?? false)
-        );
-        await fs.writeFile(path.join(targetDir, 'src', 'i18n.ts'), generateI18nFile(selectedCodes));
+        if (isPageProject) {
+          // Regenerate App.tsx and i18n.ts, re-copy the LandingPage shim —
+          // no AppLayout/AuthGuard exist in a page-only project.
+          await fs.writeFile(
+            path.join(targetDir, 'src', 'app', 'App.tsx'),
+            generateLandingAppTsx(selectedCodes, projectConfig?.disableDarkMode ?? false)
+          );
+          await fs.writeFile(
+            path.join(targetDir, 'src', 'i18n.ts'),
+            generateI18nFile(selectedCodes)
+          );
+          await syncLocaleFiles(updatedTemplatesDir, targetDir, selectedCodes, {
+            pruneOthers: true,
+          });
+          await fs.copy(
+            path.join(updatedTemplatesDir, 'src', 'pages', 'LandingPage.tsx'),
+            path.join(targetDir, 'src', 'pages', 'LandingPage.tsx'),
+            { overwrite: true }
+          );
+        } else {
+          // AppLayout is always safe to overwrite (no per-project config baked in)
+          await fs.copy(
+            path.join(updatedTemplatesDir, 'src', 'app', 'components', 'AppLayout.tsx'),
+            path.join(targetDir, 'src', 'app', 'components', 'AppLayout.tsx'),
+            { overwrite: true }
+          );
 
-        // Refresh locale JSON files for the selected languages (keys grow over
-        // library updates) — but prune any orphans from prior selections.
-        await syncLocaleFiles(updatedTemplatesDir, targetDir, selectedCodes, {
-          pruneOthers: true,
-        });
+          // Regenerate App.tsx and i18n.ts honoring the persisted language set
+          await fs.writeFile(
+            path.join(targetDir, 'src', 'app', 'App.tsx'),
+            generateAppTsx(selectedCodes, projectConfig?.disableDarkMode ?? false)
+          );
+          await fs.writeFile(
+            path.join(targetDir, 'src', 'i18n.ts'),
+            generateI18nFile(selectedCodes)
+          );
 
-        // Regenerate AuthGuard preserving the current page set and assistant flag
-        const pagesDir = path.join(targetDir, 'src', 'pages');
-        const existingPages = (await fs.pathExists(pagesDir)) ? await fs.readdir(pagesDir) : [];
-        const hasLoginP = existingPages.includes('LoginPage.tsx');
-        const hasHomeP = existingPages.includes('HomePage.tsx');
-        const hasTemplateP = existingPages.includes('TemplatePage.tsx');
-        const hasAssistantP =
-          projectConfig?.hasAssistant ?? existingPages.includes('AssistantPage.tsx');
-        const firstProtectedP = hasHomeP ? '/home' : hasTemplateP ? '/template' : '/login';
-        await fs.writeFile(
-          path.join(targetDir, 'src', 'app', 'components', 'AuthGuard.tsx'),
-          generateAuthGuard({
-            hasLogin: hasLoginP,
-            hasHome: hasHomeP,
-            hasTemplate: hasTemplateP,
-            hasAssistant: hasAssistantP,
-            firstProtectedPath: firstProtectedP,
-          })
-        );
+          // Refresh locale JSON files for the selected languages (keys grow over
+          // library updates) — but prune any orphans from prior selections.
+          await syncLocaleFiles(updatedTemplatesDir, targetDir, selectedCodes, {
+            pruneOthers: true,
+          });
+
+          // Regenerate AuthGuard preserving the current page set and assistant flag
+          const pagesDir = path.join(targetDir, 'src', 'pages');
+          const existingPages = (await fs.pathExists(pagesDir))
+            ? await fs.readdir(pagesDir)
+            : [];
+          const hasLoginP = existingPages.includes('LoginPage.tsx');
+          const hasHomeP = existingPages.includes('HomePage.tsx');
+          const hasTemplateP = existingPages.includes('TemplatePage.tsx');
+          const hasAssistantP =
+            projectConfig?.hasAssistant ?? existingPages.includes('AssistantPage.tsx');
+          const firstProtectedP = hasHomeP ? '/home' : hasTemplateP ? '/template' : '/login';
+          await fs.writeFile(
+            path.join(targetDir, 'src', 'app', 'components', 'AuthGuard.tsx'),
+            generateAuthGuard({
+              hasLogin: hasLoginP,
+              hasHome: hasHomeP,
+              hasTemplate: hasTemplateP,
+              hasAssistant: hasAssistantP,
+              firstProtectedPath: firstProtectedP,
+            })
+          );
+        }
       }
 
       if (filesToUpdate.includes('shared')) {