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, created_at FROM events WHERE starts_at >= NOW() AND status != "cancelled" ORDER BY created_at DESC, starts_at ASC LIMIT 10');
    $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>
  </section>

  <style>
    .slider {display:flex; align-items:center; gap:12px;}
    .slider__viewport {overflow-x:hidden; flex:1; scroll-behavior:smooth;}
    .slider__track {display:flex; gap:12px; min-height:100%;}
    .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>
      <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>
          <input id="qsQuery" name="q" class="input" placeholder="Titel, Thema, Beschreibung">
        </div>
        <div class="stack gap-6">
          <label class="label" for="qsLoc">Ort oder PLZ</label>
          <div class="flex gap-8">
            <input id="qsLoc" name="loc" class="input" placeholder="z. B. 10437 oder Berlin" style="flex:1;">
            <button class="btn ghost" type="button" id="quickGeo">📍</button>
          </div>
          <input type="hidden" name="lat" id="qsLat">
          <input type="hidden" name="lng" id="qsLng">
        </div>
        <div class="stack gap-6">
          <label class="label" for="qsRadius">Umkreis (km)</label>
          <select id="qsRadius" name="radius" class="select">
            <?php foreach ([1,2,5,10,15,25] as $r): ?>
              <option value="<?= $r ?>"><?= $r ?></option>
            <?php endforeach; ?>
          </select>
        </div>
        <div>
          <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>
    </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>