feat: add testimonials section to homepage (#70)

tomasz-tomczyk · claude · web-flow · commit 1824278b629f · 2026-04-01T21:59:24.000+01:00
Add "What engineers are saying" section between Features and Self-Hosting on the homepage.

- Pull-quote editorial design with bold highlight phrases and full quotes
- Testimonials data as list in PageController for easy growth
- Author roles (Principal Engineer, Senior Software Engineer) and X handles
- Scroll-triggered staggered fade-up animation
- Full-width bg-secondary band for visual section separation
- Subtle email CTA for submitting new testimonials

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -156,6 +156,22 @@ if (featuresGrid) {
   observer.observe(featuresGrid)
 }
 
+// Home page: testimonials scroll-triggered reveal
+const testimonialsGrid = document.getElementById("testimonials-grid")
+if (testimonialsGrid) {
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        testimonialsGrid.querySelectorAll(".feature-card").forEach((card, i) => {
+          setTimeout(() => card.classList.add("revealed"), i * 150)
+        })
+        observer.unobserve(entry.target)
+      }
+    })
+  }, { threshold: 0.1 })
+  observer.observe(testimonialsGrid)
+}
+
 // Integrations page: tab switching
 document.querySelectorAll(".integration-tab").forEach(tab => {
   tab.addEventListener("click", () => {
diff --git a/docs/superpowers/plans/2026-04-01-testimonials.md b/docs/superpowers/plans/2026-04-01-testimonials.md
@@ -0,0 +1,140 @@
+# Testimonials Section Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Add a "What engineers are saying" testimonials section to the homepage between the Features section and the Self-Hosting card.
+
+**Architecture:** Testimonials are defined as a module attribute list in `page_controller.ex` (same pattern as `@features`), passed as an assign, and rendered via a `:for` comprehension in the template. Pure Tailwind styling, no custom CSS.
+
+**Tech Stack:** Phoenix, HEEx templates, Tailwind CSS with `--crit-*` CSS variables
+
+---
+
+### Task 1: Add testimonials data to PageController
+
+**Files:**
+- Modify: `lib/crit_web/controllers/page_controller.ex:140-168`
+
+- [ ] **Step 1: Add `@testimonials` module attribute after `@feature_order` (line 140)**
+
+Add the following after line 140 (`@feature_order ~w(...)`):
+
+```elixir
+@testimonials [
+  %{
+    body:
+      "Crit saves me so much time reviewing Claude Code plans - instead of fumbling with line numbers or accidental sends, I get a clean local UI to batch my feedback and iterate, all without leaving my workflow.",
+    author: "Omer",
+    handle: "omervk"
+  },
+  %{
+    body:
+      "I've been using crit to review plans for some times. I use claude code in the command line without an IDE, so being to quickly check the plan with rendering is super nice. The system allowing you to add comments is the killer feature: it's like a pull request review but for your plan. On long, complex plans I used to ask claude things like \"on point 3., we should do X, drop point 7., ...\". Using comments makes it more straightforward and easy to review later.",
+    author: "Vincent",
+    handle: "vineus"
+  }
+]
+```
+
+- [ ] **Step 2: Pass `@testimonials` to the template in the `home/2` function**
+
+In the `home/2` function's `render` call (line 146), add `testimonials: @testimonials` to the assigns:
+
+```elixir
+render(conn, :home,
+  demo_token: Application.get_env(:crit, :demo_review_token),
+  testimonials: @testimonials,
+  canonical_url: canonical_url(conn),
+  ...
+```
+
+- [ ] **Step 3: Verify compilation**
+
+Run: `mix compile --warnings-as-errors`
+Expected: Compiles cleanly with no warnings.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add lib/crit_web/controllers/page_controller.ex
+git commit -m "feat: add testimonials data to page controller"
+```
+
+---
+
+### Task 2: Add testimonials section to homepage template
+
+**Files:**
+- Modify: `lib/crit_web/controllers/page_html/home.html.heex:597` (insert before `<!-- ===== Self-Hosting ===== -->`)
+
+- [ ] **Step 1: Insert testimonials section before the Self-Hosting section**
+
+Insert the following block between line 596 (`</section>` closing the Features section) and line 598 (`<!-- ===== Self-Hosting ===== -->`):
+
+```heex
+<%!-- ===== Testimonials ===== --%>
+  <section class="max-w-[1100px] mx-auto mt-14 mb-8 px-10 max-sm:px-5 w-full">
+    <p class="font-mono text-xs tracking-widest uppercase text-(--crit-accent) mb-6">
+      What engineers are saying
+    </p>
+    <div class="grid grid-cols-2 gap-4 max-sm:grid-cols-1">
+      <div
+        :for={testimonial <- @testimonials}
+        class="rounded-lg border border-(--crit-border) bg-(--crit-bg-secondary) p-6"
+      >
+        <p class="text-sm leading-relaxed text-(--crit-fg-primary) mb-4">
+          "<%= testimonial.body %>"
+        </p>
+        <p class="font-mono text-xs text-(--crit-fg-muted)">
+          <%= testimonial.author %>
+          <a
+            href={"https://x.com/#{testimonial.handle}"}
+            class="text-(--crit-fg-dimmed) hover:text-(--crit-accent) transition-colors ml-1"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            @<%= testimonial.handle %>
+          </a>
+        </p>
+      </div>
+    </div>
+  </section>
+```
+
+- [ ] **Step 2: Start the dev server and verify visually**
+
+Run: `dev up` (or `mix phx.server` if already set up)
+Open: `http://localhost:4000`
+Expected: Scrolling down past the features grid and compact feature strip, there's a "What engineers are saying" section with two cards side-by-side. Omer's quote appears first (left), Vincent's second (right). On mobile viewport, they stack vertically.
+
+- [ ] **Step 3: Verify formatting checks pass**
+
+Run: `mix format --check-formatted`
+Expected: No formatting issues.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add lib/crit_web/controllers/page_html/home.html.heex
+git commit -m "feat: add testimonials section to homepage"
+```
+
+---
+
+### Task 3: Run full precommit checks
+
+- [ ] **Step 1: Run precommit**
+
+Run: `mix precommit`
+Expected: All checks pass (compile, format, sobelow, audit, test).
+
+- [ ] **Step 2: Fix any issues**
+
+If any check fails, fix and re-run until clean.
+
+- [ ] **Step 3: Final commit if any fixes were needed**
+
+```bash
+git add -A
+git commit -m "fix: address precommit issues"
+```
diff --git a/docs/superpowers/specs/2026-04-01-testimonials-design.md b/docs/superpowers/specs/2026-04-01-testimonials-design.md
@@ -0,0 +1,55 @@
+# Testimonials Section Design
+
+## Overview
+
+Add a "What engineers are saying" testimonials section to the homepage, positioned between the demo video and the install widget. Minimal quote cards styled with Tailwind and `--crit-*` CSS variables.
+
+## Placement
+
+Homepage (`home.html.heex`), between the demo video section and the install widget section.
+
+## Data
+
+Testimonials defined as a list of maps in `page_controller.ex`, passed to the template as an assign. Each map contains:
+
+- `body` — the quote text
+- `author` — display name
+- `handle` — X/Twitter handle (without @)
+- `url` — link to the person's X profile
+
+Initial testimonials (in this order):
+
+1. **Omer (@omervk)**: "Crit saves me so much time reviewing Claude Code plans - instead of fumbling with line numbers or accidental sends, I get a clean local UI to batch my feedback and iterate, all without leaving my workflow."
+2. **Vincent (@vineus)**: "I've been using crit to review plans for some times. I use claude code in the command line without an IDE, so being to quickly check the plan with rendering is super nice. The system allowing you to add comments is the killer feature: it's like a pull request review but for your plan. On long, complex plans I used to ask claude things like \"on point 3., we should do X, drop point 7., ...\". Using comments makes it more straightforward and easy to review later."
+
+## Visual Design
+
+### Section heading
+
+- Monospace, uppercase, tracked-wide, accent-colored eyebrow: "What engineers are saying"
+- Matches the hero eyebrow style ("Local-first . No login . Works with any agent")
+
+### Quote cards
+
+- Grid: `grid grid-cols-2` on desktop, single column on mobile
+- Card: `--crit-bg-secondary` background, `--crit-border` border, rounded corners
+- Quote text: regular body font, `--crit-fg-primary`, natural reading size
+- Author line: name + linked X handle in `--crit-fg-muted`, monospace
+- No photos, no star ratings, no logos
+- Consistent padding matching surrounding sections
+
+### Responsive
+
+Follows the existing homepage pattern: 2 columns on desktop, 1 column on mobile using `max-sm:grid-cols-1`.
+
+## Growth
+
+Adding a testimonial = adding a map to the list in `page_controller.ex`. No template changes needed. The `:for` comprehension renders whatever is in the list.
+
+## What This Does NOT Include
+
+- No dedicated `/testimonials` or `/wall-of-love` route
+- No database table
+- No new CSS classes in `app.css` (Tailwind only)
+- No carousel, rotation, or animation
+- No photos or avatars
diff --git a/lib/crit_web/controllers/page_controller.ex b/lib/crit_web/controllers/page_controller.ex
@@ -139,12 +139,36 @@ defmodule CritWeb.PageController do
 
   @feature_order ~w(inline-comments split-unified-diff ai-review-loop vim-keybindings share-reviews syntax-highlighting mermaid-diagrams)
 
+  @testimonials [
+    %{
+      highlight: "A clean local UI to batch my feedback and iterate.",
+      body: [
+        "Crit saves me so much time reviewing Claude Code plans - instead of fumbling with line numbers or accidental sends, I get a clean local UI to batch my feedback and iterate, all without leaving my workflow."
+      ],
+      author: "Omer",
+      role: "Principal Engineer",
+      handle: "omervk"
+    },
+    %{
+      highlight: "It's like a pull request review but for your plan.",
+      body: [
+        "I've been using crit to review plans for some times. I use claude code in the command line without an IDE, so being to quickly check the plan with rendering is super nice.",
+        "The system allowing you to add comments is the killer feature: it's like a pull request review but for your plan.",
+        "On long, complex plans I used to ask claude things like \"on point 3., we should do X, drop point 7., ...\". Using comments makes it more straightforward and easy to review later."
+      ],
+      author: "Vincent",
+      role: "Senior Software Engineer",
+      handle: "vineus"
+    }
+  ]
+
   def home(conn, _params) do
     if Application.get_env(:crit, :selfhosted) do
       redirect(conn, to: "/dashboard")
     else
       render(conn, :home,
         demo_token: Application.get_env(:crit, :demo_review_token),
+        testimonials: @testimonials,
         canonical_url: canonical_url(conn),
         page_title: "Crit - Inline code review for AI coding agents",
         meta_description:
diff --git a/lib/crit_web/controllers/page_html/home.html.heex b/lib/crit_web/controllers/page_html/home.html.heex
@@ -594,8 +594,57 @@
       </div>
     </div>
   </section>
-  
-<!-- ===== Self-Hosting ===== -->
+
+  <%!-- ===== Testimonials ===== --%>
+  <section class="w-full mt-14 mb-8 py-12 bg-(--crit-bg-secondary)">
+    <div class="max-w-[1100px] mx-auto px-10 max-sm:px-5">
+      <p class="font-mono text-xs tracking-widest uppercase text-(--crit-accent) mb-10">
+        What engineers are saying
+      </p>
+      <div class="grid grid-cols-2 gap-12 max-sm:grid-cols-1 max-sm:gap-10" id="testimonials-grid">
+        <div :for={testimonial <- @testimonials} class="feature-card relative">
+          <span
+            class="absolute -top-4 -left-3 text-[8rem] leading-none text-(--crit-accent) opacity-10 select-none pointer-events-none"
+            aria-hidden="true"
+          >
+            &ldquo;
+          </span>
+          <p class="relative text-xl font-semibold leading-snug text-(--crit-fg-primary) mb-5">
+            {testimonial.highlight}
+          </p>
+          <div class="relative space-y-3 mb-5">
+            <p
+              :for={paragraph <- testimonial.body}
+              class="text-sm leading-relaxed text-(--crit-fg-muted)"
+            >
+              {paragraph}
+            </p>
+          </div>
+          <p class="relative font-mono text-xs text-(--crit-fg-muted)">
+            &mdash; {testimonial.author}, {testimonial.role}
+            <a
+              href={"https://x.com/#{testimonial.handle}"}
+              class="text-(--crit-fg-dimmed) hover:text-(--crit-accent) transition-colors ml-1"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              @{testimonial.handle}
+            </a>
+          </p>
+        </div>
+      </div>
+      <p class="mt-10 text-xs text-(--crit-fg-dimmed)">
+        Using crit? I'd love to hear from you.
+        <a
+          href="mailto:me@tomasztomczyk.com?subject=Crit%20testimonial"
+          class="underline underline-offset-2 hover:text-(--crit-fg-muted) transition-colors"
+        >
+          me@tomasztomczyk.com
+        </a>
+      </p>
+    </div>
+  </section>
+  <!-- ===== Self-Hosting ===== -->
   <section
     class="max-w-[1100px] mx-auto mt-2 mb-16 px-10 max-sm:px-5 w-full"
     id="self-hosting-card"
