Hero Section Generator

<section class="hero hero-center">
  <h1>Build something people love</h1>
  <p>A fast, private, browser-first toolkit for modern makers. No sign-up required.</p>
  <div class="hero-actions">
    <a class="hero-btn primary" href="#">Get started</a>
    <a class="hero-btn secondary" href="#">Learn more</a>
  </div>
</section>
<style>
.hero{max-width:760px;margin:0 auto;padding:64px 24px;display:flex;flex-direction:column;gap:20px;}
.hero-center{text-align:center;align-items:center;}
.hero-left{text-align:left;align-items:flex-start;}
.hero h1{margin:0;font-size:clamp(28px,5vw,48px);line-height:1.1;color:#0f172a;letter-spacing:-.02em;}
.hero p{margin:0;font-size:clamp(15px,2.5vw,19px);line-height:1.6;color:#475569;max-width:52ch;}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;}
.hero-btn{display:inline-flex;align-items:center;padding:12px 22px;border-radius:12px;font-weight:600;text-decoration:none;}
.hero-btn.primary{background:#6366f1;color:#fff;}
.hero-btn.secondary{background:transparent;color:#0f172a;border:1px solid #cbd5e1;}
</style>