home hero: slides click through to their design PDP (role=link, keyboard Enter/Space, focus ring)

b449bb8d35e926290db51d184a1f91b5327e22be · 2026-06-09 13:11:40 -0700 · Steve Abrams

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Files touched

M public/css/site.css
M server.js

Diff

commit b449bb8d35e926290db51d184a1f91b5327e22be
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue Jun 9 13:11:40 2026 -0700

    home hero: slides click through to their design PDP (role=link, keyboard Enter/Space, focus ring)
    
    Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 public/css/site.css |  3 +++
 server.js           | 11 ++++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/public/css/site.css b/public/css/site.css
index ee0aa3a..4b0352c 100644
--- a/public/css/site.css
+++ b/public/css/site.css
@@ -225,6 +225,9 @@ main { padding-top: 81px; } /* matches .site-header actual height (44px brand +
   transition: opacity 1.2s ease;
 }
 .hero-slide.active { opacity: 1; }
+/* Slides are click-through links to their design's PDP */
+.hero-slide { cursor: pointer; }
+.hero-slide:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
 /* Room slides — source PNG is 2048² (Lanczos-upscaled from upstream 1024²;
    scripts/upscale-room-heroes.py). On a wide hero strip 'contain' leaves big
    frame bars on either side and a tiny center image. Steve 2026-05-28 round
diff --git a/server.js b/server.js
index 473b581..55b71f1 100644
--- a/server.js
+++ b/server.js
@@ -7071,7 +7071,7 @@ app.get('/', (req, res) => {
     (function() {
       const _isRoom = Array.isArray(d.room_mockups) && d.room_mockups.length > 0;
       const _frame = (d.dominant_hex || '#1a1612').replace(/[^#0-9a-f]/gi, '');
-      return `<div class="hero-slide${i===0?' active':''}${_isRoom?' is-room':''}" data-idx="${i}" style="background-image:url('${heroImageUrl(d)}');--card-bg:url('${heroImageUrl(d)}');--hero-frame:${_frame}" aria-label="${d.title}"></div>`;
+      return `<div class="hero-slide${i===0?' active':''}${_isRoom?' is-room':''}" data-idx="${i}" data-design-id="${d.id}" role="link" tabindex="0" style="background-image:url('${heroImageUrl(d)}');--card-bg:url('${heroImageUrl(d)}');--hero-frame:${_frame}" aria-label="${d.title} — view this design"></div>`;
     })()
   ).join('\n');
 
@@ -7280,6 +7280,15 @@ ${FOOTER}
   dots.forEach(function(d) {
     d.addEventListener('click', function() { goTo(+this.dataset.slide); clearInterval(interval); interval = setInterval(function(){goTo(cur+1);}, 4500); });
   });
+  // Hero image click-through → that design's product page
+  slides.forEach(function(s) {
+    var id = s.dataset.designId;
+    if (!id) return;
+    s.addEventListener('click', function() { window.location.href = '/design/' + id; });
+    s.addEventListener('keydown', function(e) {
+      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); window.location.href = '/design/' + id; }
+    });
+  });
   interval = setInterval(function(){ goTo(cur+1); }, 4500);
   // Pause when tab hidden
   document.addEventListener('visibilitychange', function() {

← cba4529 generator_tick: add 15-min spawnSync timeout (was unbounded · back to Wallco Ai · seamless-bg-swap: fix RETURNING-id parse (psql -At emits com 7c1a338 →