From 61d26a7370d9c21817ddd5387dd08c1c386b1eba Mon Sep 17 00:00:00 2001
From: Paul Bakaus <paul.bakaus@gmail.com>
Date: Tue, 6 Jan 2026 18:04:18 -0800
Subject: [PATCH] Update hero content and add pattern contribution CTA
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Simplify hero overlay (remove badge, update tagline)
- Add "What's Included" header to equation section
- Add contribution CTA to Antidote section with GitHub link

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 public/css/main.css | 55 ++++++++++++++++++++++++++++++++++++++++++++-
 public/index.html   | 16 +++++++++++--
 2 files changed, 68 insertions(+), 3 deletions(-)

diff --git a/public/css/main.css b/public/css/main.css
index 92f92a9a8..de143cc01 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -304,11 +304,25 @@ code {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--spacing-lg);
+  gap: var(--spacing-md);
   text-align: center;
   pointer-events: none;
 }
 
+.hero-badge {
+  display: inline-block;
+  padding: 0.35em 1em;
+  font-family: var(--font-body);
+  font-size: 0.75rem;
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--color-ink);
+  background: rgba(255, 255, 255, 0.85);
+  border: 1px solid var(--color-ink);
+  backdrop-filter: blur(4px);
+}
+
 .hero-title-overlay {
   font-family: var(--font-display);
   font-size: clamp(3.5rem, 12vw, 8rem);
@@ -365,6 +379,15 @@ code {
   background: var(--color-paper);
 }
 
+.hero-section-title {
+  font-family: var(--font-display);
+  font-size: clamp(1.5rem, 4vw, 2rem);
+  font-weight: 400;
+  font-style: italic;
+  color: var(--color-ink);
+  margin: 0 0 var(--spacing-lg) 0;
+}
+
 .hero-content {
   display: flex;
   flex-direction: column;
@@ -1785,6 +1808,36 @@ code {
   font-weight: 600;
 }
 
+/* Contribution CTA */
+.contribute-cta {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-md);
+  margin-top: var(--spacing-xl);
+  padding-top: var(--spacing-xl);
+  border-top: 1px solid var(--color-mist);
+  text-align: center;
+}
+
+.contribute-text {
+  font-family: var(--font-display);
+  font-size: 1.125rem;
+  font-style: italic;
+  color: var(--color-charcoal);
+  margin: 0;
+}
+
+.btn-small {
+  padding: var(--spacing-xs) var(--spacing-md);
+  font-size: 0.8rem;
+  gap: var(--spacing-xs);
+}
+
+.btn-small svg {
+  flex-shrink: 0;
+}
+
 /* ============================================
    SOLUTION SECTION ENHANCEMENTS
    ============================================ */
diff --git a/public/index.html b/public/index.html
index 9e46f7cdb..a76707536 100644
--- a/public/index.html
+++ b/public/index.html
@@ -23,7 +23,7 @@
     <div class="hero-shader" id="hero-shader">
       <div class="hero-overlay-content">
         <h1 class="hero-title-overlay">Impeccable</h1>
-        <p class="hero-tagline-overlay">The vocabulary you didn't know you needed.</p>
+        <p class="hero-tagline-overlay">Design fluency for Claude Code, Codex, and more.</p>
         <a href="#downloads" class="hero-cta-overlay">Get Started</a>
       </div>
     </div>
@@ -31,8 +31,9 @@
     <!-- Content below the shader -->
     <div class="hero-container">
       <div class="hero-content">
+        <h2 class="hero-section-title" data-reveal>What's Included</h2>
 
-        <!-- Middle: Visual Equation -->
+        <!-- Visual Equation -->
         <div class="hero-equation" data-reveal>
           <div class="equation-block">
             <span class="equation-label">Enhanced Skill</span>
@@ -167,6 +168,17 @@
         <div class="patterns-categories" id="patterns-categories">
           <!-- Rendered by JS -->
         </div>
+
+        <!-- Contribution CTA -->
+        <div class="contribute-cta" data-reveal>
+          <p class="contribute-text">Know a pattern we're missing? Help us grow the collection.</p>
+          <a href="https://github.com/pbakaus/impeccable/issues/new?labels=pattern&title=Pattern%20suggestion%3A%20" class="btn btn-secondary btn-small">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M12 5v14M5 12h14"/>
+            </svg>
+            <span>Suggest a Pattern</span>
+          </a>
+        </div>
       </div>
     </section>