Verein und Hilfsorganisation Website Sections

Für Vereine, Hilfsorganisationen und Stiftungen. Wirkung in Zahlen, die sich beim Scrollen aufbauen, der Jahresbericht, wohin jeder Euro fließt, Projekte auf einer gezeichneten Karte und Ehrenamt mit kurzer Anmeldung.

5 Variants

Kategorie wechseln

Zeig, was jede Spende bewirkt

Menschen spenden an Organisationen, denen sie vertrauen, und Vertrauen wächst mit Offenheit. Diese Sections zeigen Wirkung in Zahlen, den Jahresbericht, die Verwendung jedes Euros und die Projekte auf der Karte und enden mit einem Weg zu helfen, der über Geld hinausgeht. Für das Spendenformular selbst hat das Kit eine eigene Kategorie für Spenden.

„Wirkung“ zählt Zahlen beim Hereinscrollen hoch und füllt Balken zum Jahresziel, darunter das Jahr als Meilensteine. „Jahresbericht“ wechselt die Jahre über Reiter, Einnahmen und Ausgaben wachsen als Balken, die Quellen teilen einen Balken, und der Bericht lädt mit einem Klick. „Mittelverwendung“ teilt einen gewählten Betrag auf einem Ring nach der Verwendung jedes Euros, jeder Anteil sagt, was er bewirkt. „Projekte auf der Karte“ setzt jedes Projekt als Pin auf eine gepunktete Weltkarte mit Förderbalken. „Ehrenamt“ bringt Zeit und Interessen mit passenden Aufgaben zusammen und prüft die Anmeldung.

Nenn neben den Zahlen konkrete Ergebnisse, ein Brunnen mit dem Namen seines Dorfes bleibt länger im Kopf als eine Summe. Stell die Mittelverwendung direkt vor das Spendenformular, sie beantwortet genau die Frage, die sich Spender in diesem Moment stellen. Halte das Ehrenamt sichtbar für alle, die lieber Zeit schenken.

WirkungNeu in 1.2

Zahlen zählen nacheinander hoch, sobald sie ins Bild scrollen, Balken füllen sich bis zum Jahresziel. Darunter das Jahr als Etappen auf einer Linie, die sich beim Scrollen füllt.

Installv1.0.0

aiw add @ai-website/nonprofit

Bringt mit utils, kit, button, icon, input, section, motion

Usage

<Nonprofit variant="impact" stats={[{ id, value, label, text, icon, goal }]} milestones={[{ date, title, text }]} />

Source

JahresberichtNeu in 1.2

Jahre als Reiter mit gleitender Linie. Einnahmen und Ausgaben gleiten zu ihren Werten und wachsen als Balken, die Herkunft teilt einen Balken, die Höhepunkte folgen. Der gezeichnete Bericht hebt sich beim Zeigen und lädt mit einem Klick.

Installv1.0.0

aiw add @ai-website/nonprofit

Bringt mit utils, kit, button, icon, input, section, motion

Usage

<Nonprofit variant="annual-report" years={[{ year, income, spent, sources: [{ label, amount }], highlights, href, file }]} />

Source

MittelverwendungNeu in 1.2

Einen Betrag wählen, ein Ring teilt ihn so, wie jeder Euro verwendet wird. Der Ring zeichnet sich beim Scrollen, Zeigen auf einen Anteil hebt ihn hervor, jeder Anteil sagt, was sein Teil bewirkt.

Installv1.0.0

aiw add @ai-website/nonprofit

Bringt mit utils, kit, button, icon, input, section, motion

Usage

<Nonprofit variant="funds" amounts={[30, 60, 120]} shares={[{ id, label, share: 82, text, icon, unit: { cost, label } }]} />

Source

Projekte auf der KarteNeu in 1.2

Eine gepunktete Weltkarte blendet von West nach Ost ein, jedes Projekt ist eine Nadel. Eine Region wählen oder auf eine Karte zeigen, ihre Nadel pulsiert und zeigt den Ort. Die Finanzierungsbalken füllen sich beim Scrollen.

Installv1.0.0

aiw add @ai-website/nonprofit

Bringt mit utils, kit, button, icon, input, section, motion

Usage

<Nonprofit variant="projects" projects={[{ id, title, region, place, lat, lon, raised, goal, donors, text, icon }]} />

Source

EhrenamtNeu in 1.2

Zeit und Interessen wählen, die passenden Aufgaben steigen herein. Eine auswählen, sie wandert in die Anmeldung, die Name und E-Mail prüft und sich mit Namen bedankt.

Installv1.0.0

aiw add @ai-website/nonprofit

Bringt mit utils, kit, button, icon, input, section, motion

Usage

<Nonprofit variant="volunteer" times={[{ id, label, hint }]} interests={[{ id, label, icon }]} roles={[{ id, title, text, time, interests, hours, place, icon }]} />

Source

Details

Was Verein und Hilfsorganisation mitbringt, aus Registry und Quellcode gelesen.

Bereich: Industries
Variants: 5
Version: 1.0.0 · seit 1.2.0
Datei: components/ui/nonprofit.tsx
Bringt mit: utilskitbutton icon inputsectionmotion
npm-Pakete: Keine
Sprachen: Englisch und Deutsch, 41 eigene Texte
Studio: Im Code anpassen
Mit KI bauen: Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle NonprofitProps aus components/ui/nonprofit.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

variantoptional
NonprofitVariant
impactannual-reportfundsprojectsvolunteer
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
statsoptional
NonprofitStat[]
impact
milestonesoptional
NonprofitMilestone[]
yearsoptional
NonprofitYear[]
annual-report
sharesoptional
NonprofitShare[]
funds: how every euro is used
amountsoptional
number[]
auditoptional
string
funds: a line on audits or seals, replaces the default
projectsoptional
NonprofitProject[]
projects
rolesoptional
NonprofitRole[]
volunteer
timesoptional
{ id: string; label: string; hint?: string }[]
interestsoptional
{ id: string; label: string; icon?: IconName }[]
onSignUpoptional
(data: { role: string; name: string; email: string; phone: string }) => void
volunteer: called with the sign up, the success message shows either way
linksoptional
{ donate?: string; project?: string }
currencyoptional
string

Eingebaute Texte

Diese Texte schreibt Verein und Hilfsorganisation selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 41 Texte anzeigen

Schlüssel	Englisch	Deutsch
goal	Englisch Goal {n}	Deutsch Ziel {n}
goalReached	Englisch Goal reached	Deutsch Ziel erreicht
year	Englisch Year	Deutsch Jahr
report	Englisch Annual report {year}	Deutsch Jahresbericht {year}
download	Englisch Download the {year} report	Deutsch Bericht {year} herunterladen
income	Englisch Income	Deutsch Einnahmen
spent	Englisch Spent on our work	Deutsch In unsere Arbeit geflossen
sources	Englisch Where the money comes from	Deutsch Woher das Geld kommt
highlights	Englisch What the year brought	Deutsch Was das Jahr gebracht hat
ratio	Englisch {n} of the income went straight into the work	Deutsch {n} der Einnahmen flossen direkt in die Arbeit
amount	Englisch Your gift	Deutsch Deine Spende
yourGift	Englisch Of your {amount}	Deutsch Von deinen {amount}
goesTo	Englisch This is where it goes	Deutsch Hierhin fließt sie
buys	Englisch about {n} {label}	Deutsch etwa {n} {label}
donate	Englisch Give {amount}	Deutsch {amount} spenden
audit	Englisch Checked every year by independent auditors	Deutsch Jedes Jahr von unabhängigen Prüfern kontrolliert
region	Englisch Region	Deutsch Region
all	Englisch All regions	Deutsch Alle Regionen
raised	Englisch {raised} of {goal}	Deutsch {raised} von {goal}
donors	Englisch {n} donors	Deutsch {n} Spender
funded	Englisch {n} funded	Deutsch {n} finanziert
support	Englisch Support {name}	Deutsch {name} unterstützen
supportShort	Englisch Support this project	Deutsch Projekt unterstützen
onMap	Englisch Show {name} on the map	Deutsch {name} auf der Karte zeigen
time	Englisch How much time do you have?	Deutsch Wie viel Zeit hast du?
interests	Englisch What matters to you?	Deutsch Was liegt dir am Herzen?
matches	Englisch {n} roles fit	Deutsch {n} Aufgaben passen
noMatch	Englisch Pick fewer interests to see more roles	Deutsch Wähle weniger Interessen, dann siehst du mehr Aufgaben
choose	Englisch Choose	Deutsch Auswählen
chosen	Englisch Chosen	Deutsch Ausgewählt
yourRole	Englisch Your role	Deutsch Deine Aufgabe
pickRole	Englisch Choose a role from the list, we will tell you everything about it here.	Deutsch Wähle eine Aufgabe aus der Liste, hier erfährst du alles darüber.
name	Englisch Your name	Deutsch Dein Name
email	Englisch Email	Deutsch E-Mail
phone	Englisch Phone	Deutsch Telefon
nameError	Englisch Please enter your name	Deutsch Bitte gib deinen Namen ein
emailError	Englisch Please enter a valid email address	Deutsch Bitte gib eine gültige E-Mail-Adresse ein
roleError	Englisch Please pick a role first	Deutsch Bitte wähle zuerst eine Aufgabe
signUp	Englisch Sign up for this role	Deutsch Für diese Aufgabe anmelden
thanks	Englisch Thank you, {name}. We will call you within two days and plan your first day together.	Deutsch Danke, {name}. Wir rufen dich innerhalb von zwei Tagen an und planen deinen ersten Tag gemeinsam.
again	Englisch Choose another role	Deutsch Andere Aufgabe wählen

Aus dem Quellcode der Component abgeleitet.

Verein und Hilfsorganisation reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links und Pfeil rechts.
Setzt aria-checked, aria-describedby, aria-invalid, aria-label, aria-live, aria-pressed, aria-valuemax, aria-valuemin und aria-valuenow, damit Screenreader Zweck und Zustand ansagen.
Nutzt die Rollen progressbar, radio, radiogroup und status.
Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 8 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Verein und Hilfsorganisation?

Mit aiw add @ai-website/nonprofit. Der Befehl legt die Datei components/ui/nonprofit.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, input, section und motion. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Verein und Hilfsorganisation?

5 Varianten, Wirkung, Jahresbericht, Mittelverwendung, Projekte auf der Karte und Ehrenamt. Du wählst sie mit der Prop variant, zum Beispiel variant="annual-report".

Kann ich die Texte von Verein und Hilfsorganisation übersetzen?

Ja. Verein und Hilfsorganisation bringt 41 eigene Texte auf Deutsch und Englisch mit, etwa „Ziel erreicht“, „Jahr“ und „Einnahmen“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Verein und Hilfsorganisation einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Verein und Hilfsorganisation mit aiw_components und installieren sie mit aiw_add @ai-website/nonprofit. Nenn im Prompt die Variante, etwa variant="impact", dann schreibt der Assistent deine Inhalte direkt in die Props.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Verein und Hilfsorganisation stehen.

Zeig, was jede Spende bewirkt