Most agency websites fail at the same thing — not design, but information. Clients land on the page with specific questions. If the page doesn’t answer them in the right order, they leave.
This isn’t about having a flashy site. It’s about having the right content in the right place. Here’s what needs to be on a digital agency website for it to convert, with React + Tailwind CSS 4 examples for each section.
Table of Contents
The Hero: Answer Three Questions in 5 Seconds
Most agency heroes say something like “We create digital experiences.” That’s not a value proposition — it’s a placeholder.
A hero that converts answers three questions before the client has to scroll:
- What do you do? (“We build React web applications”)
- For whom? (“for SaaS companies and e-commerce brands”)
- What’s the outcome? (“that load fast and convert visitors”)
Then two buttons: one primary action (see our work / get a quote), one secondary (about us / learn more).
export default function Hero() {
return (
<section className="bg-surface min-h-screen flex items-center px-6">
<div className="max-w-4xl mx-auto">
<span className="text-primary text-sm font-semibold tracking-widest uppercase">
Digital Agency
</span>
<h1 className="mt-4 text-5xl font-bold text-white leading-tight">
We build React apps <br />
<span className="text-primary">that actually convert.</span>
</h1>
<p className="mt-6 text-lg text-white/60 max-w-xl">
Custom web applications for SaaS companies and e-commerce brands.
Fast, accessible, and built to grow with your business.
</p>
<div className="mt-8 flex gap-4 flex-wrap">
<a
href="/work"
className="bg-primary text-white px-6 py-3 rounded-full font-semibold hover:opacity-90 transition"
>
See Our Work
</a>
<a
href="/contact"
className="border border-white/20 text-white px-6 py-3 rounded-full font-semibold hover:border-white/40 transition"
>
Get in Touch
</a>
</div>
</div>
</section>
);
}
In Tailwind CSS 4, bg-surface and text-primary map to your own design tokens defined in index.css — no config file needed:
/* src/index.css */
@import "tailwindcss";
@theme {
--color-primary: #6366f1;
--color-surface: #0a0a0f;
}
The specificity of the headline is what matters. “We build React apps that actually convert” is harder to ignore than “We create digital experiences.” Clients filter fast — vague language reads as a red flag.
Services: Specific Beats Comprehensive
The most common mistake on a services page is listing everything you can technically do. The result is a generic wall of text that could belong to any agency on the internet.
Specificity signals expertise. “React SPA development” says something. “Web development” says nothing.
Each service card needs four things: a clear name, a one-line outcome, a short description, and a list of what the client actually gets.
const services = [
{
icon: "⚡",
title: "React Application Development",
tagline: "Fast, scalable SPAs built for production",
description:
"Component-driven React apps with clean architecture, proper state management, and performance budgets from day one.",
deliverables: ["React + Vite setup", "Component library", "API integration", "CI/CD pipeline"],
},
{
icon: "🎨",
title: "UI/UX Design & Prototyping",
tagline: "Interfaces that are easy to use and hard to leave",
description:
"Wireframes, high-fidelity mockups, and interactive prototypes before a line of code is written.",
deliverables: ["User flows", "Figma prototype", "Design system", "Handoff docs"],
},
];
export default function Services() {
return (
<section className="py-24 px-6 bg-surface">
<div className="max-w-5xl mx-auto">
<h2 className="text-4xl font-bold text-white">What We Do</h2>
<p className="mt-3 text-white/50">
We do a few things well. Here's what that looks like in practice.
</p>
<div className="mt-12 grid gap-8 md:grid-cols-2">
{services.map((s) => (
<div
key={s.title}
className="border border-white/10 rounded-2xl p-6 hover:border-primary/40 transition"
>
<span className="text-3xl">{s.icon}</span>
<h3 className="mt-4 text-xl font-semibold text-white">{s.title}</h3>
<p className="mt-1 text-primary text-sm">{s.tagline}</p>
<p className="mt-3 text-white/60 text-sm leading-relaxed">{s.description}</p>
<ul className="mt-4 flex flex-wrap gap-2">
{s.deliverables.map((d) => (
<li key={d} className="text-xs bg-white/5 text-white/50 px-3 py-1 rounded-full">
{d}
</li>
))}
</ul>
</div>
))}
</div>
</div>
</section>
);
}
Keep the list to three or four services. If you genuinely offer eight different things, pick the four you want to be hired for most — the others can live on an FAQ page.
Portfolio: Outcomes, Not Screenshots
A portfolio that only shows screenshots is a missed opportunity. Clients aren’t hiring you to make something that looks good in a static image — they’re hiring you for results.
Every project entry needs: what the project was, what you actually built, and what changed for the client.
const projects = [
{
title: "Mero Finance Dashboard",
category: "SaaS Application",
description:
"Rebuilt a legacy Angular app in React with a new design system and real-time data pipeline.",
result: "63% reduction in load time",
image: "/projects/mero-finance.jpg",
},
{
title: "Luma E-commerce Storefront",
category: "E-commerce",
description:
"Custom React storefront with headless Shopify, replacing a slow theme that was hurting conversions.",
result: "2× increase in checkout completion",
image: "/projects/luma-store.jpg",
},
];
function ProjectCard({ project }) {
return (
<article className="group relative overflow-hidden rounded-2xl bg-white/5">
<div className="overflow-hidden aspect-video">
<img
src={project.image}
alt={project.title}
className="w-full h-full object-cover group-hover:scale-105 transition duration-500"
/>
</div>
<div className="p-6">
<span className="text-xs text-white/40 uppercase tracking-widest">
{project.category}
</span>
<h3 className="mt-2 text-lg font-semibold text-white">{project.title}</h3>
<p className="mt-2 text-sm text-white/60 leading-relaxed">{project.description}</p>
<div className="mt-4 inline-flex items-center gap-2 bg-primary/10 text-primary text-sm px-3 py-1.5 rounded-full">
<span aria-hidden>↑</span>
{project.result}
</div>
</div>
</article>
);
}
export default function Work() {
return (
<section className="py-24 px-6">
<div className="max-w-5xl mx-auto">
<h2 className="text-4xl font-bold text-white">Selected Work</h2>
<div className="mt-12 grid gap-8 md:grid-cols-2">
{projects.map((p) => (
<ProjectCard key={p.title} project={p} />
))}
</div>
</div>
</section>
);
}
The result badge — “63% reduction in load time,” “2× faster checkout” — is what the client’s eyes go to first. If you don’t have numbers yet, use before/after descriptions: “Replaced a WordPress site with a React SPA, cutting time-to-interactive from 8s to 1.2s.” That’s still a result.
Don’t have case studies? Start with one real project done right, instead of six shallow ones. Depth wins over breadth here.
If you want a work page with this card layout and 3D tilt effects already wired up, the Digital Agency Website Template from NewGenUI has it built out — you replace the project data and images.
Process: Remove the Fear of the Unknown
Clients who haven’t hired an agency before don’t know what working with you looks like. A clear process section answers that question before they ask it — and it signals professionalism to clients who have hired agencies before.
Three to four steps. Each step gets a number, a name, and two sentences max.
const steps = [
{
number: "01",
title: "Discovery",
description:
"We spend the first week understanding your goals, users, and existing tech. No assumptions, no proposals written in a vacuum.",
},
{
number: "02",
title: "Design & Prototype",
description:
"Wireframes first, high-fidelity second. You review and approve before a line of production code is written.",
},
{
number: "03",
title: "Build",
description:
"Two-week sprints. You get a staging URL after each one so you can see real progress as it happens.",
},
{
number: "04",
title: "Launch & Handoff",
description:
"We deploy, monitor for 72 hours, and hand off full documentation. No disappearing act after go-live.",
},
];
export default function Process() {
return (
<section className="py-24 px-6 bg-surface">
<div className="max-w-4xl mx-auto">
<h2 className="text-4xl font-bold text-white">How We Work</h2>
<p className="mt-3 text-white/50">
A repeatable process so nothing falls through the cracks.
</p>
<div className="mt-12 grid gap-8 md:grid-cols-2">
{steps.map((step) => (
<div key={step.number} className="flex gap-5">
<span className="text-5xl font-bold text-white/10 leading-none shrink-0">
{step.number}
</span>
<div>
<h3 className="text-lg font-semibold text-white">{step.title}</h3>
<p className="mt-2 text-sm text-white/60 leading-relaxed">{step.description}</p>
</div>
</div>
))}
</div>
</div>
</section>
);
}
The copy in the last step — “No disappearing act after go-live” — is doing more work than any amount of adjectives would. It names a real fear clients have, and directly addresses it. That’s what good process copy does.
Social Proof: Numbers and Voices
Two types of social proof work on an agency site: stats and testimonials. They do different jobs.
Stats give context at a glance. Testimonials give it a human voice. Together they let a potential client picture what working with you actually feels like.
const stats = [
{ value: "47", label: "Projects Delivered" },
{ value: "5yrs", label: "In Business" },
{ value: "92%", label: "Client Retention" },
{ value: "12", label: "Active Retainers" },
];
const testimonials = [
{
quote:
"They rewrote our frontend in three months. The new app loads in under a second and our conversion rate is up 28%.",
author: "Sarah K.",
role: "CTO, Mero Finance",
},
];
function StatsBar() {
return (
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 py-16 px-6 border-y border-white/10">
{stats.map((s) => (
<div key={s.label} className="text-center">
<p className="text-4xl font-bold text-primary">{s.value}</p>
<p className="mt-1 text-sm text-white/50">{s.label}</p>
</div>
))}
</div>
);
}
function TestimonialCard({ t }) {
return (
<blockquote className="bg-white/5 rounded-2xl p-8 border border-white/10">
<p className="text-white/80 leading-relaxed text-sm">"{t.quote}"</p>
<footer className="mt-6">
<p className="text-sm font-semibold text-white">{t.author}</p>
<p className="text-xs text-white/40">{t.role}</p>
</footer>
</blockquote>
);
}
Use real numbers — even modest ones carry weight. “12 active retainers” says more than “we have many happy clients.” If you’re early and the numbers are small, that’s fine. A single honest testimonial outperforms five generic ones.
If you don’t have testimonials yet, a LinkedIn recommendation quoted with permission counts. Ask a past client for one sentence about a specific outcome they saw.
About: Who Is Actually Doing the Work
Clients want to know who they’re handing their project to. The about section isn’t about selling — it’s about reducing uncertainty.
Keep it short: two or three sentences on the agency story, then the team. Show real faces and real names. Write bios that say what each person actually does, not their job title.
“React developer, 6 years building production apps” is more reassuring than “Senior Frontend Engineer.” The first one tells the client what they’re getting. The second is a LinkedIn field.
Contact: Make the Next Step Obvious
The contact page is the last gate. Don’t make it hard to pass through.
export default function Contact() {
return (
<section className="py-24 px-6 bg-surface">
<div className="max-w-2xl mx-auto">
<h2 className="text-4xl font-bold text-white">Let's Talk</h2>
<p className="mt-3 text-white/60">
Tell us what you're building. We reply within one business day.
</p>
<form className="mt-10 flex flex-col gap-5">
<input
type="text"
placeholder="Your name"
className="bg-white/5 border border-white/10 rounded-xl px-5 py-3 text-white placeholder:text-white/30 focus:outline-none focus:border-primary transition"
/>
<input
type="email"
placeholder="Work email"
className="bg-white/5 border border-white/10 rounded-xl px-5 py-3 text-white placeholder:text-white/30 focus:outline-none focus:border-primary transition"
/>
<select className="bg-white/5 border border-white/10 rounded-xl px-5 py-3 text-white/60 focus:outline-none focus:border-primary transition">
<option value="">Budget range</option>
<option>Under $5,000</option>
<option>$5,000 – $15,000</option>
<option>$15,000 – $50,000</option>
<option>$50,000+</option>
</select>
<textarea
rows={5}
placeholder="What are you working on?"
className="bg-white/5 border border-white/10 rounded-xl px-5 py-3 text-white placeholder:text-white/30 focus:outline-none focus:border-primary transition resize-none"
/>
<button
type="submit"
className="bg-primary text-white font-semibold py-3 rounded-xl hover:opacity-90 transition"
>
Send Message
</button>
</form>
</div>
</section>
);
}
Two things worth noting here. The textarea placeholder — “What are you working on?” — prompts the client to frame their message as a project description, which gives you better-qualified inbound. And the budget dropdown filters out leads that aren’t a fit before you spend time on a discovery call. Most agency sites skip both.
The Information Hierarchy That Ties It All Together
Every section answers a question the client is silently asking as they scroll:
| Section | The question it answers |
|---|---|
| Hero | What do they do, and is it for me? |
| Services | Can they do what I specifically need? |
| Portfolio | Have they done it before, and did it work? |
| Process | What will working with them actually feel like? |
| Social Proof | Can I trust them with my project and budget? |
| About | Who am I actually talking to? |
| Contact | How do I take the next step? |
If any section is missing, vague, or generic, it leaves a question unanswered — and unanswered questions become reasons not to reach out.
The design matters less than you think. A plain, well-structured site with honest copy and real case studies will outperform a beautifully animated site with generic content every single time.
Start Building Without the Boilerplate
Our free portfolio template is a production-ready Vite 6 + React 18 + Tailwind CSS 4 starter — hero, projects grid, skills section, and a working contact form. Free to download, MIT licensed.
Two commands. Zero cost. Deploy today.
→ Grab the Free Portfolio Template
Already ready to go full agency site? The Digital Agency Website Template has all seven sections above pre-built across five pages — $29, commercial license included. Or browse all premium templates for industry-specific options.