irfanfaraaz/website-builder

Website-Baukasten – Vorlagenanpassung + Netlify-Deployment

Ziel

Nimm eine kurze Beschreibung der Benutzerwünsche auf und erstelle eine atemberaubende, produktionsreife Landing Page, indem du eine bewährte Vorlage anpasst – nicht von Grund auf neu baust. Veröffentliche sie dann live auf Netlify und gib die URL zurück.

Eingaben

• Markenname: Der Firmen-/Projektname
• Kernthese: Ein Satz darüber, worum es geht (oder eine URL zum Überprüfen)
• Stil/Ästhetik: Beliebige Richtung (z. B. „dunkel technisch“, „klinischer Luxus“, „brutalistisch“)
• Conversion-Ziel: Was der CTA bewirken soll (Standard: Buchung eines Gesprächs)

Ort der Vorlage

Die Basisvorlage befindet sich im Arbeitsbereich unter website-template/. Es handelt sich um eine vollständige, funktionierende React + Vite + Tailwind v3 + GSAP-Seite mit:

Struktur

website-template/
├── src/
│   ├── App.jsx              # Root-Layout (importiert alle Abschnitte)
│   ├── index.css            # Tailwind-Imports, Noise-Overlay, Scrollbar
│   ├── main.jsx             # Einstiegspunkt
│   └── components/
│       ├── Navbar.jsx        # Schwebende Navigation, scrollreaktiv
│       ├── Hero.jsx          # Vollbild-Hero, Hintergrundbild, GSAP-Text-Enthüllung
│       ├── Features.jsx      # Abschnitt mit hellem Hintergrund und 3 interaktiven Micro-UIs
│       ├── DiagnosticShuffler.jsx  # Automatisch rotierender gestapelter Karten-Widget
│       ├── TelemetryTypewriter.jsx # Terminal-artiger Schreibmaschinen-Widget
│       ├── AdaptiveRegimen.jsx     # Kalenderauswahl mit animiertem Cursor
│       ├── Philosophy.jsx    # Parallax-Hintergrund, geteilte Wort-Enthüllung
│       ├── Protocol.jsx      # Gestapelte Scroll-Karten (GSAP ScrollTrigger-Pinning)
│       ├── Membership.jsx    # 3-stufige Preisgestaltung mit Hover-Effekten
│       └── Footer.jsx        # Dunkle Fußzeile mit Spalten
├── tailwind.config.js        # Farb-Token, Schriftarten, Randradius
├── postcss.config.js         # Standard PostCSS + Autoprefixer
├── vite.config.js            # Vite + React Plugin
├── package.json              # React 19, GSAP, Lucide, Tailwind v3
└── index.html

Technologie-Stack (NICHT ÄNDERN)

• React 19 + Vite 7
• Tailwind CSS v3 (verwendet tailwind.config.js + @tailwind-Direktiven – NICHT v4)
• GSAP 3 mit ScrollTrigger
• Lucide React Icons
• PostCSS + Autoprefixer

Design-System (in tailwind.config.js)

colors:
  moss: '#070707'      — tiefschwarzer Akzent
  clay: '#0026FF'      — Tech-Blau als Primärfarbe
  cream: '#EAEAEA'     — cremefarbener Text
  charcoal: '#070707'  — primärer dunkler Hintergrund

fonts:
  sans: Plus Jakarta Sans, Outfit
  serif: Cormorant Garamond
  mono: system monospace

Ablauf

Schritt 1: Vorlage kopieren

cp -R website-template/ seitenname/
cd seitenname
rm -rf node_modules
npm install

Schritt 2: An die Marke anpassen

Ändere diese Dateien – BAUE NICHTS UM UND SCHREIBE NICHTS NEU:

1. tailwind.config.js – Ändere die Farb-Token (moss, clay, cream, charcoal) und Schriftarten passend zur Markenästhetik. Die Klassennamen bleiben gleich, nur die Hex-Werte ändern sich.

2. index.css – Aktualisiere die Google-Fonts-Import-URL entsprechend der neuen Schriftarten.

3. index.html – Aktualisiere <title>.

4. Komponenten-Texte – Suche und ersetze markenspezifische Texte in jeder Komponente:

   • Navbar.jsx – Markenname, Navigationslinks, CTA-Button-Text
   • Hero.jsx – Überschrift, Untertitel, Slogan, Hintergrundbild-URL
   • Features.jsx – Abschnittsüberschrift, Unterüberschrift
   • DiagnosticShuffler.jsx – Kartentitel, Werte, Trends (relevant für die Marke)
   • TelemetryTypewriter.jsx – Array der Tipp-Nachrichten, Status-Labels
   • AdaptiveRegimen.jsx – Widget-Labels, Button-Text
   • Philosophy.jsx – Die zwei gegensätzlichen Aussagen, Abschnitts-Labels, Hintergrundbild
   • Protocol.jsx – Schritttitel, Beschreibungen, Abschnittsüberschrift
   • Membership.jsx – Stufen-Namen, Preise, Funktionen, Beschreibungen (oder durch CTA-Abschnitt ersetzen, falls nicht benötigt)
   • Footer.jsx – Markenname, Slogan, Link-Spalten, Copyright

5. Unsplash-Bilder – Ersetze die Hintergrundbild-URLs in Hero.jsx und Philosophy.jsx durch Bilder, die zur Marke passen. Verwende das Format https://images.unsplash.com/photo-ID?w=2000&q=80.

Schritt 3: Bauen und Deployen

npm run build
npx netlify-cli deploy --prod --dir=dist --create-site seitenname

Wenn die Site bereits mit Netlify verknüpft ist:

npm run build
npx netlify-cli deploy --prod --dir=dist

Hinweis: Der interaktive Befehl sites:create hängt sich in Nicht-TTY-Umgebungen auf. Verwende immer das Flag --create-site.

Schritt 4: Die Live-URL zurückgeben

Was NICHT zu tun ist

• NIEMALS Komponenten von Grund auf neu schreiben. Die Vorlage funktioniert. Ändere nur Texte, Farben und Bilder.
• NICHT auf Tailwind v4 wechseln. Die Vorlage verwendet v3 mit tailwind.config.js. Behalte es bei.
• NIEMALS die interaktiven Micro-UIs entfernen (DiagnosticShuffler, TelemetryTypewriter, AdaptiveRegimen). Sie sind das visuelle Unterscheidungsmerkmal. Passe ihren Inhalt an die Marke an.
• NICHT das strukturelle Layout ändern (abgerundete Abschnittsübergänge, gestapelte Scroll-Karten, Parallax-Philosophie-Abschnitt). Diese sorgen für das gute Aussehen.
• KEINE neuen npm-Abhängigkeiten hinzufügen, es sei denn, es ist absolut notwendig.

Spickzettel zur Anpassung

Die Stimmung ändern

Die gesamte Ästhetik verschiebt sich durch die Änderung von 4 Farb-Token in tailwind.config.js:

Stimmung	charcoal (HG)	clay (Akzent)	cream (Text)	moss (dunkler Akzent)
Tech Blau (Standard)	#070707	#0026FF	#EAEAEA	#070707
Gold Luxus	#070707	#C9A84C	#F5F0E8	#0A0A0A
Neon Cyber	#0A0A0A	#00FFD1	#E0E0E0	#0A0A0A
Klinisches Weiß	#FAFAFA	#2563EB	#1A1A1A	#F5F5F5
Terrakotta Organic	#1A1410	#CC5833	#F2F0E9	#2E4036
Smaragd Content	#090909	#10B981	#F0F0F0	#0A0A0A

Falls der Kunde keine Preisgestaltung benötigt

Ersetze den Inhalt von Membership.jsx durch einen vollbreiten CTA-Abschnitt (behalte die Komponentendatei, ändere nur ihr JSX).

Ausgearbeitetes Beispiel: 1SecondCopy (SEO-Content-Schreibservice)

Dies ist die Goldstandard-Referenz für die Tiefe der erforderlichen Änderungen. Bei jeder Komponente wird der Textinhalt geändert, aber es werden null strukturelle/layouttechnische Änderungen vorgenommen.

Farben (tailwind.config.js)

moss: '#0A0A0A', clay: '#10B981', cream: '#F0F0F0', charcoal: '#090909'

Änderungen pro Komponente

Komponente	Was geändert wurde	Was gleich blieb
Navbar.jsx	Marke → „1SECONDCOPY_“, Links → Prozess/Plattform/Preise, CTA → „Loslegen“	Schwebende Navigation, Scroll-Unschärfe, mobiles Hamburger-Menü
Hero.jsx	Überschrift → „Wörter, die ranken.“, Slogan → „Content Writing, mit einem Twist“, Untertitel über die besten 1% der Autoren, Unsplash-HG → schreibthematisch	GSAP-Text-Enthüllung, Layout, Verlaufs-Overlays
Features.jsx	Überschrift → „Dein Content-Kommandocentrum“, Untertitel über Echtzeit-Dashboards	3-spaltiges Micro-UI-Raster, Abschnittsstruktur
DiagnosticShuffler.jsx	Karten → „Content-Geschwindigkeit: 48 Artikel“, „Durchschnittl. SERP-Position: #4.2“, „Durchlaufzeit: 2,1 Tage“, Label → „Content-Analytics“	Automatisch rotierende Animation, Kartenstruktur
TelemetryTypewriter.jsx	Nachrichten → Content-Pipeline-Schritte („Recherchiere Ziel-Keywords...“, „Ordne Autor dem Briefing zu...“), Labels → „Live-Warteschlange“, Statistiken → „In der Warteschlange: 3 Briefings“ / „Durchschnittl. Lieferung: 2,1 Tage“	Schreibmaschineneffekt, Terminal-Stil
AdaptiveRegimen.jsx	Label → „Content-Planer“, Überschrift → „Veröffentlichungstag wählen“, Button → „Einreichen“, GSAP-Farbe → #10B981	Kalenderraster, animierter Cursor, Datums-Chips
Philosophy.jsx	Alte Methode → „Freelancer einstellen. Revisionen verwalten. Beten, dass es rankt.“ vs. Neue Methode → „Einreichung eines Briefings. SEO-Content erhalten, der konvertiert.“, Unsplash-HG ausgetauscht	Parallax-Scrollen, geteilte Wort-Enthüllung, Layout
Protocol.jsx	Schritte → „Briefing & Recherche“ / „Experten-Texten“ / „SEO & Lieferung“, Überschrift → „Der Prozess.“, Beschreibung ihres Workflows	Gestapelte Scroll-Karten, GSAP-Pinning, SVG-Grafiken
Membership.jsx	Stufen → Starter 0,09 $/Wort, Bulk 0,08 $/Wort, Enterprise kundenspezifisch, alle Funktionen für Content-Service umgeschrieben	3-spaltiges Raster, Hover-Effekte, beliebtes Abzeichen
Footer.jsx	Marke → „1SECONDCOPY_“, Slogan → „SEO-Content auf Abruf“, Spalten → Dienstleistungen/Unternehmen, Status → „Autoren online“	Layout, Punktanimationsblinken, Copyright

Wichtigste Erkenntnis

~200 Zeilen Textänderungen in 10 Dateien. Keine Layout-, Animations- oder Strukturänderungen. Die Seite sieht völlig anders aus, weil Farben + Texte die ganze Arbeit machen.

Umgebung

Erfordert:

• Node.js 18+
• npx netlify-cli (wird automatisch installiert)
• Netlify-Konto, authentifiziert über netlify login

Ersteinrichtung

Bevor du loslegst, prüfe, ob der Arbeitsbereich eine .gitignore-Datei enthält. Falls nicht, gehe davon aus, dass der Benutzer diesen Skill zum ersten Mal verwendet. In diesem Fall:

1. Frage den Benutzer, ob es sein erstes Mal mit diesem Skill ist.
2. Wenn ja, erkläre ihm, wie er funktioniert und was er konfigurieren/einrichten muss (API-Schlüssel, Umgebungsvariablen, Abhängigkeiten usw.).
3. Teile ihm mit, dass Nick ihm alles Gute wünscht!