Centered Activity Feed Hero Block for React

Edit ACTIVITIES at the top of the file. Each row has a name, the initials for its avatar, an action that reads after the name, and a time. Keep the times relative (2 min ago) so the feed never shows a date that has passed, keep names to a first name and an initial for privacy, and keep six or seven rows: the feed is social proof, not a log.

Render the rows from your own data instead of the constant: fetch the latest events on the server, or subscribe to them on the client and put each new one at the top of the list, keeping the last seven. Compute each relative time from the event's timestamp when you render it. On the client, keep the rows in useState and update them from a WebSocket or Server-Sent Events listener set up in useEffect. If rows arrive on their own, don't make the list a live region: a screen reader would interrupt the visitor with every event.

Recent activity is an h2 under the page's h1, and the rows are a plain list, so a screen reader announces seven items and reads each one as a sentence: Sarah M. published the Q3 roadmap, Just now. The avatars are hidden, since the name beside them says the same, and the pill is one link whose name is its whole text. The pulsing dot is decoration: the word Live carries the meaning.

The pill, the headline, the sentence and the buttons fade and rise in one after another, then the seven rows follow, 60 ms apart. The Live dot sends out a soft ring every two seconds. It's all CSS, with no animation library. With reduced motion, everything is in place from the first frame and the dot stays still.

The two sides stack below lg: the copy first, with both actions on the first screen, then the feed under a rule that runs the width of the page column. Each row keeps its avatar, its sentence and its time on one line: a long action shortens with an ellipsis so the time stays at the end of the row, down to 320px.

Use the activity feed when people use your product often and in plain sight, with sign-ups, deploys or purchases every few minutes: recency says the product is alive. Use customer logos or testimonials when you sell to fewer, larger customers, where who trusts you matters more than how many.