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

Secciones de landing, páginas legales, FAQ, changelog y configuración del sitio.

## Guía paso a paso para principiantes

Requisitos previos: lea las dos guías para principiantes a continuación, finalice la configuración local web y abra este monorepo en la raíz de su editor. La configuración web pertenece a `apps/web/.env.local`; Next.js no lee la raíz `.env`. `/dashboard` en el modo falso predeterminado es una demostración sin base de datos; `/auth` necesita una base de datos migrada.

Términos breves: un espacio de trabajo son los usuarios, datos y configuraciones separados de un equipo. El servidor es el backend confiable; Mantenga las claves del proveedor fuera del código del navegador y del teléfono. Una migración es un cambio de base de datos versionada que crea o actualiza tablas. Un modelo de IA es el motor que responde; el catálogo de modelos es la lista del servidor de ID de modelos disponibles y precios. Un proveedor es un servicio externo, como inteligencia artificial, correo electrónico o servicio de facturación. Un derecho es una concesión que permite que un espacio de trabajo utilice una función. Un webhook es un mensaje que un servicio envía al URL de otro servicio.

1. Abra `apps/web/src/marketing/site-config.ts` y cambie el nombre del producto, el eslogan, las etiquetas/URL de navegación y la dirección de soporte a los valores que posee.

2. Reemplace `apps/web/public/og.png` y actualice su texto alternativo y dimensiones en `apps/web/src/marketing/seo.tsx` como un solo cambio.

3. Actualice la página de inicio, FAQ, el pie de página y la vista previa social. Si queda texto antiguo, busque en este repositorio el nombre anterior antes de publicarlo.

Para obtener código personalizado, comience con el `prompts/README.md` proporcionado y copie el mensaje más cercano: `prompts/new-app-screen.md` para una pantalla de aplicación o `prompts/new-landing-page.md` para una página pública. Para trabajos de servidor, base de datos o proveedor, asigne a su agente de codificación la tarea de esta guía y pídale que lea `AGENTS.md`, `.ai/PROJECT_CONTEXT.md` y los espejos `.ai/` correspondientes; inspeccionar los archivos fuente exactos nombrados aquí; enumerar archivos y verificaciones antes de editarlos; preservar la propiedad del espacio de trabajo y los secretos exclusivos del servidor; y mostrarte la diferencia. Dígale el comportamiento que desea, los campos de entrada y salida, los roles permitidos, los éxitos y errores esperados y la cuenta, proveedor o dispositivo de prueba. Utilice valores de muestra; Nunca pegues un verdadero secreto.

[Antes de comenzar](https://supastack.dev/es/docs/web/before-you-start.md)

[Conceptos básicos de terminales](https://supastack.dev/es/docs/web/terminal-basics.md)

[Configuración local web](https://supastack.dev/es/docs/web/ship-in-5-minutes.md)

[Mensajes del agente y memoria del proyecto](https://supastack.dev/es/docs/web/agents.md)


## Actualiza la configuración del sitio

`apps/web/src/marketing/site-config.ts` gestiona el texto de marca, los enlaces de navegación/pie, las preguntas frecuentes y los destinos opcionales de repositorio/documentación. Actualízalo antes de dispersar nombres del producto por los componentes. El chrome propio del kit usa esta configuración; los bloques de chrome copiables reciben propiedades del producto.


## Sustituye la familia de recursos en conjunto

La marca compartida de cuatro mosaicos tiene los mosaicos superior izquierdo e inferior derecho en blanco y los superior derecho e inferior izquierdo en gris, con contornos finos. Mantén transparentes las marcas del encabezado; los iconos de aplicación/favicon usan el fondo negro redondeado. Los productos derivados pueden reemplazar juntos la marca y sus recursos asociados de aplicación/escritorio.

La tarjeta social pública compartida es `/og.png`; actualiza su descriptor en `marketing/seo.tsx` con las dimensiones y el texto alternativo. Las tarjetas de artículos del blog usan su propia ruta de imagen Next.


## Comprueba todas las superficies públicas

Verifica el encabezado/pie, contacto, preguntas frecuentes, páginas legales, texto de inicio localizado, títulos y tarjetas sociales. Elige el modo de tema de marketing de tu producto y publica solo enlaces de soporte/contacto que funcionen.

[Estilos de producto](https://supastack.dev/es/docs/web/theming.md)

[Andamiaje de página legal](https://supastack.dev/es/docs/web/project-structure.md)

[Metadatos y tarjetas sociales](https://supastack.dev/es/docs/web/project-structure.md)


## Configuración y ajustes

La superficie de marketing está conectada a datos tipados en lugar de JSX en duro — hero, secciones de features, pricing, FAQ, changelog, showcase, contacto y páginas legales leen copy y estructura de la configuración del sitio y los archivos de contenido.

MARKETING_THEME_MODE (src/theme/marketing-theme.ts) decide si el marketing se queda en la marca oscura bloqueada del kit, hereda el pack de tema del visitante o fija un pack concreto. Los productos derivados eligen su propio 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" | "<pack-id>"
```


## Flujo de implementación

Compón las páginas primero desde la biblioteca de blocks; cuando falte un patrón, escribe un block nuevo en el mismo estilo solo-tokens y regístralo en src/kit/blocks.ts. Mantén los componentes de marketing fuera de las superficies de producto — los dos sistemas de chrome permanecen separados.

La copy localizada fluye por los overlays de diccionario y site-content; añade claves ahí en lugar de bifurcar componentes por idioma.


## Verificación y solución de problemas

Revisa una página de marketing a 320px y en escritorio, con foco de teclado visible, bajo al menos un pack claro y uno oscuro, y con reduced motion. Si una afirmación de marketing menciona una capacidad, asegúrate de que la página de documentación enlazada exista.


## Siguiente

[SEO y compartir](https://supastack.dev/es/docs/web/seo.md)
