Mietendeckel-Initiative
Kampagne für eine Begrenzung der Mietpreissteigerungen in der Stadt.
Entwickler-Dokumentation
Wiederverwendbare Sektionen für die Landing Pages der Unterorganisationen. Kopiere die Snippets und füge sie in src/lib/landing-content.tsx ein. Jeder Baustein übernimmt automatisch die Akzentfarbe der Organisation, in der er eingefügt wird.
Unten findest du alle verfügbaren Bausteine mit Live-Vorschau.
Per Klick auf das Copy-Icon landet das Snippet in der Zwischenablage.
Öffne src/lib/landing-content.tsx und füge das Snippet unter dem Slug der Organisation ein.
Für Bereich-Landing-Pages in landing-content.tsx.
Speziell für Service-Vorstellungsseiten in service-content.tsx.
Für strukturierte Info-Seiten in info-content.tsx.
Bereich-Landing-Page
src/lib/landing-content.tsxSchlüssel: orgSlug · z.B. "wohnen"
Service-Vorstellungsseite
src/lib/service-content.tsxSchlüssel: `orgSlug/serviceSlug` · z.B. "wohnen/beitritt"
Info-Seite
src/lib/info-content.tsxSchlüssel: `orgSlug/pageSlug` · z.B. "wohnen/satzung"
Imports stehen bereits oben in den jeweiligen Content-Dateien.
import {
// Generelle Bausteine
AccentHero, ManifestBlock, PrinciplesGrid, StatsBar,
InitiativesGrid, TeamGrid, FaqList, NewsSection,
CallToAction, TextBlock,
// Service-Bausteine
ServiceHero, InfoCards, BenefitsList, ProcessSteps,
RequirementsList, PriceCard, TestimonialBlock, ServiceCallToAction,
// Info-Seiten-Bausteine
PageHeader, TableOfContents, DefinitionList, Timeline,
AccordionList, InfoBox, ContactBlock, DocumentList, TwoColumnText,
} from "@/components/landing/sections";Diese Bausteine bilden den Aufbau einer Bereich-Landing-Page.
Großer farbiger Block mit Headline, Untertitel und CTA. Plakat-Auftakt der Landing Page.
Vorschau
Snippet
<AccentHero
eyebrow="Wohnen & Stadt"
title="Wohnen ist Menschenrecht."
subtitle="Wir entwickeln gemeinschaftliche Wohnprojekte und kämpfen für bezahlbaren Wohnraum."
ctaLabel="Mitglied werden"
ctaHref="/register"
stamp="Aktiv seit 2024"
/>Schwarzer Block mit großer Manifest-Aussage. Eine farbige Hervorhebung kann optional gesetzt werden.
Vorschau
Unser Manifest
Statt Spekulation: solidarische Hausprojekte und Mieterinitiativen.
Snippet
<ManifestBlock
eyebrow="Unser Manifest"
statement="Stadt gehört denen,"
highlight="die in ihr leben."
body="Statt Spekulation, Verdrängung und Wohnungsnot: solidarische Hausprojekte und Mieterinitiativen."
/>Nummerierte Grundsätze als Karten – ideal für Werte oder Selbstverständnis.
Vorschau
Wohnraum nie als Spekulationsobjekt.
Konsensentscheidungen in jeder Hausgemeinschaft.
Solidarische Mietkalkulation.
Ökologisch sanieren statt abreißen.
Snippet
<PrinciplesGrid
title="Vier Grundsätze."
principles={[
"Wohnraum nie als Spekulationsobjekt.",
"Konsensentscheidungen in jeder Hausgemeinschaft.",
"Solidarische Mietkalkulation.",
"Ökologisch sanieren statt abreißen.",
]}
/>Horizontale Statistik-Leiste – Zahlen, die für sich sprechen.
Vorschau
Snippet
<StatsBar
stats={[
{ label: "Mitglieder", value: 124 },
{ label: "Projekte", value: 7 },
{ label: "Wohnungen", value: 42 },
{ label: "Jahre aktiv", value: "2+" },
]}
/>Editorial-Textblock mit Eyebrow, Headline und Fließtext. Absätze mit doppeltem Newline.
Vorschau
Wir glauben an Wirtschaft jenseits der Profitlogik. An Räume, die uns gehören, weil wir sie pflegen.
Unser Selbstverständnis ist solidarisch und basisdemokratisch.
Snippet
<TextBlock
eyebrow="Über uns"
title="Warum wir das tun."
body={`Erster Absatz mit Argumentation oder Geschichte.
Zweiter Absatz mit weiterführender Information.`}
/>Liest automatisch alle Initiativen der Org aus dem Store. Erscheint nur, wenn welche existieren.
Vorschau
Kampagne für eine Begrenzung der Mietpreissteigerungen in der Stadt.
Solidarischer Hauskauf zur Spekulationssicherung.
Snippet
<InitiativesGrid title="Aktuelle Projekte." />Listet alle Mitglieder der Org. Dunkler Hintergrund, Akzent-Borders.
Vorschau
Die Menschen dahinter
Funktionär:innen, Koordinator:innen und aktive Mitglieder.
Funktionär:in
Koordiniert Wohnprojekte und Bildungsinitiativen.
Helfer:in
Studentin, unterstützt bei Mitgliederbetreuung.
Mitglied
Snippet
<TeamGrid
title="Wir machen das."
subtitle="Funktionär:innen, Koordinator:innen und aktive Mitglieder."
/>Klappbare FAQ-Liste. Inhalte werden im Bereich-Editor gepflegt.
Vorschau
Snippet
<FaqList />Listet bis zu 3 öffentliche News-Beiträge der Org. Limit kann angepasst werden.
Vorschau
Snippet
<NewsSection title="Aus dem Bereich." limit={3} />Abschließender Mobilisierungs-Block in Akzentfarbe. Optimal als letzter Section vor dem Footer.
Vorschau
Wir suchen Mitstreiter:innen für laufende Projekte.
Snippet
<CallToAction
title="Bau mit. Wohn mit."
body="Wir suchen Mitstreiter:innen für laufende Projekte."
primaryLabel="Jetzt beitreten"
/>Diese Bausteine erklären und bewerben einen einzelnen Service. Sie nutzen die Akzentfarbe der zugehörigen Organisation.
Auftakt einer Service-Vorstellungsseite. Großer farbiger Block mit Direkt-Link zum Antragsformular und kompakter Übersichts-Kachel rechts.
Vorschau
Beispiel-Service
Werde Teil unserer Wohnprojekte.
Snippet
<ServiceHero
eyebrow="Beitritt zum Wohnen-Bereich"
title="Solidarisch wohnen."
subtitle="Werde Teil unserer Wohnprojekte: gemeinschaftlich entscheiden, fair kalkulieren."
applyHref={applyHref}
serviceTag="Mitglieds-Service"
/>Kompakte Zahlenleiste – ideal für Eckdaten wie Bearbeitungszeit, Mindestalter, Kosten.
Vorschau
Bearbeitung
2–3 Wochen
nach Eingang
Beitrag
12 € / Monat
Mindestalter
18 Jahre
Probezeit
6 Monate
Snippet
<InfoCards
cards={[
{ label: "Bearbeitung", value: "2-3 Wochen", hint: "nach Eingang" },
{ label: "Beitrag", value: "12 € / Monat" },
{ label: "Mindestalter", value: "18 Jahre" },
{ label: "Probezeit", value: "6 Monate" },
]}
/>Nummerierte Vorteils-Karten. „Was bekommst du?" – kurze Titel mit erklärendem Untertitel.
Vorschau
Zu allen Projekten.
Konsens-Entscheidungen.
Kostenfrei für Mitglieder.
Gestaffelt nach Tragfähigkeit.
Snippet
<BenefitsList
title="Was du bekommst."
benefits={[
{ title: "Zugang zu Wohnprojekten", body: "Sechs aktive Häuser, drei in Planung." },
{ title: "Mitspracherecht", body: "Konsens auf allen Ebenen." },
{ title: "Beratungs-Pool", body: "Juristisch und finanziell." },
{ title: "Solidarmiete", body: "Nach Tragfähigkeit gestaffelt." },
]}
/>„So läuft's ab" – nummerierte Schritte mit Pfeilverbindern. Macht den Antragsprozess transparent.
Vorschau
Formular online ausfüllen.
Kennenlern-Gespräch.
Entscheidung in MV.
Willkommen!
Snippet
<ProcessSteps
title="So läuft's ab."
steps={[
{ title: "Antrag stellen", body: "Online-Formular ausfüllen." },
{ title: "Kennenlern-Treffen", body: "Persönliches Gespräch." },
{ title: "Entscheidung", body: "Konsens in der MV." },
{ title: "Willkommen!", body: "Onboarding und Mentoring." },
]}
/>Voraussetzungs-Checkliste mit grünen Häkchen. Negative Kriterien („nicht nötig") werden durchgestrichen dargestellt.
Vorschau
Snippet
<RequirementsList
title="Was du mitbringen solltest."
requirements={[
{ text: "Bereitschaft zu Konsensentscheidungen" },
{ text: "Mindestens 18 Jahre alt" },
{ text: "Engagement von 4h/Monat" },
{ text: "Vorerfahrung in Genossenschaften", required: false },
]}
/>Beitrags- oder Kosten-Tarife. Bis zu drei Tiers; ein Tarif kann mit `highlighted: true` in der Akzentfarbe hervorgehoben werden.
Vorschau
Wähle nach Tragfähigkeit.
Studis & geringe Einkommen.
Regulärer Beitrag.
Trägst andere mit.
Snippet
<PriceCard
title="Solidarischer Beitrag."
subtitle="Wähle nach Tragfähigkeit – ohne Nachweis."
tiers={[
{ label: "Niedrig", price: "6 €", unit: "/Monat", description: "Für Studis & geringe Einkommen.", features: ["Vollstimmrecht", "Alle Services"] },
{ label: "Solidarisch", price: "12 €", unit: "/Monat", description: "Regulärer Beitrag.", features: ["Vollstimmrecht", "Alle Services"], highlighted: true },
{ label: "Stark", price: "24 €", unit: "/Monat", description: "Trägst andere mit.", features: ["Vollstimmrecht", "Alle Services", "Spenden-Bescheinigung"] },
]}
/>Zitate von Mitgliedern oder Nutzer:innen – schwarzer Block mit Akzent-Bordüren.
Vorschau
Stimmen
„Endlich Wohnen ohne Spekulation."
„Die Aufnahme war herzlich, die Strukturen klar."
„Konsens statt Mehrheit – funktioniert."
Snippet
<TestimonialBlock
testimonials={[
{ quote: "Endlich Wohnen ohne Spekulation.", author: "Mira K.", role: "Mitglied seit 2024" },
{ quote: "Die Aufnahme war herzlich, die Strukturen klar.", author: "Felix B.", role: "Sonnenhof" },
{ quote: "Konsens statt Mehrheit – das funktioniert.", author: "Anna L.", role: "Koordinatorin" },
]}
/>Direkter CTA-Block zum Antragsformular. Variante von CallToAction mit Direkt-Link zum Formular und „Bereits Mitglied"-Login-Hinweis.
Vorschau
Der Online-Antrag dauert keine 10 Minuten.
Snippet
<ServiceCallToAction
title="Bereit für solidarisches Wohnen?"
body="Der Online-Antrag dauert keine 10 Minuten."
applyHref={applyHref}
/>Diese Bausteine helfen beim Aufbau übersichtlicher Info-Seiten – Satzung, Kontakt, Häuser-Übersicht oder ähnliches. Werden in src/lib/info-content.tsx unter orgSlug/pageSlug eingefügt.
Kompakter Seiten-Header für Info-Seiten – farbiger Block mit Eyebrow, Titel und Lead-Text. Niedriger als AccentHero, ideal als Auftakt einer Sub-Seite.
Vorschau
Beispiel-Bereich
Was wir wollen und wie wir entscheiden.
Snippet
<PageHeader
eyebrow="Über uns · Wohnen & Stadt"
title="Satzung & Selbstverständnis"
lead="Was wir wollen, wie wir entscheiden und welche Grundsätze unsere Arbeit tragen."
/>Inhaltsverzeichnis mit Anker-Links zu Sections, die ihre `id` selbst setzen. Für lange Info-Seiten gut.
Vorschau
Snippet
<TableOfContents
items={[
{ id: "zweck", label: "Zweck" },
{ id: "mitgliedschaft", label: "Mitgliedschaft" },
{ id: "finanzen", label: "Finanzen" },
]}
/>Begriff-Erklärungs-Paare als sauber strukturierte Liste. Optimal für Satzungs-Paragrafen, Glossare und Definitionen.
Vorschau
Snippet
<DefinitionList
id="zweck"
eyebrow="§ 1"
title="Zweck"
definitions={[
{ term: "Mission", description: "Solidarisches Wohnen ermöglichen." },
{ term: "Geltungsbereich", description: "Für alle Mitglieder dieser Unterorganisation." },
]}
/>Zwei nebeneinander gestellte Text-Spalten mit eigenen Untertiteln. Gut für Kontraste, Vergleiche oder „Wir / Ihr"-Gegenüberstellungen. Absatzwechsel mit doppeltem Newline.
Vorschau
Alle wesentlichen Entscheidungen im Konsens.
Bei Patt: moderierte Klärung.
Wo Konsens unmöglich: 2/3-Mehrheit.
Personen-Entscheide im Konsens.
Snippet
<TwoColumnText
eyebrow="§ 3"
title="Entscheidungen"
leftTitle="Konsens"
leftBody={`Alle wesentlichen Entscheidungen im Konsens.
Bei Patt: moderierte Klärungsrunde.`}
rightTitle="Mehrheit"
rightBody={`Wo Konsens unmöglich: 2/3-Mehrheit.
Personen-Entscheidungen immer im Konsens.`}
/>Chronik-Darstellung mit Datum-Spalte links und Beschreibung rechts. Für Historie, Prozessabläufe oder Termin-Roadmaps.
Vorschau
Zum 1. des Monats.
Kassenbericht per E-Mail.
Zwei Mitglieder prüfen.
Snippet
<Timeline
title="Finanzen"
entries={[
{ date: "Monatlich", title: "Beitragseinzug", body: "Solidarbeitrag zum 1. des Monats." },
{ date: "Vierteljährlich", title: "Berichte", body: "Kassenbericht per E-Mail." },
{ date: "Jährlich", title: "Rechnungsprüfung", body: "Zwei gewählte Mitglieder prüfen." },
]}
/>Aufklappbare Inhalte – für Listen mit längeren Erklärungen ohne die Seite zu überfrachten. Absatzwechsel im Body mit doppeltem Newline.
Vorschau
Seit 2024 genossenschaftlich. 12 Bewohner:innen.
Drei Wohneinheiten, Wagenburg-Anschluss.
Snippet
<AccordionList
title="Häuser im Detail"
items={[
{ title: "Sonnenhof", body: "Seit 2024 in genossenschaftlicher Hand. 12 Bewohner:innen." },
{ title: "Lindenstraße", body: "Drei Wohneinheiten, Wagenburg-Anschluss." },
]}
/>Hervorgehobener Callout-Block mit Icon. Vier Tonalitäten: info (Akzentfarbe), success (grün), warning (orange), danger (rot). Für Hinweise, Warnungen und wichtige Notizen.
Vorschau
Snippet
<InfoBox tone="warning" title="Wichtiger Hinweis">
Bei Notfällen entscheidet der Vorstand selbstständig und berichtet
auf der nächsten Mitgliederversammlung.
</InfoBox>Kontakt-Block mit E-Mail, Telefon, Adresse, Sprechzeiten und optionalen Action-Links. Alle Felder sind optional – nur das anzeigen, was sinnvoll ist.
Vorschau
Antworten innerhalb 3 Werktagen.
Snippet
<ContactBlock
title="So erreichst du uns."
subtitle="Antworten meist innerhalb von drei Werktagen."
email="[email protected]"
phone="+49 30 12345-67"
address={"Solidaria eG\nMusterstraße 12\n10115 Berlin"}
hours={"Mo & Mi 14-18 Uhr\nFr 10-13 Uhr"}
links={[
{ label: "Termin buchen", href: "/portal/antraege/neu" },
]}
/>Liste herunterladbarer Dokumente mit Datei-Typ und Größe. Für Satzungen, Formulare, Berichte.
Vorschau
Snippet
<DocumentList
title="Dokumente"
documents={[
{ title: "Satzung 2026", href: "/docs/satzung.pdf", fileType: "PDF", size: "120 KB" },
{ title: "Beitrittsformular", href: "/docs/beitritt.pdf", fileType: "PDF", size: "45 KB" },
]}
/>In src/lib/landing-content.tsx:
export const landingContent: Record<string, ReactNode> = {
"wohnen": (
<>
<AccentHero
eyebrow="Wohnen & Stadt"
title="Wohnen ist Menschenrecht."
subtitle="..."
/>
<ManifestBlock
statement="Stadt gehört denen,"
highlight="die in ihr leben."
body="..."
/>
<PrinciplesGrid
title="Vier Grundsätze."
principles={["...", "...", "...", "..."]}
/>
<InitiativesGrid title="Aktuelle Projekte." />
<FaqList />
<CallToAction title="Bau mit." body="..." />
</>
),
};In src/lib/service-content.tsx. Die Funktion erhält applyHref – das ist der Link zum konkreten Formular.
export const serviceContent: Record<string, (args: { applyHref: string }) => ReactNode> = {
"wohnen/beitritt": ({ applyHref }) => (
<>
<ServiceHero
eyebrow="Beitritt zum Wohnen-Bereich"
title="Solidarisch wohnen."
subtitle="..."
applyHref={applyHref}
/>
<InfoCards cards={[
{ label: "Bearbeitung", value: "2-3 Wochen" },
{ label: "Beitrag", value: "12 €/Monat" },
{ label: "Mindestalter", value: "18 Jahre" },
{ label: "Probezeit", value: "6 Monate" },
]} />
<BenefitsList title="Was du bekommst." benefits={[...]} />
<ProcessSteps title="So läuft's." steps={[...]} />
<RequirementsList title="Voraussetzungen." requirements={[...]} />
<TestimonialBlock testimonials={[...]} />
<FaqList />
<ServiceCallToAction
title="Bereit?"
body="Der Antrag dauert keine 10 Minuten."
applyHref={applyHref}
/>
</>
),
};