# Hero Section v3

> Centered hero with badge, headline, CTA, and an embedded animated chat preview (messages, typing, suggestions).

A shadcn/ui block from the [@uiception](https://uiception.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiception/hero-section-v3).

- Page, with a live preview: https://shadcn.exchange/r/uiception/hero-section-v3
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiception/hero-section-v3-light-652142e0b225cf93.png
- Registry item: https://uiception.com/r/hero-section-v3.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://uiception.com/r/hero-section-v3.json
```

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

## Dependencies

- Registry items: `badge`, `https://uiception.com/r/chat-bot.json`

## Files

### `registry/new-york/blocks/hero-section-v3/page.tsx`

```tsx
import HeroSectionV3 from "./components/hero-section-v3"

export default function Page() {
  return <HeroSectionV3 />
}
```

### `registry/new-york/blocks/hero-section-v3/components/hero-section-v3.tsx`

```tsx
import { ArrowRight } from "lucide-react"

import ChatBot from "../../chat-bot/components/chat-bot"
import { Badge } from "@/components/ui/badge"

export default function HeroSectionV3() {
  return (
    <section className="py-4 md:py-6 lg:py-8">
      <div className="mx-auto max-w-6xl px-4">
        <div className="flex flex-col items-center gap-6 text-center">
          <Badge variant="secondary" className="text-sm italic">
            Always open, always ready
          </Badge>

          <h1 className="text-3xl font-medium tracking-tighter sm:text-4xl lg:text-5xl lg:leading-[1.15]">
            Hospitality that never keeps
            <br />
            your guests waiting
          </h1>

          <p className="max-w-lg text-sm leading-relaxed text-muted-foreground">
            From taking reservations to answering menu questions and handling
            special dietary requests, your guests get instant answers any time
            of day.
          </p>

          <button className="inline-flex items-center gap-2 rounded-full bg-blue-600 px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-blue-700">
            Sign up for free
            <ArrowRight data-icon="inline-end" size={16} />
          </button>
        </div>
      </div>

      <div className="mx-auto max-w-6xl px-4 pt-4">
        <ChatBot className="mx-auto max-w-3xl py-10" />
      </div>
    </section>
  )
}
```