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__single">
      <div class="hero__text">
        <h1>Finde passende Treffen, knüpfe Kontakte und organisiere gemeinsame Zeit mit anderen Vätern.</h1>
        <p class="lede">Finde auf einen Blick Termine in deiner Umgebung, lerne andere Väter kennen, beteilige dich an Gesprächen in der Community und werde Schritt für Schritt ein fester Teil davon.</p>
        <p class="hero__copy">Als registrierter Teil der Community kannst du dein Profil mit deinen Kinderinfos pflegen, eigene Treffen organisieren und dich unkompliziert zu bestehenden Terminen dazugesellen.</p>
        <div class="hero__actions hero__actions--center">
          <a class="btn" href="/register">Gleich kostenlos registrieren</a>
        </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="section alt" id="quicksearch">
    <div class="container">
      <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>
          <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;">Du kannst deinen Standort verwenden oder einen Ort eingeben und den Umkreis selbst festlegen.</p>
    </div>
  </section>

  <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>
        <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">Dein Profil</h3>
            <ul class="list">
              <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>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="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">
        <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>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">Der Mitgliederbereich bleibt damit das Zentrum für alles, was über das reine Anschauen hinausgeht.</p>
      </div>
    </div>
  </section>

  <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 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="hero__actions">
        <a class="btn" href="/register">Jetzt starten</a>
        <a class="btn ghost" href="/search">Zur Suche</a>
      </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>