Hero Product

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">

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

$ pnpm dlx shadcn@latest add @esuiss/hero-product

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add blocks hero-product

Manual

Add the pieces it builds on: Button.
Copy the source into components/blocks/hero-product.tsx:

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">

Update the import paths to match your project.

Usage

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

<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.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/hero-product

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add blocks hero-product

Manual

Add the pieces it builds on: Button.

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

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">

Update the import paths to match your project.