# Hero-1

> A simple and versatile hero section

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

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

## Install

```bash
npx shadcn@latest add https://hexui.sh/r/hero-1.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-1/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-1/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-1/source/components/site-hero.tsx`

```tsx
import { Command } from "lucide-react"
import { CTAButtons } from "./cta-buttons"
import { SocialProof } from "./social-proof"

export function SiteHero() {
    return (
        <section className="relative flex w-full justify-center pt-20">
            <div className="z-10 mx-auto flex max-w-5xl flex-col items-center gap-10 text-center">
                {/* Logo */}
                <Command className="h-8 w-8 md:h-10 md:w-10" />

                <div className="flex max-w-3xl flex-col gap-3 md:gap-4">
                    {/* Main Heading */}
                    <h1 className="text-balance text-3xl font-bold tracking-tight text-foreground md:text-4xl lg:text-5xl">
                        Automate Your Workflow
                        Ship Faster Than Ever
                    </h1>

                    {/* Description */}
                    <p className="mx-auto max-w-2xl text-pretty text-base leading-relaxed text-muted-foreground md:text-lg">
                        Build systems that grow with your company, automate critical operations, and maintain speed and reliability even as demand increases.
                    </p>
                </div>

                {/* CTA Buttons */}
                <CTAButtons />

                {/* Social Proof */}
                <SocialProof />
            </div>
        </section>
    )
}
```

### `registry/blocks/hero/hero-1/source/components/cta-buttons.tsx`

```tsx
import { Button } from "@/components/ui/button"
import { ArrowRight } from "lucide-react"

export function CTAButtons() {
    return (
        <div className="flex w-full max-w-sm flex-row items-stretch justify-center gap-3 md:max-w-none md:items-center md:gap-4">
            <Button size="lg" className="h-11 md:h-12 rounded-4xl px-8 text-sm md:text-base">
                Get Started
                <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
            <Button variant="outline" size="lg" className="h-11 md:h-12 rounded-4xl px-8 text-sm md:text-base">
                Get a Demo
            </Button>
        </div>
    )
}
```

### `registry/blocks/hero/hero-1/source/components/social-proof.tsx`

```tsx
import Image from "next/image";

// Logos registry
const logos = [
    { src: "/demo/logos/cursor.svg", alt: "Cursor logo" },
    { src: "/demo/logos/discord.svg", alt: "Discord logo" },
    { src: "/demo/logos/framer.svg", alt: "Framer logo" },
    { src: "/demo/logos/polar.svg", alt: "Polar logo" },
    { src: "/demo/logos/google.svg", alt: "Google logo" },
];

export function SocialProof() {
    return (
        <div className="mx-auto mt-6 flex w-full max-w-3xl flex-col">
            {/* Description */}
            <div className="flex flex-col">
                <p className="text-center text-xs font-medium tracking-[0.2em] text-muted-foreground md:text-sm">
                    TRUSTED BY LEADING TEAMS
                </p>
            </div>

            {/* Logos */}
            <div className="mt-2 flex flex-wrap justify-center gap-x-4 gap-y-3 md:gap-x-0 md:gap-y-0">
                {logos.map((logo) => (
                    <div
                        key={logo.alt}
                        className="flex basis-1/3 items-center justify-center px-2 sm:basis-1/4 md:basis-1/5 md:px-0"
                    >
                        <div className="relative flex aspect-video items-center justify-center w-20 md:w-22 lg:w-24">
                            <Image
                                src={logo.src}
                                alt={logo.alt}
                                fill
                                sizes="(max-width: 768px) 33vw, (max-width: 1200px) 25vw, 20vw"
                                loading="eager"
                                // Invert logos in light mode only; assumes SVGs are white-on-transparent.
                                className="object-contain opacity-80 not-dark:invert-100"
                            />
                        </div>
                    </div>
                ))}
            </div>
        </div>
    )
}
```