pain-points challenges problems b2b saas before-after pain points challenges problems obstacles friction b2b challenges section before solution problem statement grid why it's hard section
Pain Points Base
Fetch pattern JSON:
curl https://webspire.de/patterns/pain-points/base.json base.html
<section class="ws-pain-points bg-[var(--ws-color-bg-secondary)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="mx-auto max-w-2xl text-center">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-color-primary)]">The challenge</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-color-text)] sm:text-4xl">Why it's harder than it looks</h2>
<p class="mt-4 text-base leading-relaxed text-[var(--ws-color-text-soft)]">Teams run into the same walls — not because they lack effort, but because the underlying complexity is real.</p>
</div>
<div class="mt-16 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
<div class="rounded-2xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] p-6">
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--ws-color-bg-secondary)] font-mono text-sm font-bold text-[var(--ws-color-text-soft)]">01</div>
<h3 class="mt-4 text-base font-semibold text-[var(--ws-color-text)]">Fragmented data sources</h3>
<p class="mt-2 text-sm leading-relaxed text-[var(--ws-color-text-soft)]">Sensitive data lives across cloud storage, SaaS tools, and legacy systems — no unified view, no consistent policy.</p>
</div>
<div class="rounded-2xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] p-6">
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--ws-color-bg-secondary)] font-mono text-sm font-bold text-[var(--ws-color-text-soft)]">02</div>
<h3 class="mt-4 text-base font-semibold text-[var(--ws-color-text)]">No contextual visibility</h3>
<p class="mt-2 text-sm leading-relaxed text-[var(--ws-color-text-soft)]">Knowing a file exists isn't enough. Without context — who created it, how it's used, where it flows — risk is invisible.</p>
</div>
<div class="rounded-2xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] p-6">
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--ws-color-bg-secondary)] font-mono text-sm font-bold text-[var(--ws-color-text-soft)]">03</div>
<h3 class="mt-4 text-base font-semibold text-[var(--ws-color-text)]">Classification accuracy gaps</h3>
<p class="mt-2 text-sm leading-relaxed text-[var(--ws-color-text-soft)]">Rule-based classifiers flood teams with false positives. Real risk slips through while alerts bury the signal.</p>
</div>
<div class="rounded-2xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] p-6">
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--ws-color-bg-secondary)] font-mono text-sm font-bold text-[var(--ws-color-text-soft)]">04</div>
<h3 class="mt-4 text-base font-semibold text-[var(--ws-color-text)]">Static policies fall short</h3>
<p class="mt-2 text-sm leading-relaxed text-[var(--ws-color-text-soft)]">Policies written today don't account for new workflows, new tools, or the evolving ways people work around friction.</p>
</div>
<div class="rounded-2xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] p-6">
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--ws-color-bg-secondary)] font-mono text-sm font-bold text-[var(--ws-color-text-soft)]">05</div>
<h3 class="mt-4 text-base font-semibold text-[var(--ws-color-text)]">Manual remediation burden</h3>
<p class="mt-2 text-sm leading-relaxed text-[var(--ws-color-text-soft)]">Every flagged incident requires human review, ticket creation, and follow-up. At scale, this breaks the workflow.</p>
</div>
<div class="rounded-2xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] p-6">
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--ws-color-bg-secondary)] font-mono text-sm font-bold text-[var(--ws-color-text-soft)]">06</div>
<h3 class="mt-4 text-base font-semibold text-[var(--ws-color-text)]">Compliance pressure compounds</h3>
<p class="mt-2 text-sm leading-relaxed text-[var(--ws-color-text-soft)]">Regulations change faster than tooling. Proving compliance across jurisdictions means continuous audit overhead.</p>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
pain-pointschallengesproblemsb2bsaasbefore-after
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Kicker label, section title, and optional body copy framing the problem space. |
| challenges | Yes | Grid of 6 challenge cards with numbered badge, title, and description. |
Six numbered challenge cards in a responsive 3 → 2 → 1 column grid. Use this section between the hero and features to build narrative tension — acknowledge the problem before presenting the solution. Works especially well in B2B SaaS, security, and compliance contexts.