Ver toda la documentación

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

Agencia creativa NextJS: tema 3D con portfolio UI animado

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

  1. Descarga y descomprime el paquete del tema.
  2. Abre una terminal en la carpeta del proyecto.
  3. Instala dependencias:
npm install
  1. Inicia el servidor de desarrollo:
npm run dev
  1. 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

  1. Crea la carpeta: public/projects/
  2. Sube imágenes (JPG/PNG/WebP recomendado)
  3. 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)

  1. Crea una cuenta gratuita en web3forms.com
  2. Copia tu access key
  3. Configura:
provider: "web3forms",
web3forms: { accessKey: "YOUR_ACCESS_KEY_HERE" }

Opción C: Formspree

  1. Crea un formulario en formspree.io
  2. Configura:
provider: "formspree",
formspree: { endpoint: "https://formspree.io/f/YOUR_FORM_ID" }

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

  1. Establece provider: "api"
  2. Configura el envío de correo en src/app/api/contact/route.ts
  3. 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)

  1. Sube el proyecto a GitHub/GitLab/Bitbucket
  2. Importa el repositorio en Vercel
  3. Framework preset: NextJS
  4. Comando de build: npm run build
  5. Despliega

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

  1. Abre next.config.ts
  2. Añade:
output: "export"
  1. Ejecuta:
npm run build
  1. Sube el contenido de la carpeta out/ a tu hosting
  2. 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

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

Método 2: duplicar config por idioma

  1. Crea archivos como site.config.sv.ts, site.config.es.ts
  2. Importa la config deseada en layout.tsx y page.tsx
  3. 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)