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:
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
node_modules/
|
||||||
|
.DS_Store
|
||||||
|
~$*
|
||||||
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.
|
||||||
207
build.js
Normal file
207
build.js
Normal file
@@ -0,0 +1,207 @@
|
|||||||
|
/**
|
||||||
|
* BUILD — macht aus config.js die fertige dist/index.html.
|
||||||
|
* Aufruf: node build.js
|
||||||
|
*
|
||||||
|
* Hier steckt das DESIGN. Normalerweise musst du diese Datei nicht anfassen —
|
||||||
|
* nur config.js ausfüllen. Wer das Layout ändern will, ist hier richtig.
|
||||||
|
*/
|
||||||
|
const fs = require('fs');
|
||||||
|
const path = require('path');
|
||||||
|
const c = require('./config.js');
|
||||||
|
|
||||||
|
// kleine Helfer -------------------------------------------------------
|
||||||
|
const esc = (s = '') => String(s).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||||
|
const has = (x) => Array.isArray(x) ? x.length > 0 : !!x;
|
||||||
|
const papier = c.theme !== 'clean'; // Standard = Papier-Look
|
||||||
|
|
||||||
|
// CSS ----------------------------------------------------------------
|
||||||
|
const css = `
|
||||||
|
:root{
|
||||||
|
--bg:${c.colors.bg}; --text:${c.colors.text}; --accent:${c.colors.accent};
|
||||||
|
--marker:${c.colors.marker};
|
||||||
|
--grau:color-mix(in srgb, var(--text) 55%, transparent);
|
||||||
|
--linie:color-mix(in srgb, var(--text) 18%, transparent);
|
||||||
|
color-scheme:light;
|
||||||
|
}
|
||||||
|
*{margin:0;padding:0;box-sizing:border-box}
|
||||||
|
html{scroll-behavior:smooth}
|
||||||
|
body{
|
||||||
|
font-family:${papier ? "Georgia,'Times New Roman',serif" : "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif"};
|
||||||
|
color:var(--text); line-height:1.7; font-size:17px;
|
||||||
|
background:${papier
|
||||||
|
? "repeating-linear-gradient(0deg,transparent 0 34px,rgba(0,0,0,.025) 34px 35px),var(--bg)"
|
||||||
|
: "var(--bg)"};
|
||||||
|
}
|
||||||
|
.wrap{max-width:720px;margin:0 auto;padding:0 20px 72px}
|
||||||
|
a{color:var(--accent)}
|
||||||
|
.kopf{display:flex;justify-content:space-between;align-items:baseline;padding:20px 0 12px;border-bottom:2px solid var(--text);font-size:15px}
|
||||||
|
.marke{font-weight:700;font-size:17px;text-decoration:none;color:var(--text)}
|
||||||
|
header{padding:44px 0 8px}
|
||||||
|
.kicker{font-size:13px;color:var(--grau);text-transform:uppercase;letter-spacing:.14em;margin-bottom:10px}
|
||||||
|
h1{font-size:clamp(34px,7vw,52px);line-height:1.12;font-weight:700;letter-spacing:-.01em}
|
||||||
|
.mark{background:linear-gradient(104deg,transparent 2%,var(--marker) 4%,var(--marker) 96%,transparent 98%);padding:0 6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
|
||||||
|
.anrede{margin-top:24px;font-size:19px;max-width:560px}
|
||||||
|
.hero-fuss{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:30px}
|
||||||
|
.cta{display:inline-block;padding:16px 28px;background:var(--accent);color:#fff;text-decoration:none;font-family:inherit;font-size:17px;font-weight:700;border:2px solid var(--text);box-shadow:5px 5px 0 var(--text);transition:transform .12s,box-shadow .12s}
|
||||||
|
.cta:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--text)}
|
||||||
|
.cta-sek{background:#fff;color:var(--accent)}
|
||||||
|
.stempel{display:inline-block;padding:7px 14px;border:2.5px solid var(--accent);color:var(--accent);font-family:${papier ? "'Courier New',monospace" : 'inherit'};font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;${papier ? 'transform:rotate(-4deg);' : 'border-radius:6px;'}opacity:.9}
|
||||||
|
section{margin-top:60px}
|
||||||
|
h2{font-size:15px;text-transform:uppercase;letter-spacing:.14em;color:var(--grau);font-weight:400;margin-bottom:22px;display:flex;align-items:center;gap:12px}
|
||||||
|
h2::after{content:'';flex:1;border-top:1px solid var(--linie)}
|
||||||
|
h2 .nr{font-family:'Courier New',monospace}
|
||||||
|
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
|
||||||
|
@media(max-width:560px){.grid{grid-template-columns:1fr}}
|
||||||
|
.karte{background:#fff;border:1px solid var(--linie);padding:20px 22px;${papier ? 'box-shadow:4px 5px 0 rgba(0,0,0,.06);' : 'border-radius:12px;'}}
|
||||||
|
.karte .ico{font-size:26px}
|
||||||
|
.karte h3{font-size:19px;margin:8px 0 4px}
|
||||||
|
.karte p{font-size:15px;color:var(--grau)}
|
||||||
|
.zahl{font-size:38px;font-weight:700;color:var(--accent);line-height:1.1}
|
||||||
|
.zahl-erkl{font-size:15px;color:var(--grau);margin-top:6px}
|
||||||
|
.zahl-q{font-size:12px;color:var(--grau);margin-top:8px;font-family:'Courier New',monospace}
|
||||||
|
.schritt{display:flex;gap:20px;padding:18px 4px;border-bottom:1px solid var(--linie);align-items:baseline}
|
||||||
|
.schritt:last-child{border-bottom:none}
|
||||||
|
.schritt .n{font-family:'Courier New',monospace;font-size:28px;font-weight:700;color:var(--accent);width:48px;flex-shrink:0}
|
||||||
|
.schritt strong{font-size:19px;display:block;margin-bottom:2px}
|
||||||
|
.schritt span{color:var(--grau);font-size:16px}
|
||||||
|
.antrag{background:#fff;border:2px solid var(--text);${papier ? 'box-shadow:7px 8px 0 rgba(0,0,0,.85);' : 'border-radius:14px;box-shadow:0 4px 16px rgba(0,0,0,.08);'}padding:28px 26px}
|
||||||
|
.antrag h3{font-size:26px;line-height:1.25}
|
||||||
|
.antrag p{margin-top:12px;max-width:520px}
|
||||||
|
.bonus{margin:16px 0;padding:12px 16px;background:linear-gradient(104deg,transparent 1%,var(--marker) 3%,var(--marker) 97%,transparent 99%);font-size:16px}
|
||||||
|
.wl-form{display:flex;flex-direction:column;gap:12px;margin-top:6px}
|
||||||
|
.wl-input{width:100%;padding:15px 16px;font-size:17px;font-family:inherit;border:2px solid var(--text);background:#fff;color:var(--text)}
|
||||||
|
.wl-btn{width:100%;cursor:pointer;text-align:center;font-family:inherit}
|
||||||
|
.klein{font-size:13.5px;color:var(--grau);margin-top:12px}
|
||||||
|
details{border-bottom:1px solid var(--linie);padding:14px 4px}
|
||||||
|
summary{font-weight:700;cursor:pointer;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:12px}
|
||||||
|
summary::-webkit-details-marker{display:none}
|
||||||
|
summary::after{content:'+';font-family:'Courier New',monospace;font-size:22px;color:var(--accent)}
|
||||||
|
details[open] summary::after{content:'–'}
|
||||||
|
details p{margin-top:10px;color:var(--grau);font-size:16px;max-width:580px}
|
||||||
|
footer{margin-top:56px;padding-top:16px;border-top:2px solid var(--text);font-size:14.5px;color:var(--grau)}
|
||||||
|
footer a{color:var(--grau)}
|
||||||
|
`;
|
||||||
|
|
||||||
|
// Abschnitte ---------------------------------------------------------
|
||||||
|
const nr = (n) => papier ? `<span class="nr">§ ${n}</span> ` : '';
|
||||||
|
let s = 0; // Abschnittszähler
|
||||||
|
|
||||||
|
function features() {
|
||||||
|
if (!has(c.features)) return '';
|
||||||
|
s++;
|
||||||
|
return `<section><h2>${nr(s)}${esc(c.featuresTitle || 'Vorteile')}</h2>
|
||||||
|
<div class="grid">${c.features.map(f => `
|
||||||
|
<div class="karte">${f.icon ? `<div class="ico">${esc(f.icon)}</div>` : ''}
|
||||||
|
<h3>${esc(f.title)}</h3><p>${esc(f.text)}</p></div>`).join('')}
|
||||||
|
</div></section>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function stats() {
|
||||||
|
if (!has(c.stats)) return '';
|
||||||
|
s++;
|
||||||
|
return `<section><h2>${nr(s)}In Zahlen</h2>
|
||||||
|
<div class="grid">${c.stats.map(z => `
|
||||||
|
<div class="karte"><div class="zahl">${esc(z.value)}</div>
|
||||||
|
<div class="zahl-erkl">${esc(z.label)}</div>
|
||||||
|
${z.source ? `<div class="zahl-q">Quelle: ${esc(z.source)}</div>` : ''}</div>`).join('')}
|
||||||
|
</div></section>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function steps() {
|
||||||
|
if (!has(c.steps)) return '';
|
||||||
|
s++;
|
||||||
|
return `<section><h2>${nr(s)}${esc(c.stepsTitle || 'So funktioniert es')}</h2>
|
||||||
|
${c.steps.map((st, i) => `
|
||||||
|
<div class="schritt"><div class="n">${String(i + 1).padStart(2, '0')}</div>
|
||||||
|
<div><strong>${esc(st.title)}</strong><span>${esc(st.text)}</span></div></div>`).join('')}
|
||||||
|
</section>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function waitlist() {
|
||||||
|
const w = c.waitlist; if (!w || !w.title) return '';
|
||||||
|
s++;
|
||||||
|
const form = w.formAction
|
||||||
|
? `<form class="wl-form" action="${esc(w.formAction)}" method="POST">
|
||||||
|
<input class="wl-input" type="email" name="EMAIL" placeholder="${esc(w.emailPlaceholder || 'E-Mail')}" required>
|
||||||
|
<input type="text" name="email_address_check" value="" style="position:absolute;left:-5000px" tabindex="-1" aria-hidden="true">
|
||||||
|
<input type="hidden" name="locale" value="${esc(c.brand.lang || 'de')}"><input type="hidden" name="html_type" value="simple">
|
||||||
|
<button class="cta wl-btn" type="submit">${esc(w.buttonLabel || 'Eintragen')}</button>
|
||||||
|
</form>`
|
||||||
|
: `<a class="cta" style="width:auto" href="mailto:?subject=${encodeURIComponent(c.brand.name + ' Warteliste')}">${esc(w.buttonLabel || 'Per E-Mail eintragen')}</a>`;
|
||||||
|
return `<section id="${esc(w.id || 'anmelden')}"><h2>${nr(s)}Warteliste</h2>
|
||||||
|
<div class="antrag"><h3>${esc(w.title)}</h3>
|
||||||
|
${w.text ? `<p>${esc(w.text)}</p>` : ''}
|
||||||
|
${w.bonus ? `<p class="bonus">${esc(w.bonus)}</p>` : ''}
|
||||||
|
${form}
|
||||||
|
${w.note ? `<p class="klein">${esc(w.note)}</p>` : ''}
|
||||||
|
</div></section>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function faq() {
|
||||||
|
if (!has(c.faq)) return '';
|
||||||
|
s++;
|
||||||
|
return `<section><h2>${nr(s)}${esc(c.faqTitle || 'Häufige Fragen')}</h2>
|
||||||
|
${c.faq.map(f => `<details><summary>${esc(f.q)}</summary><p>${esc(f.a)}</p></details>`).join('')}
|
||||||
|
</section>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Seite zusammenbauen ------------------------------------------------
|
||||||
|
const h = c.hero || {};
|
||||||
|
const secondary = h.secondaryCta && h.secondaryCta.href !== h.primaryCta?.href
|
||||||
|
? `<a class="cta cta-sek" href="${esc(h.secondaryCta.href)}">${esc(h.secondaryCta.label)}</a>` : '';
|
||||||
|
|
||||||
|
const html = `<!DOCTYPE html>
|
||||||
|
<html lang="${esc(c.brand.lang || 'de')}">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>${esc(c.seo.title || c.brand.name)}</title>
|
||||||
|
<meta name="description" content="${esc(c.seo.description || '')}">
|
||||||
|
${c.brand.url ? `<link rel="canonical" href="${esc(c.brand.url)}/">` : ''}
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:title" content="${esc(c.seo.title || c.brand.name)}">
|
||||||
|
<meta property="og:description" content="${esc(c.seo.description || '')}">
|
||||||
|
${c.seo.ogImage ? `<meta property="og:image" content="${esc(c.seo.ogImage)}">` : ''}
|
||||||
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
|
<style>${css}</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="kopf"><a class="marke" href="/">${c.brand.emoji ? esc(c.brand.emoji) + ' ' : ''}${esc(c.brand.name)}</a></div>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
${h.kicker ? `<p class="kicker">${esc(h.kicker)}</p>` : ''}
|
||||||
|
<h1>${esc(h.title || c.brand.name)}${h.titleHighlight ? `<br><span class="mark">${esc(h.titleHighlight)}</span>` : ''}</h1>
|
||||||
|
${h.text ? `<p class="anrede">${esc(h.text)}</p>` : ''}
|
||||||
|
<div class="hero-fuss">
|
||||||
|
${h.primaryCta ? `<a class="cta" href="${esc(h.primaryCta.href)}">${esc(h.primaryCta.label)}</a>` : ''}
|
||||||
|
${secondary}
|
||||||
|
${h.stamp ? `<span class="stempel">${esc(h.stamp)}</span>` : ''}
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
${features()}
|
||||||
|
${stats()}
|
||||||
|
${steps()}
|
||||||
|
${waitlist()}
|
||||||
|
${faq()}
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
${(c.footer?.links || []).map(l => `<a href="${esc(l.href)}">${esc(l.label)}</a>`).join(' · ')}
|
||||||
|
${c.footer?.note ? `<p style="margin-top:10px">${esc(c.footer.note)}</p>` : ''}
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
${c.analyticsToken ? `<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js" data-cf-beacon='{"token": "${esc(c.analyticsToken)}"}'></script>` : ''}
|
||||||
|
</body>
|
||||||
|
</html>`;
|
||||||
|
|
||||||
|
// schreiben ----------------------------------------------------------
|
||||||
|
const out = path.join(__dirname, 'dist');
|
||||||
|
fs.mkdirSync(out, { recursive: true });
|
||||||
|
fs.writeFileSync(path.join(out, 'index.html'), html);
|
||||||
|
// assets/ (Favicon etc.) mitkopieren, falls vorhanden
|
||||||
|
const assets = path.join(__dirname, 'assets');
|
||||||
|
if (fs.existsSync(assets)) {
|
||||||
|
for (const f of fs.readdirSync(assets)) fs.copyFileSync(path.join(assets, f), path.join(out, f));
|
||||||
|
}
|
||||||
|
console.log(`✓ Fertig: dist/index.html (Theme: ${c.theme}, ${s} Abschnitte)`);
|
||||||
102
config.js
Normal file
102
config.js
Normal file
@@ -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.',
|
||||||
|
},
|
||||||
|
};
|
||||||
141
dist/index.html
vendored
Normal file
141
dist/index.html
vendored
Normal file
@@ -0,0 +1,141 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Behördenbriefe einfach erklärt – per Foto | BehördenKlar</title>
|
||||||
|
<meta name="description" content="BehördenKlar erklärt Amtsbriefe in einfacher Sprache: Foto machen, verstehen, richtig reagieren – in 9 Sprachen.">
|
||||||
|
<link rel="canonical" href="https://behoerdenklar.de/">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:title" content="Behördenbriefe einfach erklärt – per Foto | BehördenKlar">
|
||||||
|
<meta property="og:description" content="BehördenKlar erklärt Amtsbriefe in einfacher Sprache: Foto machen, verstehen, richtig reagieren – in 9 Sprachen.">
|
||||||
|
<meta property="og:image" content="https://behoerdenklar.de/vorschau.png">
|
||||||
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
|
<style>
|
||||||
|
:root{
|
||||||
|
--bg:#faf7f0; --text:#21211d; --accent:#1d4e89;
|
||||||
|
--marker:#ffe66b;
|
||||||
|
--grau:color-mix(in srgb, var(--text) 55%, transparent);
|
||||||
|
--linie:color-mix(in srgb, var(--text) 18%, transparent);
|
||||||
|
color-scheme:light;
|
||||||
|
}
|
||||||
|
*{margin:0;padding:0;box-sizing:border-box}
|
||||||
|
html{scroll-behavior:smooth}
|
||||||
|
body{
|
||||||
|
font-family:Georgia,'Times New Roman',serif;
|
||||||
|
color:var(--text); line-height:1.7; font-size:17px;
|
||||||
|
background:repeating-linear-gradient(0deg,transparent 0 34px,rgba(0,0,0,.025) 34px 35px),var(--bg);
|
||||||
|
}
|
||||||
|
.wrap{max-width:720px;margin:0 auto;padding:0 20px 72px}
|
||||||
|
a{color:var(--accent)}
|
||||||
|
.kopf{display:flex;justify-content:space-between;align-items:baseline;padding:20px 0 12px;border-bottom:2px solid var(--text);font-size:15px}
|
||||||
|
.marke{font-weight:700;font-size:17px;text-decoration:none;color:var(--text)}
|
||||||
|
header{padding:44px 0 8px}
|
||||||
|
.kicker{font-size:13px;color:var(--grau);text-transform:uppercase;letter-spacing:.14em;margin-bottom:10px}
|
||||||
|
h1{font-size:clamp(34px,7vw,52px);line-height:1.12;font-weight:700;letter-spacing:-.01em}
|
||||||
|
.mark{background:linear-gradient(104deg,transparent 2%,var(--marker) 4%,var(--marker) 96%,transparent 98%);padding:0 6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
|
||||||
|
.anrede{margin-top:24px;font-size:19px;max-width:560px}
|
||||||
|
.hero-fuss{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:30px}
|
||||||
|
.cta{display:inline-block;padding:16px 28px;background:var(--accent);color:#fff;text-decoration:none;font-family:inherit;font-size:17px;font-weight:700;border:2px solid var(--text);box-shadow:5px 5px 0 var(--text);transition:transform .12s,box-shadow .12s}
|
||||||
|
.cta:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--text)}
|
||||||
|
.cta-sek{background:#fff;color:var(--accent)}
|
||||||
|
.stempel{display:inline-block;padding:7px 14px;border:2.5px solid var(--accent);color:var(--accent);font-family:'Courier New',monospace;font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;transform:rotate(-4deg);opacity:.9}
|
||||||
|
section{margin-top:60px}
|
||||||
|
h2{font-size:15px;text-transform:uppercase;letter-spacing:.14em;color:var(--grau);font-weight:400;margin-bottom:22px;display:flex;align-items:center;gap:12px}
|
||||||
|
h2::after{content:'';flex:1;border-top:1px solid var(--linie)}
|
||||||
|
h2 .nr{font-family:'Courier New',monospace}
|
||||||
|
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
|
||||||
|
@media(max-width:560px){.grid{grid-template-columns:1fr}}
|
||||||
|
.karte{background:#fff;border:1px solid var(--linie);padding:20px 22px;box-shadow:4px 5px 0 rgba(0,0,0,.06);}
|
||||||
|
.karte .ico{font-size:26px}
|
||||||
|
.karte h3{font-size:19px;margin:8px 0 4px}
|
||||||
|
.karte p{font-size:15px;color:var(--grau)}
|
||||||
|
.zahl{font-size:38px;font-weight:700;color:var(--accent);line-height:1.1}
|
||||||
|
.zahl-erkl{font-size:15px;color:var(--grau);margin-top:6px}
|
||||||
|
.zahl-q{font-size:12px;color:var(--grau);margin-top:8px;font-family:'Courier New',monospace}
|
||||||
|
.schritt{display:flex;gap:20px;padding:18px 4px;border-bottom:1px solid var(--linie);align-items:baseline}
|
||||||
|
.schritt:last-child{border-bottom:none}
|
||||||
|
.schritt .n{font-family:'Courier New',monospace;font-size:28px;font-weight:700;color:var(--accent);width:48px;flex-shrink:0}
|
||||||
|
.schritt strong{font-size:19px;display:block;margin-bottom:2px}
|
||||||
|
.schritt span{color:var(--grau);font-size:16px}
|
||||||
|
.antrag{background:#fff;border:2px solid var(--text);box-shadow:7px 8px 0 rgba(0,0,0,.85);padding:28px 26px}
|
||||||
|
.antrag h3{font-size:26px;line-height:1.25}
|
||||||
|
.antrag p{margin-top:12px;max-width:520px}
|
||||||
|
.bonus{margin:16px 0;padding:12px 16px;background:linear-gradient(104deg,transparent 1%,var(--marker) 3%,var(--marker) 97%,transparent 99%);font-size:16px}
|
||||||
|
.wl-form{display:flex;flex-direction:column;gap:12px;margin-top:6px}
|
||||||
|
.wl-input{width:100%;padding:15px 16px;font-size:17px;font-family:inherit;border:2px solid var(--text);background:#fff;color:var(--text)}
|
||||||
|
.wl-btn{width:100%;cursor:pointer;text-align:center;font-family:inherit}
|
||||||
|
.klein{font-size:13.5px;color:var(--grau);margin-top:12px}
|
||||||
|
details{border-bottom:1px solid var(--linie);padding:14px 4px}
|
||||||
|
summary{font-weight:700;cursor:pointer;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:12px}
|
||||||
|
summary::-webkit-details-marker{display:none}
|
||||||
|
summary::after{content:'+';font-family:'Courier New',monospace;font-size:22px;color:var(--accent)}
|
||||||
|
details[open] summary::after{content:'–'}
|
||||||
|
details p{margin-top:10px;color:var(--grau);font-size:16px;max-width:580px}
|
||||||
|
footer{margin-top:56px;padding-top:16px;border-top:2px solid var(--text);font-size:14.5px;color:var(--grau)}
|
||||||
|
footer a{color:var(--grau)}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="kopf"><a class="marke" href="/">📬 BehördenKlar</a></div>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<p class="kicker">Betreff</p>
|
||||||
|
<h1>Brief vom Amt.<br><span class="mark">Endlich verstanden.</span></h1>
|
||||||
|
<p class="anrede">Ein Brief vom Amt muss nicht schwer sein. Machen Sie ein Foto — die App erklärt ihn in einfachen Worten.</p>
|
||||||
|
<div class="hero-fuss">
|
||||||
|
<a class="cta" href="#anmelden">📷 Kostenlos testen</a>
|
||||||
|
|
||||||
|
<span class="stempel">Bald verfügbar</span>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section><h2><span class="nr">§ 1</span> Was die App kann</h2>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="karte"><div class="ico">🔎</div>
|
||||||
|
<h3>Klartext statt Amtsdeutsch</h3><p>Jeder Brief in einfacher Sprache erklärt.</p></div>
|
||||||
|
<div class="karte"><div class="ico">⏰</div>
|
||||||
|
<h3>Fristen im Blick</h3><p>Die App zeigt, bis wann Sie handeln müssen.</p></div>
|
||||||
|
<div class="karte"><div class="ico">🌍</div>
|
||||||
|
<h3>9 Sprachen</h3><p>Übersetzung u. a. auf Arabisch, Türkisch, Ukrainisch.</p></div>
|
||||||
|
<div class="karte"><div class="ico">🔒</div>
|
||||||
|
<h3>Sicher & privat</h3><p>Alles verschlüsselt auf Ihrem Gerät. Kein Konto.</p></div>
|
||||||
|
</div></section>
|
||||||
|
<section><h2><span class="nr">§ 2</span> In Zahlen</h2>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="karte"><div class="zahl">6,2 Mio.</div>
|
||||||
|
<div class="zahl-erkl">Erwachsene in Deutschland haben Mühe mit schweren Texten.</div>
|
||||||
|
<div class="zahl-q">Quelle: LEO-Studie 2018</div></div>
|
||||||
|
<div class="karte"><div class="zahl">~ 60 Sek.</div>
|
||||||
|
<div class="zahl-erkl">braucht die App, um einen Brief zu erklären.</div>
|
||||||
|
</div>
|
||||||
|
</div></section>
|
||||||
|
<section><h2><span class="nr">§ 3</span> So funktioniert es</h2>
|
||||||
|
|
||||||
|
<div class="schritt"><div class="n">01</div>
|
||||||
|
<div><strong>Brief fotografieren</strong><span>Mit dem Handy, auch als PDF.</span></div></div>
|
||||||
|
<div class="schritt"><div class="n">02</div>
|
||||||
|
<div><strong>Klartext lesen</strong><span>Kurz, einfach, ohne schwere Wörter.</span></div></div>
|
||||||
|
<div class="schritt"><div class="n">03</div>
|
||||||
|
<div><strong>Richtig reagieren</strong><span>Frist merken, Antwort erstellen, fertig.</span></div></div>
|
||||||
|
</section>
|
||||||
|
<section id="anmelden"><h2><span class="nr">§ 4</span> Warteliste</h2>
|
||||||
|
<div class="antrag"><h3>Seien Sie früh dabei</h3>
|
||||||
|
<p>Tragen Sie sich ein — wir schreiben Ihnen, sobald es losgeht.</p>
|
||||||
|
<p class="bonus">🎁 Als Dankeschön: 5 Gratis-Analysen statt 3.</p>
|
||||||
|
<a class="cta" style="width:auto" href="mailto:?subject=Beh%C3%B6rdenKlar%20Warteliste">Eintragen →</a>
|
||||||
|
<p class="klein">Keine Werbung. Jederzeit abmeldbar.</p>
|
||||||
|
</div></section>
|
||||||
|
<section><h2><span class="nr">§ 5</span> Häufige Fragen</h2>
|
||||||
|
<details><summary>Was kostet die App?</summary><p>Die ersten Analysen sind gratis. Danach ein günstiges Abo.</p></details><details><summary>Was passiert mit meinen Daten?</summary><p>Ihre Briefe bleiben verschlüsselt auf Ihrem Gerät.</p></details>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<a href="/impressum.html">Impressum</a> · <a href="/datenschutz.html">Datenschutz</a>
|
||||||
|
<p style="margin-top:10px">Diese Seite ist kein echter Amtsbrief.</p>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user