Agency Page React template for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Agency Page is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import AgencyPage from @/components/templates/agency-page.

// 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

• heroWordsdefault "["brands", "products", "websites"]"
  string[]

  The words that rotate after labels.heroLead, one per line of the big hero title.

• rotatedefault true
  boolean

  Cycles the hero word; false keeps the first one.

• rotateIntervaldefault 2600
  number

  Milliseconds each hero word stays on screen.

• rotateEffectdefault "slide-up"
  "slide-up" | "slide-down" | "fade" | "blur" | "flip"

  How the hero word changes.

• factsdefault "AGENCY_FACTS"
  AgencyFact[]

  { value, label } key facts under the hero rule; an empty array hides them.

• clientsdefault "AGENCY_CLIENTS"
  LogoCloudItem[]

  Client wordmarks drawn as a glyph and a name.

• servicesdefault "AGENCY_SERVICES"
  AgencyService[]

  { id, icon?, title, description, deliverables } practice cards; they are also the What do you need? chips of the form.

• caseStudiesdefault "AGENCY_CASE_STUDIES"
  AgencyCaseStudy[]

  { 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.

• processdefault "AGENCY_PROCESS"
  StepsSectionItem[]

  The four steps of the process: { icon?, title, description, meta? }.

• teamdefault "AGENCY_TEAM"
  TeamMember[]

  { name, role, bio?, avatar?, socials? } people of the studio.

• packagesdefault "AGENCY_PACKAGES"
  AgencyPackage[]

  { id, name, description, price, from?, unit?, duration?, features, featured?, budget? } engagement cards; budget is the chip Get started picks.

• budgetsdefault "AGENCY_BUDGETS"
  AgencyOption[]

  { value, label } budget chips of the form; an empty array drops the field.

• timelinesdefault "AGENCY_TIMELINES"
  AgencyOption[]

  { 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.

• emaildefault "hello@northwind.studio"
  string

  The studio address beside the form; Start a project mails it when the form is hidden.

• availabledefault true
  boolean

  The availability pill and the phone bar: booking new projects, or fully booked.

• openRolesdefault 1
  number

  The count on the hiring tile after the team; 0 hides the tile.

• careersHrefdefault "/careers"
  string

  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.

• currencydefault "USD"
  string

  ISO currency of the package prices.

• localedefault ""
  string

  Intl locale for the prices; empty uses the UIProvider's, else en-US.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  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.

• accentdefault ""
  string

  Any CSS color for everything tone paints; replaces the tone. Leave empty to use the tone.

• ctaTonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Start a project, the featured package, Start a similar project and Send inquiry.

• radiusdefault "lg"
  "none" | "sm" | "md" | "lg"

  Corners of the service, case and package cards: 0 / 12 / 16 / 24px; the covers inside follow.

• backgrounddefault "glow"
  "plain" | "soft" | "glow" | "aurora" | "grid" | "dots"

  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.

• backgroundColordefault "oklch(0.62 0.14 275)"
  string

  The tint and glow color of the main background; follows tone or accent while left at the default.

• bandBackgrounddefault "muted"
  "muted" | "tinted" | "gradient" | "dots"

  The secondary background of the alternating bands (services, case notes, team, inquiry). Cards and fields inside are lifted one step above it.

• bandColordefault "oklch(0.62 0.14 275)"
  string

  The tint of tinted and gradient bands; defaults to the page color.

• showClientsdefault true
  boolean

  The client wordmarks under the hero.

• showServicesdefault true
  boolean

  The four practice cards with deliverables.

• showWorkdefault true
  boolean

  The case study cards (a snap rail on phones).

• showCaseNotesdefault true
  boolean

  The case notes the cards link to; off, cards without href go to /work/<slug>.

• showProcessdefault true
  boolean

  The four-step process.

• showTeamdefault true
  boolean

  The studio team and the hiring tile.

• showPackagesdefault true
  boolean

  The engagement packages.

• showInquirydefault true
  boolean

  The project inquiry band; off, Start a project mails the studio.

• stickyBardefault true
  boolean

  Phones: a Start a project bar pinned to the bottom once the hero scrolls away, hidden again at the form.

• headerdefault true
  boolean

  The marketing header with the page's anchor links; off inside a site layout.

• footerdefault true
  boolean

  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...).

• animateIndefault true
  boolean

  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

FAQ