From b80aa591ae2b9b4a536c81f926126c88576f936a Mon Sep 17 00:00:00 2001
From: "Pawla Abdul (CMO)" <pawla-abdul@paperclip.ing>
Date: Sun, 29 Mar 2026 07:04:07 +0000
Subject: [PATCH] feat: add 'How It Works' demo section to homepage

Adds responsive grid of three core groomer workflows:
- Book an Appointment (breed-aware scheduling)
- Client Portal & Pet History (records management)
- Manage Waitlist & No-Shows (automation)

Includes placeholder for demo assets (screenshots/video) pending CTO
assets delivery (GRO-243). Section drives visitors to live demo or
local deployment options.

Responsive design matches existing site patterns and styling.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 index.html | 44 ++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 40 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index e7f71a1..994a344 100644
--- a/index.html
+++ b/index.html
@@ -71,6 +71,14 @@
     .blog-date { color: #999; font-size: 0.9rem; margin-bottom: 15px; }
     .blog-card p { color: #666; font-size: 0.95rem; line-height: 1.7; }
     .blog-card a { color: #4CAF50; font-weight: 600; text-decoration: none; }
+    .how-it-works-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; margin-bottom: 50px; }
+    .workflow-card { background: #f9f9f9; padding: 35px; border-radius: 10px; text-align: center; transition: transform 0.3s; }
+    .workflow-card:hover { transform: translateY(-5px); }
+    .workflow-icon { font-size: 2.5rem; margin-bottom: 15px; }
+    .workflow-card h3 { color: #1a1a2e; margin-bottom: 12px; font-size: 1.25rem; }
+    .workflow-card p { color: #666; line-height: 1.7; font-size: 0.95rem; }
+    .asset-placeholder { background: linear-gradient(135deg, #f0f0f0 0%, #e8e8e8 100%); border: 2px dashed #ccc; border-radius: 8px; padding: 60px 20px; text-align: center; color: #999; margin: 40px 0; }
+    .asset-placeholder p { margin: 0; font-size: 0.95rem; }
     footer { background: #1a1a2e; color: #fff; padding: 50px 0; text-align: center; border-top: 1px solid #333; }
     footer p { color: #c0c0c0; }
     footer strong { color: #fff; }
@@ -142,10 +150,38 @@
 
   <section class="demo-section">
     <div class="container">
-      <h2>See It In Action</h2>
-      <p>Try the live demo environment. Log in with demo credentials to explore the full groomer and customer experience.</p>
-      <a href="https://groombook.farh.net" class="btn-demo" style="display: inline-block;">Launch Demo →</a>
-      <p style="margin-top: 25px; color: #999; font-size: 0.95rem;">Or run it locally: <code style="background: #f0f0f0; padding: 4px 8px; border-radius: 4px;">docker compose up</code></p>
+      <h2>How It Works</h2>
+      <p class="section-subtitle">Three core workflows that solve grooming shop chaos.</p>
+
+      <div class="how-it-works-grid">
+        <div class="workflow-card">
+          <div class="workflow-icon">📅</div>
+          <h3>Book an Appointment</h3>
+          <p>Breed-aware scheduling that handles duration and complexity. Never double-book again. Clients can book themselves through the portal, and you get instant SMS/email notifications.</p>
+        </div>
+
+        <div class="workflow-card">
+          <div class="workflow-icon">👥</div>
+          <h3>Client Portal & Pet History</h3>
+          <p>Searchable client records. Track pet health notes, vaccination dates, allergies, and coat preferences. One place for all the information you used to keep on scraps of paper.</p>
+        </div>
+
+        <div class="workflow-card">
+          <div class="workflow-icon">⏳</div>
+          <h3>Manage Waitlist & No-Shows</h3>
+          <p>Automated waitlist system fills cancellations instantly. Send no-show reminders and track which clients are reliable. Never lose a booking to a last-minute cancellation again.</p>
+        </div>
+      </div>
+
+      <div class="asset-placeholder">
+        <p>📸 Screenshots and walkthroughs coming soon — showing the live product in action</p>
+      </div>
+
+      <div style="text-align: center;">
+        <p style="color: #666; margin-bottom: 25px;">Ready to try it? Choose your path:</p>
+        <a href="https://groombook.farh.net" class="btn-demo" style="display: inline-block; margin-right: 15px;">Launch Live Demo →</a>
+        <a href="getting-started/" class="btn-secondary" style="display: inline-block;">Deploy Locally</a>
+      </div>
     </div>
   </section>