# Hero-2

> A hero section designed to showcase media content

A shadcn/ui block from the [@hexui](https://hexui.sh) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/hexui/hero-2).

- Page, with a live preview: https://shadcn.exchange/r/hexui/hero-2
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/hexui/hero-2-light-5a8623b64aa1fbdf.png
- Registry item: https://hexui.sh/r/hero-2.json
- Categories: hero
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://hexui.sh/r/hero-2.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `button`

## Files

### `registry/blocks/hero/hero-2/source/app/hero/page.tsx`

```tsx
import { SiteHeader } from "../../components/site-header"
import { SiteHero } from "../../components/site-hero"

export default function Page() {
    return (
        <div className="flex px-6 py-4 w-full mx-auto max-w-380 min-h-screen flex-col items-center">
            <SiteHeader />
            <SiteHero />
        </div>
    )
}
```

### `registry/blocks/hero/hero-2/source/components/site-header.tsx`

```tsx
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Command, Menu } from "lucide-react"

const NAV_ITEMS = [
    { href: "#features", label: "Features" },
    { href: "#pricing", label: "Pricing" },
    { href: "#blog", label: "Blog" },
]

export function SiteHeader() {
    return (
        <header className="w-full">
            <div className="mx-auto flex w-full items-center justify-between">
                <div className="flex gap-6">
                    <Link href="#" className="flex items-center gap-2 text-foreground">
                        <Command className="size-5" />
                        <span className="text-base font-semibold tracking-tight">Acme Inc.</span>
                    </Link>

                    {/* Desktop nav; on mobile this is hidden and a menu button is shown instead. */}
                    <nav className="hidden items-center gap-6 md:flex">
                        {NAV_ITEMS.map((item) => (
                            <Link
                                key={item.href}
                                href={item.href}
                                className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
                            >
                                {item.label}
                            </Link>
                        ))}
                    </nav>
                </div>

                <div className="flex items-center gap-1 md:gap-2">
                    <Button className="rounded-4xl p-4">
                        Get Started
                    </Button>
                    <Button variant="ghost" size="icon" className="rounded-4xl md:hidden" aria-label="Open menu">
                        <Menu className="size-5" />
                    </Button>
                </div>
            </div>
        </header>
    )
}
```

### `registry/blocks/hero/hero-2/source/components/site-hero.tsx`

```tsx
import { Sparkles } from "lucide-react"
import { WaitlistForm } from "./waitlist-form"

export function SiteHero() {
    return (
        <section className="relative flex w-full pt-20 justify-center">
            <div className="mx-auto flex flex-col items-center gap-14 text-center">
                <div className="flex max-w-2xl flex-col items-center gap-4">
                    <div className="inline-flex items-center gap-2 rounded-4xl bg-accent px-4 py-1 text-xs text-accent-foreground/80 lg:text-sm">
                        <Sparkles className="size-3 sm:size-3.5" />
                        New: Private Beta Open
                    </div>

                    <h1 className="text-balance text-3xl md:text-4xl xl:text-5xl font-semibold tracking-tight text-foreground">
                        Automate Your Workflow Ship Faster Than Ever
                    </h1>

                    <p className="mx-auto max-w-2xl text-pretty text-sm leading-relaxed text-muted-foreground md:text-base xl:text-lg">
                        Everything your team needs in one organized workspace.
                    </p>

                    <WaitlistForm />
                </div>

                <div className="bg-accent rounded-lg px-2 pt-2 md:px-4 md:pt-4 xl:px-10 xl:pt-10">
                    <img
                        src="/demo/screenshots/dashboard.png"
                        alt="Dashboard preview"
                        width={1200}
                        height={800}
                        className="h-full w-full rounded-md rounded-b-xs"
                    />
                </div>
            </div>
        </section>
    )
}
```

### `registry/blocks/hero/hero-2/source/components/waitlist-form.tsx`

```tsx
import { Button } from "@/components/ui/button"

export function WaitlistForm() {
    return (
        <form className="flex max-w-sm items-center gap-4 rounded-4xl border bg-clip-padding p-0.5 dark:bg-input/32">
            <label htmlFor="waitlist-email-2" className="sr-only">Email address</label>
            <input
                id="waitlist-email-2"
                name="email"
                type="email"
                autoComplete="email"
                spellCheck={false}
                placeholder="Enter your email…"
                className="w-full px-4 focus-visible:outline-none"
            />
            <Button type="submit" className="flex min-h-full px-4 py-3 xl:py-4.5 items-center rounded-4xl gap-2">
                Join Waitlist
            </Button>
        </form>
    )
}
```