`views/public/pricing.ejs`

39 lines
<%- include('../partials/head', { title, meta_desc }) %>
<%- include('../partials/header') %>

<main class="pricing-page">
  <section class="section">
    <div class="wrap">
      <p class="muted small"><a href="/">← Home</a></p>
      <header class="page-head" style="flex-direction:column;align-items:flex-start;gap:.5rem;margin-bottom:2rem">
        <h1>Pricing</h1>
        <p class="muted">During Phase 1 testing, every tier is free. When billing launches we'll email past submitters 14 days in advance.</p>
      </header>

      <div class="pricing-grid">
        <% plans.forEach(function(p) { %>
          <article class="pricing-card <%= p.featured ? 'featured' : '' %>">
            <% if (p.featured) { %><span class="pricing-featured-pill">Most popular</span><% } %>
            <h2><%= p.name %></h2>
            <p class="pricing-price"><span class="pricing-amount"><%= p.price %></span><span class="pricing-period"><%= p.period %></span></p>
            <p class="muted"><%= p.tagline %></p>
            <ul class="pricing-feats">
              <% p.features.forEach(function(f) { %><li><%= f %></li><% }); %>
            </ul>
            <form method="POST" action="/checkout">
              <input type="hidden" name="plan" value="<%= p.id %>">
              <button type="submit" class="btn <%= p.featured ? 'primary' : 'ghost' %>" style="width:100%"><%= p.cta %></button>
            </form>
          </article>
        <% }); %>
      </div>

      <p class="muted small" style="margin-top:2rem;text-align:center">
        All plans include: AES-256-GCM encryption at rest · TCPA-compliant dialing · two-party-consent recording disclosure · 90-day data retention · CCPA / CPRA deletion-on-request.
      </p>
    </div>
  </section>
</main>

<%- include('../partials/footer') %>