Social Posts with Profile Cards Testimonials Block for React

Edit POSTS at the top of the file: each has the post text, the author's name, handle, initials, bio and followers, a relative time, and the link preview's linkTitle and linkIcon. The preview's domain is DOMAIN. Follower counts are formatted by one Intl.NumberFormat fixed to US English, so the server and the browser agree.

Each post is a li with its own Guides (extend="sm" marks="start"), and the grid keeps gap-8 between cells so neighbouring lines never touch. The grid is inset from the page rails so the overshoot stays inside them.

It opens when the pointer rests on a handle and when the handle takes keyboard focus, and it closes when you move away, blur or press Escape. The handle is a real link, so a tap on a phone follows it instead of opening a card. Because a card can only be reached by pointing or focusing, the post header also has its own Follow button: it is the way to follow with a keyboard or a touch screen.

It keeps state in the component: the button shows a tick and reads as pressed, and the follower count in the card goes up by one. A polite status line says "Following Ayesha Rahman." or "Unfollowed Ayesha Rahman." Nothing is saved and it resets when the page reloads. To make it real, call your API from follow.

Each post is a figure with the author, handle and age as its caption and the post as a blockquote. The Follow button is named "Follow" followed by the person's name and reports whether it is pressed. The link preview is one link whose name is its title and domain. The avatars and icons are hidden. The "All 4 posts" button reports aria-expanded.

Replace the # in each preview link with the page's address and set linkTitle and DOMAIN to match. The row is a plain link, so the whole row is clickable and it is announced like any other link. Use the page's own title, so what a visitor reads is what they get.

The header and the feed fade up once on load using CSS transitions, and the profile card opens with the library's short fade. Both are switched off or kept minimal with reduced motion, and nothing loops.