features color-banded bands alternating steps how-it-works saas dark-band color-banded bands alternating steps features how-it-works dark-section feature sections with colored background bands alternating feature layout with different backgrounds step-by-step how it works with color blocks
Features Color Banded
Fetch pattern JSON:
curl https://webspire.de/patterns/features/color-banded.json color-banded.html
<div class="ws-features">
<!-- Band 1: Neutral bg, text left -->
<div class="bg-[var(--ws-features-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="grid items-center gap-12 lg:grid-cols-2">
<div>
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-features-icon-color)]">Step 1</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-features-text)] sm:text-4xl">Discover sensitive data automatically</h2>
<p class="mt-4 text-base leading-relaxed text-[var(--ws-features-text-soft)]">Scan every file store, cloud drive, and collaboration tool. Surface unstructured data wherever it lives — without manual inventory work.</p>
<ul class="mt-6 space-y-3">
<li class="flex items-start gap-3 text-sm text-[var(--ws-features-text-soft)]">
<svg class="mt-0.5 h-4 w-4 shrink-0 text-[var(--ws-features-icon-color)]" 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>
Connects to 50+ data sources out of the box
</li>
<li class="flex items-start gap-3 text-sm text-[var(--ws-features-text-soft)]">
<svg class="mt-0.5 h-4 w-4 shrink-0 text-[var(--ws-features-icon-color)]" 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>
No agents, no proxies, no infrastructure changes
</li>
<li class="flex items-start gap-3 text-sm text-[var(--ws-features-text-soft)]">
<svg class="mt-0.5 h-4 w-4 shrink-0 text-[var(--ws-features-icon-color)]" 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>
Continuous re-scan keeps the inventory fresh
</li>
</ul>
</div>
<div class="rounded-2xl border border-[var(--ws-features-border)] bg-[var(--ws-features-card-bg)] p-8 lg:aspect-square lg:flex lg:items-center lg:justify-center">
<div class="w-full space-y-3">
<div class="flex items-center gap-3 rounded-xl bg-[var(--ws-features-border)] px-4 py-3">
<div class="h-6 w-6 rounded-md bg-[var(--ws-features-icon-bg)]"></div>
<div class="h-3 flex-1 rounded bg-[var(--ws-features-text-soft)]/20"></div>
<div class="h-3 w-12 rounded bg-emerald-400/40"></div>
</div>
<div class="flex items-center gap-3 rounded-xl bg-[var(--ws-features-border)] px-4 py-3">
<div class="h-6 w-6 rounded-md bg-[var(--ws-features-icon-bg)]"></div>
<div class="h-3 flex-1 rounded bg-[var(--ws-features-text-soft)]/20"></div>
<div class="h-3 w-12 rounded bg-amber-400/40"></div>
</div>
<div class="flex items-center gap-3 rounded-xl bg-[var(--ws-features-border)] px-4 py-3">
<div class="h-6 w-6 rounded-md bg-[var(--ws-features-icon-bg)]"></div>
<div class="h-3 flex-1 rounded bg-[var(--ws-features-text-soft)]/20"></div>
<div class="h-3 w-12 rounded bg-emerald-400/40"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Band 2: Primary tint bg, visual left -->
<div class="bg-[var(--ws-features-icon-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="grid items-center gap-12 lg:grid-cols-2">
<div class="order-2 rounded-2xl border border-[var(--ws-features-border)]/40 bg-[var(--ws-features-bg)] p-8 lg:order-1 lg:aspect-square lg:flex lg:items-center lg:justify-center">
<div class="w-full space-y-4">
<div class="h-4 w-2/3 rounded-full bg-[var(--ws-features-icon-color)]/20"></div>
<div class="grid grid-cols-3 gap-3">
<div class="rounded-lg bg-[var(--ws-features-icon-color)]/15 p-3 text-center text-xs font-semibold text-[var(--ws-features-icon-color)]">PII</div>
<div class="rounded-lg bg-amber-400/15 p-3 text-center text-xs font-semibold text-amber-600">PHI</div>
<div class="rounded-lg bg-rose-400/15 p-3 text-center text-xs font-semibold text-rose-600">PCI</div>
</div>
<div class="h-3 w-full rounded bg-[var(--ws-features-border)]"></div>
<div class="h-3 w-4/5 rounded bg-[var(--ws-features-border)]"></div>
</div>
</div>
<div class="order-1 lg:order-2">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-features-icon-color)]">Step 2</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-features-text)] sm:text-4xl">Classify with high-fidelity AI</h2>
<p class="mt-4 text-base leading-relaxed text-[var(--ws-features-text-soft)]">Go beyond regex patterns. AI-powered classification understands context — distinguishing between a test SSN and a real one, a draft contract and a signed one.</p>
<ul class="mt-6 space-y-3">
<li class="flex items-start gap-3 text-sm text-[var(--ws-features-text-soft)]">
<svg class="mt-0.5 h-4 w-4 shrink-0 text-[var(--ws-features-icon-color)]" 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>
PII, PHI, PCI, and custom classifiers
</li>
<li class="flex items-start gap-3 text-sm text-[var(--ws-features-text-soft)]">
<svg class="mt-0.5 h-4 w-4 shrink-0 text-[var(--ws-features-icon-color)]" 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>
Confidence scores with human-in-the-loop review
</li>
<li class="flex items-start gap-3 text-sm text-[var(--ws-features-text-soft)]">
<svg class="mt-0.5 h-4 w-4 shrink-0 text-[var(--ws-features-icon-color)]" 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>
Reduces false positives by up to 80%
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Band 3: Neutral bg, text left -->
<div class="bg-[var(--ws-features-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="grid items-center gap-12 lg:grid-cols-2">
<div>
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-features-icon-color)]">Step 3</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-features-text)] sm:text-4xl">Highlight risk before it becomes a breach</h2>
<p class="mt-4 text-base leading-relaxed text-[var(--ws-features-text-soft)]">Surface over-shared files, stale access rights, and exposure paths proactively. Fix risks in hours, not after an incident report.</p>
<ul class="mt-6 space-y-3">
<li class="flex items-start gap-3 text-sm text-[var(--ws-features-text-soft)]">
<svg class="mt-0.5 h-4 w-4 shrink-0 text-[var(--ws-features-icon-color)]" 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>
Risk scoring with priority ranking
</li>
<li class="flex items-start gap-3 text-sm text-[var(--ws-features-text-soft)]">
<svg class="mt-0.5 h-4 w-4 shrink-0 text-[var(--ws-features-icon-color)]" 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>
Automated remediation suggestions
</li>
<li class="flex items-start gap-3 text-sm text-[var(--ws-features-text-soft)]">
<svg class="mt-0.5 h-4 w-4 shrink-0 text-[var(--ws-features-icon-color)]" 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>
Audit trail for every remediation action
</li>
</ul>
</div>
<div class="rounded-2xl border border-[var(--ws-features-border)] bg-[var(--ws-features-card-bg)] p-8 lg:aspect-square lg:flex lg:items-center lg:justify-center">
<div class="w-full space-y-3">
<div class="flex items-center justify-between text-xs">
<span class="font-semibold text-[var(--ws-features-text)]">Risk Overview</span>
<span class="text-[var(--ws-features-text-soft)]">24h</span>
</div>
<div class="flex items-center gap-3">
<div class="h-2 flex-1 rounded-full bg-[var(--ws-features-border)]">
<div class="h-2 w-4/5 rounded-full bg-rose-500"></div>
</div>
<span class="text-xs text-[var(--ws-features-text-soft)]">High</span>
</div>
<div class="flex items-center gap-3">
<div class="h-2 flex-1 rounded-full bg-[var(--ws-features-border)]">
<div class="h-2 w-2/5 rounded-full bg-amber-400"></div>
</div>
<span class="text-xs text-[var(--ws-features-text-soft)]">Medium</span>
</div>
<div class="flex items-center gap-3">
<div class="h-2 flex-1 rounded-full bg-[var(--ws-features-border)]">
<div class="h-2 w-1/5 rounded-full bg-emerald-400"></div>
</div>
<span class="text-xs text-[var(--ws-features-text-soft)]">Low</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Band 4: Dark bg, visual left -->
<div class="bg-[var(--ws-features-text)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="grid items-center gap-12 lg:grid-cols-2">
<div class="order-2 rounded-2xl border border-white/10 bg-white/5 p-8 lg:order-1 lg:aspect-square lg:flex lg:items-center lg:justify-center">
<div class="w-full space-y-3 text-sm">
<div class="flex items-center gap-2 rounded-lg bg-white/10 px-3 py-2">
<div class="h-2 w-2 rounded-full bg-emerald-400"></div>
<span class="text-white/70">Leak prevented — file share blocked</span>
</div>
<div class="flex items-center gap-2 rounded-lg bg-white/10 px-3 py-2">
<div class="h-2 w-2 rounded-full bg-emerald-400"></div>
<span class="text-white/70">Policy updated automatically</span>
</div>
<div class="flex items-center gap-2 rounded-lg bg-white/10 px-3 py-2">
<div class="h-2 w-2 rounded-full bg-amber-400"></div>
<span class="text-white/70">User notified in Slack</span>
</div>
</div>
</div>
<div class="order-1 lg:order-2">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-features-icon-color)]">Step 4</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-white sm:text-4xl">Stop leaks automatically at AI speed</h2>
<p class="mt-4 text-base leading-relaxed text-white/60">Enforce policies in real time as data moves. Block, quarantine, or notify — with enough context to avoid disrupting legitimate work.</p>
<ul class="mt-6 space-y-3">
<li class="flex items-start gap-3 text-sm text-white/60">
<svg class="mt-0.5 h-4 w-4 shrink-0 text-[var(--ws-features-icon-color)]" 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>
Real-time enforcement across all channels
</li>
<li class="flex items-start gap-3 text-sm text-white/60">
<svg class="mt-0.5 h-4 w-4 shrink-0 text-[var(--ws-features-icon-color)]" 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>
Context-aware to minimize false blocks
</li>
<li class="flex items-start gap-3 text-sm text-white/60">
<svg class="mt-0.5 h-4 w-4 shrink-0 text-[var(--ws-features-icon-color)]" 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>
Integrates with SIEM, SOAR, and ticketing tools
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
featurescolor-bandedbandsalternatingstepshow-it-workssaasdark-band
Slots
| Name | Required | Description |
|---|---|---|
| bands | Yes | Four full-width background bands, each containing a two-column feature with text and visual mockup. |
Four full-width feature bands stacked vertically, each with its own background color (neutral → primary tint → neutral → dark). Layout alternates text-left and visual-right. The dark closing band creates a visual climax before the next section. Replace the UI mockup placeholders with screenshots, videos, or illustrations.