AI Hero Section With Chat Input
An AI support hero on a real desk photo: tickets slide under a magnifier, closed ones stack up on a clipboard and a prompt composer lies on the mat.
Features
- A real top-down desk photo carries the hero; the product sits on its objects
- Each ticket slides under the magnifier's glass and gets its intent tag, then lands closed on the clipboard
- A prompt composer on the mat types its own hints, with connected apps and a scrolling row of routing rules
- A live tally in the eyebrow ticks up with every closed ticket
- The desk drifts slowly under the glass composer; everything holds still for reduced motion
- On phones the composer and the clipboard stack and the magnifier crops away
Best for: AI support, helpdesk and workflow-automation products that want to show the product working, not just describe it.
Installation
npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-mergeThen copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| status | string | - | The product's name in the eyebrow, beside the live tally. |
| closedToday | number | - | Where the tally starts; it ticks up with every closed ticket. |
| closedLabel | string | - | What the tally counts, such as "closed today". |
| title | string | - | The headline's first line. |
| accent | string | - | The headline's second line, in muted teal. |
| description | string | - | The pitch beside the headline. |
| photo | { src: string; alt: string } | - | A top-down desk, about 3:2, with a magnifier left and a clipboard right. The lens and clipboard positions are measured from the demo photo. |
| prompts | string[] | - | Hints typed one after another in the empty composer. |
| promptLabel | string | - | The composer's label for screen readers. |
| recipes | { trigger: string; outcome: string }[] | - | Routing rules scrolling along the composer's foot. |
| apps | DeskApp[] | - | Connected apps as discs: label, icon and its colour. |
| tickets | Ticket[] | - | Tickets read under the magnifier: id, subject, intent and the tag's colours. |
| resolutions | Resolution[] | - | Closed tickets on the clipboard, in the same order as tickets: name, outcome and avatar colours. |
| feedTitle | string | "Closed today" | The heading on the clipboard sheet. |
| reassurance | string | - | A small line under the composer, such as "Free for 14 days". |
| onPromptSubmit | (prompt: string) => void | - | Called with the typed prompt, or the current hint when the box is empty. |
| clients | Brand[] | - | Client logos under the pitch. |
| clientsLabel | string | - | The line above the logos. |
| nav | { brand; links: Cta[]; cta: Cta; secondaryCta?: Cta } | - | Optional built-in navbar in this hero's style. |
| className | string | - | Extra classes for the section. |
FAQ
Is the AI Hero Section With Chat Input free to use?
Yes. AI Hero Section With Chat Input is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does AI Hero Section With Chat Input work with Next.js and React?
Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).
Can I use AI Hero Section With Chat Input in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does AI Hero Section With Chat Input need installed?
motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is AI Hero Section With Chat Input accessible?
Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.