Purple_Envelop_Order_Site/app/views/Home/index.asp

<section class="hero" style="padding: 48px 0; border-radius: var(--radius-lg); overflow: hidden;">
  <div class="hero-grid" style="gap: 40px;">
    <div class="hero-copy">
      <span class="eyebrow">Election mail production made simple</span>
      <h1 style="font-size: clamp(2rem, 4vw, 3rem);">Accurate purple envelope addressing and USPS barcode preparation.</h1>
      <p class="hero-lead">
        Upload your voter or recipient list, select your production options,
        and receive a clear order total before submitting your job.
      </p>

      <div class="hero-actions">
        <a class="button button-primary" href="#services">View services</a>
        <a class="button button-secondary" href="#process">See how it works</a>
      </div>

      <ul class="trust-list" aria-label="Service benefits">
        <li>Secure data handling</li>
        <li>Address formatting and validation</li>
        <li>Intelligent Mail barcode preparation</li>
      </ul>
    </div>

    <div class="hero-visual" style="min-height: 320px;">
      <div class="envelope-card" style="width: min(100%, 420px);"></div>
    </div>
  </div>
</section>

<section class="service-strip" aria-label="Service highlights" style="border-radius: var(--radius-md); margin: 24px 0;">
  <div class="service-strip-grid">
    <div>
      <strong>Address cleanup</strong>
      <span>Standardized mailing fields</span>
    </div>
    <div>
      <strong>USPS barcode setup</strong>
      <span>IMb-ready production data</span>
    </div>
    <div>
      <strong>Inkjet addressing</strong>
      <span>Clear, machine-readable output</span>
    </div>
    <div>
      <strong>Proof approval</strong>
      <span>Review before production begins</span>
    </div>
  </div>
</section>

<section id="request-order" class="cta-section" style="padding: 40px 0;">
  <div class="cta-card">
    <div>
      <span class="eyebrow">Ready to get started?</span>
      <h2>Request an order and we'll email you a secure link to continue.</h2>
    </div>
    <a class="button button-light" href="<%= H(Routes().AppURL & "request-order") %>">Request an order</a>
  </div>
</section>

<section id="services" style="padding: 48px 0;">
  <div class="section-heading">
    <span class="eyebrow">Complete production support</span>
    <h2>Everything needed to prepare your ballot envelopes.</h2>
    <p>
      Choose only the services you need, from basic addressing to a
      complete data-processing and mailing workflow.
    </p>
  </div>

  <div class="card-grid" style="grid-template-columns: repeat(2, 1fr);">
    <article class="feature-card">
      <span class="feature-number">01</span>
      <h3>Recipient addressing</h3>
      <p>
        Print recipient names, delivery addresses, city, state, ZIP Code,
        return-service endorsements, and optional identifiers.
      </p>
    </article>

    <article class="feature-card">
      <span class="feature-number">02</span>
      <h3>Barcode preparation</h3>
      <p>
        Prepare and print Intelligent Mail barcode data using the mailing
        fields and identifiers supplied for your project.
      </p>
    </article>

    <article class="feature-card">
      <span class="feature-number">03</span>
      <h3>List processing</h3>
      <p>
        Review column structure, remove obvious formatting problems,
        standardize capitalization, and identify incomplete records.
      </p>
    </article>

    <article class="feature-card">
      <span class="feature-number">04</span>
      <h3>Proof and production</h3>
      <p>
        Receive a digital sample for approval before the full envelope
        run enters production.
      </p>
    </article>
  </div>
</section>

<section id="process" class="section-muted" style="padding: 48px 0; border-radius: var(--radius-md);">
  <div class="section-heading centered">
    <span class="eyebrow">Simple four-step workflow</span>
    <h2>From uploaded list to completed order.</h2>
  </div>

  <div class="process-grid">
    <div class="process-step">
      <span>1</span>
      <h3>Enter job details</h3>
      <p>Provide quantity, envelope specifications, and due date.</p>
    </div>
    <div class="process-step">
      <span>2</span>
      <h3>Upload your files</h3>
      <p>Add recipient data, artwork, instructions, or a sample envelope.</p>
    </div>
    <div class="process-step">
      <span>3</span>
      <h3>Approve your proof</h3>
      <p>Review the address placement and sample barcode before printing.</p>
    </div>
    <div class="process-step">
      <span>4</span>
      <h3>Production begins</h3>
      <p>Your approved job is addressed, checked, packed, and delivered.</p>
    </div>
  </div>
</section>

<section class="cta-section" style="padding: 0 0 48px;">
  <div class="cta-card">
    <div>
      <span class="eyebrow">Need a custom production quote?</span>
      <h2>Large quantities and special ballot configurations are welcome.</h2>
    </div>
    <a class="button button-light" href="mailto:orders@example.com">Request pricing</a>
  </div>
</section>