Zurück zur Startseite

Entwickler-Dokumentation

Landing-
Bausteine.

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.

Vorschau-Org:
01

Snippet auswählen

Unten findest du alle verfügbaren Bausteine mit Live-Vorschau.

02

Code kopieren

Per Klick auf das Copy-Icon landet das Snippet in der Zwischenablage.

03

Einfügen

Öffne src/lib/landing-content.tsx und füge das Snippet unter dem Slug der Organisation ein.

Allgemeine Bausteine

Für Bereich-Landing-Pages in landing-content.tsx.

Service-Bausteine

Speziell für Service-Vorstellungsseiten in service-content.tsx.

Info-Seiten-Bausteine

Für strukturierte Info-Seiten in info-content.tsx.

Wo einfügen?

Bereich-Landing-Page

src/lib/landing-content.tsx

Schlüssel: orgSlug · z.B. "wohnen"

Service-Vorstellungsseite

src/lib/service-content.tsx

Schlüssel: `orgSlug/serviceSlug` · z.B. "wohnen/beitritt"

Info-Seite

src/lib/info-content.tsx

Schlü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";
Allgemeine Bausteine

Für Bereich-Landing-Pages

Diese Bausteine bilden den Aufbau einer Bereich-Landing-Page.

01

AccentHero

Großer farbiger Block mit Headline, Untertitel und CTA. Plakat-Auftakt der Landing Page.

Vorschau

Vorschau

Beispiel-Bereich

Wohnen ist Menschenrecht.

Plakat-Auftakt mit Org-Akzentfarbe.

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"
/>
02

ManifestBlock

Schwarzer Block mit großer Manifest-Aussage. Eine farbige Hervorhebung kann optional gesetzt werden.

Vorschau

Unser Manifest

Stadt gehört denen, die in ihr leben.

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."
/>
03

PrinciplesGrid

Nummerierte Grundsätze als Karten – ideal für Werte oder Selbstverständnis.

Vorschau

Unsere Prinzipien

Vier Grundsätze.

  • 01

    Wohnraum nie als Spekulationsobjekt.

  • 02

    Konsensentscheidungen in jeder Hausgemeinschaft.

  • 03

    Solidarische Mietkalkulation.

  • 04

    Ö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.",
  ]}
/>
04

StatsBar

Horizontale Statistik-Leiste – Zahlen, die für sich sprechen.

Vorschau

124
Mitglieder
7
Projekte
42
Wohnungen
2+
Jahre aktiv

Snippet

<StatsBar
  stats={[
    { label: "Mitglieder", value: 124 },
    { label: "Projekte", value: 7 },
    { label: "Wohnungen", value: 42 },
    { label: "Jahre aktiv", value: "2+" },
  ]}
/>
05

TextBlock

Editorial-Textblock mit Eyebrow, Headline und Fließtext. Absätze mit doppeltem Newline.

Vorschau

Über uns

Warum wir das tun.

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.`}
/>
06

InitiativesGrid

Liest automatisch alle Initiativen der Org aus dem Store. Erscheint nur, wenn welche existieren.

Vorschau

Was wir gerade tun

Aktuelle Projekte.

01Aktiv

Mietendeckel-Initiative

Kampagne für eine Begrenzung der Mietpreissteigerungen in der Stadt.

seit 15. März 2026
02In Planung

Hausprojekt Lindenstraße

Solidarischer Hauskauf zur Spekulationssicherung.

seit 23. Juni 2026

Snippet

<InitiativesGrid title="Aktuelle Projekte." />
07

TeamGrid

Listet alle Mitglieder der Org. Dunkler Hintergrund, Akzent-Borders.

Vorschau

Die Menschen dahinter

Wir machen das.

Funktionär:innen, Koordinator:innen und aktive Mitglieder.

FF

Felix Funktioner

Funktionär:in

Koordiniert Wohnprojekte und Bildungsinitiativen.

HH

Hannah Helferin

Helfer:in

Studentin, unterstützt bei Mitgliederbetreuung.

MM

Mira Mitglied

Mitglied

Snippet

<TeamGrid
  title="Wir machen das."
  subtitle="Funktionär:innen, Koordinator:innen und aktive Mitglieder."
/>
08

FaqList

Klappbare FAQ-Liste. Inhalte werden im Bereich-Editor gepflegt.

Vorschau

Häufige Fragen

FAQ

Wie kann ich Mitglied im Wohnen-Bereich werden?
Du musst zunächst Mitglied der Genossenschaft sein. Anschließend kannst du im Portal einen Beitrittsantrag für diese Unterorganisation stellen.
Welche Wohnprojekte gibt es aktuell?
Derzeit laufen drei Hausprojekte und zwei Mieterinitiativen. Details findest du unter „Initiativen".

Snippet

<FaqList />
09

NewsSection

Listet bis zu 3 öffentliche News-Beiträge der Org. Limit kann angepasst werden.

Vorschau

Snippet

<NewsSection title="Aus dem Bereich." limit={3} />
10

CallToAction

Abschließender Mobilisierungs-Block in Akzentfarbe. Optimal als letzter Section vor dem Footer.

Vorschau

Mitmachen

Bau mit. Wohn mit.

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"
/>
Service-Bausteine

Für Service-Vorstellungsseiten

Diese Bausteine erklären und bewerben einen einzelnen Service. Sie nutzen die Akzentfarbe der zugehörigen Organisation.

01

ServiceHero

Auftakt einer Service-Vorstellungsseite. Großer farbiger Block mit Direkt-Link zum Antragsformular und kompakter Übersichts-Kachel rechts.

Vorschau

ServiceWohnen

Beispiel-Service

Solidarisch wohnen.

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"
/>
02

InfoCards

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" },
  ]}
/>
03

BenefitsList

Nummerierte Vorteils-Karten. „Was bekommst du?" – kurze Titel mit erklärendem Untertitel.

Vorschau

Vorteile

Was du bekommst.

  • 01

    Zugang

    Zu allen Projekten.

  • 02

    Stimme

    Konsens-Entscheidungen.

  • 03

    Beratung

    Kostenfrei für Mitglieder.

  • 04

    Solidarmiete

    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." },
  ]}
/>
04

ProcessSteps

„So läuft's ab" – nummerierte Schritte mit Pfeilverbindern. Macht den Antragsprozess transparent.

Vorschau

So läuft's

So läuft's ab.

  1. 01

    Antrag

    Formular online ausfüllen.

  2. 02

    Treffen

    Kennenlern-Gespräch.

  3. 03

    Konsens

    Entscheidung in MV.

  4. 04

    Onboarding

    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." },
  ]}
/>
05

RequirementsList

Voraussetzungs-Checkliste mit grünen Häkchen. Negative Kriterien („nicht nötig") werden durchgestrichen dargestellt.

Vorschau

Voraussetzungen

Was du mitbringen solltest.

  • Bereitschaft zu Konsens
  • Mindestens 18 Jahre alt
  • Engagement 4h/Monat
  • Vorerfahrung Genossenschaft

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 },
  ]}
/>
06

PriceCard

Beitrags- oder Kosten-Tarife. Bis zu drei Tiers; ein Tarif kann mit `highlighted: true` in der Akzentfarbe hervorgehoben werden.

Vorschau

Konditionen

Solidarischer Beitrag.

Wähle nach Tragfähigkeit.

Niedrig

6 €/Monat

Studis & geringe Einkommen.

  • Stimmrecht
  • Alle Services
Empfohlen

Solidarisch

12 €/Monat

Regulärer Beitrag.

  • Stimmrecht
  • Alle Services

Stark

24 €/Monat

Trägst andere mit.

  • Stimmrecht
  • Alle Services
  • Spenden-Bescheinigung

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"] },
  ]}
/>
07

TestimonialBlock

Zitate von Mitgliedern oder Nutzer:innen – schwarzer Block mit Akzent-Bordüren.

Vorschau

Stimmen

Aus der Praxis.

Endlich Wohnen ohne Spekulation."

Mira K.
Mitglied seit 2024

Die Aufnahme war herzlich, die Strukturen klar."

Felix B.
Sonnenhof

Konsens statt Mehrheit – funktioniert."

Anna L.
Koordinatorin

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" },
  ]}
/>
08

ServiceCallToAction

Direkter CTA-Block zum Antragsformular. Variante von CallToAction mit Direkt-Link zum Formular und „Bereits Mitglied"-Login-Hinweis.

Vorschau

Jetzt beantragen

Bereit für solidarisches Wohnen?

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}
/>
Info-Seiten-Bausteine

Für strukturierte Unter-Seiten

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.

02

TableOfContents

Inhaltsverzeichnis mit Anker-Links zu Sections, die ihre `id` selbst setzen. Für lange Info-Seiten gut.

Snippet

<TableOfContents
  items={[
    { id: "zweck", label: "Zweck" },
    { id: "mitgliedschaft", label: "Mitgliedschaft" },
    { id: "finanzen", label: "Finanzen" },
  ]}
/>
03

DefinitionList

Begriff-Erklärungs-Paare als sauber strukturierte Liste. Optimal für Satzungs-Paragrafen, Glossare und Definitionen.

Vorschau

§ 1

Zweck

Mission
Solidarisches Wohnen ermöglichen.
Geltungsbereich
Alle Mitglieder dieser Unterorganisation.

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." },
  ]}
/>
04

TwoColumnText

Zwei nebeneinander gestellte Text-Spalten mit eigenen Untertiteln. Gut für Kontraste, Vergleiche oder „Wir / Ihr"-Gegenüberstellungen. Absatzwechsel mit doppeltem Newline.

Vorschau

§ 3

Entscheidungen

Konsens

Alle wesentlichen Entscheidungen im Konsens.

Bei Patt: moderierte Klärung.

Mehrheit

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.`}
/>
05

Timeline

Chronik-Darstellung mit Datum-Spalte links und Beschreibung rechts. Für Historie, Prozessabläufe oder Termin-Roadmaps.

Vorschau

Chronik

Finanzen

  1. Monatlich

    Beitragseinzug

    Zum 1. des Monats.

  2. Quartal

    Berichte

    Kassenbericht per E-Mail.

  3. Jährlich

    Rechnungsprüfung

    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." },
  ]}
/>
06

AccordionList

Aufklappbare Inhalte – für Listen mit längeren Erklärungen ohne die Seite zu überfrachten. Absatzwechsel im Body mit doppeltem Newline.

Vorschau

Häuser im Detail

Sonnenhof

Seit 2024 genossenschaftlich. 12 Bewohner:innen.

Lindenstraße

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." },
  ]}
/>
07

InfoBox

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

Wichtiger Hinweis

Bei Notfällen entscheidet der Vorstand selbstständig und berichtet auf der nächsten MV.

Snippet

<InfoBox tone="warning" title="Wichtiger Hinweis">
  Bei Notfällen entscheidet der Vorstand selbstständig und berichtet
  auf der nächsten Mitgliederversammlung.
</InfoBox>
08

ContactBlock

Kontakt-Block mit E-Mail, Telefon, Adresse, Sprechzeiten und optionalen Action-Links. Alle Felder sind optional – nur das anzeigen, was sinnvoll ist.

Vorschau

Kontakt

So erreichst du uns.

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" },
  ]}
/>
09

DocumentList

Liste herunterladbarer Dokumente mit Datei-Typ und Größe. Für Satzungen, Formulare, Berichte.

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" },
  ]}
/>

Komplette Beispiele

Bereich-Landing-Page

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="..." />
    </>
  ),
};

Service-Vorstellungsseite

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}
      />
    </>
  ),
};