> ## Documentation Index > Fetch the complete documentation index at: https://supastack.dev/llms.txt > Use this file to discover all available pages before exploring further. > For the full documentation corpus in one file, fetch: https://supastack.dev/llms-full.txt # Páginas de marketing Secções de landing, páginas legais, FAQ, changelog e a configuração do site. ## Passo a passo para iniciantes Pré-requisitos: Leia os dois guias para iniciantes abaixo, conclua a configuração local da Web e abra este monorepo na raiz do seu editor. As configurações da Web pertencem a `apps/web/.env.local`; Next.js não lê a raiz `.env`. `/dashboard` no modo falso padrão é uma demonstração sem banco de dados; `/auth` precisa de um banco de dados migrado. Termos rápidos: um espaço de trabalho consiste em usuários, dados e configurações separados de uma equipe. O servidor é o back-end confiável; mantenha as chaves do provedor fora do navegador e do código do telefone. Uma migração é uma alteração de versão do banco de dados que cria ou atualiza tabelas. Um modelo de IA é o mecanismo que responde; o catálogo de modelos é a lista do servidor de IDs e preços de modelos disponíveis. Um provedor é um serviço externo, como IA, e-mail ou serviço de cobrança. Um direito é uma concessão que permite que um espaço de trabalho use um recurso. Um webhook é uma mensagem que um serviço envia para o URL de outro serviço. 1. Abra `apps/web/src/marketing/site-config.ts` e altere o nome do produto, slogan, rótulos/URLs de navegação e endereço de suporte para valores que você possui. 2. Substitua `apps/web/public/og.png` e atualize seu texto alternativo e dimensões em `apps/web/src/marketing/seo.tsx` como uma alteração. 3. Atualize a página inicial, FAQ, rodapé e visualização social. Se o texto antigo permanecer, pesquise o nome antigo neste repositório antes de publicar. Para código personalizado, comece com o `prompts/README.md` fornecido e copie o prompt mais próximo: `prompts/new-app-screen.md` para uma tela de aplicativo ou `prompts/new-landing-page.md` para uma página pública. Para trabalho de servidor, banco de dados ou provedor, dê ao seu agente de codificação a tarefa deste guia e peça-lhe para ler `AGENTS.md`, `.ai/PROJECT_CONTEXT.md` e espelhos `.ai/` correspondentes; inspecione os arquivos de origem exatos nomeados aqui; listar arquivos e verificações antes de editar; preservar a propriedade do espaço de trabalho e os segredos apenas do servidor; e mostrar a diferença. Informe o comportamento desejado, campos de entrada e saída, funções permitidas, sucessos e erros esperados e a conta de teste, provedor ou dispositivo. Use valores de amostra; nunca cole um segredo real. [Antes de começar](https://supastack.dev/pt/docs/web/before-you-start.md) [Noções básicas sobre terminais](https://supastack.dev/pt/docs/web/terminal-basics.md) [Configuração local da Web](https://supastack.dev/pt/docs/web/ship-in-5-minutes.md) [Avisos do agente e memória do projeto](https://supastack.dev/pt/docs/web/agents.md) ## Atualizar a configuração do site `apps/web/src/marketing/site-config.ts` possui cópia de marca, links de navegação/rodapé, FAQ e destinos opcionais de repositório/documentos. Atualize isso antes de espalhar os nomes dos produtos pelos componentes. O próprio cromo do kit usa esta configuração; os blocos cromados copiáveis ​​aceitam acessórios de produto. ## Substitua a família de ativos em conjunto A marca compartilhada de quatro blocos tem blocos brancos no canto superior esquerdo/inferior direito e cinza no canto superior direito/inferior esquerdo com contornos finos. Mantenha as marcas de cabeçalho transparentes; ícones/favicon de aplicativos usam o fundo preto arredondado. Os produtos derivados podem substituir a marca e seus ativos de aplicativo/desktop associados juntos. O cartão social público compartilhado é `/og.png`; atualize seu descritor em `marketing/seo.tsx` com as dimensões e o texto alternativo. Os cartões de artigos do blog usam sua rota separada da Próxima imagem. ## Verifique todas as superfícies públicas Verifique cabeçalho/rodapé, contato, FAQ, páginas jurídicas, cópia inicial localizada, títulos e cartões sociais. Escolha o modo de tema de marketing do seu produto e envie apenas links de suporte/contato que funcionem. [Estilos de produtos](https://supastack.dev/pt/docs/web/theming.md) [Estrutura de página jurídica](https://supastack.dev/pt/docs/web/project-structure.md) [Metadados e cartões sociais](https://supastack.dev/pt/docs/web/project-structure.md) ## Instalação e configuração A superfície de marketing é ligada a dados tipados em vez de JSX hardcoded — hero, secções de features, pricing, FAQ, changelog, showcase, contacto e páginas legais leem copy e estrutura da configuração do site e dos ficheiros de conteúdo. MARKETING_THEME_MODE (src/theme/marketing-theme.ts) decide se o marketing fica no tema escuro bloqueado do kit, herda o theme pack do visitante ou fixa um pack específico. Produtos derivados escolhem o seu próprio modo. ``` src/marketing/ branded chrome and sections src/kit/blocks/ copyable token-only section patterns marketing/ hero, features, product grid, pricing, FAQ, CTA app/ stat grid, data table, empty state, choice pills chrome/ site header, footer, prose page MARKETING_THEME_MODE = "locked" | "inherit" | "" ``` ## Fluxo de implementação Compõe páginas primeiro a partir da biblioteca de blocks; escreve um block novo no mesmo estilo só-de-tokens quando falta um padrão e regista-o em src/kit/blocks.ts. Mantém componentes de marketing fora das superfícies de produto — os dois sistemas de chrome ficam separados. A copy localizada flui pelo dicionário e pelos overlays de site-content; adiciona chaves aí em vez de fazer fork de componentes por idioma. ## Verificação e resolução de problemas Verifica uma página de marketing a 320px e em desktop, com foco de teclado visível, sob pelo menos um pack claro e um escuro, e com reduced motion. Se uma afirmação de marketing referencia uma capacidade, garante que a página de doc ligada existe. ## Seguinte [SEO e partilha](https://supastack.dev/pt/docs/web/seo.md)