# Agency Page

> A React agency website template: rotating hero, services, case studies, process, team, packages and a project inquiry form.

- Type: React template (Templates)
- Access: Pro (the source needs a Wingo UI Pro plan, see https://wingo-ui.com/pricing)
- Version: 1.0.0
- Install: `npx wingo-ui@latest add agency-page`
- Docs: https://wingo-ui.com/templates/agency-page

## Interaction

The hero word cycles through brands, products and websites (it holds while the pointer is over it and stays still under reduced motion; screen readers hear the full list once). Start a project, in the header, the hero and the phone bar, glides to the inquiry form and focuses the name field; See our work glides to the case studies. Each case card is one link to its case notes further down (or to its own href): Enter or a tap scrolls there and moves focus to the notes, which offer Start a similar project (it ticks the matching services in the form) and Back to work. On phones the case cards sit in a snap rail with the next card peeking. A package's Get started picks its budget chip and jumps to the form. The form validates name, email, a budget chip and a brief of at least 30 characters, focuses the first problem, keeps the button loading while onInquiry runs and then thanks the sender; the timeline select opens as a bottom sheet on phones. Below 768px a Start a project bar slides up once the hero scrolls away and hides again at the form.

## Installation

```bash
npx wingo-ui@latest add agency-page
```

Pro item: run `npx wingo-ui@latest login` once with a Pro account. The CLI adds the files, their dependencies and a version record for updates.

With shadcn: `npx shadcn@latest add @wingo-ui/agency-page` (needs the @wingo-ui registry with your API key in components.json)

Files:

- `components/templates/agency-page.tsx`
- `components/templates/agency-page-data.ts`

npm dependencies: `npm i lucide-react motion`

Wingo UI dependencies (installed automatically):

- [Marketing Section](https://wingo-ui.com/components/marketing-section) ([Markdown](https://wingo-ui.com/components/marketing-section.md))
- [Marketing Header](https://wingo-ui.com/components/marketing-header) ([Markdown](https://wingo-ui.com/components/marketing-header.md))
- [Marketing Footer](https://wingo-ui.com/components/marketing-footer) ([Markdown](https://wingo-ui.com/components/marketing-footer.md))
- [Logo Cloud](https://wingo-ui.com/components/logo-cloud) ([Markdown](https://wingo-ui.com/components/logo-cloud.md))
- [Steps Section](https://wingo-ui.com/components/steps-section) ([Markdown](https://wingo-ui.com/components/steps-section.md))
- [Team Section](https://wingo-ui.com/components/team-section) ([Markdown](https://wingo-ui.com/components/team-section.md))
- [Badge](https://wingo-ui.com/components/badge) ([Markdown](https://wingo-ui.com/components/badge.md))
- [Button](https://wingo-ui.com/components/button) ([Markdown](https://wingo-ui.com/components/button.md))
- [Input](https://wingo-ui.com/components/input) ([Markdown](https://wingo-ui.com/components/input.md))
- [Select](https://wingo-ui.com/components/select) ([Markdown](https://wingo-ui.com/components/select.md))
- [Text Rotate](https://wingo-ui.com/components/text-rotate) ([Markdown](https://wingo-ui.com/components/text-rotate.md))
- [Textarea](https://wingo-ui.com/components/textarea) ([Markdown](https://wingo-ui.com/components/textarea.md))
- [Toggle Group](https://wingo-ui.com/components/toggle-group) ([Markdown](https://wingo-ui.com/components/toggle-group.md))
- [Navigation](https://wingo-ui.com/components/navigation) ([Markdown](https://wingo-ui.com/components/navigation.md))
- [Motion presets](https://wingo-ui.com/components/motion) ([Markdown](https://wingo-ui.com/components/motion.md))
- [Tones](https://wingo-ui.com/components/tones) ([Markdown](https://wingo-ui.com/components/tones.md))
- [UIProvider](https://wingo-ui.com/components/ui-config) ([Markdown](https://wingo-ui.com/components/ui-config.md))

## Usage

```tsx
// app/(marketing)/page.tsx
"use client"

import Link from "next/link"
import { AgencyPage } from "@/components/templates/agency-page"

export default function StudioRoute() {
  return (
    <AgencyPage
      linkComponent={Link}
      onInquiry={async (values) => {
        await fetch("/api/inquiries", { method: "POST", body: JSON.stringify(values) })
      }}
    />
  )
}
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `heroWords?` | `string[]` | `"[\"brands\", \"products\", \"websites\"]"` | The words that rotate after labels.heroLead, one per line of the big hero title. |
| `rotate?` | `boolean` | `true` | Cycles the hero word; false keeps the first one. |
| `rotateInterval?` | `number` | `2600` | Milliseconds each hero word stays on screen. |
| `rotateEffect?` | `"slide-up" \| "slide-down" \| "fade" \| "blur" \| "flip"` | `"slide-up"` | How the hero word changes. |
| `facts?` | `AgencyFact[]` | `"AGENCY_FACTS"` | { value, label } key facts under the hero rule; an empty array hides them. |
| `clients?` | `LogoCloudItem[]` | `"AGENCY_CLIENTS"` | Client wordmarks drawn as a glyph and a name. |
| `services?` | `AgencyService[]` | `"AGENCY_SERVICES"` | { id, icon?, title, description, deliverables } practice cards; they are also the What do you need? chips of the form. |
| `caseStudies?` | `AgencyCaseStudy[]` | `"AGENCY_CASE_STUDIES"` | { slug, client, title, summary, tags, year, color, cover?, media?, results, href?, challenge, approach, duration, services?, quote? }. Each card links to href, else to its #case-<slug> notes. |
| `process?` | `StepsSectionItem[]` | `"AGENCY_PROCESS"` | The four steps of the process: { icon?, title, description, meta? }. |
| `team?` | `TeamMember[]` | `"AGENCY_TEAM"` | { name, role, bio?, avatar?, socials? } people of the studio. |
| `packages?` | `AgencyPackage[]` | `"AGENCY_PACKAGES"` | { id, name, description, price, from?, unit?, duration?, features, featured?, budget? } engagement cards; budget is the chip Get started picks. |
| `budgets?` | `AgencyOption[]` | `"AGENCY_BUDGETS"` | { value, label } budget chips of the form; an empty array drops the field. |
| `timelines?` | `AgencyOption[]` | `"AGENCY_TIMELINES"` | { value, label } start options of the timeline select; an empty array drops the field. |
| `labels?` | `Partial<AgencyPageLabels>` |  | Every visible string, merged over DEFAULT_AGENCY_PAGE_LABELS: the brand, the hero lead and tail, section headings, form copy and errors. |
| `email?` | `string` | `"hello@northwind.studio"` | The studio address beside the form; Start a project mails it when the form is hidden. |
| `available?` | `boolean` | `true` | The availability pill and the phone bar: booking new projects, or fully booked. |
| `openRoles?` | `number` | `1` | The count on the hiring tile after the team; 0 hides the tile. |
| `careersHref?` | `string` | `"/careers"` | Where the hiring tile goes. |
| `onInquiry?` | `(values: AgencyInquiryValues) => void \| Promise<unknown>` |  | Runs on Send inquiry with { name, email, company, services, budget, timeline, brief }. A returned promise keeps the button loading; a rejection keeps the form and shows labels.failed. Without it the page pretends for 900 ms, then thanks the sender. |
| `currency?` | `string` | `"USD"` | ISO currency of the package prices. |
| `locale?` | `string` | `""` | Intl locale for the prices; empty uses the UIProvider's, else en-US. |
| `tone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | The rotating word, service icon tiles, result figures, process markers, selected chips and the featured package; the page glow follows it unless backgroundColor is set. |
| `accent?` | `string` | `""` | Any CSS color for everything tone paints; replaces the tone. Leave empty to use the tone. |
| `ctaTone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Start a project, the featured package, Start a similar project and Send inquiry. |
| `radius?` | `"none" \| "sm" \| "md" \| "lg"` | `"lg"` | Corners of the service, case and package cards: 0 / 12 / 16 / 24px; the covers inside follow. |
| `background?` | `"plain" \| "soft" \| "glow" \| "aurora" \| "grid" \| "dots"` | `"glow"` | The main background: plain is the bare page color; the others tint the page and add a glow, an aurora, a grid or dots over the first screen. |
| `backgroundColor?` | `string` | `"oklch(0.62 0.14 275)"` | The tint and glow color of the main background; follows tone or accent while left at the default. |
| `bandBackground?` | `"muted" \| "tinted" \| "gradient" \| "dots"` | `"muted"` | The secondary background of the alternating bands (services, case notes, team, inquiry). Cards and fields inside are lifted one step above it. |
| `bandColor?` | `string` | `"oklch(0.62 0.14 275)"` | The tint of tinted and gradient bands; defaults to the page color. |
| `showClients?` | `boolean` | `true` | The client wordmarks under the hero. |
| `showServices?` | `boolean` | `true` | The four practice cards with deliverables. |
| `showWork?` | `boolean` | `true` | The case study cards (a snap rail on phones). |
| `showCaseNotes?` | `boolean` | `true` | The case notes the cards link to; off, cards without href go to /work/<slug>. |
| `showProcess?` | `boolean` | `true` | The four-step process. |
| `showTeam?` | `boolean` | `true` | The studio team and the hiring tile. |
| `showPackages?` | `boolean` | `true` | The engagement packages. |
| `showInquiry?` | `boolean` | `true` | The project inquiry band; off, Start a project mails the studio. |
| `stickyBar?` | `boolean` | `true` | Phones: a Start a project bar pinned to the bottom once the hero scrolls away, hidden again at the form. |
| `header?` | `boolean` | `true` | The marketing header with the page's anchor links; off inside a site layout. |
| `footer?` | `boolean` | `true` | The simple marketing footer. |
| `headerProps?` | `Partial<MarketingHeaderProps>` |  | Passed to MarketingHeader; wins over the page's values. |
| `footerProps?` | `Partial<MarketingFooterProps>` |  | Passed to MarketingFooter; wins over the page's values. |
| `clientsProps?` | `Partial<LogoCloudProps>` |  | Passed to the client LogoCloud (layout marquee, variant tiles...). |
| `processProps?` | `Partial<StepsSectionProps>` |  | Passed to the process StepsSection (layout horizontal, vertical, tabs...). |
| `teamProps?` | `Partial<TeamSectionProps>` |  | Passed to the TeamSection (layout compact, list, cards...). |
| `animateIn?` | `boolean` | `true` | The hero rises in once on mount; off in thumbnails and under reduced motion. |
| `linkComponent?` | `(props: LinkComponentProps) => ReactNode` |  | Default a plain <a>. The router link for the header, footer and case links (next/link in an app). |
| `className?` | `string` |  | Classes for the root. |
| `classNames?` | `Partial<Record<AgencyPageSlot, string>>` |  | Classes for header, hero, clients, services, service, work, caseCard, cover, caseNotes, process, team, packages, package, inquiry, form, stickyBar and footer. |

## Parts

### AGENCY_PAGE_SAMPLE (constant)

All the sample content in one object: facts, clients, services, caseStudies, process, team, packages, budgets and timelines.

### AGENCY_FACTS (constant)

Four studio facts: founded, launches, people, longest client.

### AGENCY_CLIENTS (constant)

Eight fictional client wordmarks.

### AGENCY_SERVICES (constant)

Brand identity, product design, websites and engineering.

### AGENCY_CASE_STUDIES (constant)

Four case studies with drawn covers, results, notes and a quote.

### AGENCY_PROCESS (constant)

Discover, define, design and build, launch and grow.

### AGENCY_TEAM (constant)

Seven people of Northwind Studio.

### AGENCY_PACKAGES (constant)

Design sprint, retainer and project packages in USD.

### AGENCY_BUDGETS (constant)

Four budget ranges from under $25k to $100k+.

### AGENCY_TIMELINES (constant)

Four start options from as soon as possible to just exploring.

### DEFAULT_AGENCY_PAGE_LABELS (constant)

The English strings.

### AgencyPageProps (type)

Props of AgencyPage, including the attributes of the root element.

### AgencyInquiryValues (type)

What onInquiry receives: { name, email, company, services, budget, timeline, brief }.

### AgencyService (type)

One practice card: { id, icon?, title, description, deliverables }.

### AgencyCaseStudy (type)

One case study: the card (client, title, summary, tags, year, color, cover, results) and its notes.

### AgencyCoverKind (type)

"brand" | "app" | "dashboard" | "site", the drawn cover of a case card.

### AgencyResult (type)

One result figure: { value, label }.

### AgencyPackage (type)

One engagement card with its price, unit, duration and features.

### AgencyOption (type)

{ value, label } of a budget chip or a timeline option.

### AgencyFact (type)

{ value, label } of a hero fact.

## Examples

- **Custom accent**: accent violet with the brand call to action: the rotating word, result figures, process markers, chips and the featured package take the color.
- **Aurora with tinted bands**: background="aurora" and bandBackground="tinted" in teal, with a fading word and square-ish cards.
- **Freelancer, fully booked**: A one-person studio: new labels and words, no team or case notes, the availability pill set to booked and only the sprint and project packages.
- **Inside a site layout**: Without header and footer, process as a vertical rail and the clients as a marquee.
- **Inquiry only**: Hero, services and the inquiry form, for a short contact page of a studio.

## See also

- [Portfolio Page](https://wingo-ui.com/templates/portfolio-page) ([Markdown](https://wingo-ui.com/templates/portfolio-page.md))
- [Contact Page](https://wingo-ui.com/templates/contact-page) ([Markdown](https://wingo-ui.com/templates/contact-page.md))
- [About Page](https://wingo-ui.com/templates/about-page) ([Markdown](https://wingo-ui.com/templates/about-page.md))
- [Text Rotate](https://wingo-ui.com/components/text-rotate) ([Markdown](https://wingo-ui.com/components/text-rotate.md))
- [Steps Section](https://wingo-ui.com/components/steps-section) ([Markdown](https://wingo-ui.com/components/steps-section.md))

---

Canonical: https://wingo-ui.com/templates/agency-page
More components: https://wingo-ui.com/components · Index for agents: https://wingo-ui.com/llms.txt