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="#get-started">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. 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="#get-started">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" aria-label="Illustration of a shared 9 by 12 postcard">
          <div class="postcard-shadow" aria-hidden="true"></div>
          <div class="postcard">
            <div class="postcard-topline">
              <span>THE LOCAL EDITION</span>
              <span>9 × 12</span>
            </div>
            <div class="postcard-feature">
              <img src="/images/logos/sharp/jpg/logo_full_small_a.jpg" width="187" height="63" alt="">
              <strong>Big local offers.<br>One memorable mailer.</strong>
            </div>
            <div class="ad-grid" aria-hidden="true">
              <div class="ad-tile tile-gold"><span>HOME</span><strong>Freshen up your space</strong></div>
              <div class="ad-tile tile-navy"><span>DINING</span><strong>A local favorite</strong></div>
              <div class="ad-tile tile-cream"><span>WELLNESS</span><strong>Feel your best</strong></div>
              <div class="ad-tile tile-coral"><span>SERVICES</span><strong>Help is nearby</strong></div>
              <div class="ad-tile tile-blue"><span>AUTO</span><strong>Keep moving</strong></div>
              <div class="ad-tile tile-white"><span>YOUR BUSINESS</span><strong>belongs here</strong></div>
            </div>
            <div class="postcard-edge">A collection of businesses worth knowing</div>
          </div>
          <div class="stage-note"><span aria-hidden="true">↗</span> One card. Multiple businesses. A whole neighborhood of opportunity.</div>
        </div>
      </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>From your offer to their mailbox.</h2>
          <p>PostcardMojo turns a group of complementary local businesses into one well-organized, high-visibility mail piece.</p>
        </div>
        <ol class="steps">
          <li>
            <span class="step-number">01</span>
            <div class="step-icon" aria-hidden="true">◎</div>
            <h3>Choose your campaign</h3>
            <p>Start with the local area and timing that fit your business goals.</p>
          </li>
          <li>
            <span class="step-number">02</span>
            <div class="step-icon" aria-hidden="true">◇</div>
            <h3>Claim your category</h3>
            <p>Reserve a space for your type of business, subject to campaign availability.</p>
          </li>
          <li>
            <span class="step-number">03</span>
            <div class="step-icon" aria-hidden="true">✦</div>
            <h3>Shape the offer</h3>
            <p>Bring your logo, message, and promotion together in a clear, focused ad.</p>
          </li>
          <li>
            <span class="step-number">04</span>
            <div class="step-icon" aria-hidden="true">↗</div>
            <h3>Reach the mailbox</h3>
            <p>The finished postcard is printed and mailed as one coordinated campaign.</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="mailto:info@postcardmojo.com?subject=PostcardMojo%209x12%20campaign%20inquiry">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="mailto:info@postcardmojo.com">Contact</a>
      </nav>
      <small>&copy; <%= Year(Date()) %> PostcardMojo. All rights reserved.</small>
    </div>
  </footer>
</body>
</html>