Shadcn hero sections for agencies
Agency heroes have a different job than SaaS heroes. The visitor isn't trying to start a trial — they're trying to decide if you can be trusted with a $50K-$500K project. The hero needs to telegraph craft, not features. Visual heroes win here. Lead with a curated still from your best recent work, name the kind of clients you serve, and put one clear CTA: 'See our work' or 'Start a project'.
npx shadcn@latest add https://ruixen.com/r/card-carousel-hero
For Tailwind v3 or Base UI, swap the URL prefix — see /tailwind-v3-shadcn or /base-ui-shadcn.
Why this differs for agency
Agency funnels are conversation-led. The visitor reads the hero, browses 2-3 case studies, then reaches out. There's no signup. The hero's job is to earn the case-study click, not to close the deal. Skip pricing, skip feature lists — those defaults that work for SaaS actively hurt here.
Recommended components
Curated picks from the Ruixen registry that fit this use case. Click through to the canonical component docs for code, previews, and props.
Shadcn hero section — an interactive hero section featuring a card carousel with smooth animations.
Shadcn hero section — a modern hero section with animated gradient background and smooth transitions.
Shadcn hero section — a split-layout hero section with left-aligned headline, key metrics, app screenshot showcase, and trusted-by logo strip.
Shadcn hero section — a dynamic hero section featuring video backgrounds and interactive elements.
Frequently asked questions
Should an agency hero show client logos?
Not in the hero itself — put logos in their own section directly under the hero. Mixing logos into the hero competes with the headline for attention. The cleanest pattern: hero with strong visual + headline, then a single logo strip immediately below, then case studies. The visual carries the craft signal; the logo strip confirms credibility; case studies do the heavy convincing.
What CTA wording works best for agency heroes?
Project-led wording outperforms generic 'Contact us' by a large margin. 'Start a project' (action-led, low commitment) and 'See our work' (curiosity-led, browsable) both convert better than 'Get in touch' or 'Contact'. Avoid jargon like 'Let's collaborate' or 'Begin your journey' — these read as agency boilerplate and signal you're more about the pitch than the work.
Video background or static image?
Static or curated card carousel. Video backgrounds eat bandwidth, fail on mobile, and almost always look generic. The exception is a 5-10 second loop of a single signature project — and only if you have the asset. If you're considering stock video, don't. A single sharp still from your best work outperforms any stock loop.
Browse all hero sections
The Hero Sections category page has every Ruixen hero sections variant — not just the curated picks for agency.
See all hero sections →