# Hero-3

> A simple horizontally aligned hero section

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

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

## Install

```bash
npx shadcn@latest add https://hexui.sh/r/hero-3.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-3/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-7xl min-h-screen flex-col items-center">
            <SiteHeader />
            <SiteHero />
        </div>
    )
}
```

### `registry/blocks/hero/hero-3/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-3/source/components/site-hero.tsx`

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

export function SiteHero() {
    return (
        <section className="relative flex w-full pt-16 justify-center">
            {/* Two-column layout on xl: copy column is narrower (1fr), image column wider (1.4fr). */}
            <div className="grid grid-cols-1 xl:grid-cols-[1fr_1.4fr] items-center gap-14 mx-auto w-full h-full text-center xl:text-left">
                <div className="flex flex-col items-center xl:items-start text-left pb-8 gap-3 md:gap-4 xl:gap-5">
                    <div className="inline-flex items-center gap-2 rounded-4xl bg-accent px-4 py-1 text-xs text-accent-foreground lg:text-sm">
                        <Sparkles className="size-3 sm:size-3.5" />
                        Early access waitlist
                    </div>

                    <h1 className="text-balance text-3xl md:text-4xl xl:text-5xl font-semibold tracking-tight text-foreground">
                        Plan smarter. Ship faster.
                    </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>

                    {/* Waitlist Form */}
                    <div className="mt-2">
                        <WaitlistForm />
                    </div>
                </div>

                <Image
                    src="/demo/mockups/app-hand-hero.png"
                    alt="mockup"
                    width={864}
                    height={1080}
                    // `unoptimized` bypasses the Next image optimizer (useful for animated/AVIF-hostile assets).
                    unoptimized
                    className="h-200 rounded-4xl border-2 border-border object-cover"
                />
            </div>
        </section>
    )
}
```

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

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

export function WaitlistForm() {
    return (
        <form className="flex flex-row max-w-sm p-0.5 items-center bg-clip-padding dark:bg-input/32 border rounded-4xl gap-4">
            <label htmlFor="waitlist-email-3" className="sr-only">Email address</label>
            <input
                id="waitlist-email-3"
                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>
    )
}
```