This commit is contained in:
@@ -45,19 +45,29 @@ try {
|
||||
<section class="hero">
|
||||
<div class="container hero__grid">
|
||||
<div class="hero__text">
|
||||
<p class="eyebrow">Gemeinsam stark</p>
|
||||
<h1>Treffen für Väter – mit und ohne Kinder. Lokal organisiert.</h1>
|
||||
<p class="lede">Finde andere Väter in deiner Nähe, plane Events oder tritt bestehenden Treffen bei. Alles an einem Ort – unkompliziert und community-nah.</p>
|
||||
<h1>Finde passende Treffen, knüpfe Kontakte und organisiere gemeinsame Zeit mit anderen Vätern.</h1>
|
||||
<p class="lede">Papa-Kind-Treff zeigt dir auf einen Blick, welche Termine es in deiner Umgebung gibt, welche Themen gerade gefragt sind und wie du selbst unkompliziert Teil einer verlässlichen Community wirst.</p>
|
||||
<p class="hero__copy">Wenn du mehr als nur stöbern möchtest, begleitet dich der Mitgliederbereich durch alles Weitere: Profil anlegen, Kinder optional ergänzen, Termine merken, eigene Treffen einstellen und deine Angaben jederzeit wieder anpassen.</p>
|
||||
<div class="hero__actions">
|
||||
<button class="btn">Kostenlos registrieren</button>
|
||||
<a class="btn" href="/register">Kostenlos registrieren</a>
|
||||
<button class="btn ghost" id="scrollToEvents">Events in deiner Nähe</button>
|
||||
</div>
|
||||
<div class="hero__meta">
|
||||
<div class="chip inline">Events nur für Mitglieder</div>
|
||||
<div class="chip inline">Kinder optional mitbringen</div>
|
||||
<div class="chip inline">Echt lokale Gruppen</div>
|
||||
<div class="chip inline">Lokale Treffen entdecken</div>
|
||||
<div class="chip inline">Kinder optional angeben</div>
|
||||
<div class="chip inline">Eigene Termine einstellen</div>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="hero__card">
|
||||
<h2>Im Mitgliederbereich steuerst du alles an einem Ort.</h2>
|
||||
<p class="muted">Dort pflegst du dein Profil, hinterlegst auf Wunsch Kinderinfos, findest passende Veranstaltungen schneller wieder und stellst eigene Termine mit wenigen Schritten online.</p>
|
||||
<ul class="list">
|
||||
<li>Profil mit Region, Interessen und kurzen Infos zu dir ausfüllen</li>
|
||||
<li>Kinder optional ergänzen, damit Treffen besser zu deinem Alltag passen</li>
|
||||
<li>Neue Termine anlegen, aktualisieren und mit anderen Vätern teilen</li>
|
||||
<li>Angaben jederzeit anpassen, ergänzen oder wieder entfernen</li>
|
||||
</ul>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -68,27 +78,12 @@ try {
|
||||
.slider__track .event-card-small {min-width:240px; max-width:260px;}
|
||||
.slider__nav {min-width:44px;}
|
||||
</style>
|
||||
<section class="container section" id="events">
|
||||
<div class="section__head">
|
||||
<div>
|
||||
<p class="eyebrow">Termine entdecken</p>
|
||||
<h2>Neueste Termine</h2>
|
||||
<p class="muted">Die zehn neuesten veröffentlichten Events – kompakt zum Durchscrollen. Gäste sehen Basisinfos, Mitglieder erhalten alle Details.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slider">
|
||||
<button class="btn ghost slider__nav" type="button" data-slider-prev aria-label="Zurück">‹</button>
|
||||
<div class="slider__viewport">
|
||||
<div class="slider__track" id="eventSlider"></div>
|
||||
</div>
|
||||
<button class="btn ghost slider__nav" type="button" data-slider-next aria-label="Weiter">›</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section alt" id="quicksearch">
|
||||
<div class="container">
|
||||
<p class="eyebrow">Schnellsuche</p>
|
||||
<h3>Passende Events finden</h3>
|
||||
<div class="section__intro">
|
||||
<h2>Starte direkt mit der Suche nach passenden Treffen.</h2>
|
||||
<p class="muted">Suche nach Themen, Orten und Umkreis, um schnell herauszufinden, welche Termine in deine Nähe und zu deinem Alltag passen. So bekommst du sofort ein Gefühl dafür, was auf der Plattform möglich ist.</p>
|
||||
</div>
|
||||
<form id="quickSearchForm" class="grid grid-3" style="gap: 12px; align-items:flex-end;" action="/search" method="get">
|
||||
<div class="stack gap-6">
|
||||
<label class="label" for="qsQuery">Suchbegriff</label>
|
||||
@@ -115,107 +110,108 @@ try {
|
||||
<button class="btn block" type="submit" style="width:100%;">Suchen</button>
|
||||
</div>
|
||||
</form>
|
||||
<p class="muted small" style="margin-top:8px;">Optional Standort ermitteln oder Ort eingeben; Umkreis bestimmt die Treffer in der Suche.</p>
|
||||
<p class="muted small" style="margin-top:8px;">Du kannst deinen Standort verwenden oder einen Ort eingeben und den Umkreis selbst festlegen.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section alt" id="profil">
|
||||
<section class="container section" id="events">
|
||||
<div class="section__intro">
|
||||
<h2>Die neuesten Termine liegen direkt darunter für dich bereit.</h2>
|
||||
<p class="muted">Hier siehst du die aktuellsten veröffentlichten Treffen kompakt zum Durchscrollen. So erkennst du schnell, wie vielfältig die Plattform genutzt werden kann und welche Ideen andere Väter bereits eingestellt haben.</p>
|
||||
</div>
|
||||
<div class="slider">
|
||||
<button class="btn ghost slider__nav" type="button" data-slider-prev aria-label="Zurück">‹</button>
|
||||
<div class="slider__viewport">
|
||||
<div class="slider__track" id="eventSlider"></div>
|
||||
</div>
|
||||
<button class="btn ghost slider__nav" type="button" data-slider-next aria-label="Weiter">›</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section alt" id="mitgliederbereich">
|
||||
<div class="container split">
|
||||
<div>
|
||||
<p class="eyebrow">Mitgliederbereich</p>
|
||||
<h2>Alles für Väter – Profile, Kinderinfos, Events.</h2>
|
||||
<p class="muted">Lege dein Profil an, erfasse deine Kids (optional) und finde passende Treffen. Später kannst du jedes Detail im Mitgliederbereich steuern.</p>
|
||||
<h2>Der Mitgliederbereich ist der Ort, an dem du aus dem Überblick eine echte Nutzung machst.</h2>
|
||||
<p class="muted">Dort trägst du nicht einfach nur Daten ein, sondern richtest dir die Plattform so ein, dass sie zu dir passt. Du entscheidest selbst, welche Infos du hinterlegst, welche Termine du im Blick behalten willst und wie ausführlich du dein Profil aufbaust.</p>
|
||||
<p class="muted">Gerade dieser Bereich soll zeigen, dass Papa-Kind-Treff mehr ist als eine reine Terminliste: Du kannst dich vorstellen, passende Treffen leichter finden und eigene Ideen für gemeinsame Aktivitäten sichtbar machen.</p>
|
||||
<div class="grid grid-2 mt-2">
|
||||
<div class="surface border rounded p-4">
|
||||
<h3 class="mt-0">Profil</h3>
|
||||
<h3 class="mt-0">Dein Profil</h3>
|
||||
<ul class="list">
|
||||
<li>Anzeigename, Region, Beruf, Sprachen</li>
|
||||
<li>Kontaktinfos im Mitgliederbereich hinterlegen</li>
|
||||
<li>Kurzer Steckbrief für andere Väter</li>
|
||||
<li>Anzeigename, Region, Sprachen, Interessen und ein kurzer Steckbrief</li>
|
||||
<li>Kontaktinfos dort hinterlegen, wo du sie für dich sinnvoll findest</li>
|
||||
<li>Dein Profil nach und nach ausbauen, statt alles sofort vollständig anlegen zu müssen</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="surface border rounded p-4">
|
||||
<h3 class="mt-0">Kinder (optional)</h3>
|
||||
<ul class="list">
|
||||
<li>Vorname, Geschlecht, Alter oder Geburtsdatum</li>
|
||||
<li>Hilft bei passenden Event-Empfehlungen</li>
|
||||
<li>Du entscheidest später im Profil, was gezeigt wird</li>
|
||||
<li>Alter, Geburtsdatum oder kurze Hinweise hinterlegen, wenn es dir bei der Planung hilft</li>
|
||||
<li>Treffen besser einschätzen, wenn Aktivitäten zum Alter deiner Kinder passen sollen</li>
|
||||
<li>Infos jederzeit ergänzen, ändern oder wieder entfernen, wenn sich etwas verändert</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pill-row mt-2">
|
||||
<span class="pill">Profil und Kids getrennt verwalten</span>
|
||||
<span class="pill">Flexibel änderbar</span>
|
||||
<span class="pill">Mitgliederbereich-first</span>
|
||||
<div class="grid grid-2 mt-2">
|
||||
<div class="surface border rounded p-4">
|
||||
<h3 class="mt-0">Deine Termine</h3>
|
||||
<ul class="list">
|
||||
<li>Veranstaltungen finden, speichern und schneller wieder aufrufen</li>
|
||||
<li>Eigene Treffen veröffentlichen und bei Bedarf später aktualisieren</li>
|
||||
<li>Mit wenigen Angaben aus einer Idee einen konkreten Termin machen</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="surface border rounded p-4">
|
||||
<h3 class="mt-0">Alles bleibt anpassbar</h3>
|
||||
<ul class="list">
|
||||
<li>Angaben schrittweise pflegen, statt dich zu Beginn festzulegen</li>
|
||||
<li>Profil, Kinderinfos und Termine unabhängig voneinander verwalten</li>
|
||||
<li>Die Plattform so nutzen, wie sie zu deinem Familienalltag passt</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card privacy-card">
|
||||
<div class="badge">Community</div>
|
||||
<h3>Einfach starten</h3>
|
||||
<h3>So fühlt sich der Einstieg an</h3>
|
||||
<p class="muted">Du kannst dich ohne Umwege orientieren und danach genau die nächsten Schritte gehen, die für dich sinnvoll sind. Dadurch bleibt die Plattform verständlich, auch wenn du erst einmal nur schauen möchtest, was dich erwartet.</p>
|
||||
<ul class="list">
|
||||
<li>Registriere dich kostenfrei</li>
|
||||
<li>Profil ausfüllen, Kinder optional hinzufügen</li>
|
||||
<li>Events finden oder eigene Termine einstellen</li>
|
||||
<li>Registrieren und in Ruhe dein Profil aufbauen</li>
|
||||
<li>Kinder optional ergänzen, wenn du deine Suche präziser machen willst</li>
|
||||
<li>Termine entdecken, merken oder selbst neue Treffen einstellen</li>
|
||||
<li>Alles später wieder öffnen und weiterpflegen, ohne neu anfangen zu müssen</li>
|
||||
</ul>
|
||||
<p class="muted small">Alle Einstellungen nimmst du im Mitgliederbereich vor.</p>
|
||||
<p class="muted small">Der Mitgliederbereich bleibt damit das Zentrum für alles, was über das reine Anschauen hinausgeht.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container section" id="sicherheit">
|
||||
<div class="section__head">
|
||||
<div>
|
||||
<p class="eyebrow">Ablauf</p>
|
||||
<h2>So funktioniert’s</h2>
|
||||
<section class="container section">
|
||||
<div class="info-band">
|
||||
<div class="info-band__main">
|
||||
<h2>Was du auf der Startseite erkennst und was danach weitergeht</h2>
|
||||
<p class="muted">Die Startseite gibt dir den Überblick: suchen, stöbern, aktuelle Termine entdecken und verstehen, wie Papa-Kind-Treff aufgebaut ist. Sobald du tiefer einsteigen willst, übernimmt der Mitgliederbereich den praktischen Teil und macht aus Interesse eine echte Nutzung.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-3">
|
||||
<div class="card step">
|
||||
<div class="step__icon">1</div>
|
||||
<h3>Profil anlegen</h3>
|
||||
<p class="muted small">Papa-Daten ausfüllen, Kinder optional. Sichtbarkeit pro Bereich einstellen.</p>
|
||||
</div>
|
||||
<div class="card step">
|
||||
<div class="step__icon">2</div>
|
||||
<h3>Events finden</h3>
|
||||
<p class="muted small">Suche nach Thema, Alter oder Region. Gäste sehen nur Basisinfos.</p>
|
||||
</div>
|
||||
<div class="card step">
|
||||
<div class="step__icon">3</div>
|
||||
<h3>Treffen planen</h3>
|
||||
<p class="muted small">Als Mitglied neue Events anlegen, andere einladen, Teilnahme verwalten.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section alt" id="faq">
|
||||
<div class="container split">
|
||||
<div>
|
||||
<p class="eyebrow">Noch Fragen?</p>
|
||||
<h2>FAQ</h2>
|
||||
<div class="faq">
|
||||
<details open>
|
||||
<summary>Wie starte ich?</summary>
|
||||
<p>Registrieren, Profil ausfüllen, optional Kinder anlegen, dann Events entdecken oder eigene Treffen einstellen.</p>
|
||||
</details>
|
||||
<details>
|
||||
<summary>Wie funktionieren Events?</summary>
|
||||
<p>Eingeloggt kannst du Events erstellen. Andere Mitglieder melden sich an. Gäste sehen nur Teaser, Ort grob und Datum.</p>
|
||||
</details>
|
||||
<details>
|
||||
<summary>Kann ich Kinderinfos später ändern?</summary>
|
||||
<p>Ja, du kannst jederzeit Daten ergänzen oder entfernen und eigene Angaben anpassen.</p>
|
||||
</details>
|
||||
<div class="capability-grid">
|
||||
<div class="capability-card">
|
||||
<h3>Hier bekommst du Orientierung</h3>
|
||||
<ul class="list">
|
||||
<li>Was aktuell stattfindet</li>
|
||||
<li>Welche Themen und Orte vertreten sind</li>
|
||||
<li>Wie die Plattform grundsätzlich funktioniert</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="capability-card">
|
||||
<h3>Dort setzt du es für dich um</h3>
|
||||
<ul class="list">
|
||||
<li>Profil pflegen und ergänzen</li>
|
||||
<li>Kinderinfos optional hinterlegen</li>
|
||||
<li>Eigene Treffen veröffentlichen und verwalten</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card cta-card">
|
||||
<div class="badge">Bereit?</div>
|
||||
<h3>Jetzt loslegen</h3>
|
||||
<p class="muted small">Registriere dich kostenlos, lege dein Profil an und vernetze dich mit anderen Vätern.</p>
|
||||
<div class="stack gap-12">
|
||||
<button class="btn block">Registrieren</button>
|
||||
<button class="btn ghost block">Login</button>
|
||||
</div>
|
||||
<div class="hero__actions">
|
||||
<a class="btn" href="/register">Jetzt starten</a>
|
||||
<a class="btn ghost" href="/search">Zur Suche</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user