Embed

<div style="max-width: 600px; margin: 40px auto; padding: 40px 30px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: #1A1A1A; background: #FFFFFF; border: 1px solid #E5E5E5; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.03);">
  
  <div style="text-align: center; margin-bottom: 35px; border-bottom: 1px solid #E5E5E5; padding-bottom: 20px;">
    <h2 style="margin: 0 0 10px 0; font-size: 28px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.5px;">
      Homeowner Roofing Quote
    </h2>
    <p style="margin: 0; font-size: 15px; color: #666; line-height: 1.5;">
      Fill out the details below to receive a customized material estimate for your residential roofing project.
    </p>
  </div>

  <form action="https://hooks.zapier.com/hooks/catch/25350516/4bu60jv/" method="POST" style="display: flex; flex-direction: column; gap: 20px;">
    
    <div style="display: flex; flex-direction: column; gap: 6px;">
      <label for="homeowner-name" style="font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #333;">
        Full Name <span style="color: #C0392B;">*</span>
      </label>
      <input type="text" id="homeowner-name" name="name" required placeholder="John Doe"
             style="width: 100%; padding: 12px 15px; font-size: 14px; border: 1px solid #CCCCCC; border-radius: 4px; box-sizing: border-box; outline: none; transition: border-color 0.2s;"
             onfocus="this.style.borderColor='#1A1A1A';" onblur="this.style.borderColor='#CCCCCC';">
    </div>

    <div style="display: flex; flex-direction: column; gap: 6px;">
      <label for="homeowner-address" style="font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #333;">
        Property Address <span style="color: #C0392B;">*</span>
      </label>
      <input type="text" id="homeowner-address" name="address" required placeholder="123 Main Street, City, State, ZIP"
             style="width: 100%; padding: 12px 15px; font-size: 14px; border: 1px solid #CCCCCC; border-radius: 4px; box-sizing: border-box; outline: none; transition: border-color 0.2s;"
             onfocus="this.style.borderColor='#1A1A1A';" onblur="this.style.borderColor='#CCCCCC';">
    </div>

    <div style="display: flex; gap: 20px; flex-wrap: wrap;">
      <div style="flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 6px;">
        <label for="homeowner-phone" style="font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #333;">
          Phone Number <span style="color: #C0392B;">*</span>
        </label>
        <input type="tel" id="homeowner-phone" name="phone" required placeholder="(555) 555-5555"
               style="width: 100%; padding: 12px 15px; font-size: 14px; border: 1px solid #CCCCCC; border-radius: 4px; box-sizing: border-box; outline: none; transition: border-color 0.2s;"
               onfocus="this.style.borderColor='#1A1A1A';" onblur="this.style.borderColor='#CCCCCC';">
      </div>
      
      <div style="flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 6px;">
        <label for="homeowner-email" style="font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #333;">
          Email Address <span style="color: #C0392B;">*</span>
        </label>
        <input type="email" id="homeowner-email" name="email" required placeholder="name@example.com"
               style="width: 100%; padding: 12px 15px; font-size: 14px; border: 1px solid #CCCCCC; border-radius: 4px; box-sizing: border-box; outline: none; transition: border-color 0.2s;"
               onfocus="this.style.borderColor='#1A1A1A';" onblur="this.style.borderColor='#CCCCCC';">
      </div>
    </div>

    <div style="display: flex; flex-direction: column; gap: 6px;">
      <label for="product-profile" style="font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #333;">
        Interested Profile <span style="color: #C0392B;">*</span>
      </label>
      <select id="product-profile" name="profile" required
              style="width: 100%; padding: 12px 15px; font-size: 14px; border: 1px solid #CCCCCC; border-radius: 4px; background-color: #FFFFFF; box-sizing: border-box; outline: none; transition: border-color 0.2s;"
              onfocus="this.style.borderColor='#1A1A1A';" onblur="this.style.borderColor='#CCCCCC';">
        <option value="" disabled selected>-- Select a Profile --</option>
        <option value="roman">Roman</option>
        <option value="woodshake">Woodshake</option>
        <option value="stormetal-shingle">Stormetal Shingle</option>
        <option value="weatherlok-shake">WeatherLok Shake</option>
        <option value="weatherlok-shingle">WeatherLok Shingle</option>
      </select>
    </div>

    <div style="display: flex; flex-direction: column; gap: 6px;">
      <label for="product-color" style="font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #333;">
        Preferred Color Finish <span style="color: #C0392B;">*</span>
      </label>
      <select id="product-color" name="color" required
              style="width: 100%; padding: 12px 15px; font-size: 14px; border: 1px solid #CCCCCC; border-radius: 4px; background-color: #FFFFFF; box-sizing: border-box; outline: none; transition: border-color 0.2s;"
              onfocus="this.style.borderColor='#1A1A1A';" onblur="this.style.borderColor='#CCCCCC';">
        <option value="" disabled selected>-- Select a Color Finish --</option>
      </select>
    </div>

    <div style="text-align: center; margin-top: 15px; border-top: 1px solid #E5E5E5; padding-top: 30px;">
      <button type="submit" 
              style="display: inline-block; width: 100%; background-color: #FF6B00; color: #FFFFFF; padding: 16px 0; font-weight: 700; font-size: 16px; border: none; border-radius: 4px; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: background 0.2s; box-shadow: 0 4px 10px rgba(255,107,0,0.15);"
              onmouseenter="this.style.backgroundColor='#E05E00';"
              onmouseleave="this.style.backgroundColor='#FF6B00';">
        Interested in Quote
      </button>
    </div>

  </form>
</div>

<script>
  const profileSelect = document.getElementById('product-profile');
  const colorSelect = document.getElementById('product-color');

  const colorOptions = {
    'roman': [
      { value: 'terra-cotta', text: 'Terra Cotta' },
      { value: 'chestnut-custom', text: 'Chestnut (Custom)' },
      { value: 'mission-gold', text: 'Mission Gold' },
      { value: 'red-black', text: 'Red and Black' },
      { value: 'black', text: 'Black' },
      { value: 'chestnut-cedar', text: 'Chestnut Cedar' }
    ],
    'woodshake': [
      { value: 'black', text: 'Black' },
      { value: 'timber-wood', text: 'Timber Wood' },
      { value: 'weathered-stone', text: 'Weathered Stone' },
      { value: 'chestnut-cedar', text: 'Chestnut Cedar' }
    ],
    'stormetal-shingle': [
      { value: 'black', text: 'Black' },
      { value: 'timber-wood', text: 'Timber Wood' },
      { value: 'slate', text: 'Slate' },
      { value: 'weathered-wood', text: 'Weathered Wood' }
    ],
    'weatherlok-shake': [
      { value: 'charcoal', text: 'Charcoal' },
      { value: 'weatherwood', text: 'Weatherwood' }
    ],
    'weatherlok-shingle': [
      { value: 'charcoal', text: 'Charcoal' },
      { value: 'weatherwood', text: 'Weatherwood' },
      { value: 'slate', text: 'Slate' }
    ]
  };

  profileSelect.addEventListener('change', function() {
    const selectedProfile = this.value;
    
    // Clear choice menu elements safely
    colorSelect.innerHTML = '<option value="" disabled selected>-- Select a Color Finish --</option>';
    
    if (colorOptions[selectedProfile]) {
      colorOptions[selectedProfile].forEach(option => {
        const opt = document.createElement('option');
        opt.value = option.value;
        opt.textContent = option.text;
        colorSelect.appendChild(opt);
      });
    }
  });
</script>

STEELFORD

Steelford is an online roofing materials company focused on homeowners who want durable, long-lasting roofing options without confusion.

Regenerate this homepage to clearly position Steelford as a place where homeowners can browse and request pricing for roofing materials — not roofing services or installations.

The homepage should feel modern, clean, and product-forward, similar in structure to leading online roofing material suppliers, but more visually refined and easier to understand.

Do NOT position Steelford as a local roofing contractor.
Do NOT mention cities, states, or service areas.
Do NOT talk about installation, craftsmanship, or roofing services.

Homepage structure:

Hero Section

Headline focused on buying roofing materials

Subheadline emphasizing simplicity, durability, and homeowner clarity

Primary call to action: “View Roofing Options”

Secondary call to action: “Get a Quote”

Product Categories Section
Include clear sections for:

Metal Roofing

Stone-Coated Steel Roofing

Roofing Accessories

Each category should have a short, homeowner-friendly description and an “Explore” button.

Why Steelford Section
Focus on:

Clear product choices

Homeowner-friendly explanations

Nationwide availability

Support when questions come up

Avoid technical jargon and sales hype.

How It Works Section
Use a simple three-step flow:

Browse roofing materials

Request pricing or ask a question

Finalize details and delivery

Support / Confidence Section
Reassure homeowners that help is available if they are unsure which roofing option is right.

Design Direction

Modern and premium

Clean layout with generous spacing

Simple language for homeowners

Product-first presentation

The final homepage should clearly communicate that Steelford sells roofing materials online and makes the process simple and approachable for homeowners.