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

<?php
$app = app();
$flash = $app->flash()->get();

$eventsForJs = [];
try {
  $pdo = $app->pdo();
  if ($pdo) {
    $stmt = $pdo->prepare('SELECT id, title, teaser_public, description, city, region, zip, starts_at, allow_kids, visibility, location_label, lat, lng FROM events WHERE starts_at >= NOW() AND status != "cancelled" ORDER BY starts_at ASC LIMIT 50');
    $stmt->execute();
    $rows = $stmt->fetchAll(PDO::FETCH_ASSOC) ?: [];
    foreach ($rows as $r) {
      $eventsForJs[] = [
        'id' => (int)$r['id'],
        'title' => $r['title'],
        'teaser' => $r['teaser_public'],
        'description' => $r['description'],
        'city' => $r['city'],
        'zip' => $r['zip'],
        'region' => $r['region'],
        'topic' => 'general',
        'startsAt' => $r['starts_at'],
        'allowKids' => ((int)$r['allow_kids'] === 1),
        'ageGroup' => '',
        'visibility' => $r['visibility'],
        'contact' => '',
        'locationLabel' => $r['location_label'],
        'lat' => $r['lat'] !== null ? (float)$r['lat'] : null,
        'lng' => $r['lng'] !== null ? (float)$r['lng'] : null,
      ];
    }
  }
} catch (Throwable $e) {
  $eventsForJs = [];
}
?>
<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 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>
        <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">Events nur für Mitglieder</div>
          <div class="chip inline">Kinder optional mitbringen</div>
          <div class="chip inline">Echt lokale Gruppen</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>Die nächsten anstehenden Events</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">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>
        <div class="grid grid-2 mt-2">
          <div class="surface border rounded p-4">
            <h3 class="mt-0">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>
            </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>
            </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>
      </div>
      <div class="card privacy-card">
        <div class="badge">Community</div>
        <h3>Einfach starten</h3>
        <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>
        </ul>
        <p class="muted small">Alle Einstellungen nimmst du im Mitgliederbereich vor.</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>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>
      </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>
<script>
  window.__events = <?= json_encode($eventsForJs, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) ?>;
</script>
<div class="modal" id="eventModal">
  <div class="panel">
    <div class="head flex between center-y">
      <h3 id="eventModalTitle" style="margin:0;">Event</h3>
      <button class="btn ghost" type="button" data-event-modal-close>✕</button>
    </div>
    <div id="eventModalBody" class="stack gap-8" style="margin-top:12px;"></div>
  </div>
</div>