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

Prérequis	HTML	Next.js
Node.js / npm	Non requis	Requis (Node 18+ recommandé)
Éditeur de texte	Oui	Oui
Hébergement	Tout hébergement statique (cPanel, Netlify, Vercel, etc.)	Hébergement compatible Node (Vercel recommandé) ou hébergement à export statique si configuré
Étape de build	Non	Oui (`npm run build`)

3. Installation

3.1 Version HTML - installation

Décompressez le package html sur votre ordinateur.
Téléversez tous les fichiers et dossiers à la racine de votre hébergement (généralement public_html).
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

Décompressez le package nextjs.
Ouvrez un terminal dans le dossier du projet.
Installez les dépendances :
```
npm install
```
Copiez le fichier d'environnement :
```
cp .env.example .env.local
```
Démarrez le serveur de développement :
```
npm run dev
```
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 :

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

5. Guide de personnalisation

5.1 Informations sur l'entreprise

Ce qu'il faut changer	HTML	Next.js
Marque, téléphone, e-mail, adresse, horaires	`assets/js/config.js`	`src/config/site.ts`
Options configurables (mode sombre, cookies, boutons flottants, etc.)	`assets/js/config.js` → `features`	`src/config/site.ts` → `features`
Lien de crédit du concepteur (Thème conçu par Maria Stella Tech)	Lien HTML du pied de page (supprimez la ligne pour le masquer)	`features.designerCredit` dans `site.ts`

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

Tâche	HTML	Next.js
Titres de page, paragraphes, menus, FAQ, contenu du blog	Modifiez directement chaque fichier `.html`	Modifiez les fichiers de langue dans `src/locales/` (commencez par `en.ts`)
Titre SEO et méta-description	Modifiez `<title>` et `<meta name="description">` sur chaque page HTML	Géré via les fichiers de langue + configuration SEO (`src/config/seo.ts` et métadonnées de page)
Activer/désactiver les pages et éléments de menu	Manuel (modifiez les liens de navigation dans le HTML)	`src/config/pages.ts`

5.3 Images et médias

Ressource	HTML	Next.js
Images de bannière, à propos, projets, blog et galerie	`images/` (conservez les noms de fichiers)	`public/images/` (conservez les noms de fichiers)
Mappage des chemins d'images	Modifiez `src` dans les balises HTML `<img>` si nécessaire	`src/config/media.ts`
Logo / favicon	`logo.svg`, `favicon.ico`	`public/logo.svg`, `public/favicon.ico`

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)

Fonctionnalité	HTML	Next.js
Installation	Téléverser les fichiers statiques	`npm install` + build/déploiement
Modifier le texte	Fichiers HTML	Fichiers de langue
Multilingue	Non	Oui (en, de, sv, fr)
Assistant de réservation / calculateur de coûts	Non	Oui
Bandeau d'annonce	Non	Oui
Formulaires	Redirection démo vers page de remerciement	`/api/forms` côté serveur

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.

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