Split Layout Notification Stack Hero Block for React

Edit NOTIFICATIONS. Each entry has a title, a description, a Lucide icon and a time, and an optional alert, which gives its icon the theme's destructive colour (mixed toward the foreground so it stays readable in dark themes). The header counts the entries, so it stays right when you add or remove a card. Keep the times relative, like "2 min ago", so they never go stale. From the fourth card on, the cards are hidden below lg (index > 2), so change that number to show more or fewer on a phone.

Fetch the latest few from your notifications API and map each one to the same fields: its type to an icon (and alert for the urgent ones), its body to description, and its timestamp to a relative time. With React, render them on the server or poll with your data library of choice; a list that updates while the page is open should also take aria-hidden and inert off the panel and announce new arrivals in a polite live region.

The headline is the block's one h1, the checklist is a list with its ticks hidden, and the pill and both calls to action are links named by their text. The stack is a preview, not a feed: the whole panel is aria-hidden and inert, so screen readers skip it and nothing in it takes focus.

The two halves stack below the lg breakpoint, with the copy first and the panel under it, so the Shine Button is on the first screen. The panel shows three cards and the peeking edges there, and all five from lg, where it also takes a little less width than the copy (lg:grid-cols-[1fr_1.1fr], the panel at the start). Each description wraps instead of being clipped.

Each card fades and rises from its starting style, Tailwind's starting: variant, with a transitionDelay that grows by 120 ms per card. It's plain CSS, so it plays once as the block appears, needs no animation library, and motion-reduce:transition-none shows the cards at once for visitors who ask for less motion.

Use the notification stack when real-time alerts and messaging are what your product does: a few cards say "communication" faster than a chart. Use a dashboard preview when the value is in data and analytics, and an activity feed when the story is a stream of events rather than alerts.