Startup SaaS Landing Page

<!-- Full page: Startup SaaS -->
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top">
  <div class="container"><a class="navbar-brand fw-bold" href="#"><i class="bi bi-rocket-takeoff text-primary"></i> Rocket</a><button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nv"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="nv">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Docs</a></li>
        <li class="nav-item ms-lg-3"><a class="btn btn-primary" href="#">Start free</a></li>
      </ul>
    </div>
  </div>
</nav>
<section class="py-5" style="background:linear-gradient(180deg,#eff6ff,#fff)">
  <div class="container py-5 text-center"><span class="badge bg-primary-subtle text-primary">New · v2.0 launched</span>
    <h1 class="display-3 fw-bold mt-3">Ship your MVP <span class="text-primary">10× faster</span></h1>
    <p class="lead text-muted mx-auto" style="max-width:620px">Rocket gives you auth, payments, analytics & UI — pre-built. Focus on your product.</p>
    <div class="d-flex gap-2 justify-content-center"><a href="#" class="btn btn-primary btn-lg">Start free trial</a><a href="#" class="btn btn-outline-dark btn-lg"><i class="bi bi-play-circle me-1"></i>Watch demo</a></div><img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1200&h=600&fit=crop" alt="Dashboard preview screenshot" class="img-fluid rounded-4 shadow mt-5">
  </div>
</section>
<section class="py-5">
  <div class="container">
    <h2 class="text-center fw-bold">Everything you need</h2>
    <div class="row g-4 mt-3">
      <div class="col-md-4">
        <div class="p-4 border rounded-4 h-100"><i class="bi bi-shield-check display-4 text-primary"></i>
          <h5 class="fw-bold mt-3">Enterprise-grade security</h5>
          <p class="text-muted small mb-0">SOC 2, GDPR, and HIPAA compliant infrastructure.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="p-4 border rounded-4 h-100"><i class="bi bi-lightning-charge display-4 text-warning"></i>
          <h5 class="fw-bold mt-3">Blazing fast API</h5>
          <p class="text-muted small mb-0">Sub-50ms responses on our global edge network.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="p-4 border rounded-4 h-100"><i class="bi bi-graph-up-arrow display-4 text-success"></i>
          <h5 class="fw-bold mt-3">Built to scale</h5>
          <p class="text-muted small mb-0">From 10 to 10 million users — no re-platforming.</p>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="py-5 bg-light">
  <div class="container">
    <h2 class="text-center fw-bold">Simple pricing</h2>
    <div class="row g-4 mt-3">
      <div class="col-md-4">
        <div class="p-4 border bg-white rounded-4 h-100">
          <h5>Starter</h5>
          <h1>$0</h1>
          <ul class="list-unstyled small">
            <li>✓ 3 projects</li>
            <li>✓ Community support</li>
          </ul><a href="#" class="btn btn-outline-dark w-100">Start</a>
        </div>
      </div>
      <div class="col-md-4">
        <div class="p-4 border-primary border-2 bg-white rounded-4 h-100 shadow"><span class="badge bg-primary">Popular</span>
          <h5 class="mt-2">Pro</h5>
          <h1>$29<span class="fs-6">/mo</span></h1>
          <ul class="list-unstyled small">
            <li>✓ Unlimited projects</li>
            <li>✓ Priority support</li>
          </ul><a href="#" class="btn btn-primary w-100">Start</a>
        </div>
      </div>
      <div class="col-md-4">
        <div class="p-4 border bg-white rounded-4 h-100">
          <h5>Enterprise</h5>
          <h1>Custom</h1>
          <ul class="list-unstyled small">
            <li>✓ SSO + audit logs</li>
            <li>✓ Dedicated CSM</li>
          </ul><a href="#" class="btn btn-outline-dark w-100">Contact</a>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="py-5 text-center bg-primary text-white">
  <div class="container py-3">
    <h2 class="fw-bold">Ready to launch?</h2>
    <p class="lead">Join 10,000+ teams shipping with Rocket.</p><a href="#" class="btn btn-warning btn-lg fw-bold">Start free — no credit card</a>
  </div>
</section>
<footer class="py-4 bg-dark text-white text-center">
  <div class="container"><small>© 2026 Rocket, Inc.</small></div>
</footer>