postcardmojo/app/views/Home/landing.asp

<%
Response.Charset = "utf-8"
Response.CodePage = 65001
%>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>PostcardMojo | Big Local Reach on One 9×12 Postcard</title>
  <meta name="description" content="Put your business on an oversized 9×12 postcard shared by a curated group of local businesses and delivered directly to nearby mailboxes.">
  <meta name="theme-color" content="#062f4f">
  <link rel="icon" type="image/jpeg" href="/images/logos/sharp/jpg/icon_64.jpg">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/css/home.css">
</head>
<body id="top">
  <a class="skip-link" href="#main-content">Skip to main content</a>

  <header class="site-header">
    <div class="shell nav-shell">
      <a class="brand" href="/" aria-label="PostcardMojo home">
        <img src="/images/logos/sharp/jpg/logo_full_small_b.jpg" width="217" height="73" alt="PostcardMojo">
      </a>
      <nav class="site-nav" aria-label="Primary navigation">
        <a href="#how-it-works">How it works</a>
        <a href="#why-postcards">Why it works</a>
        <a href="#good-fit">Who it is for</a>
        <a href="#faq">FAQ</a>
      </nav>
      <a class="button button-small button-primary" href="#contact">Find your spot</a>
    </div>
  </header>

  <main id="main-content">
    <section class="hero">
      <div class="hero-glow hero-glow-one" aria-hidden="true"></div>
      <div class="hero-glow hero-glow-two" aria-hidden="true"></div>
      <div class="shell hero-grid">
        <div class="hero-copy">
          <p class="eyebrow"><span></span> Shared direct mail for local businesses</p>
          <h1>Make your business <em>impossible to miss</em> in the mailbox.</h1>
          <p class="hero-lede">PostcardMojo puts a curated lineup of local businesses on one oversized 9×12 postcard and is delivered to 5,000 mailboxes. Your offer gets a bold, tangible place in nearby homes while participating businesses share the cost of printing and postage.</p>
          <div class="hero-actions">
            <a class="button button-primary" href="#contact">Explore a campaign</a>
            <a class="button button-quiet" href="#how-it-works">See how it works <span aria-hidden="true">→</span></a>
          </div>
          <ul class="hero-points" aria-label="Campaign highlights">
            <li><span aria-hidden="true">✓</span> Oversized 9×12 format</li>
            <li><span aria-hidden="true">✓</span> Built for neighborhood reach</li>
            <li><span aria-hidden="true">✓</span> Shared production costs</li>
          </ul>
        </div>

        <div class="postcard-stage">
          <div class="postcard-shadow" aria-hidden="true"></div>
          <div class="postcard">
            <img class="postcard-image" src="/images/download%20(1).png" width="2048" height="1536" alt="Sample shared postcard featuring advertisements for local home-service businesses">
          </div>
          <div class="stage-note"><span aria-hidden="true">↗</span> One card. Multiple businesses. A whole neighborhood of opportunity.</div>
        </div>

        <aside class="contact-card" id="contact" aria-labelledby="contact-title">
          <p class="eyebrow eyebrow-on-dark"><span></span> Contact us</p>
          <h2 id="contact-title">Interested in a spot on the next card?</h2>
<% If contactSent Then %>
          <p class="contact-success" role="status">Thank you! Your message was sent and we will be in touch soon.</p>
<% Else %>
          <form class="contact-form" method="post" action="/contact#contact" novalidate>
<% If UBound(contactErrors) >= 0 Then %>
            <div class="contact-errors" role="alert">
              <ul>
<% Dim contactErrorIndex : For contactErrorIndex = 0 To UBound(contactErrors) %>
                <li><%= Server.HTMLEncode(contactErrors(contactErrorIndex)) %></li>
<% Next %>
              </ul>
            </div>
<% End If %>
            <input type="hidden" name="csrf_token" value="<%= Server.HTMLEncode(ContactCsrfToken()) %>">
            <div class="contact-trap" aria-hidden="true"><label>Leave this empty <input type="text" name="zq_trap_field" tabindex="-1" autocomplete="off"></label></div>
            <label>Name <span aria-hidden="true">*</span>
              <input type="text" name="name" maxlength="100" required autocomplete="name" value="<%= Server.HTMLEncode(contactName & "") %>">
            </label>
            <label>Email <span aria-hidden="true">*</span>
              <input type="email" name="email" maxlength="150" required autocomplete="email" value="<%= Server.HTMLEncode(contactEmail & "") %>">
            </label>
            <label>Phone
              <input type="tel" name="phone" maxlength="40" autocomplete="tel" value="<%= Server.HTMLEncode(contactPhone & "") %>">
            </label>
            <label>Business
              <input type="text" name="business" maxlength="150" autocomplete="organization" value="<%= Server.HTMLEncode(contactBusiness & "") %>">
            </label>
            <label class="contact-wide">How can we help?
              <textarea name="message" rows="3" maxlength="2000"><%= Server.HTMLEncode(contactMessage & "") %></textarea>
            </label>
            <button class="button button-primary" type="submit">Send my interest</button>
          </form>
<% End If %>
        </aside>
      </div>
    </section>

    <section class="signal-strip" aria-label="What makes PostcardMojo different">
      <div class="shell signal-grid">
        <div><strong>9 × 12</strong><span>Oversized presence</span></div>
        <div><strong>One card</strong><span>A curated local lineup</span></div>
        <div><strong>Shared</strong><span>Print and postage costs</span></div>
        <div><strong>Local</strong><span>Campaign-focused reach</span></div>
      </div>
    </section>

    <section class="section section-light" id="how-it-works">
      <div class="shell">
        <div class="section-heading heading-centered">
          <p class="eyebrow eyebrow-centered"><span></span> Simple by design</p>
          <h2>Three steps to the mailbox.</h2>
          <p>Pick your size, give us your ad, and we handle the printing and mailing.</p>
        </div>
        <ol class="steps">
          <li>
            <span class="step-number">01</span>
            <div class="step-icon" aria-hidden="true">◎</div>
            <h3>Choose your ad size</h3>
            <p>Pick a 3×4 or a 6×8 space on the shared 9×12 postcard.</p>
          </li>
          <li>
            <span class="step-number">02</span>
            <div class="step-icon" aria-hidden="true">✦</div>
            <h3>Send your layout or let us design it</h3>
            <p>Already have an ad? Send it over. Need one? We will design it for you.</p>
          </li>
          <li>
            <span class="step-number">03</span>
            <div class="step-icon" aria-hidden="true">↗</div>
            <h3>We mail it out</h3>
            <p>We print the postcard and deliver it to mailboxes in your area.</p>
          </li>
        </ol>
      </div>
    </section>

    <section class="section section-navy" id="why-postcards">
      <div class="shell value-grid">
        <div class="value-copy">
          <p class="eyebrow eyebrow-on-dark"><span></span> A physical advantage</p>
          <h2>Digital ads disappear with a swipe. A great postcard gets held.</h2>
          <p>PostcardMojo gives your business a physical moment with a local customer. The oversized format creates room for a useful offer, recognizable branding, and a direct next step.</p>
          <a class="text-link" href="#get-started">Put your offer on the next card <span aria-hidden="true">→</span></a>
        </div>
        <div class="benefit-list">
          <article>
            <span class="benefit-mark">01</span>
            <div><h3>Big enough to notice</h3><p>A 9×12 card has the visual presence to stand apart from ordinary envelopes and smaller mail pieces.</p></div>
          </article>
          <article>
            <span class="benefit-mark">02</span>
            <div><h3>Local enough to matter</h3><p>Campaigns can be centered on the communities where participating businesses want to be known.</p></div>
          </article>
          <article>
            <span class="benefit-mark">03</span>
            <div><h3>Shared without feeling small</h3><p>Businesses share the mail piece while each ad keeps its own message, offer, and brand identity.</p></div>
          </article>
          <article>
            <span class="benefit-mark">04</span>
            <div><h3>Easy to act on</h3><p>A phone number, URL, QR code, or offer gives recipients a simple way to take the next step.</p></div>
          </article>
        </div>
      </div>
    </section>

    <section class="section section-warm" id="good-fit">
      <div class="shell">
        <div class="section-heading heading-split">
          <div>
            <p class="eyebrow"><span></span> Made for the neighborhood</p>
            <h2>Local businesses belong in local mailboxes.</h2>
          </div>
          <p>If nearby households can become customers, a PostcardMojo campaign can help introduce your business and give them a reason to respond.</p>
        </div>
        <div class="fit-grid">
          <article class="fit-card">
            <span class="fit-icon" aria-hidden="true">⌂</span>
            <h3>Home services</h3>
            <p>Landscaping, cleaning, roofing, HVAC, plumbing, remodeling, and other trusted pros.</p>
          </article>
          <article class="fit-card">
            <span class="fit-icon" aria-hidden="true">＋</span>
            <h3>Health &amp; wellness</h3>
            <p>Dentists, chiropractors, fitness studios, salons, spas, and wellness providers.</p>
          </article>
          <article class="fit-card">
            <span class="fit-icon" aria-hidden="true">♨</span>
            <h3>Food &amp; experiences</h3>
            <p>Restaurants, cafés, entertainment, family activities, and places worth discovering.</p>
          </article>
          <article class="fit-card">
            <span class="fit-icon" aria-hidden="true">◆</span>
            <h3>Professional services</h3>
            <p>Real estate, insurance, financial, legal, pet care, automotive, and local experts.</p>
          </article>
        </div>
      </div>
    </section>

    <section class="section offer-section">
      <div class="shell offer-grid">
        <div class="offer-card" aria-hidden="true">
          <div class="offer-stamp">YOUR<br>OFFER</div>
          <p class="offer-kicker">LOCAL FAVORITE</p>
          <p class="offer-headline">Give neighbors a reason to try you.</p>
          <div class="offer-coupon"><strong>20% OFF</strong><span>your first visit</span></div>
          <div class="offer-url">YOURBUSINESS.COM</div>
        </div>
        <div class="offer-copy">
          <p class="eyebrow"><span></span> Make the space count</p>
          <h2>A clear offer turns attention into action.</h2>
          <p>Your ad does not need to tell your whole story. It needs to make one strong promise and give a nearby customer one easy next step.</p>
          <ul class="check-list">
            <li><span>✓</span><div><strong>A direct headline</strong><small>Say what you do and why it matters.</small></div></li>
            <li><span>✓</span><div><strong>A compelling reason to respond</strong><small>Feature an offer, service, or timely benefit.</small></div></li>
            <li><span>✓</span><div><strong>A simple call to action</strong><small>Use a memorable URL, phone number, or QR code.</small></div></li>
          </ul>
        </div>
      </div>
    </section>

    <section class="section section-light" id="faq">
      <div class="shell faq-grid">
        <div class="faq-intro">
          <p class="eyebrow"><span></span> The short version</p>
          <h2>Questions before you join the card?</h2>
          <p>Every campaign is shaped around its participating businesses and selected local area. These answers cover the basics.</p>
        </div>
        <div class="faq-list">
          <details open>
            <summary>What is a shared 9×12 postcard?<span aria-hidden="true">+</span></summary>
            <p>It is one oversized mail piece featuring a curated collection of local business ads. The format gives recipients multiple useful offers while advertisers share print and mailing costs.</p>
          </details>
          <details>
            <summary>Will a direct competitor appear beside me?<span aria-hidden="true">+</span></summary>
            <p>Category availability is managed by campaign. Ask about category placement and any available exclusivity when reserving your space.</p>
          </details>
          <details>
            <summary>Do I need a finished ad?<span aria-hidden="true">+</span></summary>
            <p>Start with your logo, offer, contact details, and any brand assets you already have. Creative requirements and available assistance can be confirmed for your campaign.</p>
          </details>
          <details>
            <summary>Where will the postcard be mailed?<span aria-hidden="true">+</span></summary>
            <p>Campaigns are planned around selected local areas. Exact geography, timing, and mailing details are confirmed before you reserve a spot.</p>
          </details>
          <details>
            <summary>What does a campaign cost?<span aria-hidden="true">+</span></summary>
            <p>Pricing depends on the campaign, placement, and mailing plan. Request current details for the area you want to reach.</p>
          </details>
        </div>
      </div>
    </section>

    <section class="cta-section" id="get-started">
      <div class="shell cta-card">
        <div class="cta-rings" aria-hidden="true"></div>
        <div>
          <p class="eyebrow eyebrow-on-dark"><span></span> Your neighborhood is waiting</p>
          <h2>Put your business in the next mailbox moment.</h2>
          <p>Tell us what you do and where you want to be seen. We will help you explore the right PostcardMojo campaign.</p>
        </div>
        <div class="cta-actions">
          <a class="button button-gold" href="#contact">Request campaign details</a>
          <span>Campaign availability varies by area.</span>
        </div>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <div class="shell footer-grid">
      <a class="footer-brand" href="#top" aria-label="Back to top">
        <img src="/images/logos/sharp/jpg/logo_full_small_a.jpg" width="187" height="63" alt="PostcardMojo">
      </a>
      <p>Big local visibility, delivered.</p>
      <nav aria-label="Footer navigation">
        <a href="#how-it-works">How it works</a>
        <a href="#faq">FAQ</a>
        <a href="#contact">Contact</a>
      </nav>
      <small>&copy; <%= Year(Date()) %> PostcardMojo. All rights reserved.</small>
    </div>
  </footer>
</body>
</html>