The Testimonials component uses figure elements and disappears when there is nothing to show
Every service page ends with a What clients say section rendered by the Testimonials component. The component receives a filtered array from getTestimonialsByService and the first thing it does is check the length. If the array is empty, the component returns null. Not an empty div. Not a Coming soon placeholder. Null. React renders nothing and the page layout closes cleanly without a gap. No conditional wrapper in the parent, no CSS display none, no empty state component. The data simply determines whether the section exists. When testimonials do exist, each one renders inside a figure element. The quote sits in a blockquote. The attribution sits in a figcaption with the name in medium-weight text and the role and optional company in muted text separated by an em dash. This is not arbitrary HTML. A figure with a blockquote and a figcaption is the semantic structure that HTML defines for a quoted passage with attribution. Screen readers announce it correctly. Search engines parse it correctly. A div with a paragraph and a span would look the same visually but would carry zero structural meaning. The heading uses aria-labelledby pointing to its own ID so the section is discoverable via the accessibility tree. The accent colour for the double-slash prefix comes from the service accent CSS custom property, so the heading matches the rest of the page without the component knowing which service it belongs to. The grid shows one column on mobile, two on desktop. The glass card styling — rounded border, translucent background, backdrop blur — matches every other card on the site. One component, one null check, one semantic structure, and every service page either shows real client feedback or shows nothing at all.
Comments coming soon
Sign in with TikTok to leave a comment. Coming soon.