Left-Heavy Trust Compliance Hero Block for React

Edit the CERTIFICATIONS array at the top of the file: each entry is a name ("SOC 2") and a detail ("Type II", "Level 1"). The grid has two columns at every width, so an even number of entries fills it; four or eight work as well as six. List only what your organization holds today, and give each its exact standing: "HIPAA ready" and "SOC 2 Type II" make different promises.

Wrap each certification cell's content in an a pointing at the matching page of your trust center, where buyers can request the report, and add a hover style such as hover:bg-muted. The certification's name and detail become the link's name. Point the announcement pill at your latest audit and "Visit the trust center" at its home page.

Something that stays true without an edit: "Independently audited" and "Renewed every year" never go stale, where a fixed "Updated" date would look neglected a few months later. Name your auditor there if you like, or show the date of the latest report from your trust center's data, rendered when the page is built.

Yes. The certifications are real content, not decoration: the panel is a complementary landmark named "Certifications", with its own "Trust center" h2, and the six certifications are a list, so a screen reader announces how many there are and reads each name with its standing. The shields, the ticks and the status dot are hidden from assistive technology, and the headline is the page's one h1. On a desktop the panel is placed first with CSS grid only, so the reading and Tab order still start with the copy.

The block keeps its colour for the one primary action: the checklist ticks and the shields use the text colour, so nothing competes with the "Start your first audit" button. The only accent is the small green status dot beside "All controls passing", which says "passed", and the words next to it carry the same meaning, so the colour is never the only signal.

Below the lg breakpoint the grid becomes one column and the copy and checklist come first, with both calls to action on the first screen. The trust center follows at full width behind a rule with + marks. The certifications stay two by two so their names fit, the checklist lines wrap with their ticks aligned to the first line, and nothing scrolls sideways down to 320px.