add 3D Showroom Experience hero band below top hero (iframe to quadrille-showroom subdomain)

d992b9387fc7366187e0aecff41576a7c724db86 · 2026-06-30 15:33:37 -0700 · Steve Abrams

Files touched

M public/index.html

Diff

commit d992b9387fc7366187e0aecff41576a7c724db86
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue Jun 30 15:33:37 2026 -0700

    add 3D Showroom Experience hero band below top hero (iframe to quadrille-showroom subdomain)
---
 public/index.html | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/public/index.html b/public/index.html
index 59f591e..f5c12bc 100644
--- a/public/index.html
+++ b/public/index.html
@@ -33,6 +33,43 @@
   <a class="enter" href="#catalog">Explore the House</a>
 </header>
 
+<!-- 3D SHOWROOM EXPERIENCE (hero band, below top hero) -->
+<style>
+  .showroom-hero{position:relative;width:100%;height:78vh;min-height:520px;overflow:hidden;background:#14110d;display:flex;align-items:center;justify-content:center}
+  .showroom-hero .sh-poster{position:absolute;inset:0;background:radial-gradient(120% 120% at 50% 30%,#3a3026 0%,#14110d 70%);background-size:cover;background-position:center}
+  .showroom-hero .sh-overlay{position:relative;z-index:2;text-align:center;color:#f5efe4;max-width:760px;padding:0 24px}
+  .showroom-hero .sh-eyebrow{letter-spacing:.32em;text-transform:uppercase;font-size:12px;opacity:.8;margin-bottom:14px}
+  .showroom-hero .sh-h2{font-size:clamp(34px,6vw,68px);font-weight:600;margin:0 0 16px;line-height:1.02}
+  .showroom-hero .sh-sub{font-size:clamp(15px,2vw,19px);opacity:.85;margin:0 auto 28px;max-width:560px}
+  .showroom-hero .sh-enter{display:inline-block;border:1px solid rgba(245,239,228,.6);color:#f5efe4;background:rgba(0,0,0,.18);border-radius:999px;padding:14px 30px;font-size:15px;font-weight:600;cursor:pointer;backdrop-filter:blur(2px);transition:background .2s}
+  .showroom-hero .sh-enter:hover{background:rgba(245,239,228,.14)}
+  .showroom-hero iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
+</style>
+<section class="showroom-hero" id="showroom" aria-label="3D Showroom Experience">
+  <div class="sh-poster" id="shPoster"></div>
+  <div class="sh-overlay" id="shOverlay">
+    <div class="sh-eyebrow">Step Inside</div>
+    <h2 class="sh-h2">3D Showroom Experience</h2>
+    <p class="sh-sub">Walk the Quadrille House in an interactive 3D room — see every line dressed on the wall.</p>
+    <button class="sh-enter" id="shEnter" type="button">Enter the Showroom ▸</button>
+  </div>
+</section>
+<script>
+  (function(){
+    var SHOWROOM_URL = 'https://quadrille-showroom.designerwallcoverings.com/';
+    var sec=document.getElementById('showroom'), ov=document.getElementById('shOverlay'), btn=document.getElementById('shEnter');
+    if(!btn) return;
+    btn.addEventListener('click',function(){
+      var f=document.createElement('iframe');
+      f.src=SHOWROOM_URL; f.title='3D Showroom Experience';
+      f.allow='fullscreen; xr-spatial-tracking'; f.setAttribute('allowfullscreen','');
+      f.loading='eager';
+      sec.appendChild(f);
+      if(ov) ov.style.display='none';
+    });
+  })();
+</script>
+
 <!-- BRAND / LINE FILTER -->
 <section class="books" id="collections">
   <div class="eyebrow" id="booksEyebrow">The House</div>

← 732ad3b add deploy config: .deploy.conf (port 9944), ecosystem.confi · back to Quadrille House Site · settlement scrub (remove 42 banana-leaf/tropical/bird/butter 6a38e99 →