Split Layout Founder Letter Hero Block for React

Edit the LETTER array: each entry is one cell with a lead, the bold first sentence, and the rest. Three short cells work best: why you started, what you built, and the rule you build by. Make each lead a full sentence that stands alone, since a skimmer reads only the bold parts. Update the name, the role and the initials in the signature row.

The top half is a two-column grid from lg, with lg:border-s on the promises column as the divider, and the letter is a band under it that draws its top rule with Guides, so the + marks meet the rails. On a phone everything stacks in reading order: headline, action, promises, then the letter as three rows separated by hairlines, with the signature last. The action sits within the first screen at 375px.

It's a figure: the three paragraphs are one blockquote, and the signature is its figcaption, so assistive technology reads the quote with the person it belongs to. The band has a visually hidden h2 ("A note from the founder"), and so do the promises, so both can be reached by heading. The initials are an AvatarFallback, hidden from screen readers since the name follows them. To show a photo, add an AvatarImage inside the Avatar and keep the initials as its fallback.

The Shine Button is the one filled control; set its href and its text, and name where it goes ("Try Kettle free"). The outline button is the quieter path ("Read our story"). Edit the TERMS array for the line under them: it's a list, and the dots between the terms are hidden from screen readers. On Base UI, each button renders its link with render={<a href="#" />} and nativeButton={false}.

It's CSS. Tailwind's starting: variant (@starting-style) starts the headline, subtitle, actions, terms, promises and the letter transparent and 12px low, one after another, and a transition brings each to rest when it first renders. With reduced motion, motion-reduce:transition-none removes the transitions and everything renders in place. The block has no state and runs no script.

Use it when the founder's story is the reason to trust the product: indie and bootstrapped products, mission-driven companies, or a tool born from a pain your audience shares. Use a standard hero when the product itself is the selling point, or for enterprise buyers who look for proof such as logos, compliance and figures before a personal note.