Split Layout Email Inbox Hero Block for React

Edit the constants at the top of the file. Each entry in FOLDERS has a label, a Lucide icon, its unread count (0 shows none) and whether it's the active folder. Each entry in EMAILS has the sender's initials and name, a subject, a snippet and a time, plus three flags: unread makes it bold with a dot, starred swaps the dot for a star, and selected marks it as the open message. The reading pane's lines are decoration, and BODY_LINES sets their widths. Write times as a time of day or a relative day ("Yesterday", "Mon") so the inbox never looks out of date.

Yes: load the messages from your API instead of the EMAILS constant, in the same shape, and derive each folder's count from the number of unread messages in it. In the hero the inbox stays a picture, though: its rows aren't links or buttons.

Foreground tones: the unread dot and the star are the foreground colour, and the open message sits on a light muted fill with a foreground bar on its leading edge, so the Shine Button stays the only primary control. Unread counts are a secondary Badge. Change a theme token and the inbox follows, in light and dark mode alike.

It reads the announcement link, the headline (the block's one h1), the paragraph, the two links, the three ticks and the figures in the band. The inbox is a picture of the product, so it's hidden from screen readers and inert, out of the tab order; anything a visitor must know belongs in the copy beside it.

The two columns stack below the lg breakpoint with the text first, then a rule with + marks and the inbox, still flush to its rail. The reading pane appears only when the window is wide enough for it, so on phones and tablets you see the folder rail and the messages. Below sm the folder rail keeps only its icons, which leaves the messages the room for their sender, time and subject; every line shortens with an ellipsis rather than wrapping. Nothing scrolls sideways down to 320 px.

The copy fades and rises in on load, and the inbox fades and settles in just after it. It's all CSS, with no animation library, and nothing loops. With reduced motion on, both columns appear in place.