Templates/ Marketing agency
Marketing agency website template for Next.js
A complete home page composed from 10 Facade blocks, in the order a visitor reads them. This page explains each section: which block, why it is there and which props to change.
Looking at the blocks themselves? Marketing agency website components for React.
Install
npx shadcn@latest add @facade/hero-agency @facade/logo-cloud @facade/features-bento @facade/process-steps @facade/stats-band @facade/team-grid @facade/testimonials-wall @facade/pricing-section @facade/cta-section @facade/footer-bigcomponents/facade; you assemble them in a page file in the order below. 3 of the blocks are Pro and need a license key in components.json. Pro setup.Section by section.
What each block does on a marketing agency site and what to change first.
- 01
Hero, agency
FreeOpens with a one sentence positioning in oversized type, an availability line and a client wordmark marquee.
The clients prop becomes the wordmark marquee. Eight to twelve names.
Change first:headlinedescriptionavailabilityclientsprimaryCta - 02
Logo cloud
FreeA trusted-by grid of wordmarks with a hover reveal line per logo, or a two row marquee.
Use the hover reveal for one result per client. Numbers you can prove.
Change first:logostitlevariant - 03
Six cells with live micro animations. One service or reason per cell.
Change first:cellstitleeyebrow - 04
Process steps
FreeExplains what happens after the first contact. A line draws between the steps as the visitor scrolls.
Change first:stepstitlecta - 05
Stats band
FreeFour numbers that count up once when they enter the viewport. Proof in a glance.
Change first:statseyebrowinverted - 06
Team grid
FreeThe people behind the business, with bios on hover and an optional hiring card.
Change first:membersheadingshowHiringCard - 07
A masonry wall of reviews with an aggregate rating header and one featured quote. Depth over density.
Change first:testimonialsratingreviewCountfeatured - 08
Three tiers with a monthly and yearly toggle. Transparent prices remove the quote wall.
Three retainers. Put the one you want to sell in the featured slot.
Change first:tiersmonthlyLabelyearlyLabelyearlyBadgecurrencycomparisonNote - 09
CTA section
FreeThe closing panel. High contrast, two actions, one reassurance line.
Change first:titledescriptionprimaryCtasecondaryCtareassurance - 10
Footer, big
FreeName, address and phone for local search, hours, link columns, a newsletter form and a wordmark.
Change first:businessNameaddressphoneemailhourscolumnssocialslegal
The full page.
All 10 blocks stacked in order, live, at desktop width. Numbers match the sections above.
- 01Hero, agencyFree
- 02Logo cloudFree
- 04Process stepsFree
- 05Stats bandFree
- 06Team gridFree
- 09CTA sectionFree
Build it in four steps
Step 1
Install the blocks
Run the shadcn command on this page once. Every block of the marketing agency page lands in components/facade as editable TypeScript.
Step 2
Configure site data
Create one data file with the business name, address, phone, hours, time zone and services, and pass it to the footer, contact, hours and hero blocks.
Step 3
Replace the copy
Work through the sections below. Each one names the props to change first. Keep one claim per line and no stock phrases.
Step 4
Deploy
Build with next build and deploy to Vercel or any Node host. The blocks are static React, so no extra services are needed.