A centred hero for a software or service landing page. From top to bottom it has a small announcement pill that links to a new feature, a two-part headline with the second half in the accent colour, one supporting sentence, a primary and a secondary button, three short reassurance ticks, and a row of six customer names set as text marks in different type styles. No images are used, so nothing has to load. On phones the buttons become full width and the logos fall into a tidy two-column grid.
const logos = [
{ name: "Marlowe", style: "font-serif text-2xl italic" },
{ name: "KESTREL", style: "text-sm font-bold tracking-[0.35em]" },
{ name: "bramble.", style: "text-2xl font-black tracking-tighter" },
{ name: "Halden & Co", style: "font-serif text-xl" },
{ name: "OSTRA", style: "font-mono text-lg font-semibold tracking-widest" },
{ name: "fernhill", style: "text-2xl font-light tracking-wide" },
];
const promises = ["14-day free trial", "No card needed", "Cancel any time"];
export default function CenteredHeroWithTwoButtonsAndLogoRow() {
const ring = "focus:outline-none focus-visible:ring-2 focus-visible:ring-orange-700 focus-visible:ring-offset-2";
return (
<section className="bg-gradient-to-b from-orange-50 to-white px-6 pb-16 pt-16 text-slate-900 sm:pb-20 sm:pt-24">
<div className="mx-auto max-w-3xl text-center">
<a href="#" className={`inline-flex min-h-[40px] items-center gap-2.5 rounded-full border border-orange-200 bg-white py-1 pl-1.5 pr-4 text-sm font-medium text-slate-700 transition hover:border-orange-300 ${ring}`}>
<span className="rounded-full bg-orange-700 px-2.5 py-1 text-xs font-semibold text-white">New</span>
Automatic payment reminders
<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" className="h-4 w-4 text-orange-700"><path fillRule="evenodd" d="M7.2 4.2a.75.75 0 0 1 1.06 0l5.25 5.25a.75.75 0 0 1 0 1.06L8.26 15.8a.75.75 0 1 1-1.06-1.06L11.94 10 7.2 5.26a.75.75 0 0 1 0-1.06Z" clipRule="evenodd" /></svg>
</a>
<h1 className="mt-8 text-4xl font-semibold tracking-tight sm:text-6xl">
Send the invoice. <span className="block text-orange-700">We do the chasing.</span>
</h1>
<p className="mx-auto mt-6 max-w-xl text-lg leading-relaxed text-slate-600">
Tallybook sends your invoices, nudges late payers politely and matches every payment to your bank, so month end takes minutes.
</p>
<div className="mt-9 flex flex-col items-stretch justify-center gap-3 sm:flex-row sm:items-center">
<a href="#" className={`inline-flex items-center justify-center rounded-full bg-slate-900 px-7 py-3.5 text-sm font-semibold text-white transition hover:bg-slate-700 ${ring}`}>
Start free trial
</a>
<a href="#" className={`inline-flex items-center justify-center gap-2.5 rounded-full border border-slate-300 bg-white px-7 py-3.5 text-sm font-semibold text-slate-900 transition hover:bg-slate-50 ${ring}`}>
<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" className="h-4 w-4 text-orange-700"><path d="M6.3 3.6A1 1 0 0 0 4.75 4.44v11.12a1 1 0 0 0 1.55.84l8.6-5.56a1 1 0 0 0 0-1.68L6.3 3.6Z" /></svg>
Watch the 2-minute tour
</a>
</div>
<ul className="mt-7 flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-sm text-slate-600">
{promises.map((p) => (
<li key={p} className="flex items-center gap-2">
<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" className="h-4 w-4 text-orange-700"><path fillRule="evenodd" d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" clipRule="evenodd" /></svg>
{p}
</li>
))}
</ul>
</div>
<div className="mx-auto mt-16 max-w-5xl border-t border-slate-200 pt-10 sm:mt-20">
<p className="text-center text-sm font-medium text-slate-600">Trusted by 4,000 studios, agencies and freelancers</p>
<ul className="mt-8 grid grid-cols-2 items-center gap-x-6 gap-y-7 text-center text-slate-500 sm:grid-cols-3 lg:grid-cols-6">
{logos.map((l) => (
<li key={l.name} className={`whitespace-nowrap ${l.style}`}>{l.name}</li>
))}
</ul>
</div>
</section>
);
}
Install with one command: npx shadcn@latest add https://we.inc/r/centered-hero-with-two-buttons-and-logo-row.json
Centre it when the message is the main thing and there is no strong image to balance it. A split layout works better when you have a screenshot, a form or a photo that deserves half the width.
Five or six is enough. Fewer than four looks thin, and more than eight turns into noise. Pick names your visitors are likely to know, or ones from the industry you are selling to.
Yes. This component sets each name as text with its own font classes, which looks tidy and loads instantly. It is a good placeholder until you have permission and artwork for the real marks.
The action that moves a visitor closest to becoming a customer, usually starting a trial or booking a call. The second button is for people who are not ready and want to learn more first.
Keep it under about ten words and let it wrap naturally. The size drops from `sm:text-6xl` to `text-4xl` on phones, which keeps two short sentences to three or four lines.
Related: Split Hero with Email Capture, Dark Hero with Gradient Glow and Product Window, Big Headline Hero with Stats Row, Button Set: Primary, Secondary, Ghost, Icon and Loading.
More hero sections or all free UI components. Start for free to have a full site built around it.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.