trust-signal-components

Create a TrustBadgeRow component that maps over an array of badge definitions, each pairing an inline SVG icon with a translated label. Render it with flex-wrap and gap utilities so it stays readable at 375px viewports, and place it directly below the hero section.

Build a ComplianceBadge component accepting code, label, and description props. Render the credential code in a dark square block beside the label and description text, and only use codes matching real credentials such as a regulatory certification or VAT/Tax ID.

This approach requires inline SVG icons only, not npm icon libraries like Font Awesome or Heroicons. Inline SVGs avoid extra dependencies, allow stroke customization via currentColor, and must carry aria-hidden="true" when decorative.

Place micro-copy badges in the hero, a 3-4 badge row directly below it, regulatory badges near relevant services, privacy notes on the quote page, and VAT/registration details in the footer. At least one trust signal should appear above the fold on mobile.

Do not use them for CTA button copy, quote form UX, analytics, or SEO metadata, which belong to other concerns. Also avoid them if you cannot back badges with real credentials, since invented certifications undermine credibility and may create legal risk.