# Contact Pages

> Two full contact pages: a sales page with steps, a logo-free proof row, a validated request form that turns into a call-booking step and an FAQ; and a help center with live article search, topic filters, channels and a call card.

- Collection: Pages
- Tier: pro
- Docs: https://geturui.com/docs/contact-pages
- Install: `npx shadcn@latest add @geturui-pro/contact-pages`
- Dependencies: motion, lucide-react

## Variants

### Sales

Pitch with next steps and a proof grid, a request form (work-email check, sliding team-size selector) that swaps to bookable call slots, then an FAQ.

Install: `npx shadcn@latest add @geturui-pro/contact-pages-sales`

| Prop | Type | Default | Description |
|---|---|---|---|
| productName / title / description | `string` | — | Page copy. |
| proof | `{ icon; value; label }[]` | — | Figures for the trust row. |
| faqs | `{ q; a }[]` | — | Questions in the accordion. |
| onSubmit | `(request: { name; email; company; teamSize; interest; message }) => void | Promise<void>` | — | Resolve to show booking; throw to show the error. |
| slots / onBook | `string[] / (slot: string) => void` | — | Call times offered after sending. |
| className | `string` | — | Classes for the outer element. |

### Help center

Hero search that filters articles live with highlighted matches, topic cards that filter the popular list, contact channels and a volt call card.

Install: `npx shadcn@latest add @geturui-pro/contact-pages-help-center`

```tsx
import { HelpCenterContact } from "@/components/pages/contact-pages/help-center";

export default function HelpPage() {
  return <HelpCenterContact articles={articles} onBookCall={() => router.push("/book")} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| title / description | `string` | — | Hero copy. |
| topics | `{ id; title; description; icon }[]` | — | Topic cards. |
| articles | `{ id; title; topic; minutes; href? }[]` | — | Searchable articles; topic is a topic id. |
| channels | `{ id; icon; title; meta; actionLabel; href?; onAction?; online? }[]` | — | Contact channels. |
| onBookCall | `() => void` | — | Call card action. |
| className | `string` | — | Classes for the outer element. |

## Accessibility

- Labels on every field, errors linked with aria-describedby, and focus moves to the first problem — or to the next step after sending.
- Team size is a native radio group; call slots and topic cards use aria-pressed.
- Search results and counts are announced through a status region; matches are marked with <mark>.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.