JUSN
6e83768b8c
- config.js: alle Inhalte an einer Stelle (Marke, SEO, Farben, Hero, Features, Zahlen, Schritte, Warteliste, FAQ, Footer) - build.js: rendert statisches HTML aus der Config (gut fuer SEO), Abschnitte optional, Theme papier/clean, Assets-Kopie - README mit Anleitung, .gitignore - BehördenKlar als fertiges Beispiel; node build.js getestet -> dist/index.html Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
58 lines
2.0 KiB
Markdown
58 lines
2.0 KiB
Markdown
# Landingpage-Template
|
|
|
|
Ein wiederverwendbares Landingpage-Template für neue (SaaS-)Projekte.
|
|
Du füllst **eine** Datei aus (`config.js`) und bekommst eine fertige, schnelle
|
|
Landingpage als statisches HTML — gut für Google, deploybar überall.
|
|
|
|
## In 3 Schritten zu einer neuen Landingpage
|
|
|
|
1. **Dieses Repo kopieren** (oder als Vorlage klonen).
|
|
2. **`config.js` ausfüllen** — Name, Farben, Texte, Features, Warteliste, FAQ …
|
|
(Das ist die einzige Datei, die du normalerweise anfasst.)
|
|
3. **Bauen:**
|
|
```bash
|
|
node build.js
|
|
```
|
|
→ erzeugt `dist/index.html`.
|
|
|
|
Fertig. Den Ordner `dist/` dann auf einen Static-Host hochladen — z. B.
|
|
**Cloudflare Pages** (kostenlos):
|
|
```bash
|
|
npx wrangler pages deploy dist --project-name DEIN-PROJEKT
|
|
```
|
|
|
|
## Was ist wo?
|
|
|
|
| Datei | Zweck |
|
|
|-------|-------|
|
|
| `config.js` | **Alle Inhalte** — hier änderst du alles pro Projekt. |
|
|
| `build.js` | Das Design/Layout. Nur anfassen, wenn du das Aussehen ändern willst. |
|
|
| `dist/` | Das fertige Ergebnis (wird von `build.js` erzeugt). |
|
|
| `assets/` | Favicon, Vorschaubild usw. — wird beim Bauen nach `dist/` kopiert. |
|
|
|
|
## Zwei Looks (Theme)
|
|
|
|
In `config.js` unter `theme`:
|
|
|
|
- `"papier"` — warmer Amtsbrief-/Papier-Stil (Serifenschrift, Textur, §-Nummern, Stempel). Der BehördenKlar-Look.
|
|
- `"clean"` — schlicht/modern (serifenlos, glatte Fläche, abgerundete Karten).
|
|
|
|
Die vier Farben unter `colors` bestimmen in beiden Themes den Look.
|
|
|
|
## Abschnitte
|
|
|
|
Alle Abschnitte sind **optional** — leer lassen (`[]` oder `""`), und sie
|
|
verschwinden automatisch:
|
|
|
|
- **Hero** — Überschrift, Text, bis zu zwei Knöpfe, Stempel
|
|
- **Features** — Vorteils-Karten
|
|
- **Zahlen** — Vertrauens-/Statistik-Karten
|
|
- **So funktioniert es** — nummerierte Schritte
|
|
- **Warteliste** — Anmeldeformular (z. B. Brevo) oder Mailto-Knopf
|
|
- **FAQ** — aufklappbare Fragen
|
|
- **Footer** — Links + Hinweis
|
|
|
|
## Voraussetzung
|
|
|
|
Nur **Node.js** (für `node build.js`). Kein weiteres Setup, keine Abhängigkeiten.
|