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

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

3. Instalación

3.1 Versión HTML - instalación

1. Descomprime el paquete html en tu ordenador.
2. Sube todos los archivos y carpetas a la raíz de tu hosting (normalmente public_html).
3. 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

1. Descomprime el paquete nextjs.
2. Abre una terminal en la carpeta del proyecto.

3. Instala las dependencias:

   npm install

4. Copia el archivo de entorno:

   cp .env.example .env.local

5. Inicia el servidor de desarrollo:

   npm run dev

6. 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:

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

5. Guía de personalización

5.1 Datos del negocio

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

5.3 Imágenes y contenido multimedia

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)

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.