Split Panel Comparison Hero Block for React

Edit FEATURES: each has a label and two booleans, selfHosted and us. Both columns share every row, so the answers line up. The column titles are in the table head: rename "Plainview" and "Self-hosted" there, and rename the booleans if you compare against a named competitor.

Not as it stands: each value is a tick or a cross. For a third state, turn the booleans into "yes" | "no" | "partial", give partial its own icon (MinusIcon fits) and its own sr-only word, such as "partly included", and keep the muted chip for "no" only.

As a real table, with a hidden caption "Plainview compared with a self-hosted status page", two column headers and each feature as a row header. The tick and cross chips are hidden from assistive tech, and every cell carries an sr-only "Included" or "Not included", so it reads "Checks every 30 seconds, Included, Not included" rather than relying on an icon. The headline is the page's h1.

Foreground tones only, so primary stays on the one Shine Button: a tick is a bg-foreground circle with a text-background mark, whichever column it's in, so the comparison stays fair, and a cross is a bg-muted circle with a faint ring and a muted mark. All of it follows your theme's tokens in light and dark.

Below the lg breakpoint the two halves stack: the copy first, with the Shine Button on the first screen, then the framed table under a single rule. The table keeps its three columns at 375 px, the feature names wrapping onto a second line when they must, and nothing scrolls sideways down to 320 px.

Use it when the pitch is "switch from them to us": a handful of features where you win, side by side. To compare your own plans, use a pricing block such as Comparison Table Pricing, which puts every plan in one table.