Centered Star Rating Hero Block for React

Edit the constants at the top of the file. RATING.score is the average out of 5 and also fills the stars; RATING.reviews is the count as it should read, a string, so the server and the browser render the same digits whatever their locale. Each entry in PLATFORMS is one badge: the review site's name, its award and its score there. REVIEWS holds the three quotes, each with its author and role. Use the scores and the words your customers actually gave you.

Each star is two Lucide stars on top of each other: a faint one, and a filled one in a box clipped to a width that fillOf works out from the score. At 4.9 the first four are full and the fifth is filled to 90%, so the row shows the real average, not a rounded five. The box starts at the inline start, so on a right-to-left page the stars fill from the right.

As "Rated 4.9 out of 5", then "Based on 3,241 verified reviews". The stars are drawings, hidden from assistive technology, and visually hidden words around the visible score say what it means; each review's stars say "Rated 5 out of 5". The badges are a list, each read as its name with ", rated 4.8" after it, and each review is a figure with its quote in a blockquote and its author in a figcaption. The score is shown, not asked for, so it isn't a control; to let visitors give a rating, use the Rating component.

Fetch the average and the count where your page loads its data, on the server when you can, round the score to one decimal and pass both in place of RATING. The stars follow any score from 0 to 5. Format the count once, on the server, so it doesn't change after the page loads, and refresh it on a schedule rather than on every visit: review totals move slowly.

The stars and score stay on one line above the headline, which wraps, balanced, at text-4xl. The three badges wrap onto centered rows, the calls to action sit side by side while they fit, and the three reviews stack below as cells of the same width, so the button is on the first screen and the reviews follow it.

Use this hero when the volume is the point: a high average from thousands of reviews, on sites your buyers already check. Use a testimonial hero when one quote from someone your visitors know does more than any number, and pair the two further down the page if you have both.