Vollständige Installationsanleitung für das Clenvica-Theme in HTML und NextJS - Einrichtung, Anpassung, Formulare, Bilder, SEO und Deployment.

HTML- & Next.js-Benutzerhandbuch

Diese Anleitung deckt beide Clenvica-Versionen ab:

HTML-Version - statisches HTML5-Theme, kein Node.js erforderlich
Next.js-Version - vollständiges React/Next.js-Theme mit Mehrsprachigkeit, erweiterten Formularen und zusätzlichen Funktionen

Verwenden Sie die untenstehenden Abschnitte für die von Ihnen erworbene Version. Wenn Sie beide besitzen, bewahren Sie dieses Dokument als Ihre einzige Referenz auf.

1. Was ist enthalten

Beide Versionen enthalten

Startseite und vollständiger Satz an Unterseiten (Dienstleistungen, Preise, Projekte, Blog, Galerie, Team, Kundenstimmen, FAQ, Einsatzgebiete, Karriere, Kontakt, Angebot, rechtliche Seiten)
Mobilfreundliches responsives Layout
Dunkelmodus
Cookie-Einwilligungsbanner
Schwebende Anruf- und WhatsApp-Buttons
FAQ-Akkordeon, Galerie-Lightbox und Vorher-Nachher-Slider
Demo-Bilder, Logo-Platzhalter, Favicon, Sitemap und Robots-Datei

Nur Next.js

Mehrsprachigkeit (Englisch, Deutsch, Schwedisch, Französisch)
Buchungsassistent und Kostenrechner
Ankündigungsleiste (ein-/ausschaltbar)
Serverseitige Formulare über /api/forms (Resend, SMTP oder Webhook)
Zentralisierte Texte in Sprachdateien
Feature-Schalter für Seiten, Menüs und UI-Elemente

Nur HTML

Einfache statische Einrichtung - hochladen und veröffentlichen
SEO-freundlicher, fest im HTML integrierter Text (Text direkt in den Seitendateien bearbeiten)
Nur Demo-Formulare (Weiterleitung zur Dankesseite)

2. Anforderungen

Anforderung	HTML	Next.js
Node.js / npm	Nicht erforderlich	Erforderlich (Node 18+ empfohlen)
Texteditor	Ja	Ja
Hosting	Jeder statische Hoster (cPanel, Netlify, Vercel usw.)	Node-kompatibler Hoster (Vercel empfohlen) oder Hoster für statischen Export, sofern konfiguriert
Build-Schritt	Nein	Ja (`npm run build`)

3. Installation

3.1 HTML-Version - Installation

Entpacken Sie das html-Paket auf Ihrem Computer.
Laden Sie alle Dateien und Ordner in das Root-Verzeichnis Ihres Hostings hoch (meist public_html).
Öffnen Sie Ihre Domain in einem Browser. Die Startseite ist index.html.

Unterstützte Hoster: cPanel/Shared Hosting, Netlify, Vercel, Cloudflare Pages, GitHub Pages und jeder statische Dateiserver.

Lokale Vorschau: Öffnen Sie index.html in Ihrem Browser. Falls Skripte oder Pfade defekt wirken, verwenden Sie Live Server (VS Code/Cursor-Erweiterung) oder einen beliebigen lokalen statischen Server.

3.2 Next.js-Version - Installation

Entpacken Sie das nextjs-Paket.
Öffnen Sie ein Terminal im Projektordner.
Abhängigkeiten installieren:
```
npm install
```
Umgebungsdatei kopieren:
```
cp .env.example .env.local
```
Entwicklungsserver starten:
```
npm run dev
```
Besuchen Sie http://localhost:3000 (die Standard-Sprachroute ist meist /en).

Produktions-Build:

npm run build
npm run start

Empfohlenes Deployment: Vercel oder jede Plattform, die den Next.js App Router unterstützt.

4. Checkliste für die Ersteinrichtung

Führen Sie diese Schritte für Ihre Live-Website durch:

Demo-Markennamen, Telefonnummer, E-Mail und Adresse ersetzen
Demo-Domain-URLs in Sitemap, Robots sowie Canonical-/Meta-Tags ersetzen
Logo und Favicon ersetzen
Demo-Fotos im Bilderordner ersetzen
Einsatzgebiete und Geschäftstexte aktualisieren
Kontakt-/Angebots-/Newsletter-Formulare testen
Mobiles Menü, Dunkelmodus und wichtige Seiten testen

5. Anpassungsanleitung

5.1 Geschäftsdaten

Was geändert werden soll	HTML	Next.js
Marke, Telefon, E-Mail, Adresse, Öffnungszeiten	`assets/js/config.js`	`src/config/site.ts`
Feature-Schalter (Dunkelmodus, Cookies, schwebende Buttons usw.)	`assets/js/config.js` → `features`	`src/config/site.ts` → `features`
Designer-Credit-Link (Theme entworfen von Maria Stella Tech)	Footer-HTML-Link (Zeile entfernen zum Ausblenden)	`features.designerCredit` in `site.ts`

Wichtig (HTML): Durchsuchen Sie nach dem Ändern von Telefon/E-Mail in config.js auch die HTML-Dateien nach alten tel:- und mailto:-Links sowie sichtbarem Telefon-/E-Mail-Text und aktualisieren Sie diese Links.

5.2 Website-Text und -Inhalte

Aufgabe	HTML	Next.js
Seitenüberschriften, Absätze, Menüs, FAQ, Blog-Inhalte	Jede `.html`-Seitendatei direkt bearbeiten	Sprachdateien in `src/locales/` bearbeiten (beginnen Sie mit `en.ts`)
SEO-Titel und Meta-Beschreibung	`<title>` und `<meta name="description">` in jeder HTML-Seite bearbeiten	Über Sprachdateien + SEO-Konfiguration abgewickelt (`src/config/seo.ts` und Seiten-Metadaten)
Seiten und Menüpunkte aktivieren/deaktivieren	Manuell (Navigationslinks im HTML bearbeiten)	`src/config/pages.ts`

5.3 Bilder und Medien

Element	HTML	Next.js
Hero-, Über-uns-, Projekte-, Blog- und Galeriebilder	`images/` (Dateinamen beibehalten)	`public/images/` (Dateinamen beibehalten)
Zuordnung der Bildpfade	Bei Bedarf `src` in den HTML-`<img>`-Tags bearbeiten	`src/config/media.ts`
Logo / Favicon	`logo.svg`, `favicon.ico`	`public/logo.svg`, `public/favicon.ico`

Empfohlene Bildgrößen finden Sie in images/README.md (HTML) bzw. public/images/README.md (Next.js).

5.4 Farben und Branding

HTML: CSS-Variablen in assets/css/main.css bearbeiten (suchen Sie nach --color-primary).
Next.js: Theme-Variablen in src/app/globals.css bearbeiten.

5.5 Nur Next.js-Funktionen

Mehrsprachigkeit

Enthaltene Sprachen: Englisch, Deutsch, Schwedisch, Französisch
Texte bearbeiten in src/locales/en.ts, de.ts, sv.ts, fr.ts
Spracheinstellungen in src/config/site.ts

Ankündigungsleiste

Umschalten: features.announcementBar in src/config/site.ts
Text: Abschnitt announcement in den Sprachdateien
Link-Ziel: announcementHref in site.ts

Buchungsassistent & Kostenrechner

Verfügbar in den Next.js-Angebots-/Preis-Abläufen
Nicht in der HTML-Version enthalten

6. Formulare und E-Mail

6.1 HTML-Version (Demo-Formulare)

Standardmäßig senden Kontakt-, Angebots- und Newsletter-Formulare keine E-Mail. Sie verhindern das Standard-Absenden und leiten zur Dankesseite weiter.

Um echte Einsendungen zu erhalten, verbinden Sie einen Drittanbieter-Dienst:

Formspree
Getform
Web3Forms
EmailJS
Ihren eigenen Endpunkt

Aktualisieren Sie die Formularverarbeitung in assets/js/main.js (initForms()) oder legen Sie die action-Attribute der Formulare fest.

6.2 Next.js-Version (Produktionsformulare)

Formulare werden an /api/forms gesendet, mit serverseitiger Validierung und Zustellung.

Konfigurieren Sie .env.local:

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

Anbieterbeispiele:

Resend: EMAIL_PROVIDER=resend + RESEND_API_KEY
SMTP: EMAIL_PROVIDER=smtp + SMTP-Host-/Benutzer-/Passwort-Einstellungen
Webhook: EMAIL_PROVIDER=webhook + EMAIL_WEBHOOK_URL

Newsletter-Integrationen und optionale Sicherheitseinstellungen sind in .env.example, CUSTOMIZATION.md und DOCUMENTATION.md dokumentiert.

7. SEO-Einrichtung

7.1 Domain- und Indexierungsdateien

Ersetzen Sie clenvica.example.com durch Ihre echte Domain
sitemap.xml und robots.txt aktualisieren
Canonical- und Open-Graph-URLs in den Seiten-Metadaten aktualisieren

7.2 On-Page-SEO

HTML: Titel, Meta-Beschreibung und sichtbaren H1/H2-Inhalt jeder Seite direkt in den HTML-Dateien bearbeiten
Next.js: SEO-Texte in den Sprachdateien und src/config/seo.ts bearbeiten

7.3 Empfohlene Prüfungen vor dem Launch

Sitemap in der Google Search Console einreichen
Prüfen, ob alle Seiten den Status 200 zurückgeben
Mobiles Layout und Ladegeschwindigkeit prüfen
Kontaktdaten und CTA-Links auf Richtigkeit überprüfen

8. Ordnerstruktur

HTML-Paket

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

Next.js-Paket

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

9. Fehlerbehebung

HTML

Styles/Skripte werden lokal nicht geladen: Verwenden Sie Live Server, anstatt Dateien direkt zu öffnen.
Änderungen online nicht sichtbar: Bearbeitete Dateien erneut hochladen und Hard-Refresh durchführen (Strg+F5).
Defekte Bilder: Dateipfad und Groß-/Kleinschreibung des Dateinamens prüfen (Linux-Server unterscheiden zwischen Groß- und Kleinschreibung).
Formulare senden keine E-Mail: Im Demo-Modus normal; verbinden Sie einen Formular-Dienst.

Next.js

npm install schlägt fehl: Node 18+ verwenden und mit sauberer Installation erneut versuchen.
Formulare werden nicht gesendet: .env.local-Anbietereinstellungen prüfen und Entwicklungsserver neu starten.
Falsche Sprachroute: supportedLanguages und Sprachdateien überprüfen.
Build-Fehler: npm run lint ausführen und TypeScript-/Umgebungsprobleme beheben.

10. Versionsunterschiede (Kurzübersicht)

Funktion	HTML	Next.js
Installation	Statische Dateien hochladen	`npm install` + Build/Deployment
Text bearbeiten	HTML-Dateien	Sprachdateien
Mehrsprachigkeit	Nein	Ja (en, de, sv, fr)
Buchungsassistent / Kostenrechner	Nein	Ja
Ankündigungsleiste	Nein	Ja
Formulare	Demo-Weiterleitung zur Dankesseite	Serverseitig über `/api/forms`

11. Support

Für Theme-Support wenden Sie sich an den Verkäufer über den Store, in dem Sie Clenvica erworben haben (mariastellatech.com).

Bitte geben Sie bei einer Support-Anfrage Folgendes an:

Ihre Kaufdetails
Theme-Version (HTML oder Next.js)
Hosting-Plattform (cPanel, Vercel usw.)
Schritte zur Reproduktion des Problems
Screenshots oder Fehlermeldungen

Tipp: Bewahren Sie eine Sicherung des ursprünglichen, entpackten Pakets auf, bevor Sie größere Änderungen vornehmen.

Clenvica-Dokumentation: Benutzerhandbuch HTML & Next.js