Money Back Hero Pricing Block for React

Edit the constants at the top of the file. GUARANTEE_DAYS is the number in the seal's centre, written round its edge, in the headline, the terms under the seal and the footnote, so change it once. PLAN holds the name, description, monthly price and the button's text; FEATURES is the list. The words round the seal are one string in the SVG's textPath; keep them short, since the text is stretched to fill the ring exactly.

That the page says exactly what your refund policy says: the window ("30 days"), what is refunded ("every cent"), how fast ("3 to 5 business days") and how to ask ("email us"). Keep the seal, the headline, the sentence under the seal and the footnote in step, and link the full terms from your footer or checkout. "No questions asked" is a promise to keep: only write it if your support team does.

It's an inline SVG: three circles and a text on a circular path, with the number and "days" in HTML on top, centred. The ring text uses textLength so it fills the circle whatever the words, and the SVG is currentColor, so it follows light and dark themes and every preset. To change the look, change the radii (OUTER, INNER, TEXT_RADIUS) at the top of the file. On first paint it turns in from a slight tilt and fades up, and under reduced motion it's drawn still.

"Start learning risk-free" is a real link. It's a ShineButton with render set to an a element and nativeButton={false}. Point it at your checkout. It's the only primary element in the block.

It's decorative: the SVG and the number sit in a hidden group, because the headline ("Learn for 30 days, or your money back"), its sentence and the terms under the seal say the same in real text. The plan is a heading with its price read as "$12.99 per month", and the show-more button states aria-expanded. Keyboard focus reaches only the call to action and the button.

The headline comes first, then the seal at 208 px with its terms, then the plan, so the button sits within the first two screens. Below md only the first five features show, with an "All 8 features" button; from md all eight show. From lg the seal and the plan sit side by side, the seal centred in its half.