index.html

@@ -1104,10 +1104,39 @@
           <p>Whether you protect one home or manage a thousand roofs. We run your address live:
           mesh, measurements, and a signature-ready proposal before the call ends.</p>
           <form class="cta-form" id="ctaForm">
-            <input id="ctaAddr" type="text" autocomplete="off" spellcheck="false"
+            <select id="ctaAddr" aria-label="Pick a sample address to estimate"
-              placeholder="Your address, e.g. 950 Ridgeline Rd, McKinney TX" aria-label="Address to estimate">
+              data-area="3400" data-squares="37" data-pitch="6:12" data-material="Architectural shingle" data-low="14200" data-high="16800">
-            <button class="btn solid" type="submit">Estimate it now</button>
+              <option value="" data-placeholder="1">Pick a sample address&hellip;</option>
+              <option value="950 Ridgeline Rd, McKinney TX"
+                data-area="3400" data-squares="37" data-pitch="6:12" data-material="Architectural shingle" data-low="14200" data-high="16800" selected>950 Ridgeline Rd, McKinney TX</option>
+              <option value="1420 Maple Grove Dr, Frisco TX"
+                data-area="2650" data-squares="29" data-pitch="5:12" data-material="Architectural shingle" data-low="10900" data-high="13100">1420 Maple Grove Dr, Frisco TX</option>
+              <option value="78 Harbor View Ln, Plano TX"
+                data-area="4820" data-squares="53" data-pitch="8:12" data-material="Standing-seam metal" data-low="31400" data-high="37200">78 Harbor View Ln, Plano TX</option>
+              <option value="305 Prairie Wind Ct, Allen TX"
+                data-area="1980" data-squares="22" data-pitch="4:12" data-material="3-tab shingle" data-low="7600" data-high="9200">305 Prairie Wind Ct, Allen TX</option>
+              <option value="6110 Cedar Bluff Way, Denton TX"
+                data-area="6240" data-squares="68" data-pitch="7:12" data-material="Architectural shingle" data-low="26800" data-high="31500">6110 Cedar Bluff Way, Denton TX</option>
+            </select>
+            <button class="btn solid" type="button" id="ctaEstimateBtn">Estimate it now</button>
           </form>
+          <div class="cta-estimate" id="ctaEstimate" hidden aria-live="polite">
+            <div class="est-head">
+              <span class="stamp-tag ok">&#10003; LIVE ESTIMATE</span>
+              <span class="est-addr" id="estAddr"></span>
+            </div>
+            <div class="est-grid">
+              <div class="est-cell"><span class="est-k">Roof area</span><span class="est-v" id="estArea"></span></div>
+              <div class="est-cell"><span class="est-k">Squares</span><span class="est-v" id="estSquares"></span></div>
+              <div class="est-cell"><span class="est-k">Predominant pitch</span><span class="est-v" id="estPitch"></span></div>
+              <div class="est-cell"><span class="est-k">Material</span><span class="est-v" id="estMaterial"></span></div>
+            </div>
+            <div class="est-total">
+              <span class="est-k">Signature-ready range</span>
+              <span class="est-price" id="estPrice"></span>
+            </div>
+            <p class="cta-fine tag">Sample figures from aerial mesh &middot; final numbers confirm on your live address</p>
+          </div>
           <div class="cta-alt">
             <a class="btn" href="https://book.lynkeduppro.com/" target="_blank" rel="noopener">Book the 15-min demo</a>
             <a class="btn" href="tel:8662596533">Call (866) 259-6533</a>

src/main.js

@@ -6,6 +6,37 @@ import "./styles.css";
 
 console.log("%cCreated by Sarthak", "font-size:14px;font-weight:700;color:#F2A83B;");
 
+/* ---------- CTA sample-address estimate (standalone so it always runs) ---------- */
+(function(){
+  function init(){
+    var form = document.getElementById("ctaForm");
+    var sel = document.getElementById("ctaAddr");
+    var btn = document.getElementById("ctaEstimateBtn");
+    var panel = document.getElementById("ctaEstimate");
+    if(!sel || !panel) return;
+    var money = function(n){ return "$" + Number(n).toLocaleString("en-US"); };
+    var set = function(id, val){ var el = document.getElementById(id); if(el) el.textContent = val; };
+    function render(scroll){
+      var opt = sel.options[sel.selectedIndex];
+      if(!opt || opt.dataset.placeholder){ panel.hidden = true; return; }
+      set("estAddr", opt.value);
+      set("estArea", Number(opt.dataset.area).toLocaleString("en-US") + " sq ft");
+      set("estSquares", opt.dataset.squares + " sq");
+      set("estPitch", opt.dataset.pitch);
+      set("estMaterial", opt.dataset.material);
+      set("estPrice", money(opt.dataset.low) + " – " + money(opt.dataset.high));
+      panel.hidden = false;
+      if(scroll) panel.scrollIntoView({behavior:"smooth", block:"nearest"});
+    }
+    function go(e){ if(e) e.preventDefault(); render(true); }
+    if(form) form.addEventListener("submit", go);
+    if(btn) btn.addEventListener("click", go);
+    sel.addEventListener("change", function(){ if(!panel.hidden) render(false); });
+  }
+  if(document.readyState === "loading") document.addEventListener("DOMContentLoaded", init);
+  else init();
+})();
+
 (function(){
   var reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;
   var finePointer = matchMedia("(pointer: fine)").matches;

src/styles.css

@@ -1475,14 +1475,42 @@
   .cta h2{margin-top:16px}
   .cta > p{color:var(--dim);max-width:46ch;margin:14px auto 24px;font-size:14.5px}
   .cta-form{display:flex;gap:8px;max-width:520px;margin:0 auto 14px}
-  .cta-form input{
+  .cta-form input,
+  .cta-form select{
     flex:1;min-width:0;background:rgba(11,13,16,.75);
     border:1px solid var(--border-strong);border-radius:6px;
     color:var(--text);font-family:var(--mono);font-size:12.5px;
     padding:12px 14px;letter-spacing:.02em;
   }
+  .cta-form select{
+    appearance:none;-webkit-appearance:none;cursor:pointer;
+    padding-right:36px;
+    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2345afc9' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
+    background-repeat:no-repeat;background-position:right 14px center;
+  }
+  .cta-form select option{background:#0b0d10;color:var(--text)}
   .cta-form input::placeholder{color:var(--faint)}
-  .cta-form input:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px rgba(69,175,201,.13)}
+  .cta-form input:focus,
+  .cta-form select:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px rgba(69,175,201,.13)}
+
+  .cta-estimate{
+    max-width:520px;margin:0 auto 16px;text-align:left;
+    background:rgba(11,13,16,.55);border:1px solid var(--border-strong);
+    border-radius:8px;padding:16px 18px;
+    animation:estIn .32s ease both;
+  }
+  @keyframes estIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
+  .est-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
+  .est-addr{font-family:var(--mono);font-size:12px;color:var(--dim);letter-spacing:.02em}
+  .est-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin-bottom:14px}
+  .est-cell{display:flex;flex-direction:column;gap:3px}
+  .est-k{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint)}
+  .est-v{font-size:14px;color:var(--text);font-weight:600}
+  .est-total{
+    display:flex;align-items:center;justify-content:space-between;gap:12px;
+    padding-top:14px;border-top:1px solid var(--border);
+  }
+  .est-price{font-size:19px;font-weight:700;color:var(--sky);letter-spacing:.01em}
   .cta-alt{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
   .cta-fine{font-size:9.5px}