# Nextjs Agency Template That Turns Visitors Into Briefs

> A nextjs agency template built to collect project briefs: rotating hero, services, case studies, process, team, packages and an inquiry form with budgets.

- Author: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI
- Published: Nov 6, 2026
- Category: [Build it: screens and apps](https://wingo-ui.com/blog/category/build)
- Reading time: 8 min
- Canonical: https://wingo-ui.com/blog/nextjs-agency-template

## TL;DR

An agency site has one job: turn a visitor into a brief you can price. Wingo UI's Agency Page is a Next.js template with a rotating hero, services, case studies with notes, a four-step process, the team, priced packages and an inquiry form that asks for services, a budget, a start date and a brief of at least 30 characters. Use it when a team sells projects; use the Portfolio Page when one person sells their own work.

You run a studio, or you build sites for one, and you want a nextjs agency template that does more than look good in a Dribbble shot. The page has to turn a visitor into a brief: what they need, roughly what they can spend and when they want to start. Most agency landing page templates stop at a hero, a services grid and a contact link. This guide covers the sections that get a serious inquiry, how Wingo UI's [Agency Page template](https://wingo-ui.com/templates/agency-page) is built around them, how it differs from a solo portfolio, and how to wire the form in the App Router.

## What do the existing agency templates cover?

Mostly the look, plus a lot of plumbing. The [Agency template on nextjstemplates.com](https://nextjstemplates.com/templates/agency) (checked November 6, 2026) is built on Next.js 16.0.10, version 1.3.1, last updated July 20, 2026. It ships PostgreSQL with Prisma, NextAuth, Sanity for the blog and Stripe, and sells for $59 (one project), $149 (up to four) or $399 (unlimited). That is a good pick if you want a CMS, auth and payments wired on day one. Theme marketplaces sell many more; check the Next.js version and the last update date before you pay.

If you want an agency website template free of charge, GitHub is the place to look. The [agency-website-template topic](https://github.com/topics/agency-website-template) listed 13 public repositories on November 6, 2026, and [nextjs-agency-template](https://github.com/topics/nextjs-agency-template) listed 1.

What most of them leave thin is the path from a visitor to a qualified lead:

- **Case studies with a challenge, an approach and a result**, where most show a thumbnail and a tag.
- **Prices up front**, so the inquiry starts with a budget.
- **A form that asks the questions you ask on the first call**: services, budget, start date, a real brief.
- **A phone layout** where the case studies do not stack into one endless column.

## Which sections does an agency site need?

Eight, and Agency Page renders all of them by default. Each one takes its content as a prop, and every section after the hero can be turned off with a `show*` switch:

| Section | What the buyer learns | Prop |
|---|---|---|
| Hero | What you build, in one rotating word, plus availability and key facts | `heroWords`, `labels`, `facts`, `available` |
| Clients | Who already trusts you | `clients`, `showClients` |
| Services | Four practices with deliverables as a checklist | `services`, `showServices` |
| Work | Case cards with drawn covers and result figures | `caseStudies`, `showWork` |
| Case notes | The challenge, what you did, the timeline and a quote | `showCaseNotes` |
| Process | Four steps from discovery to launch | `process`, `showProcess` |
| Team | Senior people, plus a hiring tile | `team`, `openRoles`, `showTeam` |
| Packages and inquiry | Prices, then the form | `packages`, `budgets`, `timelines`, `onInquiry`, `showPackages`, `showInquiry` |

The client row is the free [Logo Cloud](https://wingo-ui.com/components/logo-cloud), the process is the [Steps Section](https://wingo-ui.com/components/steps-section) in its `cards` layout, and the people are the [Team Section](https://wingo-ui.com/components/team-section). Each takes overrides through `clientsProps`, `processProps` and `teamProps`, so a marquee of logos or a vertical process rail is one prop away.

> Live demo (Agency Page): Scroll the studio page, open a case card to jump to its notes, then press Get started on a package: the form opens with that budget picked. Try it at [Agency Page](https://wingo-ui.com/templates/agency-page) and install it with `npx wingo-ui@latest add agency-page`.

## How does the rotating hero work?

The big title has three lines: `labels.heroLead` ("We build"), one word from `heroWords` ("brands", "products", "websites") and `labels.heroTail` ("that people remember."). The middle line is our [Text Rotate component](https://wingo-ui.com/components/text-rotate). It swaps the word every `rotateInterval` milliseconds (2600 by default) with the `rotateEffect` you pick: `slide-up`, `slide-down`, `fade`, `blur` or `flip`. It holds while the pointer is over it, stays still under reduced motion, and screen readers hear the full list once instead of a word that changes under them. `rotate={false}` keeps the first word.

> Live demo (Text Rotate): Watch the word change, then hover it: the rotation holds until the pointer leaves. Try it at [Text Rotate](https://wingo-ui.com/components/text-rotate) and install it with `npx wingo-ui@latest add text-rotate`.

Keep the words short. The title scales up to 7rem on wide screens, and a two-word phrase that fits at 1440px can wrap on a 360px phone. Test the longest word at phone width before you ship.

## How does it differ from a solo portfolio template?

An agency sells a team and a process; a freelancer sells themselves. Our [Portfolio Page template](https://wingo-ui.com/templates/portfolio-page) is the solo version, and the two make different choices:

| | Agency Page | Portfolio Page |
|---|---|---|
| Case studies | Cards that scroll to case notes on the page (or to `href`) | Cards that open a sheet, a bottom sheet on phones |
| People | Team grid with a hiring tile | One owner, an experience timeline |
| Selling | Packages with budgets, process steps, client logos | Services with starting prices, testimonials, writing |
| Form | Services, budget chips, a start date and a 30-character brief | Name, email, project type and a message |

If you are one person who wants to look like a studio, start from Agency Page and set `showTeam={false}`; the "Freelancer, fully booked" example on the docs page does exactly that. If you are a developer looking for a job, the portfolio is the better fit, and our [Next.js portfolio template guide](https://wingo-ui.com/blog/nextjs-portfolio-template) covers what to cut.

## How do I set it up for my studio?

Install the template. The CLI copies the source into your project, along with the sections, form fields and hooks it uses:

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

The page is a client component, so keep your content in a small client file and leave `page.tsx` on the server for metadata. Replace the sample case studies and packages with your own; the types live in the data file:

```tsx
// app/studio.tsx
"use client";

import Link from "next/link";
import { AgencyPage, type AgencyInquiryValues } from "@/components/templates/agency-page";
import type { AgencyCaseStudy, AgencyPackage } from "@/components/templates/agency-page-data";

// your real clients, numbers and quotes only
const caseStudies: AgencyCaseStudy[] = [
  {
    slug: "harbor-bank-site",
    client: "Harbor Bank",
    title: "A marketing site the team edits itself",
    summary: "Moved 60 pages to Next.js and a headless CMS with reusable blocks.",
    tags: ["Website", "Engineering"],
    year: "2026",
    color: "#2563eb",
    cover: "site",
    results: [{ value: "24", label: "Reusable blocks" }],
    challenge: "Every page change needed a developer and a two-week release.",
    approach: ["Audited every page", "Built a block library in Next.js", "Trained the marketing team"],
    duration: "10 weeks",
    services: ["website", "engineering"],
  },
];

const packages: AgencyPackage[] = [
  { id: "sprint", name: "Website audit", description: "A written plan for your next site.", price: 6000, unit: "fixed price", duration: "2 weeks", features: ["Content and SEO review", "Performance report", "A roadmap call"], budget: "under-25" },
  { id: "project", name: "New website", description: "Strategy, design and a Next.js build.", price: 30000, from: true, unit: "per project", duration: "8 to 12 weeks", features: ["Design and copy", "Headless CMS", "30 days of fixes"], featured: true, budget: "25-50" },
];

export function Studio({ inquiryAction }: { inquiryAction: (values: AgencyInquiryValues) => Promise<void> }) {
  return (
    <AgencyPage
      linkComponent={Link}
      heroWords={["websites", "stores", "apps"]}
      labels={{
        brand: "Bayside Studio",
        home: "Bayside Studio, home",
        heroLead: "We design",
        heroTail: "for growing teams in New York.",
        heroDescription: "A three-person studio for design and Next.js builds, from the first call to launch.",
        available: "Booking projects for February 2027",
        tagline: "A design and development studio in New York.",
        legal: "© 2026 Bayside Studio LLC.",
      }}
      email="hello@bayside.example"
      facts={[]}
      caseStudies={caseStudies}
      packages={packages}
      showClients={false}
      showTeam={false}
      onInquiry={inquiryAction}
    />
  );
}
```

An empty `facts` array hides the hero numbers, which beats "140+ launches" with nothing behind it. Everything you do not pass falls back to the Northwind Studio sample data, so the client logos stay hidden here until you have real ones, and the services and process steps need your own copy before launch. The `budget` on each package must match a `value` in `budgets` (the defaults run from `under-25` to `100-plus`), and the case `services` ids match the service cards, so Start a similar project ticks the right chips.

## How do I wire the inquiry form?

The agency inquiry form hands its values to `onInquiry`, so pass it a function that returns a promise. It receives `{ name, email, company, services, budget, timeline, brief }`. The button loads while it runs; a rejection keeps the form filled and shows `labels.failed`. Without `onInquiry` the page waits 900 ms and thanks the sender without sending anything, which is fine for a demo and a lost lead in production. A server action works:

```ts
// app/actions.ts
"use server";

import type { AgencyInquiryValues } from "@/components/templates/agency-page";

export async function sendInquiry(values: AgencyInquiryValues) {
  // the form checks these on the client; check again on the server
  if (!values.name.trim() || !values.email.includes("@") || values.brief.trim().length < 30) {
    throw new Error("Invalid inquiry");
  }
  // store the inquiry or send it with your mail provider here
}
```

```tsx
// app/page.tsx
import type { Metadata } from "next";
import { sendInquiry } from "./actions";
import { Studio } from "./studio";

export const metadata: Metadata = {
  title: "Bayside Studio",
  description: "Design and Next.js websites for growing teams in New York.",
};

export default function Page() {
  return <Studio inquiryAction={sendInquiry} />;
}
```

The `Studio` prop is named `inquiryAction` on purpose: the Next.js TypeScript plugin flags function props on a `"use client"` entry file unless the name is `action` or ends in `Action`.

On the client the form requires a name, a valid email, a budget chip and a brief of at least 30 characters, and moves focus to the first problem. An empty `budgets` or `timelines` array drops that field. If you need a general contact page with channels, office hours and a map instead, the [Contact Page template](https://wingo-ui.com/templates/contact-page) is free.

## How does it work on a phone?

Below 768px it changes in three places: the case cards, the timeline field and a pinned call to action. The case cards sit in a horizontal snap rail with the next card peeking, instead of four tall cards stacked on top of each other. The timeline field is our [Select](https://wingo-ui.com/components/select), which opens as a bottom sheet on phones, and the budget and service choices are chips from the [Toggle Group](https://wingo-ui.com/components/toggle-group). Once the hero scrolls away, a Start a project bar slides up from the bottom, padded above the iPhone home indicator with `env(safe-area-inset-bottom)`, and it hides again at the form so it never covers the fields. Turn it off with `stickyBar={false}`.

Each case card is one link. By default it scrolls to its notes further down the page and moves focus there. If you want every case study indexed as its own page, give it an `href`, or set `showCaseNotes={false}` and the cards without `href` go to `/work/<slug>`, which you build as a normal route.

## Is it free, and what does Pro cost?

Agency Page, Portfolio Page, Text Rotate and Steps Section are Pro items. The Contact Page and Logo Cloud are two of the 75 free items in the 371-item catalog as of November 6, 2026. Pro is $8 a month, $80 a year or $150 once for lifetime access (see [pricing](https://wingo-ui.com/pricing)), and the 14-day refund applies only while no Pro item has been downloaded. If a free repository or the nextjstemplates.com kit with its CMS and auth fits your project better, use it. If you want a nextjs agency website template with the case notes, packages and inquiry form already built, in light and dark, install it and spend your time on the case studies, because they are what wins the brief.

More full pages built the same way are in [Build it: screens and apps](https://wingo-ui.com/blog/category/build), and our [SaaS website template guide](https://wingo-ui.com/blog/saas-website-template) covers the marketing site a product needs.

## Components in this post

- [Agency Page](https://wingo-ui.com/templates/agency-page) (Pro): A React agency website template: rotating hero, services, case studies, process, team, packages and a project inquiry form. Install: `npx wingo-ui@latest add agency-page`
- [Portfolio Page](https://wingo-ui.com/templates/portfolio-page) (Pro): A React portfolio template for designers and developers: hero, case studies in a sheet, experience, priced services, writing and contact. Install: `npx wingo-ui@latest add portfolio-page`
- [Text Rotate](https://wingo-ui.com/components/text-rotate) (Pro): A rotating word for headlines that cycles through a list of words or short phrases in place, inside a sentence that reflows to fit each one. Install: `npx wingo-ui@latest add text-rotate`
- [Steps Section](https://wingo-ui.com/components/steps-section) (Pro): A How it works section: three to five numbered steps, each with an icon, a title, a line of text and a small drawn product visual. Install: `npx wingo-ui@latest add steps-section`
- [Contact Page](https://wingo-ui.com/templates/contact-page) (Free): A React contact page template: a validated form, copyable channels with live office hours, offices on a drawn map, a short FAQ and logos. Install: `npx wingo-ui@latest add contact-page`

## FAQ

### What should an agency website include?

Services with deliverables, three or four case studies with a challenge, an approach and results, the process, the people who will do the work, starting prices and an inquiry form. Each section should answer a question a buyer asks before they send a brief.

### Is there a free Next.js agency template?

There are a few. The GitHub topic agency-website-template listed 13 public repositories on November 6, 2026, and nextjs-agency-template listed 1. Wingo UI's Agency Page is a Pro item, while its Contact Page template and Logo Cloud section are free.

### What is the difference between an agency template and a portfolio template?

An agency template sells a team and a process: services, team, packages and an inquiry form that asks for a budget. A portfolio template sells one person: their projects, experience and a simpler contact form.

### Should an agency site show prices?

Starting prices filter out projects you would turn down and make the inquiry easier to send. Agency Page shows packages with a From price, and Get started picks the matching budget chip in the form.

### How do I receive the inquiries?

Pass onInquiry a function that returns a promise, such as a Next.js server action that stores the inquiry or emails it. The button loads while it runs, and a rejection keeps what the visitor typed and shows an error.

---

Source: https://wingo-ui.com/blog/nextjs-agency-template