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>
2026-08-14 22:43:01 +02:00
commit 6e83768b8c
5 changed files with 510 additions and 0 deletions
--- a/config.js
+++ b/config.js
@@ -0,0 +1,102 @@
+/**
+ * ═══════════════════════════════════════════════════════════════════
+ *  LANDINGPAGE-CONFIG  —  Das ist die EINZIGE Datei, die du pro Projekt
+ *  ausfüllst. Danach:  node build.js   → erzeugt dist/index.html
+ * ═══════════════════════════════════════════════════════════════════
+ *
+ *  Tipp: Abschnitte, die du NICHT brauchst, einfach leer lassen ([] oder "")
+ *  oder ganz weglassen — dann werden sie nicht angezeigt.
+ */
+
+module.exports = {
+  // ── Grund-Look ──────────────────────────────────────────────────
+  // "papier" = warmer Amtsbrief-/Papier-Stil (Serifenschrift, Textur)
+  // "clean"  = schlicht/modern (serifenlos, glatte Fläche)
+  theme: 'papier',
+
+  // Farben (gelten in beiden Themes). Nur diese vier bestimmen den Look.
+  colors: {
+    bg: '#faf7f0',       // Hintergrund
+    text: '#21211d',     // Textfarbe
+    accent: '#1d4e89',   // Akzent (Knöpfe, Links)
+    marker: '#ffe66b',   // Textmarker-Highlight
+  },
+
+  // ── Marke & SEO ─────────────────────────────────────────────────
+  brand: {
+    name: 'BehördenKlar',
+    emoji: '📬',                          // kleines Logo-Emoji (optional)
+    url: 'https://behoerdenklar.de',      // deine Domain (für Canonical/OG)
+    lang: 'de',
+  },
+  seo: {
+    title: 'Behördenbriefe einfach erklärt – per Foto | BehördenKlar',
+    description: 'BehördenKlar erklärt Amtsbriefe in einfacher Sprache: Foto machen, verstehen, richtig reagieren – in 9 Sprachen.',
+    ogImage: 'https://behoerdenklar.de/vorschau.png', // 1200×630 Vorschaubild
+  },
+  // Cloudflare Web Analytics Token (optional, "" = aus)
+  analyticsToken: '',
+
+  // ── Hero (Kopfbereich) ──────────────────────────────────────────
+  hero: {
+    kicker: 'Betreff',
+    title: 'Brief vom Amt.',
+    titleHighlight: 'Endlich verstanden.',  // wird gelb markiert
+    text: 'Ein Brief vom Amt muss nicht schwer sein. Machen Sie ein Foto — die App erklärt ihn in einfachen Worten.',
+    primaryCta:   { label: '📷 Kostenlos testen', href: '#anmelden' },
+    secondaryCta: { label: '✉️ Auf die Warteliste', href: '#anmelden' }, // optional
+    stamp: 'Bald verfügbar',   // kleiner Stempel (optional, "" = aus)
+  },
+
+  // ── Vorteile / Features ─────────────────────────────────────────
+  featuresTitle: 'Was die App kann',
+  features: [
+    { icon: '🔎', title: 'Klartext statt Amtsdeutsch', text: 'Jeder Brief in einfacher Sprache erklärt.' },
+    { icon: '⏰', title: 'Fristen im Blick', text: 'Die App zeigt, bis wann Sie handeln müssen.' },
+    { icon: '🌍', title: '9 Sprachen', text: 'Übersetzung u. a. auf Arabisch, Türkisch, Ukrainisch.' },
+    { icon: '🔒', title: 'Sicher & privat', text: 'Alles verschlüsselt auf Ihrem Gerät. Kein Konto.' },
+  ],
+
+  // ── Zahlen / Vertrauen ──────────────────────────────────────────
+  stats: [
+    { value: '6,2 Mio.', label: 'Erwachsene in Deutschland haben Mühe mit schweren Texten.', source: 'LEO-Studie 2018' },
+    { value: '~ 60 Sek.', label: 'braucht die App, um einen Brief zu erklären.', source: '' },
+  ],
+
+  // ── So funktioniert es ──────────────────────────────────────────
+  stepsTitle: 'So funktioniert es',
+  steps: [
+    { title: 'Brief fotografieren', text: 'Mit dem Handy, auch als PDF.' },
+    { title: 'Klartext lesen', text: 'Kurz, einfach, ohne schwere Wörter.' },
+    { title: 'Richtig reagieren', text: 'Frist merken, Antwort erstellen, fertig.' },
+  ],
+
+  // ── Anmeldung / Warteliste ──────────────────────────────────────
+  waitlist: {
+    id: 'anmelden',
+    title: 'Seien Sie früh dabei',
+    text: 'Tragen Sie sich ein — wir schreiben Ihnen, sobald es losgeht.',
+    bonus: '🎁 Als Dankeschön: 5 Gratis-Analysen statt 3.',
+    // Formular-Adresse (z. B. Brevo). Leer = nur ein Mailto-Knopf.
+    formAction: '',
+    emailPlaceholder: 'Ihre E-Mail-Adresse',
+    buttonLabel: 'Eintragen →',
+    note: 'Keine Werbung. Jederzeit abmeldbar.',
+  },
+
+  // ── Häufige Fragen ──────────────────────────────────────────────
+  faqTitle: 'Häufige Fragen',
+  faq: [
+    { q: 'Was kostet die App?', a: 'Die ersten Analysen sind gratis. Danach ein günstiges Abo.' },
+    { q: 'Was passiert mit meinen Daten?', a: 'Ihre Briefe bleiben verschlüsselt auf Ihrem Gerät.' },
+  ],
+
+  // ── Fußzeile ────────────────────────────────────────────────────
+  footer: {
+    links: [
+      { label: 'Impressum', href: '/impressum.html' },
+      { label: 'Datenschutz', href: '/datenschutz.html' },
+    ],
+    note: 'Diese Seite ist kein echter Amtsbrief.',
+  },
+};