Clenvica-Dokumentation: Benutzerhandbuch HTML & Next.js

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

3. Installation

3.1 HTML-Version - Installation

1. Entpacken Sie das html-Paket auf Ihrem Computer.
2. Laden Sie alle Dateien und Ordner in das Root-Verzeichnis Ihres Hostings hoch (meist public_html).
3. Ö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

1. Entpacken Sie das nextjs-Paket.
2. Öffnen Sie ein Terminal im Projektordner.

3. Abhängigkeiten installieren:

   npm install

4. Umgebungsdatei kopieren:

   cp .env.example .env.local

5. Entwicklungsserver starten:

   npm run dev

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

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

5. Anpassungsanleitung

5.1 Geschäftsdaten

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

5.3 Bilder und Medien

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)

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.