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@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:16px;
    background:#ffffff;
  }

  .nas-card{
    max-width:720px;
    margin:0 auto;
    background:#ffffff;
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:18px;
  }

  .nas-title{margin:0 0 6px;font-size:22px;font-weight:800;color:var(--text);}
  .nas-sub{margin:0 0 14px;font-size:13px;color:var(--muted);line-height:1.4;}

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

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

  .nas-field input,
  .nas-field select,
  .nas-field textarea{
    width:100%;
    padding:11px 12px;
    border-radius:var(--radius-sm);
    border:1px solid rgba(0,53,148,.25);
    font-size:14px;
    outline:none;
    box-sizing:border-box;
    background:#fff;
    font-family:inherit;
  }

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

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

  .nas-btn{
    border:1px solid var(--primary);
    background:var(--primary);
    color:#ffffff;
    font-weight:900;
    padding:12px 16px;
    border-radius:14px;
    cursor:pointer;
  }
  .nas-btn:disabled{opacity:.7; cursor:not-allowed;}

  .nas-note{font-size:12px;color:var(--muted);line-height:1.4;margin:0;}
  .nas-hp{position:absolute;left:-9999px;top:-9999px;}

  .nas-error{
    display:none;
    border:1px solid rgba(176,0,32,.25);
    background:rgba(176,0,32,.06);
    color:#b00020;
    border-radius:14px;
    padding:10px 12px;
    font-weight:800;
    font-size:13px;
    line-height:1.35;
    margin-bottom:6px;
  }

  .nas-thanks{display:none;}
  .nas-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(0,53,148,.10);
    color:var(--primary);
    font-weight:900;
    font-size:12px;
    margin-bottom:10px;
  }
  .nas-thanks-title{margin:0 0 6px;font-size:24px;font-weight:900;color:var(--text);line-height:1.15;}
  .nas-thanks-sub{margin:0 0 14px;font-size:13px;color:var(--muted);line-height:1.45;}

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

  .nas-step{display:flex;gap:10px;align-items:flex-start;}
  .nas-num{
    width:28px;height:28px;border-radius:999px;
    display:flex;align-items:center;justify-content:center;
    background:var(--primary);color:#fff;font-weight:900;font-size:13px;
    flex:0 0 28px;margin-top:1px;
  }
  .nas-step strong{display:block;color:var(--text);font-weight:900;font-size:13px;margin-bottom:2px;}
  .nas-step span{display:block;color:var(--muted);font-size:12px;line-height:1.4;}

  .nas-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px;}
  .nas-linkbtn{
    text-decoration:none;
    display:inline-flex;align-items:center;justify-content:center;
    border:1px solid var(--primary);
    background:var(--primary);
    color:#fff;
    font-weight:900;
    padding:12px 16px;
    border-radius:14px;
  }

  .nas-section-title{
    margin:6px 0 -4px;
    font-size:12px;
    font-weight:900;
    color:var(--text);
  }

  .nas-hint{
    font-size:12px;
    color:var(--muted);
    margin:-6px 0 0;
    line-height:1.35;
  }

  @media(max-width:720px){
    .nas-row{grid-template-columns:1fr;}
    .nas-thanks-title{font-size:22px;}
  }
</style>

<div class="nas-wrap">
  <div class="nas-card">

    <div id="nasFormSection">
      <h3 class="nas-title">Warranty Claim Form</h3>
      <p class="nas-sub">
        Submit a warranty claim for any North American Supply product. Please include your invoice number and as much detail as possible so we can review your claim quickly.
      </p>

      <div id="nasError" class="nas-error"></div>

      <form id="nasQuoteForm" class="nas-form" action="https://formspree.io/f/mlgdyvbo" method="POST">
        <input type="hidden" name="_redirect" value="https://northamericansupply.durablesites.com/thank-you">
        <input type="hidden" name="_subject" value="Warranty Claim – North American Supply">
        <input type="hidden" name="request_type" value="Warranty Claim">

        <div class="nas-hp" aria-hidden="true">
          <label>Website</label>
          <input type="text" name="_gotcha" tabindex="-1" autocomplete="off">
        </div>

        <div class="nas-row">
          <div class="nas-field">
            <label>Company Name (optional)</label>
            <input type="text" name="company_name">
          </div>
          <div class="nas-field">
            <label>Contact Name *</label>
            <input type="text" name="contact_name" required>
          </div>
        </div>

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

        <div class="nas-row">
          <div class="nas-field">
            <label>Invoice Number *</label>
            <input type="text" name="invoice_number" placeholder="e.g. NAS-1048" required>
          </div>
          <div class="nas-field">
            <label>Product Type *</label>
            <select name="product_type" required>
              <option value="">Select product type</option>
              <option value="Fencing">Fencing</option>
              <option value="Temporary Fencing">Temporary Fencing</option>
              <option value="Gates">Gates</option>
              <option value="Railings">Railings</option>
              <option value="Flooring">Flooring</option>
              <option value="Roofing">Roofing</option>
              <option value="Other">Other</option>
            </select>
          </div>
        </div>

        <div class="nas-row">
          <div class="nas-field">
            <label>Date Purchased (optional)</label>
            <input type="date" name="date_purchased">
          </div>
          <div class="nas-field">
            <label>Claim Type *</label>
            <select name="claim_type" required>
              <option value="">Select claim type</option>
              <option value="Manufacturing Defect">Manufacturing Defect</option>
              <option value="Damage on Arrival">Damage on Arrival</option>
              <option value="Missing Parts">Missing Parts</option>
              <option value="Finish / Coating Issue">Finish / Coating Issue</option>
              <option value="Structural Issue">Structural Issue</option>
              <option value="Other">Other</option>
            </select>
          </div>
        </div>

        <div class="nas-field">
          <label>Describe the Issue *</label>
          <textarea name="claim_details" placeholder="Describe the problem, where it occurred, when it was noticed, and anything else that may help our team review the claim." required></textarea>
        </div>

        <div class="nas-section-title">Product / Site Information</div>
        <p class="nas-hint">Provide the location tied to the product or installation so our team can review the claim properly.</p>

        <div class="nas-field">
          <label>Street Address *</label>
          <input type="text" name="street_address" placeholder="1234 Industrial Way" autocomplete="street-address" required>
        </div>

        <div class="nas-row">
          <div class="nas-field">
            <label>City *</label>
            <input type="text" name="city" required>
          </div>
          <div class="nas-field">
            <label>Province *</label>
            <input type="text" name="province" value="BC" required>
          </div>
        </div>

        <div class="nas-row">
          <div class="nas-field">
            <label>Postal Code *</label>
            <input type="text" name="postal_code" required>
          </div>
          <div class="nas-field">
            <label>Site Contact (optional)</label>
            <input type="text" name="site_contact" placeholder="Name / phone for coordination">
          </div>
        </div>

        <button id="nasSubmitBtn" class="nas-btn" type="submit">Submit Warranty Claim</button>

        <p class="nas-note">Questions? <strong>service@northamericansupply.ca</strong></p>
      </form>
    </div>

    <div id="nasThanksSection" class="nas-thanks">
      <div class="nas-badge">✅ Claim Received</div>

      <h3 class="nas-thanks-title">Your warranty claim has been submitted.</h3>
      <p class="nas-thanks-sub">
        Our team will review the details, confirm the invoice information, and follow up with next steps as soon as possible.
      </p>

      <div class="nas-steps">
        <div class="nas-step">
          <div class="nas-num">1</div>
          <div>
            <strong>We review your claim</strong>
            <span>We check your invoice number, product details, and issue description.</span>
          </div>
        </div>

        <div class="nas-step">
          <div class="nas-num">2</div>
          <div>
            <strong>We assess the issue</strong>
            <span>Our team determines whether additional photos, information, or a site review is needed.</span>
          </div>
        </div>

        <div class="nas-step">
          <div class="nas-num">3</div>
          <div>
            <strong>We follow up with next steps</strong>
            <span>We’ll contact you regarding claim status, repair, replacement, or any required coordination.</span>
          </div>
        </div>
      </div>

      <div class="nas-actions">
        <a class="nas-linkbtn" href="/">Back to Home</a>
      </div>
    </div>

  </div>
</div>

<script>
  (function () {
    const form = document.getElementById("nasQuoteForm");
    const formSection = document.getElementById("nasFormSection");
    const thanksSection = document.getElementById("nasThanksSection");
    const errorBox = document.getElementById("nasError");
    const submitBtn = document.getElementById("nasSubmitBtn");

    function showError(msg){
      errorBox.textContent = msg;
      errorBox.style.display = "block";
    }

    form.addEventListener("submit", async function (e) {
      e.preventDefault();
      errorBox.style.display = "none";
      submitBtn.disabled = true;

      try {
        const formData = new FormData(form);

        const res = await fetch(form.action, {
          method: "POST",
          body: formData,
          headers: { "Accept": "application/json" }
        });

        if (res.ok) {
          formSection.style.display = "none";
          thanksSection.style.display = "block";
          thanksSection.scrollIntoView({ behavior: "smooth", block: "start" });
          form.reset();
        } else {
          let data = {};
          try { data = await res.json(); } catch(_) {}
          showError(data?.errors?.[0]?.message || "Something went wrong. Please try again or email service@northamericansupply.ca.");
          submitBtn.disabled = false;
        }
      } catch (err) {
        showError("Network error. Please try again or email service@northamericansupply.ca.");
        submitBtn.disabled = false;
      }
    });
  })();
</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>