[object Object]

← back to Designerrepresentatives

polish home: editorial hero headline + anatomy 3-card section

c2597c9e5ac6f5ae97ce8309a42ab6f6e1d5565a · 2026-05-13 13:34:04 -0700 · Steve Abrams

- Hero kicker tightened (5-up dot-separated taxonomy)
- 2-line editorial headline: 'Behind every line designers spec, / there's an independent rep doing the work.'
- Subtitle reframed around supply chain (manufacturer -> showroom floor)
- New section 'What an independent rep actually does' with 3 numbered editorial cards (Carries the line / Owns the territory / Services the project)
- Widened .hero h1 max-width 18ch -> 46ch so the <br> produces clean 2-line wrap
- APCA Lc 94.6-101.1 (threshold 60) on gradient bg — hero readability gate passes

Files touched

Diff

commit c2597c9e5ac6f5ae97ce8309a42ab6f6e1d5565a
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Wed May 13 13:34:04 2026 -0700

    polish home: editorial hero headline + anatomy 3-card section
    
    - Hero kicker tightened (5-up dot-separated taxonomy)
    - 2-line editorial headline: 'Behind every line designers spec, / there's an independent rep doing the work.'
    - Subtitle reframed around supply chain (manufacturer -> showroom floor)
    - New section 'What an independent rep actually does' with 3 numbered editorial cards (Carries the line / Owns the territory / Services the project)
    - Widened .hero h1 max-width 18ch -> 46ch so the <br> produces clean 2-line wrap
    - APCA Lc 94.6-101.1 (threshold 60) on gradient bg — hero readability gate passes
---
 .gitignore            |  1 +
 public/css/site.css   | 39 ++++++++++++++++++++++++++++++++++++++-
 views/public/home.ejs | 36 +++++++++++++++++++++++++++++++-----
 3 files changed, 70 insertions(+), 6 deletions(-)

diff --git a/.gitignore b/.gitignore
index 4a0b3ea..b518673 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,3 +7,4 @@ tmp/
 dist/
 build/
 .next/
+*.bak.*
diff --git a/public/css/site.css b/public/css/site.css
index 50a6c48..46a795b 100644
--- a/public/css/site.css
+++ b/public/css/site.css
@@ -68,7 +68,7 @@ html[data-theme='dark']  .theme-toggle-sun  { display: none; }
   text-transform: uppercase; letter-spacing: .14em;
   font-size: .8rem; color: var(--text-muted); margin: 0 0 .75rem;
 }
-.hero h1 { max-width: 18ch; }
+.hero h1 { max-width: 46ch; line-height: 1.15; }
 .hero .lede { max-width: 60ch; font-size: 1.1rem; color: var(--text-muted); }
 .hero-cta { margin-top: 1.5rem; display: flex; gap: .75rem; flex-wrap: wrap; }
 
@@ -157,6 +157,43 @@ html[data-theme='dark']  .theme-toggle-sun  { display: none; }
   padding: .25rem .65rem; border-radius: 999px; font-size: .85rem;
 }
 
+/* Role grid (anatomy section) */
+.role-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.25rem;
+}
+@media (max-width: 800px) { .role-grid { grid-template-columns: 1fr; } }
+.role-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.5rem 1.5rem 1.25rem;
+  box-shadow: var(--shadow);
+  position: relative;
+  display: flex; flex-direction: column; gap: .4rem;
+}
+.role-card .role-num {
+  display: block;
+  font-family: var(--font-serif);
+  font-size: 1.55rem;
+  color: var(--accent);
+  letter-spacing: 0.04em;
+  line-height: 1;
+}
+.role-card h3 {
+  font-family: var(--font-serif);
+  font-size: 1.22rem;
+  margin: 0;
+}
+.role-card p {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: .95rem;
+  line-height: 1.6;
+}
+.section-head p.small { margin: 0; }
+
 /* About / claim prose */
 .prose { padding-left: 1.25rem; }
 .prose li { margin: .35rem 0; }
diff --git a/views/public/home.ejs b/views/public/home.ejs
index 0cd4999..06bc54d 100644
--- a/views/public/home.ejs
+++ b/views/public/home.ejs
@@ -4,12 +4,12 @@
 <main class="home">
   <section class="hero">
     <div class="wrap">
-      <p class="kicker">Independent sales reps · designer trade · showrooms · contract</p>
-      <h1>Find the rep behind the line.</h1>
+      <p class="kicker">Independent agencies · Trade-only · Textile · Wallcovering · Contract</p>
+      <h1>Behind every line designers spec,<br>there's an independent rep doing the work.</h1>
       <p class="lede">
-        Designer Representatives is the canonical directory of independent
-        sales agencies that bring textile, wallcovering, and contract lines
-        to interior designers, showrooms, hospitality groups, and specifiers.
+        A directory of the sales agencies that bring textile, wallcovering, and
+        contract collections from manufacturer to showroom floor — listed by
+        territory, by vertical, and by the lines they actually carry.
       </p>
       <div class="hero-cta">
         <a class="btn primary" href="/reps">Browse the directory</a>
@@ -51,6 +51,32 @@
     </div>
   </section>
 
+  <section class="section">
+    <div class="wrap">
+      <div class="section-head">
+        <h2>What an independent rep actually does</h2>
+        <p class="muted small">A short explainer for designers new to the trade side.</p>
+      </div>
+      <div class="role-grid">
+        <article class="role-card">
+          <span class="role-num">01</span>
+          <h3>Carries the line</h3>
+          <p>An independent rep agency contracts directly with the manufacturer — Schumacher, Holland &amp; Sherry, Maharam, Arc-Com — to show, sample, and sell their collection inside a defined territory. The agency invests in the sample library, the appointments, and the trade relationships the line depends on.</p>
+        </article>
+        <article class="role-card">
+          <span class="role-num">02</span>
+          <h3>Owns the territory</h3>
+          <p>Lines are carved up by region — Pacific Northwest, Mid-Atlantic, Texas/Oklahoma, So-Cal. The rep listed for your area is the rep that line trusts for your zip code. There is usually exactly one independent agency per line, per territory, by design.</p>
+        </article>
+        <article class="role-card">
+          <span class="role-num">03</span>
+          <h3>Services the project</h3>
+          <p>From the moment a designer specs a fabric or wallcovering, the rep books the showroom presentation, expedites memo samples, walks claims through, and stays on lead-times. The brand answers to the rep; the rep answers to you.</p>
+        </article>
+      </div>
+    </div>
+  </section>
+
   <section class="section alt">
     <div class="wrap two-col">
       <div>

← 5abc682 initial scaffold + GA gtag (designer representatives directo  ·  back to Designerrepresentatives  ·  add noreferrer to target=_blank external links 4cea160 →