# Promo Code Hero block

> Split promo hero with copyable coupon code, expiry, and campaign image

Two-column sale promo: eyebrow badge, headline, dashed promo-code panel with copy-to-clipboard button, fine-print terms, CTA, and image. ReUI Badge; shadcn Card, Button, Item. For discount banners, seasonal sales, promo landing pages.

- Type: Pro block
- Category: [Coupon](https://web.dev.reui.io/blocks/ecommerce/coupon.md)
- Page: https://web.dev.reui.io/blocks/ecommerce/coupon/coupon-1
- MCP: `get_block("coupon-1")`
- Built with: Badge, Button, Card, Item
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A sitewide sale on a shadcn Card, split between offer text and a campaign photo, under a destructive Limited time badge

## Agent notes

- `PROMO` holds the sample SUMMER25 sale copy, the `fineprint` lines and an Unsplash `image`; swap all three for your campaign
- The Shop the sale `Button` has no `onClick`, `ctaHref` is never read and Full terms only links to a #terms anchor
- `endsAt` is never rendered, so no countdown runs; only the `endsLabel` text shows and it will not update on its own

## When not to use

- A storefront landing section pairing a deal banner and countdown with promo tiles: use [Countdown Deal Hero](https://web.dev.reui.io/blocks/ecommerce/shop-hero/shop-hero-3.md) (`get_block("shop-hero-3")`)
- A promotions page that lists several codes to filter and copy: use [Filterable Coupons](https://web.dev.reui.io/blocks/ecommerce/coupon/coupon-2.md) (`get_block("coupon-2")`)

## Install

```bash
npx shadcn@latest add @reui/coupon-1
```

## About Coupon blocks

### When to use

- A single sale or member offer: headline, a promo code to copy, expiry, fine print and a shop button
- A promotions page listing several codes, filtered by offer type, each with its own copy button
- A dismissible full width strip that announces one sale or shipping perk and its code

### When not to use

- A source snippet or terminal command shown with its own copy button: use [Code Block](https://web.dev.reui.io/components/code-block.md) (`get_component("code-block")`)
- A closing signup or launch band that sells a product with no discount to redeem: use the [CTA blocks](https://web.dev.reui.io/blocks/marketing/cta.md)
- A field where the shopper types a code and watches the order total drop: use the [Shopping Cart blocks](https://web.dev.reui.io/blocks/ecommerce/shopping-cart.md)

### Agent notes

- `handleCopy` flips to Copied even when `navigator.clipboard` is missing or the write rejects; add a fallback before you rely on it
- Every page.tsx wraps the offer in a `min-h-svh` main; drop that wrapper when the offer sits inside an existing page
- The `code` value is a plain string copied as is; nothing validates it, applies it to an order or records a redemption

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.