Centered Launch Badge Hero Block for React

Edit the LAUNCH object at the top of the file: product, rank, platform and upvotes. The count is a fixed string, "1,247", rather than a number formatted while rendering, because toLocaleString() prints different separators in different locales and the server's HTML would then disagree with the browser's. If you load the live count, format it once with a fixed locale, such as Intl.NumberFormat("en-US"), before it reaches the block.

All three are links to #. Point the badge at your launch page, so visitors can go and upvote, and the buttons at your sign-up page and your launch story. The badge is one link with one name: the count with a visually hidden "upvotes", the rank, the product and the platform. Hover tints it and darkens the vote box's border. On Base UI, each button renders its link with render={<a href="#" />} and nativeButton={false}.

Edit the METRICS array: each metric has a value, shown as written in tabular figures, and a label under it. An optional spoken replaces the value for screen readers: the rating shows "4.9/5" and is read "4.9 out of 5", not "4.9 slash 5". The metrics are a list, so each cell is one item, and each value stays left to right. The figures in the demo are samples: use your launch's own.

Each cell is a li with a Guides layer: four solid hairlines that overshoot the corners by 0.5rem (extend="sm") and one + mark on the top-start corner (marks="start"). The cells are gap-4 apart (gap-8 from sm), so neighbouring overshoots don't meet. Change extend to md and widen the gap for longer crop marks, or add a fourth metric and change grid-cols-3 to grid-cols-4.

The badge stays one row, with the vote box beside the rank. The headline wraps, balanced, at text-4xl, and the two buttons stack. The three metrics keep their columns down to 320px, with a long label wrapping onto two lines instead of widening the row. The main button is on the first screen.

Use it during a launch and in the weeks after, while the rank and the vote count are fresh proof that people care. Once the launch is old news, a dated "Product of the Day" reads as stale: switch to a standard hero with lasting proof, such as customer logos, a rating or testimonials.