Guarantee Certificate About Block for React

The three promises are PROMISES at the top of the file, each with a bold lead and the rest of the sentence, and the numbered clauses are TERMS. The title, the sentence under the heading and the button's label are plain text in the component. Keep three promises: from md they sit in three columns.

Yes. The terms sit in a disclosure that is closed on load, but they are part of the page's HTML from the start, not fetched when someone opens them, so search engines and assistive technology can reach them. The trigger is a button with its open state announced, and its chevron turns when it opens.

It is an inline SVG built from a polygon whose radius follows a sine, computed once at module scope, with two circles and a bolt path. It is decorative and hidden from assistive technology; the title and the promises carry its meaning. Every colour is a foreground tone, so it follows your theme.

Yes. The panel has no dark scope, so it is light on a light page and dark on a dark one, and the shell, ring and shadow keep it apart from the page in both modes. The Shine Button is the only element in your primary colour.

It is a link (href="#"): point it at your claim form. The button renders the link it's given with render, with nativeButton={false}.

The certificate's padding steps down, the title wraps and the three promises stack, each keeping its tick. The terms link and the button stack too, the link first, and the opened terms run the full width of the box. Nothing scrolls sideways at 320 pixels. The header and the card fade up once on load; with reduced motion they simply appear, and the disclosure opens without a height animation.