Beacon — Mobile App Coming Soon

<main class="bc-wrap">
  <div class="bc-inner">
    <div class="bc-left">
      <a class="bc-brand" href="#"><span>◎</span> Beacon</a>
      <span class="bc-tag">Coming to iOS &amp; Android · Summer 2026</span>
      <h1>Find your people. <em>Wherever you are.</em></h1>
      <p class="bc-lead">Beacon connects you with friends and events nearby in seconds. Be the first to try it — join the waitlist and we'll send your invite the day we go live.</p>
      <form class="bc-form" novalidate>
        <label class="visually-hidden" for="bc-email">Email address</label>
        <input id="bc-email" type="email" placeholder="you@email.com" autocomplete="email" required>
        <button type="submit">Join waitlist</button>
      </form>
      <p class="bc-note">Join 4,200+ people already waiting.</p>
      <div class="bc-stores" aria-label="Coming to app stores">
        <span class="bc-store"><b>Download on the</b>App Store</span>
        <span class="bc-store"><b>Get it on</b>Google Play</span>
      </div>
      <ul class="bc-feats">
        <li><span aria-hidden="true">📍</span> Nearby events</li>
        <li><span aria-hidden="true">⚡</span> Instant invites</li>
        <li><span aria-hidden="true">🔒</span> Private by default</li>
      </ul>
    </div>
    <div class="bc-right" aria-hidden="true">
      <div class="bc-phone">
        <div class="bc-notch"></div>
        <div class="bc-screen">
          <div class="bc-app-top">Beacon</div>
          <div class="bc-card-a"></div>
          <div class="bc-row"><span></span><span></span></div>
          <div class="bc-card-b"></div>
          <div class="bc-cta">Say hello 👋</div>
        </div>
      </div>
    </div>
  </div>
  <footer class="bc-foot"><span class="b-by">Powered by <a href="https://convertatlas.org" rel="noopener">convertatlas.org</a></span></footer>
</main>

*{box-sizing:border-box}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.bc-wrap{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(160deg,#fff7f3,#ffe9 ef 60%,#fbe7ff);background:linear-gradient(160deg,#fff7f3,#ffe9ef);color:#2a1b22;font-family:'Inter',system-ui,sans-serif;padding:34px 22px}
.bc-inner{flex:1;width:100%;max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.bc-brand{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:1.3rem;color:#ff5a5f;text-decoration:none}
.bc-brand span{font-size:1.5rem}
.bc-tag{display:inline-block;margin:22px 0 16px;padding:7px 14px;border-radius:999px;font-size:.8rem;font-weight:700;color:#ff5a5f;background:#ffe1e0}
.bc-left h1{font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(2.1rem,5.5vw,3.4rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 16px}
.bc-left h1 em{font-style:normal;color:#ff5a5f}
.bc-lead{color:#6b5560;font-size:1.08rem;line-height:1.6;max-width:46ch;margin:0 0 26px}
.bc-form{display:flex;gap:10px;flex-wrap:wrap;max-width:440px}
.bc-form input{flex:1;min-width:170px;padding:14px 16px;border-radius:14px;border:2px solid #ffd0cf;background:#fff;font:inherit;font-size:1rem;color:#2a1b22}
.bc-form input:focus{outline:none;border-color:#ff5a5f;box-shadow:0 0 0 4px rgba(255,90,95,.18)}
.bc-form button{padding:14px 24px;border:0;border-radius:14px;font:inherit;font-weight:700;color:#fff;background:#ff5a5f;cursor:pointer;transition:transform .2s,box-shadow .2s}
.bc-form button:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(255,90,95,.34)}
.bc-form button:focus-visible{outline:3px solid #ffb3b1;outline-offset:2px}
.bc-note{margin:12px 0 0;font-size:.86rem;color:#8a7480}
.bc-stores{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 0}
.bc-store{display:flex;flex-direction:column;justify-content:center;padding:9px 18px;border-radius:12px;background:#2a1b22;color:#fff;font-weight:700;font-size:.98rem;line-height:1.1}
.bc-store b{font-weight:500;font-size:.66rem;opacity:.8}
.bc-feats{list-style:none;display:flex;gap:20px;flex-wrap:wrap;padding:0;margin:26px 0 0}
.bc-feats li{display:flex;align-items:center;gap:8px;font-size:.92rem;font-weight:600;color:#5a4750}
.bc-right{display:flex;justify-content:center}
.bc-phone{position:relative;width:248px;height:508px;background:#2a1b22;border-radius:42px;padding:13px;box-shadow:0 30px 70px rgba(255,90,95,.28)}
.bc-notch{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:120px;height:24px;background:#2a1b22;border-radius:0 0 16px 16px;z-index:2}
.bc-screen{height:100%;border-radius:32px;background:linear-gradient(160deg,#fff,#fff2f1);padding:38px 18px 18px;display:flex;flex-direction:column;gap:13px}
.bc-app-top{font-family:'Sora',sans-serif;font-weight:800;color:#ff5a5f;font-size:1.2rem}
.bc-card-a{height:120px;border-radius:18px;background:linear-gradient(135deg,#ff5a5f,#ff9a5a)}
.bc-row{display:flex;gap:11px}
.bc-row span{flex:1;height:62px;border-radius:14px;background:#ffe1e0}
.bc-card-b{height:80px;border-radius:16px;background:#fff0ef;border:1px dashed #ffc4c2}
.bc-cta{margin-top:auto;text-align:center;padding:13px;border-radius:14px;background:#2a1b22;color:#fff;font-weight:700}
.bc-foot{text-align:center;padding-top:26px}
.b-by{font-size:.84rem;color:#8a7480}
.b-by a{color:#ff5a5f;font-weight:700;text-decoration:none}
.b-by a:hover{text-decoration:underline}
@media(max-width:820px){.bc-inner{grid-template-columns:1fr;gap:40px}.bc-right{order:-1}.bc-phone{width:210px;height:430px}}
@media(prefers-reduced-motion:reduce){.bc-form button{transition:none}}

(function(){var f=document.querySelector('.bc-form');if(!f)return;f.addEventListener('submit',function(e){e.preventDefault();var i=f.querySelector('input');if(!i.value||!i.checkValidity()){i.focus();i.style.borderColor='#d6336c';return;}f.innerHTML='<p style="margin:0;color:#2a9d5b;font-weight:700">✓ You\'re on the list! Invite coming soon.</p>';});})();