Nextjs Agency Template That Turns Visitors Into Briefs

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 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 (opens in a new tab) (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 (opens in a new tab) listed 13 public repositories on November 6, 2026, and nextjs-agency-template (opens in a new tab) 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:

The client row is the free Logo Cloud, the process is the Steps Section in its cards layout, and the people are the Team Section. Each takes overrides through clientsProps, processProps and teamProps, so a marquee of logos or a vertical process rail is one prop away.

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

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 is the solo version, and the two make different choices:

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

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:

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

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

// 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 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, which opens as a bottom sheet on phones, and the budget and service choices are chips from the 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), 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, and our SaaS website template guide covers the marketing site a product needs.

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.