Aprende a instalar, personalizar, traducir y desplegar el tema Creative Agency NextJS con esta documentación para principiantes y desarrolladores.

Esta guía explica todo lo necesario para lanzar el tema: instalación, configuración, edición de contenido, formulario de contacto, despliegue y personalización multilingüe.

1. Resumen

Creative Agency Design es un tema premium de una sola página en NextJS para agencias creativas, estudios y consultores digitales. Incluye secciones interactivas de partículas, tarjetas de portfolio 3D, FAQ, estadísticas y un formulario de contacto.

Stack tecnológico: NextJS (App Router), React, TypeScript, Tailwind CSS v4, Framer Motion, iconos Lucide.

Archivo principal de personalización: src/config/site.config.ts - edita este archivo para actualizar la mayor parte del contenido del sitio sin tocar el código de componentes.

2. Requisitos

Node.js 18.18+ (Node 20+ recomendado)
npm (o yarn / pnpm)
Para despliegue: cuenta de Vercel (recomendado) o cualquier hosting estático

3. Instalación

Descarga y descomprime el paquete del tema.
Abre una terminal en la carpeta del proyecto.
Instala dependencias:

npm install

Inicia el servidor de desarrollo:

npm run dev

Abre http://localhost:3000 en tu navegador.

Scripts disponibles:

npm run dev - desarrollo local
npm run build - build de producción
npm run start - ejecutar build de producción localmente
npm run lint - revisión de calidad de código

4. Estructura del proyecto

creative-agency-design-dev/
├── public/                     # Archivos estáticos (imágenes, favicon, robots.txt)
│   └── logo.svg
├── src/
│   ├── app/
│   │   ├── api/contact/        # Ruta API del formulario de contacto
│   │   ├── globals.css         # Estilos globales y tokens de color
│   │   ├── layout.tsx          # Metadatos SEO y estructura de página
│   │   └── page.tsx            # Secciones de la página principal
│   ├── components/stella/      # Componentes UI (nav, hero, portfolio, etc.)
│   └── config/
│       └── site.config.ts      # ARCHIVO PRINCIPAL DE CONFIGURACIÓN (edita primero)
├── next.config.ts
├── package.json
└── README.md

5. Cómo modificar textos y contenido

Abre src/config/site.config.ts. Este archivo controla branding, SEO, navegación, texto del hero, servicios, estadísticas, FAQ, portfolio y ajustes de contacto.

5.1 Marca y SEO

name - nombre corto de marca (navegación/footer)
legalName - nombre legal de la empresa (copyright/metadata)
tagline - eslogan de marca
description - descripción principal para SEO
shortDescription - descripción para tarjetas sociales
url - URL canónica del sitio (sin barra final)
keywords - lista de palabras clave SEO

5.2 Contacto y redes sociales

email - correo de contacto
location - texto de ubicación/oficina
social - enlaces de Twitter, LinkedIn, Dribbble, GitHub

5.3 Navegación y footer

navLinks - etiquetas del menú y enlaces de ancla
services - lista de servicios en el footer

5.4 Sección Hero

Edita el objeto hero:

label, title, subtitle, description
hint - texto de ayuda para interacción
primaryButton, secondaryButton

5.5 Secciones interactivas (01-05)

Edita sections.services, sections.about, sections.growth y sections.beauty.

Cada sección admite: label, title, subtitle, description, hint.

5.6 Cuadrícula de servicios

Edita los elementos de servicesInline:

icon - uno de: Code2, Palette, Layers, Zap
title, desc

5.7 Estadísticas

Edita el array stats:

{ value: "150+", label: "Projects Delivered" }

5.8 FAQ

Edita faq.label, faq.title y faq.items (pares pregunta/respuesta).

5.9 Portfolio

Edita el objeto portfolio y el array projects:

title, category, description
gradient - clases de gradiente Tailwind
image - ruta opcional de imagen (ejemplo: /projects/my-project.jpg)
url - enlace externo opcional del proyecto

5.10 Sección de contacto

Edita etiquetas, placeholders, opciones del desplegable y textos de botón/éxito en contact.form.

6. Cómo cambiar colores y estilo de marca

6.1 Color de acento principal

Abre src/app/globals.css y actualiza:

:root {
  --accent: #F59E0B;
  --accent-dark: #D97706;
}

6.2 Colores de texto y superficie

En el mismo archivo también puedes ajustar:

--muted-text
--subtle-text
--dim-text
--surface

6.3 Colores de acento por sección

Algunas secciones usan colores de acento personalizados en src/app/page.tsx (por ejemplo services, about, growth, beauty). Puedes cambiar esos valores hex si lo necesitas.

7. Cómo añadir imágenes de portfolio

Crea la carpeta: public/projects/
Sube imágenes (JPG/PNG/WebP recomendado)
En site.config.ts, define la ruta de imagen por proyecto:

image: "/projects/architecture.jpg"

Si falta una imagen, la tarjeta sigue mostrándose con placeholders de gradiente.

8. Configuración del formulario de contacto

En src/config/site.config.ts, configura contact.submit.provider:

Opción A: Modo demo (solo vista previa)

provider: "demo"

Simula un envío exitoso sin enviar correos reales.

Opción B: Web3Forms (fácil, sin backend)

Crea una cuenta gratuita en web3forms.com
Copia tu access key
Configura:

provider: "web3forms",
web3forms: { accessKey: "YOUR_ACCESS_KEY_HERE" }

Opción C: Formspree

Crea un formulario en formspree.io
Configura:

provider: "formspree",
formspree: { endpoint: "https://formspree.io/f/YOUR_FORM_ID" }

Opción D: Ruta API integrada (Resend/Nodemailer)

Establece provider: "api"
Configura el envío de correo en src/app/api/contact/route.ts
Usa Resend o Nodemailer según la documentación del archivo

Nota: La ruta API funciona en hosting Node (Vercel). No funciona con exportación estática.

9. Despliegue

9.1 Desplegar en Vercel (recomendado)

Sube el proyecto a GitHub/GitLab/Bitbucket
Importa el repositorio en Vercel
Framework preset: NextJS
Comando de build: npm run build
Despliega

9.2 Exportación estática (cPanel / hosting compartido)

Abre next.config.ts
Añade:

output: "export"

Ejecuta:

npm run build

Sube el contenido de la carpeta out/ a tu hosting
Usa web3forms o formspree para el formulario (no api)

10. Cómo usar el tema en otro idioma

Este tema es monolingüe por defecto y no incluye enrutado i18n. Para localizarlo:

Método 1 (recomendado para la mayoría): traducción directa en config

Abre src/config/site.config.ts
Traduce todos los valores de texto (hero, secciones, servicios, estadísticas, FAQ, portfolio, contacto)
Actualiza campos SEO: description, shortDescription, keywords
Actualiza metadata en src/app/layout.tsx si es necesario
Configura html lang en layout.tsx (ejemplo: lang="sv", lang="es", lang="fr", lang="de")

Método 2: duplicar config por idioma

Crea archivos como site.config.sv.ts, site.config.es.ts
Importa la config deseada en layout.tsx y page.tsx
Construye despliegues separados por idioma si lo necesitas

Método 3: configuración multilingüe completa (avanzado)

Esto requiere desarrollo adicional más allá del paquete estándar del tema. Contáctanos para modificaciones y desarrollos personalizados.

Checklist de traducción:

Etiquetas de navegación
Títulos del hero y secciones
Tarjetas de servicios y etiquetas de estadísticas
Preguntas/respuestas de FAQ
Títulos/descripciones de portfolio
Etiquetas/placeholders/botones del formulario de contacto
Texto del footer y líneas legales
Título/descripción/palabras clave SEO

11. Solución de problemas

El formulario no envía: verifica el provider y las claves/endpoints de API.
La imagen de portfolio no aparece: confirma que el archivo existe en public/projects/ y que la ruta empieza con /projects/.
El formulario falla en hosting estático: no uses provider: "api"; usa Web3Forms o Formspree.
Errores de build: ejecuta npm install de nuevo y luego npm run build.

12. Licencia y soporte

Este tema se proporciona bajo Single Site License salvo que se indique lo contrario en tus términos de compra.

¿Necesitas ayuda? Contacta contact@mariastellatech.com

Checklist rápido

Instalar dependencias (npm install)
Ejecutar localmente (npm run dev)
Editar src/config/site.config.ts
Actualizar colores en src/app/globals.css
Añadir imágenes en public/projects/
Configurar provider del formulario de contacto
Compilar y desplegar (npm run build)

Tema NextJS Creative Agency: guía completa de instalación