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>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>
      </div>
      <form id="quickSearchForm" class="grid grid-3 quicksearch-form" 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 class="quicksearch-form__actions">
          <button class="btn" type="submit">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 Treffen</h2>
    </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">
      <div class="section__intro">
        <h2>Der Mitgliederbereich ist der Ort, an dem du aus dem Überblick eine echte Nutzung machst.</h2>
        <p class="muted">Im geschützten Mitgliederbereich hast du viele Möglichkeiten:</p>
      </div>
      <div class="grid grid-3 mt-2">
        <div class="surface border rounded p-4">
          <h3 class="mt-0">Dein Profil</h3>
          <ul class="list">
            <li>Anzeigename, Sprachen, Interessen, kurzer Steckbrief.</li>
            <li>Geschützte Kontaktdaten, du steuerst wer was sehen darf.</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>Nur für dich sichtbar.</li>
          </ul>
        </div>
        <div class="surface border rounded p-4">
          <h3 class="mt-0">Deine Termine</h3>
          <ul class="list">
            <li>Veranstaltungen finden, speichern und schneller wiederfinden.</li>
            <li>Eigene Treffen veröffentlichen und jederzeit aktualisieren.</li>
            <li>Mit wenigen Angaben aus einer Idee einen konkreten Termin machen.</li>
          </ul>
        </div>
      </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>