Alle Dokumentationen anzeigen

Creative Agency NextJS-Thema: kompletter Installationsguide

Creative-Agency-NextJS-Thema mit 3D- und Motion-UI-Portfolio

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

  1. Theme-Paket herunterladen und entpacken.
  2. Terminal im Projektordner öffnen.
  3. Abhängigkeiten installieren:
npm install
  1. Entwicklungsserver starten:
npm run dev
  1. 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

  1. Ordner erstellen: public/projects/
  2. Bilder hochladen (JPG/PNG/WebP empfohlen)
  3. 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)

  1. Erstellen Sie ein kostenloses Konto auf web3forms.com
  2. Kopieren Sie Ihren Access Key
  3. Setzen Sie:
provider: "web3forms",
web3forms: { accessKey: "YOUR_ACCESS_KEY_HERE" }

Option C: Formspree

  1. Erstellen Sie ein Formular auf formspree.io
  2. Setzen Sie:
provider: "formspree",
formspree: { endpoint: "https://formspree.io/f/YOUR_FORM_ID" }

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

  1. Setzen Sie provider: "api"
  2. Konfigurieren Sie den E-Mail-Versand in src/app/api/contact/route.ts
  3. 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)

  1. Projekt zu GitHub/GitLab/Bitbucket pushen
  2. Repository in Vercel importieren
  3. Framework preset: NextJS
  4. Build-Befehl: npm run build
  5. Deployen

9.2 Statischer Export (cPanel / Shared Hosting)

  1. next.config.ts öffnen
  2. Hinzufügen:
output: "export"
  1. Ausführen:
npm run build
  1. Inhalt des Ordners out/ auf den Host hochladen
  2. 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

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

Methode 2: Config pro Sprache duplizieren

  1. Dateien wie site.config.sv.ts, site.config.es.ts erstellen
  2. Gewünschte Config in layout.tsx und page.tsx importieren
  3. 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)