Logo showcase

Embed

<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=Poppins:wght@400;600;700;800&display=swap" rel="stylesheet">

<style>
  :root{
    --primary: #003594;
    --soft: #d9e1ef;
    --white: #ffffff;

    --text: #0b1220;
    --muted: #4b5563;
    --border: rgba(0,0,0,.10);
    --shadow: 0 14px 38px rgba(0,0,0,.10);

    --radius: 18px;
    --radius-sm: 12px;
  }

  .nas-wrap{
    font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    padding: 18px;
    background: linear-gradient(180deg, var(--soft), #f6f8fc 55%, #ffffff);
  }

  .nas-card{
    max-width: 920px;
    margin: 0 auto;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  .nas-head{
    padding: 22px 22px 18px;
    background:
      radial-gradient(900px 220px at 0% 0%, rgba(0,53,148,.12), rgba(0,53,148,0)),
      radial-gradient(900px 220px at 100% 0%, rgba(0,53,148,.10), rgba(0,53,148,0)),
      linear-gradient(180deg, rgba(0,53,148,.06), rgba(0,53,148,0));
    border-bottom: 1px solid var(--border);
  }

  .nas-kicker{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(0,53,148,.10);
    color: var(--primary);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .2px;
  }

  .nas-title{
    margin: 10px 0 6px;
    font-size: 26px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: .2px;
  }

  .nas-sub{
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
    max-width: 70ch;
  }

  .nas-body{ padding: 18px 22px 22px; }

  .nas-form{ display:grid; gap: 14px; }

  .nas-row{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .nas-field label{
    display:block;
    font-size: 12px;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 6px;
  }

  .nas-field input,
  .nas-field select,
  .nas-field textarea{
    width:100%;
    box-sizing:border-box;
    padding: 12px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(0,53,148,.20);
    background: #fff;
    color: var(--text);
    font-size: 14px;
    outline:none;
    transition: box-shadow .15s ease, border-color .15s ease;
  }

  .nas-field input:focus,
  .nas-field select:focus,
  .nas-field textarea:focus{
    border-color: rgba(0,53,148,.60);
    box-shadow: 0 0 0 4px rgba(0,53,148,.12);
  }

  .nas-field textarea{ min-height: 120px; resize: vertical; }

  .nas-section{
    border: 1px solid rgba(0,53,148,.18);
    background: rgba(217,225,239,.45);
    border-radius: var(--radius);
    padding: 14px;
  }

  .nas-section h3{
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 900;
    color: var(--primary);
    letter-spacing: .2px;
  }

  .nas-note{ font-size: 12px; color: var(--muted); line-height: 1.45; }

  /* Toggle buttons */
  .nas-toggle{ display:flex; gap:10px; flex-wrap:wrap; }
  .nas-toggle-btn{
    border:1px solid rgba(0,53,148,.35);
    background:#fff;
    color: var(--primary);
    font-weight: 900;
    padding: 11px 14px;
    border-radius: 999px;
    cursor:pointer;
    transition: box-shadow .15s ease, transform .05s ease, background .15s ease;
  }
  .nas-toggle-btn:hover{ box-shadow: 0 10px 22px rgba(0,0,0,.08); }
  .nas-toggle-btn:active{ transform: translateY(1px); }
  .nas-toggle-btn.active{
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
  }

  .nas-actions{
    display:flex;
    gap: 10px;
    align-items:center;
    flex-wrap:wrap;
    margin-top: 4px;
  }

  .nas-btn{
    appearance:none;
    border:1px solid var(--primary);
    background: var(--primary);
    color:#fff;
    font-weight: 900;
    padding: 12px 16px;
    border-radius: 14px;
    cursor:pointer;
    transition: opacity .15s ease, transform .05s ease;
  }
  .nas-btn:hover{ opacity:.92; }
  .nas-btn:active{ transform: translateY(1px); }

  .nas-btn.secondary{
    background: #fff;
    color: var(--primary);
  }

  .nas-footer{
    padding: 14px 22px 18px;
    border-top: 1px solid var(--border);
    display:flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    align-items:center;
    background: #fff;
  }

  .nas-mini{ font-size: 12px; color: var(--muted); }

  /* Honeypot hidden */
  .nas-hp{ position:absolute; left:-9999px; top:-9999px; }

  @media (max-width: 820px){
    .nas-row{ grid-template-columns: 1fr; }
    .nas-wrap{ padding: 12px; }
    .nas-head, .nas-body, .nas-footer{ padding-left: 16px; padding-right: 16px; }
  }
</style>

<div class="nas-wrap">
  <div class="nas-card">
    <div class="nas-head">
      <div class="nas-kicker">Dealer Program</div>
      <h2 class="nas-title">Become a Dealer</h2>
      <p class="nas-sub">
        Apply to access dealer support, product supply, and contractor pricing. Fill out the form below and our team will review your application.
      </p>
    </div>

    <div class="nas-body">
      <form
        class="nas-form"
        action="https://formspree.io/f/mlgdyvbo"
        method="POST"
      >
        
        <div class="nas-hp" aria-hidden="true">
          <label>Website</label>
          <input type="text" name="_gotcha" autocomplete="off" tabindex="-1">
        </div>

        <input type="hidden" name="_subject" value="Dealer Application – North American Supply">

        <div class="nas-row">
          <div class="nas-field">
            <label>Contact Name *</label>
            <input type="text" name="contact_name" autocomplete="name" required>
          </div>

          <div class="nas-field">
            <label>Email *</label>
            <input type="email" name="email" autocomplete="email" required>
          </div>
        </div>

        <div class="nas-row">
          <div class="nas-field">
            <label>Phone *</label>
            <input type="tel" name="phone" autocomplete="tel" required>
          </div>

          <div class="nas-field">
            <label>Business Name *</label>
            <input type="text" name="business_name" required>
          </div>
        </div>

        <div class="nas-section">
          <h3>Business Type *</h3>
          <div class="nas-toggle" role="radiogroup" aria-label="Business type">
            <button type="button" class="nas-toggle-btn" data-value="Contractor">Contractor</button>
            <button type="button" class="nas-toggle-btn" data-value="Retailer">Retailer</button>
            <button type="button" class="nas-toggle-btn" data-value="Installer">Installer</button>
            <button type="button" class="nas-toggle-btn" data-value="Builder / Developer">Builder / Developer</button>
          </div>
          <input type="hidden" name="business_type" id="businessType" required>
          <div class="nas-note" style="margin-top:8px;">Select one.</div>
        </div>

        <div class="nas-row">
          <div class="nas-field">
            <label>Primary Trade *</label>
            <select name="primary_trade" required>
              <option value="">Select trade</option>
              <option value="Roofing">Roofing</option>
              <option value="Fencing">Fencing</option>
              <option value="Flooring">Flooring</option>
              <option value="Furniture">Furniture</option>
              <option value="Other">Other</option>
            </select>
          </div>

          <div class="nas-field">
            <label>Service Area *</label>
            <input type="text" name="service_area" placeholder="e.g., Vancouver, Surrey, Fraser Valley" required>
          </div>
        </div>

        <div class="nas-row">
          <div class="nas-field">
            <label>Website / Social (optional)</label>
            <input type="url" name="website_or_social" placeholder="https://">
          </div>

          <div class="nas-field">
            <label>Estimated Monthly Volume (optional)</label>
            <input type="text" name="monthly_volume" placeholder="e.g., $10k/month or 5 jobs/month">
          </div>
        </div>

        <div class="nas-row">
          <div class="nas-field">
            <label>Products Interested In (optional)</label>
            <select name="products_interested">
              <option value="">Select one</option>
              <option value="Roofing Materials">Roofing Materials</option>
              <option value="Fencing Materials">Fencing Materials</option>
              <option value="Flooring Materials">Flooring Materials</option>
              <option value="Furniture / Commercial Supply">Furniture / Commercial Supply</option>
              <option value="Multiple / Not Sure">Multiple / Not Sure</option>
            </select>
          </div>

          <div class="nas-field">
            <label>Preferred Account Type (optional)</label>
            <select name="account_type">
              <option value="">Select one</option>
              <option value="Cash Account">Cash Account</option>
              <option value="Credit Account (subject to approval)">Credit Account (subject to approval)</option>
            </select>
          </div>
        </div>

        <div class="nas-field">
          <label>Notes (optional)</label>
          <textarea name="notes" placeholder="Tell us about your business, typical projects, or what you’re looking to source."></textarea>
          <div class="nas-note" style="margin-top:6px;">
            We’ll reply by email within 1 business day after review.
          </div>
        </div>

        <div class="nas-actions">
          <button class="nas-btn" type="submit">Submit Dealer Application</button>
          <button class="nas-btn secondary" type="reset">Clear</button>
          <span class="nas-note">Questions? Email <strong>service@northamericansupply.ca</strong></span>
        </div>
      </form>
    </div>

    <div class="nas-footer">
      <div class="nas-mini">North American Supply • Dealer Program</div>
      <div class="nas-mini">Supply • Support • Installation Network</div>
    </div>
  </div>
</div>

<script>
  // Toggle buttons -> hidden required input
  const businessTypeInput = document.getElementById("businessType");
  const toggleBtns = document.querySelectorAll(".nas-toggle-btn");

  toggleBtns.forEach(btn => {
    btn.addEventListener("click", () => {
      toggleBtns.forEach(b => b.classList.remove("active"));
      btn.classList.add("active");
      businessTypeInput.value = btn.getAttribute("data-value");
    });
  });
</script>

Text + image

<h2 style="text-align:center">North American Supply Satisfaction Guarantee</h2>
<p style="text-align:center">At North American Supply, we stand behind the quality of the products we supply and the workmanship of every installation we support. From materials to final installation, your satisfaction is our priority.</p>
<p style="text-align:center">We are committed to providing dependable products, clear communication, and professional service at every stage of your project. If there is a concern with the materials supplied or the installation performed, we will work with you promptly and fairly to resolve it.</p>
<p style="text-align:center">Our job isn’t complete until the materials meet our standards and the finished result meets yours.</p>