Guía completa de instalación y uso para el tema Clenvica en HTML y NextJS: configuración, personalización, formularios, imágenes, SEO y despliegue.

Guía del usuario para HTML y Next.js

Esta guía cubre ambas versiones de Clenvica:

Versión HTML - tema HTML5 estático, no requiere Node.js
Versión Next.js - tema completo de React/Next.js con soporte multilingüe, formularios avanzados y funciones adicionales

Utiliza las secciones a continuación según la versión que hayas comprado. Si tienes ambas, conserva este documento como tu referencia única.

1. Qué incluye

Ambas versiones incluyen

Página de inicio y conjunto completo de páginas internas (servicios, precios, proyectos, blog, galería, equipo, testimonios, preguntas frecuentes, zonas, empleo, contacto, presupuesto, páginas legales)
Diseño responsivo adaptado a móviles
Modo oscuro
Banner de consentimiento de cookies
Botones flotantes de llamada y WhatsApp
Acordeón de preguntas frecuentes, galería con lightbox y control deslizante antes/después
Imágenes de demostración, marcador de logotipo, favicon, sitemap y archivo robots

Solo Next.js

Soporte multilingüe (inglés, alemán, sueco, francés)
Asistente de reservas y calculadora de costes
Barra de anuncios (activar/desactivar)
Formularios del lado del servidor mediante /api/forms (Resend, SMTP o webhook)
Texto centralizado en archivos de idioma
Opciones configurables para páginas, menús y elementos de la interfaz

Solo HTML

Configuración estática sencilla - sube y publica
Texto HTML integrado optimizado para SEO (edita el texto directamente en los archivos de página)
Solo formularios de demostración (redirigen a la página de agradecimiento)

2. Requisitos

Requisito	HTML	Next.js
Node.js / npm	No se requiere	Requerido (se recomienda Node 18+)
Editor de texto	Sí	Sí
Hosting	Cualquier hosting estático (cPanel, Netlify, Vercel, etc.)	Hosting compatible con Node (se recomienda Vercel) o hosting de exportación estática si está configurado
Paso de compilación	No	Sí (`npm run build`)

3. Instalación

3.1 Versión HTML - instalación

Descomprime el paquete html en tu ordenador.
Sube todos los archivos y carpetas a la raíz de tu hosting (normalmente public_html).
Abre tu dominio en un navegador. La página de inicio es index.html.

Hostings compatibles: cPanel/hosting compartido, Netlify, Vercel, Cloudflare Pages, GitHub Pages y cualquier servidor de archivos estáticos.

Vista previa local: abre index.html en tu navegador. Si los scripts o rutas se ven rotos, usa Live Server (extensión de VS Code/Cursor) o cualquier servidor estático local.

3.2 Versión Next.js - instalación

Descomprime el paquete nextjs.
Abre una terminal en la carpeta del proyecto.
Instala las dependencias:
```
npm install
```
Copia el archivo de entorno:
```
cp .env.example .env.local
```
Inicia el servidor de desarrollo:
```
npm run dev
```
Visita http://localhost:3000 (la ruta de idioma predeterminada suele ser /en).

Compilación de producción:

npm run build
npm run start

Despliegue recomendado: Vercel, o cualquier plataforma compatible con Next.js App Router.

4. Lista de verificación inicial

Completa estos pasos para tu sitio en producción:

Reemplaza el nombre de marca, teléfono, correo y dirección de demostración
Reemplaza las URL de dominio de demostración en el sitemap, robots y etiquetas canónicas/meta
Reemplaza el logotipo y el favicon
Reemplaza las fotos de demostración en la carpeta de imágenes
Actualiza las zonas de servicio y el texto del negocio
Prueba los formularios de contacto/presupuesto/boletín
Prueba el menú móvil, el modo oscuro y las páginas clave

5. Guía de personalización

5.1 Datos del negocio

Qué cambiar	HTML	Next.js
Marca, teléfono, correo, dirección, horario	`assets/js/config.js`	`src/config/site.ts`
Opciones configurables (modo oscuro, cookies, botones flotantes, etc.)	`assets/js/config.js` → `features`	`src/config/site.ts` → `features`
Enlace de crédito del diseñador (Tema diseñado por Maria Stella Tech)	Enlace HTML en el pie de página (elimina la línea para ocultarlo)	`features.designerCredit` en `site.ts`

Importante (HTML): después de cambiar el teléfono/correo en config.js, busca también en los archivos HTML los antiguos enlaces tel:, mailto: y el texto visible de teléfono/correo, y actualiza esos enlaces.

5.2 Texto y contenido del sitio web

Tarea	HTML	Next.js
Encabezados de página, párrafos, menús, preguntas frecuentes, contenido del blog	Edita cada archivo `.html` directamente	Edita los archivos de idioma en `src/locales/` (comienza con `en.ts`)
Título SEO y meta descripción	Edita `<title>` y `<meta name="description">` en cada página HTML	Se gestiona mediante los archivos de idioma + configuración SEO (`src/config/seo.ts` y metadatos de página)
Activar/desactivar páginas y elementos del menú	Manual (edita los enlaces de navegación en HTML)	`src/config/pages.ts`

5.3 Imágenes y contenido multimedia

Recurso	HTML	Next.js
Imágenes de portada, sobre nosotros, proyectos, blog y galería	`images/` (mantén los nombres de archivo)	`public/images/` (mantén los nombres de archivo)
Mapeo de rutas de imágenes	Edita el `src` en las etiquetas `<img>` del HTML si es necesario	`src/config/media.ts`
Logotipo / favicon	`logo.svg`, `favicon.ico`	`public/logo.svg`, `public/favicon.ico`

Consulta images/README.md (HTML) o public/images/README.md (Next.js) para conocer los tamaños de imagen recomendados.

5.4 Colores y marca

HTML: edita las variables CSS en assets/css/main.css (busca --color-primary).
Next.js: edita las variables del tema en src/app/globals.css.

5.5 Funciones exclusivas de Next.js

Multilingüe

Idiomas incluidos: inglés, alemán, sueco, francés
Edita el texto en src/locales/en.ts, de.ts, sv.ts, fr.ts
Configuración de idioma en src/config/site.ts

Barra de anuncios

Interruptor: features.announcementBar en src/config/site.ts
Texto: sección announcement en los archivos de idioma
Destino del enlace: announcementHref en site.ts

Asistente de reservas y calculadora de costes

Disponible en los flujos de presupuesto/precios de Next.js
No incluido en la versión HTML

6. Formularios y correo electrónico

6.1 Versión HTML (formularios de demostración)

Por defecto, los formularios de contacto, presupuesto y boletín no envían correo. Impiden el envío predeterminado y redirigen a la página de agradecimiento.

Para recibir envíos reales, conecta un servicio de terceros:

Formspree
Getform
Web3Forms
EmailJS
Tu propio endpoint

Actualiza el manejo de formularios en assets/js/main.js (initForms()) o establece los atributos action del formulario.

6.2 Versión Next.js (formularios de producción)

Los formularios se envían a /api/forms con validación y entrega del lado del servidor.

Configura .env.local:

EMAIL_PROVIDER=none|resend|smtp|webhook
EMAIL_TO=your@email.com
EMAIL_FROM="Your Brand <your@email.com>"

Ejemplos de proveedores:

Resend: EMAIL_PROVIDER=resend + RESEND_API_KEY
SMTP: EMAIL_PROVIDER=smtp + configuración de host/usuario/contraseña SMTP
Webhook: EMAIL_PROVIDER=webhook + EMAIL_WEBHOOK_URL

Las integraciones de boletín y la configuración de seguridad opcional están documentadas en .env.example, CUSTOMIZATION.md y DOCUMENTATION.md.

7. Configuración de SEO

7.1 Archivos de dominio e indexación

Reemplaza clenvica.example.com con tu dominio real
Actualiza sitemap.xml y robots.txt
Actualiza las URL canónicas y de Open Graph en los metadatos de página

7.2 SEO en la página

HTML: edita el título, la meta descripción y el contenido visible de H1/H2 de cada página directamente en los archivos HTML
Next.js: edita las cadenas SEO de los archivos de idioma y src/config/seo.ts

7.3 Comprobaciones recomendadas antes del lanzamiento

Envía el sitemap en Google Search Console
Verifica que todas las páginas devuelvan el estado 200
Comprueba el diseño móvil y la velocidad de la página
Confirma que los datos de contacto y los enlaces de llamada a la acción sean correctos

8. Estructura de carpetas

Paquete HTML

html/
  index.html
  about/ services/ pricing/ projects/ blog/ ...
  images/
  logo.svg
  favicon.ico
  robots.txt
  sitemap.xml
  assets/
    css/main.css
    js/config.js
    js/main.js

Paquete Next.js

nextjs/
  src/
    app/
    components/
    config/
    locales/
    sections/
  public/
    images/
    logo.svg
    favicon.ico
  .env.example
  package.json
  CUSTOMIZATION.md
  DOCUMENTATION.md

9. Solución de problemas

HTML

Los estilos/scripts no cargan localmente: usa Live Server en lugar de abrir los archivos directamente.
Los cambios no se ven en línea: vuelve a subir los archivos editados y haz una actualización forzada (Ctrl+F5).
Imágenes rotas: verifica la ruta del archivo y las mayúsculas/minúsculas del nombre (los servidores Linux distinguen mayúsculas de minúsculas).
Los formularios no envían correo: esperado en modo demostración; conecta un servicio de formularios.

Next.js

npm install falla: usa Node 18+ y vuelve a intentarlo con una instalación limpia.
Los formularios no se envían: revisa la configuración del proveedor en .env.local y reinicia el servidor de desarrollo.
Ruta de idioma incorrecta: verifica supportedLanguages y los archivos de idioma.
Errores de compilación: ejecuta npm run lint y corrige los problemas de TypeScript/entorno.

10. Diferencias entre versiones (referencia rápida)

Función	HTML	Next.js
Instalación	Subir archivos estáticos	`npm install` + compilación/despliegue
Editar texto	Archivos HTML	Archivos de idioma
Multilingüe	No	Sí (en, de, sv, fr)
Asistente de reservas / calculadora de costes	No	Sí
Barra de anuncios	No	Sí
Formularios	Redirección de demostración a página de agradecimiento	`/api/forms` del lado del servidor

11. Soporte

Para soporte del tema, contacta al vendedor a través de la tienda donde compraste Clenvica (mariastellatech.com).

Al solicitar ayuda, incluye:

Los detalles de tu compra
Versión del tema (HTML o Next.js)
Plataforma de hosting (cPanel, Vercel, etc.)
Pasos para reproducir el problema
Capturas de pantalla o mensajes de error

Consejo: conserva una copia de seguridad del paquete original sin descomprimir antes de realizar ediciones importantes.

Clenvica: Documentación del tema, guía de HTML y Next.js