cta recruitment hiring careers dark banner full-bleed recruitment hiring careers cta dark banner jobs team recruitment CTA section hiring banner with dark background careers call-to-action join the team section
CTA Recruitment Banner
Fetch pattern JSON:
curl https://webspire.de/patterns/cta/recruitment.json recruitment.html
<section class="ws-cta relative overflow-hidden">
<!-- Dark background with subtle gradient overlay (replace with bg-[url(...)] for a real photo) -->
<div class="absolute inset-0 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900"></div>
<!-- Optional texture overlay -->
<div class="pointer-events-none absolute inset-0 opacity-10"
style="background-image: radial-gradient(circle at 30% 50%, var(--ws-color-primary) 0%, transparent 50%), radial-gradient(circle at 70% 50%, var(--ws-color-accent) 0%, transparent 50%);">
</div>
<div class="relative mx-auto max-w-5xl px-6 py-24 text-center">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-slate-400">We're hiring</p>
<h2 class="mt-4 text-balance text-3xl font-bold tracking-tight text-white sm:text-4xl lg:text-5xl">Build the future of enterprise AI</h2>
<p class="mx-auto mt-5 max-w-xl text-base leading-relaxed text-slate-300">We're a team of researchers, engineers, and builders obsessed with frontier models and real-world impact. Come shape what's next.</p>
<div class="mt-10 flex flex-wrap items-center justify-center gap-4">
<a href="#" class="inline-flex items-center gap-2 rounded-xl bg-white px-7 py-3.5 text-sm font-semibold text-slate-900 transition hover:bg-slate-100"> <!-- ws-ok -->
View open roles
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/></svg>
</a>
<a href="#" class="inline-flex items-center gap-2 rounded-xl border border-white/20 px-7 py-3.5 text-sm font-semibold text-white transition hover:bg-white/10">
Our culture
</a>
</div>
<!-- Perks strip -->
<div class="mt-14 flex flex-wrap items-center justify-center gap-x-8 gap-y-3">
<span class="flex items-center gap-2 text-sm text-slate-400">
<svg class="h-4 w-4 text-emerald-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Remote-first
</span>
<span class="flex items-center gap-2 text-sm text-slate-400">
<svg class="h-4 w-4 text-emerald-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Competitive equity
</span>
<span class="flex items-center gap-2 text-sm text-slate-400">
<svg class="h-4 w-4 text-emerald-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Frontier model access
</span>
<span class="flex items-center gap-2 text-sm text-slate-400">
<svg class="h-4 w-4 text-emerald-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Paris & London offices
</span>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
ctarecruitmenthiringcareersdarkbannerfull-bleed
Slots
| Name | Required | Description |
|---|---|---|
| eyebrow | No | Small "We're hiring" label above the headline. |
| heading | Yes | Main recruitment headline. |
| subtext | No | Supporting paragraph about the team or mission. |
| cta | Yes | Primary and secondary action buttons. |
| perks | No | Horizontal list of key benefits / selling points. |
Full-bleed recruitment banner with a dark gradient background (swap for a real photo). Contains an eyebrow label, large white headline, supporting copy, two CTAs (primary solid white + ghost outline), and a horizontal perks strip with checkmarks. Always-dark section — no token system, hardcoded slate colors. Place near the footer or after a team section.