<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Beacon - One tap. Instant attention.</title>
  <meta name="description" content="Beacon makes important check-ins fast, private, and wonderfully simple.">
  <script>document.documentElement.classList.add('js')</script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <a class="brand" href="index.html" aria-label="Beacon home">
      <img class="brand-logo" src="assets/beacon-logo.png" alt="">
      <span>Beacon</span>
    </a>
    <button class="menu-button" type="button" aria-label="Open menu" aria-expanded="false"><span></span><span></span></button>
    <nav class="nav" aria-label="Main navigation">
      <a href="#features">Features</a>
      <a href="apps.html">Apps</a>
      <a href="#privacy">Privacy</a>
      <a class="nav-cta" href="mailto:support@beaconapps.org">Get in touch <span aria-hidden="true">&#8599;</span></a>
    </nav>
  </header>

  <main>
    <section class="hero">
      <div class="hero-copy reveal">
        <p class="kicker"><span></span> Attention, without the noise</p>
        <h1>One tap.<br><em>Instant attention.</em></h1>
        <p class="hero-lede">A private, focused way to send the check-ins that matter. No endless threads. No missed messages. Just a clear signal to your people.</p>
        <div class="hero-actions">
          <a class="button primary" href="apps.html">See Beacon in action <span aria-hidden="true">&#8594;</span></a>
          <a class="button quiet" href="#features">Explore features</a>
        </div>
        <div class="trust-row"><span>Private by design</span><span>Real-time delivery</span><span>Built for Apple devices</span></div>
      </div>

      <div class="hero-visual reveal delay" aria-label="Beacon app shown on iPhone">
        <div class="signal signal-one"></div><div class="signal signal-two"></div><div class="signal signal-three"></div>
        <div class="phone phone-main"><img src="assets/Beacon-Light-UserSend.png" alt="Send a Beacon screen showing quick alerts including Call Me, Urgent, and Pizza's Here"></div>
        <div class="floating-alert alert-urgent"><span class="alert-icon red">!</span><span><b>Urgent</b><small>Beacon received now</small></span><i></i></div>
        <div class="floating-alert alert-read"><span class="alert-icon blue">&#10003;</span><span><b>Read</b><small>Sam saw your beacon</small></span></div>
      </div>
      <a class="scroll-cue" href="#intro" aria-label="Scroll to learn more"><span>&#8595;</span> See how it works</a>
    </section>

    <section class="statement" id="intro">
      <p class="section-number">01 / The idea</p>
      <h2>Messaging got busy.<br><span>Beacon stays clear.</span></h2>
      <p class="statement-copy">Sometimes you do not need a conversation. You need someone to call, come downstairs, check in, or simply know you are there. Beacon makes that moment immediate.</p>
    </section>

    <section class="steps-band" aria-label="How Beacon works">
      <div class="steps-inner">
        <article><span>01</span><div class="step-icon">+</div><h3>Connect</h3><p>Add trusted people by QR code, invite link, or a simple connection code.</p></article>
        <article><span>02</span><div class="step-icon radiate">&#9679;</div><h3>Send</h3><p>Choose a preset or write your own. One tap sends a clear beacon instantly.</p></article>
        <article><span>03</span><div class="step-icon">&#10003;</div><h3>Know</h3><p>See live delivery and read status, so you never have to wonder if it landed.</p></article>
      </div>
    </section>

    <section class="feature-showcase" id="features">
      <div class="section-heading reveal">
        <p class="section-number">02 / Beacon features</p>
        <h2>Small signals.<br><span>Big peace of mind.</span></h2>
      </div>
      <div class="feature-grid">
        <article class="feature-copy reveal"><span class="feature-no">01</span><div><h3>Ready when words can wait</h3><p>Send Call Me, Urgent, Pizza's Here, Come Downstairs, or your own custom beacon. The familiar message arrives without the weight of a full chat.</p><ul><li>Preset and custom beacons</li><li>Urgent alert support</li><li>Fast repeat actions</li></ul></div></article>
        <div class="feature-media blue-field reveal"><div class="phone phone-small"><img src="assets/Beacon-Light-UserSend.png" alt="Beacon quick-send options"></div><span class="media-note">Five useful signals.<br>Zero typing required.</span></div>

        <div class="feature-media mint-field reveal"><div class="phone phone-small inbox-phone"><img src="assets/Beacon-Light-Inbox.png" alt="Beacon inbox with read status"></div><div class="status-chip"><span></span> Delivered in real time</div></div>
        <article class="feature-copy reveal"><span class="feature-no">02</span><div><h3>No more “did you see this?”</h3><p>Real-time delivery and read status close the loop. Your Beacon inbox keeps recent alerts in one calm, scannable place.</p><ul><li>Live delivery status</li><li>Read receipts</li><li>Received beacon history</li></ul></div></article>

        <article class="feature-copy reveal"><span class="feature-no">03</span><div><h3>Your trusted circle, close by</h3><p>Pin the people you reach most, create groups for home, school, or work, and see when someone was last active.</p><ul><li>Pinned contacts</li><li>Family, school, and work groups</li><li>Live activity status</li></ul></div></article>
        <div class="feature-media coral-field reveal"><div class="phone phone-small connections-phone"><img src="assets/Beacon-Light-Home.png" alt="Beacon connections on iPhone"></div><img class="feature-logo" src="assets/beacon-logo.png" alt="" aria-hidden="true"></div>
      </div>
    </section>

    <section class="use-cases">
      <div class="use-title"><p class="section-number">03 / Made for real life</p><h2>A little signal<br>goes a long way.</h2></div>
      <div class="case-list">
        <article><span class="case-emoji">&#128222;</span><div><h3>Family</h3><p>“Call me when you can.”</p></div><span class="arrow">&#8599;</span></article>
        <article><span class="case-emoji">&#127891;</span><div><h3>School</h3><p>“I am ready to be picked up.”</p></div><span class="arrow">&#8599;</span></article>
        <article><span class="case-emoji">&#128188;</span><div><h3>Work</h3><p>“I need your attention here.”</p></div><span class="arrow">&#8599;</span></article>
        <article><span class="case-emoji">&#127968;</span><div><h3>Home</h3><p>“Come downstairs.”</p></div><span class="arrow">&#8599;</span></article>
      </div>
    </section>

    <section class="privacy-band" id="privacy">
      <div class="privacy-mark" aria-hidden="true"><img class="privacy-logo" src="assets/beacon-logo.png" alt=""></div>
      <div><p class="section-number">04 / Private by design</p><h2>Your connections<br>are yours.</h2></div>
      <div class="privacy-copy"><p>Beacon is designed to help a small circle of trusted people reach one another, without turning those moments into content. Clean, focused, and built around what you choose to share.</p><a href="legal.html#privacy">Read our privacy policy <span>&#8594;</span></a></div>
    </section>

    <section class="final-cta">
      <img class="cta-logo" src="assets/beacon-logo.png" alt="Beacon">
      <h2>Be there<br><em>in a tap.</em></h2>
      <p>Beacon keeps important check-ins fast, clear, and close.</p>
      <a class="button primary" href="mailto:support@beaconapps.org">Get in touch <span>&#8599;</span></a>
    </section>
  </main>

  <footer>
    <a class="brand footer-brand" href="index.html"><img class="brand-logo" src="assets/beacon-logo.png" alt=""><span>Beacon</span></a>
    <p>One tap. Instant attention.</p>
    <nav><a href="#features">Features</a><a href="apps.html">Apps</a><a href="legal.html#privacy">Privacy</a><a href="legal.html#terms">Terms</a><a href="mailto:support@beaconapps.org">Support</a></nav>
    <small>&copy; 2026 Beacon. Made for the moments that matter.</small>
  </footer>
  <script src="script.js"></script>
</body>
</html>
