android_cast/examples/app_hub/landing-pages.inc.php

<?php declare(strict_types=1); ?>
<section class="landing-page landing-page--hero" id="landing-page-1" data-page="1" aria-label="Home">
  <div class="landing-page-inner">
    <h2 data-i18n="page1.title">Android Cast</h2>
    <p class="landing-lead" data-i18n="page1.lead">Screen casting, crash intelligence, and CI — one ecosystem.</p>
    <button type="button" class="btn btn-primary" data-goto-page="2" data-i18n="page1.cta">Explore AndroidCast</button>
  </div>
</section>

<section class="landing-page" id="landing-page-2" data-page="2" aria-label="AndroidCast">
  <div class="landing-page-inner card card--lift">
    <h2 data-i18n="page2.title">AndroidCast</h2>
    <p class="landing-lead" data-i18n="page2.lead">Mirror Android screens with low latency, native codecs, and operator-grade tooling.</p>
    <div class="landing-feature-grid">
      <article class="card card--lift">
        <h3>Cast</h3>
        <p class="muted">Wi‑Fi and USB transport with adaptive bitrate and session metrics.</p>
      </article>
      <article class="card card--lift">
        <h3>Issues</h3>
        <p class="muted">Ingest, triage tickets, and correlate fingerprints across releases.</p>
      </article>
      <article class="card card--lift">
        <h3>Builder</h3>
        <p class="muted">Docker CI for APK baking, OTA artifacts, and pipeline history.</p>
      </article>
    </div>
  </div>
</section>

<section class="landing-page" id="landing-page-3" data-page="3" aria-label="About">
  <div class="landing-page-inner card card--lift">
    <h2 data-i18n="page3.title">About</h2>
    <p class="landing-lead" data-i18n="page3.lead">Android Cast connects devices, backends, and operators across your stack.</p>
    <div class="landing-gallery">
      <img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=400&amp;h=300&amp;fit=crop" alt="" loading="lazy" decoding="async">
      <img src="https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?w=400&amp;h=300&amp;fit=crop" alt="" loading="lazy" decoding="async">
      <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=400&amp;h=300&amp;fit=crop" alt="" loading="lazy" decoding="async">
    </div>
  </div>
</section>

<section class="landing-page" id="landing-page-4" data-page="4" aria-label="Why">
  <div class="landing-page-inner card card--lift">
    <h2 data-i18n="page4.title">Why AndroidCast</h2>
    <p class="landing-lead" data-i18n="page4.lead">Built for teams who need reliability, observability, and control — not another black box.</p>
    <ul class="muted" style="line-height:1.7;margin:0;padding-left:1.2rem">
      <li>Self-hosted consoles on your BE — no mandatory cloud lock-in</li>
      <li>Graphs, remote access, and builder share one auth and theme</li>
      <li>Green <code>master</code> git flow with tagged releases</li>
    </ul>
  </div>
</section>

<section class="landing-page" id="landing-page-5" data-page="5" aria-label="Technologies">
  <div class="landing-page-inner card card--lift">
    <h2 data-i18n="page5.title">Technologies</h2>
    <p class="landing-lead" data-i18n="page5.lead">WebRTC, Opus/Speex, WireGuard remote access, PHP consoles, and Docker CI pipelines.</p>
    <div class="landing-feature-grid">
      <article class="card"><strong>WebRTC / UDP</strong><p class="muted">Low-latency mirror paths</p></article>
      <article class="card"><strong>Opus · Speex</strong><p class="muted">Native codec validation</p></article>
      <article class="card"><strong>WireGuard</strong><p class="muted">Remote device sessions</p></article>
      <article class="card"><strong>PHP · SQLite</strong><p class="muted">Crash + ticket console</p></article>
    </div>
  </div>
</section>

<section class="landing-page" id="landing-page-6" data-page="6" aria-label="Resources">
  <div class="landing-page-inner card card--lift">
    <h2 data-i18n="page6.title">Resources</h2>
    <p class="landing-lead" data-i18n="page6.lead">Documentation, deployment guides, and integration patterns for your environment.</p>
    <p><a class="btn" href="crashes/">Crashes console</a> <a class="btn" href="build/">Builder</a> <a class="btn" href="git/">Git browser</a></p>
  </div>
</section>

<section class="landing-page" id="landing-page-7" data-page="7" aria-label="People">
  <div class="landing-page-inner card card--lift">
    <h2 data-i18n="page7.title">People</h2>
    <p class="landing-lead" data-i18n="page7.lead">Engineers and operators shipping cast, crash, and build workflows every day.</p>
    <div class="landing-gallery">
      <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=400&amp;h=300&amp;fit=crop" alt="" loading="lazy" decoding="async">
      <img src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=400&amp;h=300&amp;fit=crop" alt="" loading="lazy" decoding="async">
    </div>
  </div>
</section>

<section class="landing-page" id="landing-page-8" data-page="8" aria-label="Culture">
  <div class="landing-page-inner card card--lift">
    <h2 data-i18n="page8.title">Culture</h2>
    <p class="landing-lead" data-i18n="page8.lead">Open tooling, green master branches, and honest postmortems.</p>
    <p class="muted">We ship on <code>next</code>, tag on <code>master</code>, and keep infra docs next to the code.</p>
  </div>
</section>

<section class="landing-page" id="landing-page-9" data-page="9" aria-label="Pricing">
  <div class="landing-page-inner card card--lift">
    <h2 data-i18n="page9.title">Pricing</h2>
    <p class="landing-lead" data-i18n="page9.lead">Self-hosted core; enterprise options for SLA, SSO, and dedicated builders.</p>
    <div class="landing-price-grid">
      <div class="landing-price-card">
        <h3>Community</h3>
        <div class="price">$0</div>
        <p class="muted">Full source, self-hosted BE, community support.</p>
      </div>
      <div class="landing-price-card">
        <h3>Team</h3>
        <div class="price">Custom</div>
        <p class="muted">Priority fixes, deployment assistance, staging builders.</p>
      </div>
      <div class="landing-price-card">
        <h3>Enterprise</h3>
        <div class="price">Custom</div>
        <p class="muted">SLA, SSO, dedicated infra review, on-call options.</p>
      </div>
    </div>
  </div>
</section>

<section class="landing-page" id="landing-page-10" data-page="10" aria-label="Contact">
  <div class="landing-page-inner card card--lift">
    <h2 data-i18n="page10.title">Contact us</h2>
    <p class="landing-lead" data-i18n="page10.lead">Reach the maintainer for partnerships, support, or deployment help.</p>
    <form class="landing-contact-form" action="#" method="post" onsubmit="return false">
      <label>Name<input type="text" name="name" autocomplete="name"></label>
      <label>Email<input type="email" name="email" autocomplete="email"></label>
      <label>Message<textarea name="message" rows="4"></textarea></label>
      <button type="submit" class="btn btn-primary">Send (placeholder)</button>
    </form>
  </div>
</section>