Seasonal Sale Pricing Block for React

Edit the data at the top of the file. Each entry in PLANS has its name, description, features, regular original price and sale price per month, and featured for the tint, the badge and the primary button. The percentages are all worked out from the two prices: each plan's badge and button, and the stamp, which shows the best discount (BEST_PERCENT), so 41% appears because 29 to 17 is the biggest cut. SALE holds the ribbon's name and the deadline's words.

"Ends Sunday at midnight" is plain text, written relative on purpose so the page never shows a past date. Replace it with your sale's real dates, or pair the idea with the Countdown Offer block for a live clock. Whatever the page says, end the sale on your server at that moment: stop applying the sale prices at checkout and render the plans at their regular price.

Each call to action is a real link to its plan's href. It's a ShineButton with render set to an a element and nativeButton={false}. The label says what the buyer gets ("Claim 40% off"), and a screen reader hears the plan too ("Claim 40% off, 50 images plan"). Point each link at a checkout that applies the sale price, with no coupon code needed.

The stamp and its ribbon are decorative and hidden from assistive technology: the headline says "Save up to 41% this autumn", and each price is written for a screen reader as "Was $99, 40% off, now $59 per month", with the struck price in a real s element. On a phone the plan selector is a radio group named "Plan": the arrow keys change the plan, and the plans that aren't shown are invisible to Tab and screen readers.

The stamp shrinks beside the headline, so the header stays within the first screen, then the Segment Group, then one plan with its price and button. The three plans share one grid cell and the hidden ones are invisible, so the block keeps the height of the tallest plan and nothing jumps when you switch plans. From md the three plans sit side by side and share their rows through CSS subgrid so names, prices, buttons and feature lists line up.

A struck price on a plan tells people it's cheaper; a stamp and a named sale tell them why now. Use it when the discount is real and temporary (a seasonal sale, an anniversary, a launch) and say when it ends. If the lower price is permanent, or tied to who the buyer is, use a plan card with a struck price instead.