Product Hero Section With Image
A hardware launch hero: one rounded panel the colour of the product's room, the photo dissolving into it with an animated spec sheet drawn over the product, a price-tab buy button and a live now-playing card.
Features
- The whole first screen is one rounded panel tinted by the photo itself, so the product shot melts into it
- Spec callouts with leader lines drawn onto the product, taking turns in order
- A buy button that carries the price in its own tab, plus a rating and a reassurance line
- A frosted now-playing card with a live level meter and progress bar
- Archivo type with one sage accent, and a navbar that sits above the panel
- On phones the callouts fold into one caption that swaps with the active marker
- Reduced motion shows every callout at once and holds the meter still
Best for: Hardware and consumer product launches that sell with one beautiful photo, a few real specs and a clear price.
Installation
npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-mergeThen copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | - | Optional small line above the headline, such as the product's name. |
| title | string | - | The headline. |
| accent | string | - | Optional ending set apart in the hero's accent colour. |
| description | string | - | The line under the headline. |
| price | string | - | The price, shown in a tab inside the buy button. |
| primaryCta | { label: string; href: string } | - | The buy button. |
| secondaryCta | { label: string; href: string } | - | Optional listen link with a play icon. |
| rating | { score: string; label: string } | - | Optional rating under the buttons. |
| perks | string[] | - | Optional reassurances after the rating, such as a free trial. |
| photo | { src: string; alt: string; isMirrored?: boolean } | - | A product shot about 4:5, mirrored if its open wall should face the copy. |
| specs | { label; detail; x; y; side: "up" | "left" | "right" }[] | - | Parts to annotate: x and y are percentages of the photo as shown, side is where the label goes. |
| nowPlaying | { title: string; artist: string; room: string } | - | The track on the now-playing card. |
| clients | Brand[] | - | Optional press logos (name and icon) under the copy on wide screens. |
| clientsLabel | string | - | Optional line above the press logos. |
| nav | { brand: { name; icon }; links: Cta[]; cta: Cta } | - | Optional navbar in this hero's style, above the panel. |
| className | string | - | Extra classes for the section. |
FAQ
Is the Product Hero Section With Image free to use?
Yes. Product Hero Section With Image is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Product Hero Section With Image work with Next.js and React?
Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).
Can I use Product Hero Section With Image in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Product Hero Section With Image need installed?
motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Product Hero Section With Image accessible?
Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.