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

Family
features
Tier
enhanced
Kind
section
Extends
features/alternating
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.