Dual Actions Split Banner Block for React

Two equal choices read better as two equal rows than as a primary and a secondary button, and a whole row is a large target. Each title is a link (h3 with a Link Overlay inside) and its stretched area covers the row, so the line under it and the arrow are clickable too. A screen reader hears two headings with a link each, and the line under each title is plain text.

Add an item to the PATHS list with a title, a line and an href. The rows share the end half's height, so a third row makes the block taller by one row (about 90 px) and the start half stretches to match. Past three, think about a list or a menu.

The columns are the grid itself, so there's no padding on the block's column to leave a gap: the end half has lg:border-s and a Guides with marks="start" draws the + where it meets the top rule. Below lg that divider is replaced by a solid rule across the top of the rows.

It follows your theme on purpose: the tint is bg-muted/50, so it's a light grey in a light theme and a darker one in a dark theme. A forced black half would break the other themes and compete with the page's own hero.

The halves swap sides, the divider moves to the other edge and the arrows turn around, because they use rtl:-scale-x-100. The text in each row aligns to the start.

The tint half comes first, then the rows under a rule, each full width. At 320 pixels the titles and lines wrap and nothing scrolls sideways.