Lernen Sie, das Creative Agency NextJS-Thema zu installieren, anzupassen, zu übersetzen und zu veröffentlichen - mit dieser vollständigen Dokumentation.

Diese Anleitung erklärt alles für den Start: Installation, Konfiguration, Inhaltsbearbeitung, Kontaktformular, Deployment und mehrsprachige Anpassung.

1. Überblick

Creative Agency Design ist ein Premium-NextJS-Onepager für Kreativagenturen, Studios und digitale Berater. Enthalten sind interaktive Partikel-Sektionen, 3D-Portfolio-Karten, FAQ, Statistiken und ein Kontaktformular.

Tech-Stack: NextJS (App Router), React, TypeScript, Tailwind CSS v4, Framer Motion, Lucide-Icons.

Hauptdatei zur Anpassung: src/config/site.config.ts - bearbeiten Sie diese Datei, um den Großteil der Website-Inhalte zu ändern, ohne Komponenten-Code anzupassen.

2. Voraussetzungen

Node.js 18.18+ (Node 20+ empfohlen)
npm (oder yarn / pnpm)
Für Deployment: Vercel-Konto (empfohlen) oder beliebiges statisches Hosting

3. Installation

Theme-Paket herunterladen und entpacken.
Terminal im Projektordner öffnen.
Abhängigkeiten installieren:

npm install

Entwicklungsserver starten:

npm run dev

http://localhost:3000 im Browser öffnen.

Verfügbare Skripte:

npm run dev - lokale Entwicklung
npm run build - Produktions-Build
npm run start - Produktions-Build lokal starten
npm run lint - Code-Qualitätsprüfung

4. Projektstruktur

creative-agency-design-dev/
├── public/                     # Statische Dateien (Bilder, Favicon, robots.txt)
│   └── logo.svg
├── src/
│   ├── app/
│   │   ├── api/contact/        # API-Route für Kontaktformular
│   │   ├── globals.css         # Globale Styles und Farb-Tokens
│   │   ├── layout.tsx          # SEO-Metadaten und Seitenlayout
│   │   └── page.tsx            # Startseiten-Sektionen
│   ├── components/stella/      # UI-Komponenten (Nav, Hero, Portfolio usw.)
│   └── config/
│       └── site.config.ts      # HAUPTDATEI FÜR KONFIGURATION (zuerst bearbeiten)
├── next.config.ts
├── package.json
└── README.md

5. Texte und Inhalte anpassen

Öffnen Sie src/config/site.config.ts. Diese Datei steuert Branding, SEO, Navigation, Hero-Text, Services, Statistiken, FAQ, Portfolio und Kontakt-Einstellungen.

5.1 Marke und SEO

name - kurzer Markenname (Navigation/Footer)
legalName - rechtlicher Firmenname (Copyright/Metadaten)
tagline - Markenslogan
description - Hauptbeschreibung für SEO
shortDescription - Beschreibung für Social Cards
url - kanonische Website-URL (ohne abschließenden Slash)
keywords - SEO-Schlüsselwortliste

5.2 Kontakt und Social Media

email - Kontakt-E-Mail
location - Standort-/Bürotext
social - Twitter-, LinkedIn-, Dribbble-, GitHub-Links

5.3 Navigation und Footer

navLinks - Menülabels und Ankerlinks
services - Service-Liste im Footer

5.4 Hero-Bereich

Bearbeiten Sie das Objekt hero:

label, title, subtitle, description
hint - Hinweistext für Interaktion
primaryButton, secondaryButton

5.5 Interaktive Sektionen (01-05)

Bearbeiten Sie sections.services, sections.about, sections.growth und sections.beauty.

Jede Sektion unterstützt: label, title, subtitle, description, hint.

5.6 Service-Grid

Bearbeiten Sie Einträge in servicesInline:

icon - eines von: Code2, Palette, Layers, Zap
title, desc

5.7 Statistiken

Bearbeiten Sie das Array stats:

{ value: "150+", label: "Projects Delivered" }

5.8 FAQ

Bearbeiten Sie faq.label, faq.title und faq.items (Frage/Antwort-Paare).

5.9 Portfolio

Bearbeiten Sie das Objekt portfolio und das Array projects:

title, category, description
gradient - Tailwind-Gradient-Klassen
image - optionaler Bildpfad (Beispiel: /projects/my-project.jpg)
url - optionaler externer Projektlink

5.10 Kontaktbereich

Bearbeiten Sie Labels, Platzhalter, Dropdown-Optionen sowie Button-/Erfolgstexte in contact.form.

6. Farben und Markenstil ändern

6.1 Primäre Akzentfarbe

Öffnen Sie src/app/globals.css und aktualisieren Sie:

:root {
  --accent: #F59E0B;
  --accent-dark: #D97706;
}

6.2 Text- und Oberflächenfarben

In derselben Datei können Sie außerdem anpassen:

--muted-text
--subtle-text
--dim-text
--surface

6.3 Sektionsspezifische Akzentfarben

Einige Sektionen verwenden eigene Akzentfarben in src/app/page.tsx (z. B. services, about, growth, beauty). Diese Hex-Werte können bei Bedarf geändert werden.

7. Portfolio-Bilder hinzufügen

Ordner erstellen: public/projects/
Bilder hochladen (JPG/PNG/WebP empfohlen)
In site.config.ts den Bildpfad pro Projekt setzen:

image: "/projects/architecture.jpg"

Fehlt ein Bild, wird die Karte weiterhin mit Gradient-Platzhaltern angezeigt.

8. Kontaktformular einrichten

In src/config/site.config.ts konfigurieren Sie contact.submit.provider:

Option A: Demo-Modus (nur Vorschau)

provider: "demo"

Simuliert erfolgreiches Senden ohne echte E-Mails.

Option B: Web3Forms (einfach, ohne Backend)

Erstellen Sie ein kostenloses Konto auf web3forms.com
Kopieren Sie Ihren Access Key
Setzen Sie:

provider: "web3forms",
web3forms: { accessKey: "YOUR_ACCESS_KEY_HERE" }

Option C: Formspree

Erstellen Sie ein Formular auf formspree.io
Setzen Sie:

provider: "formspree",
formspree: { endpoint: "https://formspree.io/f/YOUR_FORM_ID" }

Option D: Integrierte API-Route (Resend/Nodemailer)

Setzen Sie provider: "api"
Konfigurieren Sie den E-Mail-Versand in src/app/api/contact/route.ts
Verwenden Sie Resend oder Nodemailer wie in der Datei dokumentiert

Hinweis: Die API-Route funktioniert auf Node-Hosting (Vercel). Sie funktioniert nicht mit statischem Export.

9. Deployment

9.1 Auf Vercel deployen (empfohlen)

Projekt zu GitHub/GitLab/Bitbucket pushen
Repository in Vercel importieren
Framework preset: NextJS
Build-Befehl: npm run build
Deployen

9.2 Statischer Export (cPanel / Shared Hosting)

next.config.ts öffnen
Hinzufügen:

output: "export"

Ausführen:

npm run build

Inhalt des Ordners out/ auf den Host hochladen
Für das Kontaktformular web3forms oder formspree verwenden (nicht api)

10. Theme in einer anderen Sprache nutzen

Dieses Theme ist standardmäßig einsprachig und enthält kein i18n-Routing. Zur Lokalisierung:

Methode 1 (für die meisten empfohlen): direkte Übersetzung in der Config

src/config/site.config.ts öffnen
Alle Textwerte übersetzen (Hero, Sektionen, Services, Statistiken, FAQ, Portfolio, Kontakt)
SEO-Felder aktualisieren: description, shortDescription, keywords
Metadaten in src/app/layout.tsx bei Bedarf aktualisieren
html lang in layout.tsx setzen (Beispiel: lang="sv", lang="es", lang="fr", lang="de")

Methode 2: Config pro Sprache duplizieren

Dateien wie site.config.sv.ts, site.config.es.ts erstellen
Gewünschte Config in layout.tsx und page.tsx importieren
Bei Bedarf separate Deployments pro Sprache erstellen

Methode 3: vollständige Mehrsprachigkeit (fortgeschritten)

Dies erfordert zusätzliche Entwicklung über das Standard-Theme-Paket hinaus. Kontaktieren Sie uns für individuelle Anpassungen und Entwicklung.

Übersetzungs-Checkliste:

Navigationslabels
Hero- und Sektionsüberschriften
Service-Karten und Statistik-Labels
FAQ-Fragen/Antworten
Portfolio-Titel/Beschreibungen
Kontaktformular-Labels/Platzhalter/Buttons
Footer-Text und rechtliche Zeilen
SEO-Titel/Beschreibung/Schlüsselwörter

11. Fehlerbehebung

Kontaktformular sendet nicht: Provider-Einstellung und API-Schlüssel/Endpoints prüfen.
Portfolio-Bild wird nicht angezeigt: prüfen, ob die Datei in public/projects/ existiert und der Pfad mit /projects/ beginnt.
Formular schlägt bei statischem Hosting fehl: nicht provider: "api" verwenden; Web3Forms oder Formspree nutzen.
Build-Fehler: npm install erneut ausführen und dann npm run build.

12. Lizenz und Support

Dieses Theme wird mit Single Site License bereitgestellt, sofern in Ihren Kaufbedingungen nichts anderes angegeben ist.

Brauchen Sie Hilfe? Kontaktieren Sie contact@mariastellatech.com

Schnellstart-Checkliste

Abhängigkeiten installieren (npm install)
Lokal ausführen (npm run dev)
src/config/site.config.ts bearbeiten
Farben in src/app/globals.css aktualisieren
Bilder in public/projects/ hinzufügen
Kontaktformular-Provider konfigurieren
Builden und deployen (npm run build)

Creative Agency NextJS-Thema: kompletter Installationsguide