Persona — Personal Brand Coming Soon

<main class="pb-wrap"><div class="pb-card">
  <div class="pb-avatar" aria-hidden="true">EM</div>
  <h1>Elena Marsh</h1>
  <p class="pb-role">Product coach &amp; writer</p>
  <p class="pb-bio">I help early-stage teams ship products people love. My new website and weekly newsletter launch soon — join below and I'll send the first issue your way.</p>
  <form class="pb-form" novalidate><label class="visually-hidden" for="pb-e">Email</label>
    <input id="pb-e" type="email" placeholder="you@email.com" autocomplete="email" required><button type="submit">Subscribe</button></form>
  <p class="pb-note">One thoughtful email a week. Unsubscribe anytime.</p>
  <nav class="pb-social" aria-label="Social"><a href="#" aria-label="X">X</a><a href="#" aria-label="LinkedIn">in</a><a href="#" aria-label="Substack">S</a></nav>
  <footer class="pb-foot"><span class="x-by">Powered by <a href="https://convertatlas.org" rel="noopener">convertatlas.org</a></span></footer>
</div></main>

*{box-sizing:border-box}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.pb-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 20px;background:radial-gradient(70% 50% at 50% 0%,#e0f2fe,#f8fafc);color:#0f2233;font-family:'Inter',system-ui,sans-serif}
.pb-card{width:100%;max-width:460px;text-align:center;background:#fff;border:1px solid #e2e8f0;border-radius:24px;padding:44px 34px;box-shadow:0 24px 60px rgba(14,165,233,.12)}
.pb-avatar{width:88px;height:88px;border-radius:50%;margin:0 auto 22px;display:grid;place-items:center;font-family:'Sora',sans-serif;font-weight:800;font-size:1.7rem;color:#fff;background:linear-gradient(135deg,#0ea5e9,#6366f1)}
.pb-card h1{font-family:'Sora',sans-serif;font-weight:800;font-size:1.7rem;margin:0 0 4px;letter-spacing:-.01em}
.pb-role{color:#0ea5e9;font-weight:700;font-size:.96rem;margin:0 0 18px}
.pb-bio{color:#52677a;font-size:1rem;line-height:1.6;margin:0 0 26px}
.pb-form{display:flex;gap:9px;flex-wrap:wrap}
.pb-form input{flex:1;min-width:160px;padding:13px 15px;border-radius:12px;border:2px solid #d7e3ee;background:#f8fbfe;font:inherit;font-size:.98rem;color:#0f2233}
.pb-form input:focus{outline:none;border-color:#0ea5e9;box-shadow:0 0 0 4px rgba(14,165,233,.16)}
.pb-form button{padding:13px 22px;border:0;border-radius:12px;font:inherit;font-weight:700;color:#fff;background:#0ea5e9;cursor:pointer;transition:transform .2s,box-shadow .2s}
.pb-form button:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(14,165,233,.3)}.pb-form button:focus-visible{outline:3px solid #7dd3fc;outline-offset:2px}
.pb-note{margin:12px 0 0;font-size:.82rem;color:#7c8ea0}
.pb-social{display:flex;gap:10px;justify-content:center;margin:24px 0 0}
.pb-social a{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-weight:700;font-size:.82rem;text-decoration:none;color:#0f2233;background:#eef4f9;transition:.2s}
.pb-social a:hover{background:#0ea5e9;color:#fff}.pb-social a:focus-visible{outline:2px solid #0ea5e9;outline-offset:2px}
.pb-foot{margin-top:26px;padding-top:20px;border-top:1px solid #eef2f6}.x-by{font-size:.82rem;color:#7c8ea0}.x-by a{color:#0ea5e9;text-decoration:none;font-weight:700}.x-by a:hover{text-decoration:underline}
@media(prefers-reduced-motion:reduce){.pb-form button{transition:none}}

(function(){var f=document.querySelector('.pb-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='#dc2626';return;}f.innerHTML='<p style="margin:0;color:#0ea5e9;font-weight:700">✓ Subscribed — first issue incoming!</p>';});})();