Compare pages: premium redesign

[NicholasKissel]

Redesigns the /compare pages with the same premium treatment applied to the cookbook: generous whitespace, a consistent eyebrow + heading rhythm, hairline-only chrome, and restrained color.

Changes

Detail pages (/compare/<slug>/)

• Hero: larger tracked title, text-lg subtitle, primary + ghost CTA pair, and "Last updated" demoted to quiet metadata. Drops the min-h-[60vh] block that left the hero feeling empty.
• Sections no longer carry full-width border-t separators; rhythm comes from spacing and a shared heading lockup.
• Overview is now two bordered panels with the Rivet side subtly highlighted (bg-white/[0.03]), refined "When to choose" lists, and a quiet text-link CTA instead of a second button.
• Feature table: colored icon chips replaced with small status dots (emerald / amber / violet / zinc for yes / partial / coming soon / no), quiet uppercase group headers instead of full-width gray bars, fixed column proportions, edge-aligned first and last columns, and more row breathing room.
• Verdict gets a lead-paragraph treatment; FAQ aligns left under the same heading system; "Other comparisons" cards match the site card language with arrow affordances.

Hub (/compare/)

• Masthead matches the detail hero (tracked title + text-lg lede), cards restyled to the same rounded-xl hairline pattern.

No data or copy changes; the page remains a zero-JS server render.

Verification

• Both detail pages and the hub verified in the browser at desktop width: hero, overview panels, table groups/dots, verdict, FAQ toggles, other-comparisons cards, CTA.
• No console errors (GitHub stars API 403s are pre-existing rate limiting).

🤖 Generated with Claude Code

[NicholasKissel]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• Website premium polish: positioning, typography, and on-prem surfaces #5230
• Compare pages: premium redesign #5229 👈 (View in Graphite)
• Cookbook covers: classical artwork cards #5228
• SEO content plays: /compare pages, FAQ schema, cookbook infra #5219
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[railway-app]

🚅 Deployed to the rivet-pr-5229 environment in rivet-frontend

Service	Status	Web	Updated (UTC)
website	😴 Sleeping (View Logs)	Web	Jun 16, 2026 at 12:39 pm
kitchen-sink	❌ Build Failed (View Logs)	Web	Jun 14, 2026 at 4:05 am
mcp-hub	✅ Success (View Logs)	Web	Jun 14, 2026 at 3:56 am
ladle	❌ Build Failed (View Logs)	Web	Jun 12, 2026 at 8:11 am
frontend-inspector	❌ Build Failed (View Logs)	Web	Jun 12, 2026 at 8:11 am
frontend-cloud	❌ Build Failed (View Logs)	Web	Jun 12, 2026 at 8:11 am

[claude]

Code Review: Compare Pages Premium Redesign

Overview

This PR applies a consistent premium visual treatment to the /compare pages: eyebrow labels, tighter tracking, hairline borders, and a simplified status-dot system. Purely presentational — no data, routing, or business logic changes.

---

What looks good

• Component extraction is solid. SectionHeading, ChoiceList, and OverviewPanel reduce duplication well with clear minimal props.
• STATUS_STYLES record pattern is cleaner than the previous switch statement. Typed as Record<ComparisonStatus, ...> it is exhaustive at compile time — adding a new status value surfaces as a type error. Good replacement for the icon-based switch.
• align-top on table cells is a meaningful improvement. Multi-line cells in the old design would center-align awkwardly.
• Column widths sum correctly (18% + 28% + 28% + 26% = 100%).
• aria-hidden="true" on the arrow span in compare/index.astro is correct.
• import type { ReactNode } correctly uses type-only import.

---

Issues

1. Arrow icon inconsistency

compare/index.astro uses a raw HTML arrow character for the card arrow, while OtherComparisonsSection in ComparePage.tsx uses the Icon component. Both animate with transition-transform group-hover:translate-x-0.5 but render differently. Prefer one approach consistently across the two pages.

2. Status dot accessibility

The status dot uses title={label} for labeling. The title attribute is unreliable for screen readers on non-interactive elements. aria-label or role="img" aria-label={label} would be more robust, especially since the old icon-based design provided visible per-status labeling.

3. Row hover state removed from comparison table

The old rows had hover:bg-white/5 transition-colors; the new rows drop it entirely. This is the main table users scan, and removing the hover affordance makes it harder to track across wide rows on desktop. Consider restoring a subtle version such as hover:bg-white/[0.03] to match the overview panel highlight.

4. Magic vertical offset on dot (mt-[7px])

The mt-[7px] value aligns the dot with the first text baseline. This breaks if the surrounding text size or line-height changes. Switching the parent container to items-baseline would be more maintainable.

5. paragraph as React key in VerdictSection (pre-existing)

Using full paragraph text as a key works for static content but breaks silently if two identical paragraphs appear. Switching to index is safe here since the list is never reordered or filtered.

---

Nits

• The center boolean prop on SectionHeading works but a className prop giving callsites layout control would be more flexible for future variations.
• FaqSectionDark is now the only section without a centered heading. Intentional per the description, just worth noting.

---

Summary

Clean redesign with solid component extraction. The two actionable items before merge are the status dot accessibility (title to aria-label) and the arrow icon inconsistency between the Astro hub and TSX detail pages. The removed hover state on table rows is worth a quick design check. Everything else is correct or a minor nit.

[claude]

Compare Pages: Premium Redesign — Code Review

Overview

This PR redesigns the /compare pages with a refined visual treatment: tighter typography, hairline-only chrome, status-dot indicators in the feature table, and a new light/dark inspector toggle in ObservabilitySection. No data or copy changes. The diff is clean and the component decomposition improves maintainability.

---

Positives

• Good component extraction: SectionHeading, OverviewPanel, and ChoiceList replace inline repetition cleanly.
• FeatureStatus simplification: replacing the switch + mutable variables with a Record<ComparisonStatus, ...> lookup table is the right move. Exhaustive keying means adding a new ComparisonStatus variant will be a TS compile error.
• Toggle accessibility: the light/dark buttons in ObservabilitySection correctly use aria-label and aria-pressed.
• Column layout: the four table columns now sum to exactly 100% (18+28+28+26), and edge alignment via pl-0/pr-0 is cleaner than symmetric px-4 on edge cells.

---

Issues

1. Accessibility regression in FeatureStatus dots (medium)

The status dot only carries meaning through color and a title tooltip:

<span className={`mt-[7px] h-1.5 w-1.5 flex-shrink-0 rounded-full ${dot}`} title={label} />

title is not reliably announced by screen readers and is invisible to keyboard-only users who cannot hover. The old icon-based implementation was also imperfect, but status information is load-bearing on a comparison page. A visually-hidden label fixes this at zero visual cost:

<span className={`mt-[7px] h-1.5 w-1.5 flex-shrink-0 rounded-full ${dot}`} aria-hidden="true" />
<span className="sr-only">{label}</span>

2. PR scope includes an unrelated change (minor)

ObservabilitySection.tsx (Inspector light/dark toggle) is unrelated to the compare-page redesign. Bundling it here makes the diff harder to bisect or revert independently if one part regresses.

3. Arrow affordance inconsistency (minor)

compare/index.astro uses a raw Unicode arrow:

<span aria-hidden="true" class="transition-transform group-hover:translate-x-0.5">→</span>

ComparePage.tsx (the "Other comparisons" cards) uses the icon component:

<Icon icon={faArrowRight} className="transition-transform group-hover:translate-x-0.5" />

The hub and detail-page cards are visually identical use-cases and should use the same implementation.

4. Row hover feedback removed from comparison table (low)

The previous hover:bg-white/5 transition-colors on <tr> has been dropped. The table can be very long; row-level hover feedback helps users track which row they are reading. A subtle hover:bg-white/[0.02] would preserve the hairline aesthetic while restoring that affordance.

---

Nits

• key={paragraph} in VerdictSection: using the paragraph text as a React key is fragile if two paragraphs share identical content. key={index} (with index as the second .map() argument) is safer for static ordered lists.
• FAQ heading alignment: the section previously centered its heading; it now renders left-aligned via SectionHeading without center. This looks intentional (left-aligned heading + left-aligned accordion is coherent), but worth confirming.
• ObservabilitySection.tsx indentation: new lines use 2-space indentation — confirm this matches the file's pre-existing style so Biome does not reformat on the next format pass.