# Hero Product

A centered product launch hero with an eyebrow, headline, two actions, a wide image, and a pricing line.

Hero Product is an open-source block from suiss/ui for React. The @esuiss/ui CLI copies its source into your project, so you own the code.

Source: https://ui.suiss.app/docs/blocks/hero-product

**React**

**Example**

```tsx title="components/blocks/hero-product.tsx"
import { Button } from "@/components/ui/button"

const image =
  "https://images.unsplash.com/photo-1634403665443-81dc4d75843a?w=1800&q=80&auto=format&fit=crop"

export function HeroProduct() {
  return (
    <section className="flex flex-col items-center overflow-hidden bg-muted pt-13 text-center">
      <div className="flex flex-col items-center gap-1.5 px-6 transition-[opacity,translate] duration-1000 ease-[cubic-bezier(0.45,0,0.2,1)] starting:translate-y-4.5 starting:opacity-0 motion-reduce:transition-none">
        <p className="text-lg font-semibold tracking-tight text-[color-mix(in_oklab,var(--color-orange-500),var(--foreground)_45%)] dark:text-orange-500">
          New
        </p>
        <h1 className="text-5xl font-semibold tracking-tight text-balance md:text-6xl">
          Phone Pro
        </h1>
        <p className="text-2xl text-balance md:text-3xl">
          Beyond professional.
        </p>
      </div>
      <div className="mt-5 flex flex-wrap justify-center gap-4 px-6 transition-[opacity,translate] delay-120 duration-1000 ease-[cubic-bezier(0.45,0,0.2,1)] starting:translate-y-4.5 starting:opacity-0 motion-reduce:transition-none">
        <Button size="lg">Learn more</Button>
        <Button
          size="lg"
          variant="outline"
          className="border-primary bg-transparent text-primary hover:bg-primary/10 dark:hover:bg-primary/20 hover:text-primary dark:bg-transparent"
        >
          Buy
        </Button>
      </div>
      <img
        src={image}
        alt="A phone resting on a soft beige surface"
        className="mt-7 aspect-[2] w-full max-w-245 bg-secondary object-cover transition-[opacity,translate] delay-220 duration-1000 ease-[cubic-bezier(0.45,0,0.2,1)] starting:translate-y-4.5 starting:opacity-0 motion-reduce:transition-none"
      />
      <p className="px-6 pt-2.5 pb-4.5 text-xs text-muted-foreground">
        From $999 or $41.62/mo. for 24 mo.
      </p>
    </section>
  )
}
```

A centered launch hero with an eyebrow, a large product name and tagline, Learn more and Buy buttons, a wide product image and a pricing line. Elements fade and rise in with a slight stagger on load. It is a static server component, ready for a product or feature launch page.

## Installation

### CLI

```bash title="Terminal"
npx shadcn@latest add @esuiss/hero-product
```

Works in any project with a `components.json`. See [Installation](https://ui.suiss.app/docs/installation#add-components) for the one-line registry setup. Or use the suiss/ui CLI:

```bash title="Terminal"
npx @esuiss/ui@latest add blocks hero-product
```

### Manual

1. Add the pieces it builds on: [Button](https://ui.suiss.app/docs/components/button).

2. Copy the source into `components/blocks/hero-product.tsx`:

```tsx title="components/blocks/hero-product.tsx"
import { Button } from "@/components/ui/button"

const image =
  "https://images.unsplash.com/photo-1634403665443-81dc4d75843a?w=1800&q=80&auto=format&fit=crop"

export function HeroProduct() {
  return (
    <section className="flex flex-col items-center overflow-hidden bg-muted pt-13 text-center">
      <div className="flex flex-col items-center gap-1.5 px-6 transition-[opacity,translate] duration-1000 ease-[cubic-bezier(0.45,0,0.2,1)] starting:translate-y-4.5 starting:opacity-0 motion-reduce:transition-none">
        <p className="text-lg font-semibold tracking-tight text-[color-mix(in_oklab,var(--color-orange-500),var(--foreground)_45%)] dark:text-orange-500">
          New
        </p>
        <h1 className="text-5xl font-semibold tracking-tight text-balance md:text-6xl">
          Phone Pro
        </h1>
        <p className="text-2xl text-balance md:text-3xl">
          Beyond professional.
        </p>
      </div>
      <div className="mt-5 flex flex-wrap justify-center gap-4 px-6 transition-[opacity,translate] delay-120 duration-1000 ease-[cubic-bezier(0.45,0,0.2,1)] starting:translate-y-4.5 starting:opacity-0 motion-reduce:transition-none">
        <Button size="lg">Learn more</Button>
        <Button
          size="lg"
          variant="outline"
          className="border-primary bg-transparent text-primary hover:bg-primary/10 dark:hover:bg-primary/20 hover:text-primary dark:bg-transparent"
        >
          Buy
        </Button>
      </div>
      <img
        src={image}
        alt="A phone resting on a soft beige surface"
        className="mt-7 aspect-[2] w-full max-w-245 bg-secondary object-cover transition-[opacity,translate] delay-220 duration-1000 ease-[cubic-bezier(0.45,0,0.2,1)] starting:translate-y-4.5 starting:opacity-0 motion-reduce:transition-none"
      />
      <p className="px-6 pt-2.5 pb-4.5 text-xs text-muted-foreground">
        From $999 or $41.62/mo. for 24 mo.
      </p>
    </section>
  )
}
```

3. Update the import paths to match your project.

## Usage

```tsx
import { HeroProduct } from "@/components/blocks/hero-product"
```

```tsx
<HeroProduct />
```

Replace the copy inline and the image URL in the `image` constant. The buttons have no handlers, so wrap them in links to your learn-more and purchase pages, and update the pricing line.

## Notes

The image is an Unsplash placeholder. Entry animations are skipped when reduced motion is on.