docs: add "tests outweigh features" pain to homepage, sync README

Mirror the README's three-pain Problem section on the homepage so a
visitor sees the same critique in both places:

- New pain card on the homepage between "Testing is always last" and
  "AI writes tests that don't run": title "Tests outweigh features",
  body "Setup. Mocks. Helpers. You end up writing more code for the
  tests than for the feature itself. Like shipping a second app."
  Icon: two file shapes, the larger one in the danger color to convey
  test code outweighing feature code.
- Pain-cards grid: cascade 4 cols → 2 cols (≤1024px) → 1 col (≤768px)
  so the new four-card row never sits too cramped between breakpoints.
- README: drop "harnesses" from the tooling-pain paragraph so the
  homepage card and the README prose use the same three-item list
  (setup, mocks, helpers).

Author: kevinccbsg

README.md

@@ -16,7 +16,7 @@
 
 Testing gets pushed to next week, and next week never comes. When it does happen, tests usually run in a different environment from where you're building, so testing feels like overhead the moment you finish a feature.
 
-The tooling pushes you the same way. You end up writing more code for the tests than for the feature itself, between setup, harnesses, mocks, and helpers. Adding tests starts to feel like shipping a second app on top of the one you already finished.
+The tooling pushes you the same way. You end up writing more code for the tests than for the feature itself, between setup, mocks, and helpers. Adding tests starts to feel like shipping a second app on top of the one you already finished.
 
 As AI writes more of your code, the gap widens. Agents generate test files that look correct but never actually execute in a real browser. The mocks those tests rely on quietly drift from the real API over time. Fields get renamed, mocks stay frozen, tests pass, production breaks.
 

docs/.vitepress/theme/components/HomePage.vue

@@ -103,6 +103,16 @@ const faqs = [
               The codebase grows. The debt compounds.
             </p>
           </div>
+          <div class="pain-card">
+            <div class="pain-icon">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="3" y="6" width="9" height="13" rx="1.5" stroke="currentColor" stroke-width="2"/><rect x="10" y="3" width="11" height="14" rx="1.5" stroke="var(--hp-danger)" stroke-width="2"/><path d="M13 7h5M13 10h5M13 13h5" stroke="var(--hp-danger)" stroke-width="2" stroke-linecap="round"/></svg>
+            </div>
+            <h3 class="pain-title">Tests outweigh features</h3>
+            <p class="pain-desc">
+              Setup. Mocks. Helpers. You end up writing more code for the tests
+              than for the feature itself. Like shipping a second app.
+            </p>
+          </div>
           <div class="pain-card">
             <div class="pain-icon">
               <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="2" stroke="currentColor" stroke-width="2"/><path d="M9 9l6 6M15 9l-6 6" stroke="var(--hp-danger)" stroke-width="2" stroke-linecap="round"/></svg>
@@ -472,10 +482,16 @@ const faqs = [
 
 .pain-cards {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(4, 1fr);
   gap: 20px;
 }
 
+@media (max-width: 1024px) {
+  .pain-cards {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
 .pain-card {
   padding: 32px 28px;
   border-radius: var(--hp-radius);