papa-kind-treff.info/partials/landing/main/home.php

<?php
$app = app();
$flash = $app->flash()->get();
?>
<main>
  <?php if ($flash): ?>
    <div class="toast-bar">
      <strong><?= htmlspecialchars($flash['type'], ENT_QUOTES) ?>:</strong>
      <?= htmlspecialchars($flash['message'], ENT_QUOTES) ?>
    </div>
  <?php endif; ?>

  <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, sicher, verschlüsselt.</h1>
        <p class="lede">Finde andere Väter in deiner Nähe, plane Events oder tritt bestehenden Treffen bei. Daten bleiben geschützt, du entscheidest die Sichtbarkeit.</p>
        <div class="hero__actions">
          <button class="btn">Kostenlos registrieren</button>
          <button class="btn ghost" id="scrollToEvents">Events in deiner Nähe</button>
        </div>
        <div class="hero__meta">
          <div class="chip inline">Verschlüsselte Profile</div>
          <div class="chip inline">Kinderinfos separat freigeben</div>
          <div class="chip inline">Events nur für Members erstellen</div>
        </div>
      </div>
      <div class="hero__card card">
        <div class="badge">Schnellsuche</div>
        <h3>Events in deiner Region</h3>
        <div class="form-row">
          <label class="label" for="locInput">PLZ oder Ort</label>
          <input id="locInput" class="input" placeholder="z. B. 10437 oder Berlin" />
        </div>
        <div class="form-row">
          <label class="label" for="topicSelect">Thema</label>
          <select id="topicSelect" class="select">
            <option value="">Alle</option>
            <option value="outdoor">Outdoor / Spielplatz</option>
            <option value="kaffee">Kaffee & Austausch</option>
            <option value="sport">Sport</option>
            <option value="workshop">Workshop</option>
          </select>
        </div>
        <div class="form-row">
          <label class="label" for="ageSelect">Alter der Kinder</label>
          <select id="ageSelect" class="select">
            <option value="">Alle</option>
            <option value="baby">0-2 Jahre</option>
            <option value="kids">3-6 Jahre</option>
            <option value="school">7-12 Jahre</option>
          </select>
        </div>
        <button class="btn block" id="btnSearch">Events anzeigen</button>
        <button class="btn ghost block" id="btnGeo">Standort automatisch ermitteln</button>
        <p class="muted small">Geodaten werden nur zur Anzeige verwendet.</p>
      </div>
    </div>
  </section>

  <section class="container section" id="events">
    <div class="section__head">
      <div>
        <p class="eyebrow">Termine entdecken</p>
        <h2>Upcoming Events in deiner Nähe</h2>
        <p class="muted">Gäste sehen nur Basisinfos. Als Mitglied siehst du vollständige Details, kannst zusagen und neue Treffen anlegen.</p>
      </div>
      <div class="chips">
        <button class="chip" data-filter="all">Alle</button>
        <button class="chip" data-filter="outdoor">Outdoor</button>
        <button class="chip" data-filter="kaffee">Kaffee</button>
        <button class="chip" data-filter="sport">Sport</button>
        <button class="chip" data-filter="workshop">Workshops</button>
      </div>
    </div>
    <div class="results" id="eventList"></div>
    <div class="surface border rounded p-4 mt-3">
      <div class="flex between center-y gap-12">
        <div>
          <strong>Nur für eingeloggte Mitglieder</strong>
          <p class="muted small">Volle Beschreibung, Kontakt, Kinder-Infos und Anmeldeoptionen.</p>
        </div>
        <button class="btn">Jetzt anmelden</button>
      </div>
    </div>
  </section>

  <section class="section alt" id="profil">
    <div class="container split">
      <div>
        <p class="eyebrow">Profil & Datenschutz</p>
        <h2>Du entscheidest, was sichtbar ist.</h2>
        <p class="muted">Papa-Daten und Kinder-Daten sind getrennt. Sichtbarkeiten steuerst du per Schalter, sensible Felder werden verschlüsselt abgelegt.</p>
        <div class="grid grid-2 mt-2">
          <div class="surface border rounded p-4">
            <h3 class="mt-0">Papa-Sichtbarkeit</h3>
            <ul class="list">
              <li><strong>basic:</strong> Name, Region, Kinderanzahl</li>
              <li><strong>papa:</strong> + Beruf, Sprachen, About</li>
              <li><strong>papa_contact:</strong> + Telefon/Email</li>
            </ul>
          </div>
          <div class="surface border rounded p-4">
            <h3 class="mt-0">Kinder separat</h3>
            <ul class="list">
              <li><strong>hidden:</strong> keine Details</li>
              <li><strong>age_only:</strong> nur Alter/Altersgruppe</li>
              <li><strong>details:</strong> Vorname, Geschlecht, Alter</li>
            </ul>
          </div>
        </div>
        <div class="pill-row mt-2">
          <span class="pill">Verschlüsselung mit libsodium</span>
          <span class="pill">Nonce pro Feld</span>
          <span class="pill">Key aus ENV</span>
        </div>
      </div>
      <div class="card privacy-card">
        <div class="badge">Sicherheit</div>
        <h3>Wie wird gespeichert?</h3>
        <ul class="list">
          <li>Symmetrische Verschlüsselung (XChaCha20-Poly1305)</li>
          <li>Key nur im Backend (ENV), nicht in der DB</li>
          <li>Felder: Kontakt, Beruf, Sprachen, About, Kinder</li>
          <li>Events unterscheiden Public vs. Members-Details</li>
        </ul>
        <p class="muted small">Bei Datenabzug bleiben Felder unlesbar. Zugriff nur mit Key.</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>
      </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>Wer sieht meine Daten?</summary>
            <p>Du stellst die Sichtbarkeit: basic/papa/papa_contact für Papa-Daten, Kinder separat (hidden/age_only/details). Gäste sehen nur rudimentäre Event-Infos.</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>Welche Daten sind verschlüsselt?</summary>
            <p>Kontakt, Beruf, Sprachen, About, Kinder-Vornamen/Geschlecht/Notizen werden app-seitig verschlüsselt gespeichert.</p>
          </details>
        </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>
    </div>
  </section>
</main>