Clenvica : Documentation du thème, guide HTML et Next.js

Guide d'installation complet du thème Clenvica en HTML et NextJS : configuration, personnalisation, formulaires, images, SEO et déploiement.

Guide utilisateur HTML & Next.js

Ce guide couvre les deux versions de Clenvica :

• Version HTML - thème HTML5 statique, aucun Node.js requis
• Version Next.js - thème React/Next.js complet avec support multilingue, formulaires avancés et fonctionnalités supplémentaires

Utilisez les sections ci-dessous pour la version que vous avez achetée. Si vous possédez les deux, conservez ce document comme référence unique.

1. Ce qui est inclus

Les deux versions incluent

• Page d'accueil et ensemble complet de pages internes (services, tarifs, projets, blog, galerie, équipe, témoignages, FAQ, zones, carrières, contact, devis, pages légales)
• Mise en page réactive adaptée au mobile
• Mode sombre
• Bandeau de consentement aux cookies
• Boutons flottants d'appel et de WhatsApp
• Accordéon FAQ, galerie avec lightbox et curseur avant/après
• Images de démonstration, espace réservé pour le logo, favicon, sitemap et fichier robots

Next.js uniquement

• Support multilingue (anglais, allemand, suédois, français)
• Assistant de réservation et calculateur de coûts
• Bandeau d'annonce (activable/désactivable)
• Formulaires côté serveur via /api/forms (Resend, SMTP ou webhook)
• Texte centralisé dans des fichiers de langue
• Options configurables pour les pages, menus et éléments d'interface

HTML uniquement

• Installation statique simple - téléversez et publiez
• Texte HTML intégré optimisé pour le SEO (modifiez le texte directement dans les fichiers de page)
• Formulaires de démonstration uniquement (redirection vers la page de remerciement)

2. Prérequis

3. Installation

3.1 Version HTML - installation

1. Décompressez le package html sur votre ordinateur.
2. Téléversez tous les fichiers et dossiers à la racine de votre hébergement (généralement public_html).
3. Ouvrez votre domaine dans un navigateur. La page d'accueil est index.html.

Hébergements pris en charge : cPanel/hébergement mutualisé, Netlify, Vercel, Cloudflare Pages, GitHub Pages et tout serveur de fichiers statiques.

Aperçu local : ouvrez index.html dans votre navigateur. Si les scripts ou les chemins semblent cassés, utilisez Live Server (extension VS Code/Cursor) ou tout serveur statique local.

3.2 Version Next.js - installation

1. Décompressez le package nextjs.
2. Ouvrez un terminal dans le dossier du projet.

3. Installez les dépendances :

   npm install

4. Copiez le fichier d'environnement :

   cp .env.example .env.local

5. Démarrez le serveur de développement :

   npm run dev

6. Visitez http://localhost:3000 (la route de langue par défaut est généralement /en).

Build de production :

npm run build
npm run start

Déploiement recommandé : Vercel, ou toute plateforme prenant en charge Next.js App Router.

4. Liste de vérification pour la première configuration

Complétez ces étapes pour votre site en production :

1. Remplacez le nom de marque, le téléphone, l'e-mail et l'adresse de démonstration
2. Remplacez les URL de domaine de démonstration dans le sitemap, robots, les balises canoniques/meta
3. Remplacez le logo et le favicon
4. Remplacez les photos de démonstration dans le dossier d'images
5. Mettez à jour les zones de service et le texte de l'entreprise
6. Testez les formulaires de contact/devis/newsletter
7. Testez le menu mobile, le mode sombre et les pages clés

5. Guide de personnalisation

5.1 Informations sur l'entreprise

Important (HTML) : après avoir modifié le téléphone/e-mail dans config.js, recherchez également dans les fichiers HTML les anciens liens tel:, mailto: et le texte de téléphone/e-mail visible, puis mettez à jour ces liens.

5.2 Texte et contenu du site web

5.3 Images et médias

Consultez images/README.md (HTML) ou public/images/README.md (Next.js) pour les tailles d'image recommandées.

5.4 Couleurs et image de marque

• HTML : modifiez les variables CSS dans assets/css/main.css (recherchez --color-primary).
• Next.js : modifiez les variables de thème dans src/app/globals.css.

5.5 Fonctionnalités exclusives à Next.js

Multilingue

• Langues incluses : anglais, allemand, suédois, français
• Modifiez le texte dans src/locales/en.ts, de.ts, sv.ts, fr.ts
• Paramètres de langue dans src/config/site.ts

Bandeau d'annonce

• Interrupteur : features.announcementBar dans src/config/site.ts
• Texte : section announcement dans les fichiers de langue
• Cible du lien : announcementHref dans site.ts

Assistant de réservation & calculateur de coûts

• Disponible sur les parcours devis/tarifs de Next.js
• Non inclus dans la version HTML

6. Formulaires et e-mail

6.1 Version HTML (formulaires de démonstration)

Par défaut, les formulaires de contact, devis et newsletter n'envoient pas d'e-mail. Ils empêchent la soumission par défaut et redirigent vers la page de remerciement.

Pour recevoir de vraies soumissions, connectez un service tiers :

• Formspree
• Getform
• Web3Forms
• EmailJS
• Votre propre endpoint

Mettez à jour la gestion des formulaires dans assets/js/main.js (initForms()) ou définissez les attributs action du formulaire.

6.2 Version Next.js (formulaires de production)

Les formulaires sont soumis à /api/forms avec validation et livraison côté serveur.

Configurez .env.local :

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

Exemples de fournisseurs :

• Resend : EMAIL_PROVIDER=resend + RESEND_API_KEY
• SMTP : EMAIL_PROVIDER=smtp + paramètres hôte/utilisateur/mot de passe SMTP
• Webhook : EMAIL_PROVIDER=webhook + EMAIL_WEBHOOK_URL

Les intégrations de newsletter et les paramètres de sécurité optionnels sont documentés dans .env.example, CUSTOMIZATION.md et DOCUMENTATION.md.

7. Configuration SEO

7.1 Fichiers de domaine et d'indexation

• Remplacez clenvica.example.com par votre domaine réel
• Mettez à jour sitemap.xml et robots.txt
• Mettez à jour les URL canoniques et Open Graph dans les métadonnées de page

7.2 SEO sur la page

• HTML : modifiez le titre, la méta-description et le contenu H1/H2 visible de chaque page directement dans les fichiers HTML
• Next.js : modifiez les chaînes SEO des fichiers de langue et src/config/seo.ts

7.3 Vérifications recommandées avant le lancement

• Soumettez le sitemap dans Google Search Console
• Vérifiez que toutes les pages renvoient un statut 200
• Vérifiez la mise en page mobile et la vitesse de la page
• Confirmez que les coordonnées et les liens d'appel à l'action sont corrects

8. Structure des dossiers

Package 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

Package Next.js

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

9. Dépannage

HTML

• Styles/scripts ne se chargent pas localement : utilisez Live Server au lieu d'ouvrir les fichiers directement.
• Les modifications ne sont pas visibles en ligne : retéléversez les fichiers modifiés et effectuez une actualisation forcée (Ctrl+F5).
• Images cassées : vérifiez le chemin du fichier et la casse du nom de fichier (les serveurs Linux sont sensibles à la casse).
• Les formulaires n'envoient pas d'e-mail : comportement attendu en mode démo ; connectez un service de formulaires.

Next.js

• npm install échoue : utilisez Node 18+ et réessayez avec une installation propre.
• Les formulaires ne s'envoient pas : vérifiez les paramètres du fournisseur dans .env.local et redémarrez le serveur de développement.
• Mauvaise route de langue : vérifiez supportedLanguages et les fichiers de langue.
• Erreurs de build : exécutez npm run lint et corrigez les problèmes TypeScript/environnement.

10. Différences entre versions (référence rapide)

11. Support

Pour le support du thème, contactez le vendeur via la boutique où vous avez acheté Clenvica (mariastellatech.com).

Lorsque vous demandez de l'aide, incluez :

• Vos détails d'achat
• Version du thème (HTML ou Next.js)
• Plateforme d'hébergement (cPanel, Vercel, etc.)
• Étapes pour reproduire le problème
• Captures d'écran ou messages d'erreur

Astuce : conservez une sauvegarde du package original non décompressé avant d'apporter des modifications importantes.