Landingpage-Template v1: config-gesteuert, zwei Themes (papier/clean)
- 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>
This commit is contained in:
57
README.md
Normal file
57
README.md
Normal file
@@ -0,0 +1,57 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user