use-cases departments teams tabs interactive enterprise saas ai mockup use-cases departments teams enterprise tabs switcher personas ai-platform use case section by department enterprise feature showcase by team tab switcher for different personas
Use Case Matrix by Department
Fetch pattern JSON:
curl https://webspire.de/patterns/use-case-matrix/department-tabs.json department-tabs.html
<section class="ws-use-case-matrix bg-[var(--ws-use-case-matrix-bg)] 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-use-case-matrix-accent)]">Use cases</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-use-case-matrix-text)] sm:text-4xl">Built for every team in your organization</h2>
<p class="mt-4 text-lg text-[var(--ws-use-case-matrix-text-soft)]">One platform, tailored workflows for every department.</p>
</div>
<!-- Department tab bar -->
<div class="mt-12 flex flex-wrap justify-center gap-2" role="tablist" aria-label="Department use cases">
<button role="tab" aria-selected="true" aria-controls="dept-panel-1" id="dept-tab-1" data-dept="1"
class="ws-dept-tab rounded-full border border-[var(--ws-use-case-matrix-border)] bg-[var(--ws-use-case-matrix-card-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-use-case-matrix-text)] transition-all hover:border-[var(--ws-use-case-matrix-accent)] data-[active]:border-[var(--ws-use-case-matrix-accent)] data-[active]:bg-[var(--ws-use-case-matrix-accent)] data-[active]:text-white">
Customer Service
</button>
<button role="tab" aria-selected="false" aria-controls="dept-panel-2" id="dept-tab-2" data-dept="2"
class="ws-dept-tab rounded-full border border-[var(--ws-use-case-matrix-border)] bg-[var(--ws-use-case-matrix-card-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-use-case-matrix-text)] transition-all hover:border-[var(--ws-use-case-matrix-accent)] data-[active]:border-[var(--ws-use-case-matrix-accent)] data-[active]:bg-[var(--ws-use-case-matrix-accent)] data-[active]:text-white">
HR & People
</button>
<button role="tab" aria-selected="false" aria-controls="dept-panel-3" id="dept-tab-3" data-dept="3"
class="ws-dept-tab rounded-full border border-[var(--ws-use-case-matrix-border)] bg-[var(--ws-use-case-matrix-card-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-use-case-matrix-text)] transition-all hover:border-[var(--ws-use-case-matrix-accent)] data-[active]:border-[var(--ws-use-case-matrix-accent)] data-[active]:bg-[var(--ws-use-case-matrix-accent)] data-[active]:text-white">
Legal
</button>
<button role="tab" aria-selected="false" aria-controls="dept-panel-4" id="dept-tab-4" data-dept="4"
class="ws-dept-tab rounded-full border border-[var(--ws-use-case-matrix-border)] bg-[var(--ws-use-case-matrix-card-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-use-case-matrix-text)] transition-all hover:border-[var(--ws-use-case-matrix-accent)] data-[active]:border-[var(--ws-use-case-matrix-accent)] data-[active]:bg-[var(--ws-use-case-matrix-accent)] data-[active]:text-white">
Finance
</button>
<button role="tab" aria-selected="false" aria-controls="dept-panel-5" id="dept-tab-5" data-dept="5"
class="ws-dept-tab rounded-full border border-[var(--ws-use-case-matrix-border)] bg-[var(--ws-use-case-matrix-card-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-use-case-matrix-text)] transition-all hover:border-[var(--ws-use-case-matrix-accent)] data-[active]:border-[var(--ws-use-case-matrix-accent)] data-[active]:bg-[var(--ws-use-case-matrix-accent)] data-[active]:text-white">
Marketing
</button>
<button role="tab" aria-selected="false" aria-controls="dept-panel-6" id="dept-tab-6" data-dept="6"
class="ws-dept-tab rounded-full border border-[var(--ws-use-case-matrix-border)] bg-[var(--ws-use-case-matrix-card-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-use-case-matrix-text)] transition-all hover:border-[var(--ws-use-case-matrix-accent)] data-[active]:border-[var(--ws-use-case-matrix-accent)] data-[active]:bg-[var(--ws-use-case-matrix-accent)] data-[active]:text-white">
IT & Engineering
</button>
</div>
<!-- Panel area -->
<div class="relative mt-8 overflow-hidden rounded-2xl border border-[var(--ws-use-case-matrix-border)] bg-[var(--ws-use-case-matrix-card-bg)]">
<div id="dept-panel-1" role="tabpanel" aria-labelledby="dept-tab-1" class="ws-dept-panel grid gap-0 lg:grid-cols-2">
<div class="flex flex-col justify-center p-8 lg:p-12">
<span class="inline-flex w-fit items-center gap-1.5 rounded-full bg-[var(--ws-use-case-matrix-accent)]/10 px-3 py-1 text-xs font-medium text-[var(--ws-use-case-matrix-accent)]">Customer Service</span>
<h3 class="mt-4 text-2xl font-bold text-[var(--ws-use-case-matrix-text)]">Resolve tickets faster with AI-powered routing</h3>
<p class="mt-3 text-[var(--ws-use-case-matrix-text-soft)]">Automatically classify, prioritize, and route incoming support requests. Your agents focus on complex cases while the AI handles repetitive queries around the clock.</p>
<ul class="mt-6 space-y-2">
<li class="flex items-center gap-2 text-sm text-[var(--ws-use-case-matrix-text-soft)]"><svg class="h-4 w-4 shrink-0 text-[var(--ws-use-case-matrix-accent)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Auto-triage by intent, urgency, and language</li>
<li class="flex items-center gap-2 text-sm text-[var(--ws-use-case-matrix-text-soft)]"><svg class="h-4 w-4 shrink-0 text-[var(--ws-use-case-matrix-accent)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Suggested replies from your knowledge base</li>
<li class="flex items-center gap-2 text-sm text-[var(--ws-use-case-matrix-text-soft)]"><svg class="h-4 w-4 shrink-0 text-[var(--ws-use-case-matrix-accent)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>CSAT improvement with fewer escalations</li>
</ul>
<a href="#" class="mt-8 inline-flex items-center gap-1 text-sm font-medium text-[var(--ws-use-case-matrix-accent)] hover:underline">See how it works <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></a>
</div>
<div class="flex items-center justify-center border-t border-[var(--ws-use-case-matrix-border)] bg-[var(--ws-use-case-matrix-bg)] p-8 lg:border-l lg:border-t-0">
<div class="w-full max-w-sm space-y-3">
<div class="flex justify-end"><div class="max-w-[75%] rounded-2xl rounded-tr-sm bg-[var(--ws-use-case-matrix-accent)] px-4 py-3 text-sm text-white">My order hasn't arrived yet — it's been 5 days.</div></div>
<div class="flex justify-start"><div class="max-w-[75%] rounded-2xl rounded-tl-sm border border-[var(--ws-use-case-matrix-border)] px-4 py-3 text-sm text-[var(--ws-use-case-matrix-text)]">I'm sorry for the delay! Let me check your order status right away. I can see order #4821 — it's currently with the carrier and expected tomorrow by 6pm. Would you like me to send a tracking link?</div></div>
<div class="flex justify-end"><div class="max-w-[75%] rounded-2xl rounded-tr-sm bg-[var(--ws-use-case-matrix-accent)] px-4 py-3 text-sm text-white">Yes please, and can you also initiate a refund just in case?</div></div>
<div class="flex justify-start"><div class="max-w-[75%] rounded-2xl rounded-tl-sm border border-[var(--ws-use-case-matrix-border)] px-4 py-3 text-sm text-[var(--ws-use-case-matrix-text)]">Done! Tracking link sent to your email. I've also flagged the refund request — a human agent will confirm within 2 hours. Is there anything else I can help with?</div></div>
</div>
</div>
</div>
<div id="dept-panel-2" role="tabpanel" aria-labelledby="dept-tab-2" class="ws-dept-panel hidden grid gap-0 lg:grid-cols-2">
<div class="flex flex-col justify-center p-8 lg:p-12">
<span class="inline-flex w-fit items-center gap-1.5 rounded-full bg-[var(--ws-use-case-matrix-accent)]/10 px-3 py-1 text-xs font-medium text-[var(--ws-use-case-matrix-accent)]">HR & People</span>
<h3 class="mt-4 text-2xl font-bold text-[var(--ws-use-case-matrix-text)]">Streamline onboarding and employee support</h3>
<p class="mt-3 text-[var(--ws-use-case-matrix-text-soft)]">Give every new hire a personalized onboarding guide and let employees self-serve answers to policy questions — without HR fielding the same questions repeatedly.</p>
<ul class="mt-6 space-y-2">
<li class="flex items-center gap-2 text-sm text-[var(--ws-use-case-matrix-text-soft)]"><svg class="h-4 w-4 shrink-0 text-[var(--ws-use-case-matrix-accent)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>AI onboarding assistant for day-1 questions</li>
<li class="flex items-center gap-2 text-sm text-[var(--ws-use-case-matrix-text-soft)]"><svg class="h-4 w-4 shrink-0 text-[var(--ws-use-case-matrix-accent)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Policy Q&A grounded in your HR documentation</li>
<li class="flex items-center gap-2 text-sm text-[var(--ws-use-case-matrix-text-soft)]"><svg class="h-4 w-4 shrink-0 text-[var(--ws-use-case-matrix-accent)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Automated contract and offer letter drafts</li>
</ul>
<a href="#" class="mt-8 inline-flex items-center gap-1 text-sm font-medium text-[var(--ws-use-case-matrix-accent)] hover:underline">See how it works <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></a>
</div>
<div class="flex items-center justify-center border-t border-[var(--ws-use-case-matrix-border)] bg-[var(--ws-use-case-matrix-bg)] p-8 lg:border-l lg:border-t-0">
<div class="w-full max-w-sm space-y-3">
<div class="flex justify-end"><div class="max-w-[75%] rounded-2xl rounded-tr-sm bg-[var(--ws-use-case-matrix-accent)] px-4 py-3 text-sm text-white">What's the parental leave policy for contractors?</div></div>
<div class="flex justify-start"><div class="max-w-[75%] rounded-2xl rounded-tl-sm border border-[var(--ws-use-case-matrix-border)] px-4 py-3 text-sm text-[var(--ws-use-case-matrix-text)]">Based on the 2025 contractor policy (updated March): contractors engaged for 12+ months are eligible for up to 8 weeks of paid parental leave. Shorter engagements may qualify for unpaid leave. Would you like me to pull the full policy document?</div></div>
</div>
</div>
</div>
<div id="dept-panel-3" role="tabpanel" aria-labelledby="dept-tab-3" class="ws-dept-panel hidden grid gap-0 lg:grid-cols-2">
<div class="flex flex-col justify-center p-8 lg:p-12">
<span class="inline-flex w-fit items-center gap-1.5 rounded-full bg-[var(--ws-use-case-matrix-accent)]/10 px-3 py-1 text-xs font-medium text-[var(--ws-use-case-matrix-accent)]">Legal</span>
<h3 class="mt-4 text-2xl font-bold text-[var(--ws-use-case-matrix-text)]">Review contracts and surface risk in seconds</h3>
<p class="mt-3 text-[var(--ws-use-case-matrix-text-soft)]">Upload any agreement and get a structured risk summary, missing clause flags, and plain-language explanations — in a fraction of the time it takes manually.</p>
<ul class="mt-6 space-y-2">
<li class="flex items-center gap-2 text-sm text-[var(--ws-use-case-matrix-text-soft)]"><svg class="h-4 w-4 shrink-0 text-[var(--ws-use-case-matrix-accent)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Clause extraction and deviation detection</li>
<li class="flex items-center gap-2 text-sm text-[var(--ws-use-case-matrix-text-soft)]"><svg class="h-4 w-4 shrink-0 text-[var(--ws-use-case-matrix-accent)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Risk scoring with citation links</li>
<li class="flex items-center gap-2 text-sm text-[var(--ws-use-case-matrix-text-soft)]"><svg class="h-4 w-4 shrink-0 text-[var(--ws-use-case-matrix-accent)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Redline suggestions in standard clause language</li>
</ul>
<a href="#" class="mt-8 inline-flex items-center gap-1 text-sm font-medium text-[var(--ws-use-case-matrix-accent)] hover:underline">See how it works <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></a>
</div>
<div class="flex items-center justify-center border-t border-[var(--ws-use-case-matrix-border)] bg-[var(--ws-use-case-matrix-bg)] p-8 lg:border-l lg:border-t-0">
<div class="w-full max-w-sm rounded-xl border border-[var(--ws-use-case-matrix-border)] p-5 text-sm">
<p class="font-semibold text-[var(--ws-use-case-matrix-text)]">Risk Summary — Vendor MSA</p>
<div class="mt-4 space-y-2">
<div class="flex items-start gap-2"><span class="mt-0.5 h-2 w-2 shrink-0 rounded-full bg-red-500"></span><p class="text-[var(--ws-use-case-matrix-text-soft)]"><span class="font-medium text-[var(--ws-use-case-matrix-text)]">Unlimited liability</span> — clause 8.2 has no liability cap. Standard is 12× monthly fees.</p></div>
<div class="flex items-start gap-2"><span class="mt-0.5 h-2 w-2 shrink-0 rounded-full bg-amber-500"></span><p class="text-[var(--ws-use-case-matrix-text-soft)]"><span class="font-medium text-[var(--ws-use-case-matrix-text)]">Missing IP assignment</span> — no clause covering work product ownership.</p></div>
<div class="flex items-start gap-2"><span class="mt-0.5 h-2 w-2 shrink-0 rounded-full bg-emerald-500"></span><p class="text-[var(--ws-use-case-matrix-text-soft)]"><span class="font-medium text-[var(--ws-use-case-matrix-text)]">Termination</span> — 30-day notice clause is standard. No issues found.</p></div>
</div>
</div>
</div>
</div>
<div id="dept-panel-4" role="tabpanel" aria-labelledby="dept-tab-4" class="ws-dept-panel hidden grid gap-0 lg:grid-cols-2">
<div class="flex flex-col justify-center p-8 lg:p-12">
<span class="inline-flex w-fit items-center gap-1.5 rounded-full bg-[var(--ws-use-case-matrix-accent)]/10 px-3 py-1 text-xs font-medium text-[var(--ws-use-case-matrix-accent)]">Finance</span>
<h3 class="mt-4 text-2xl font-bold text-[var(--ws-use-case-matrix-text)]">Automate reports and surface anomalies instantly</h3>
<p class="mt-3 text-[var(--ws-use-case-matrix-text-soft)]">Stop manually compiling spreadsheets. Generate financial summaries, flag unusual transactions, and answer ad-hoc queries against your live data.</p>
<ul class="mt-6 space-y-2">
<li class="flex items-center gap-2 text-sm text-[var(--ws-use-case-matrix-text-soft)]"><svg class="h-4 w-4 shrink-0 text-[var(--ws-use-case-matrix-accent)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Auto-generated monthly close summaries</li>
<li class="flex items-center gap-2 text-sm text-[var(--ws-use-case-matrix-text-soft)]"><svg class="h-4 w-4 shrink-0 text-[var(--ws-use-case-matrix-accent)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Anomaly detection on expense data</li>
<li class="flex items-center gap-2 text-sm text-[var(--ws-use-case-matrix-text-soft)]"><svg class="h-4 w-4 shrink-0 text-[var(--ws-use-case-matrix-accent)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Natural language queries across financial data</li>
</ul>
<a href="#" class="mt-8 inline-flex items-center gap-1 text-sm font-medium text-[var(--ws-use-case-matrix-accent)] hover:underline">See how it works <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></a>
</div>
<div class="flex items-center justify-center border-t border-[var(--ws-use-case-matrix-border)] bg-[var(--ws-use-case-matrix-bg)] p-8 lg:border-l lg:border-t-0">
<div class="w-full max-w-sm space-y-3">
<div class="flex justify-end"><div class="max-w-[75%] rounded-2xl rounded-tr-sm bg-[var(--ws-use-case-matrix-accent)] px-4 py-3 text-sm text-white">What was our net margin in Q1 vs Q4 last year?</div></div>
<div class="flex justify-start"><div class="max-w-[75%] rounded-2xl rounded-tl-sm border border-[var(--ws-use-case-matrix-border)] px-4 py-3 text-sm text-[var(--ws-use-case-matrix-text)]">Q1 2026: 18.4% net margin (↑2.1pp vs Q4 2025). Revenue grew 11% but COGS declined due to the Q4 vendor renegotiation. Want me to break this down by business unit?</div></div>
</div>
</div>
</div>
<div id="dept-panel-5" role="tabpanel" aria-labelledby="dept-tab-5" class="ws-dept-panel hidden grid gap-0 lg:grid-cols-2">
<div class="flex flex-col justify-center p-8 lg:p-12">
<span class="inline-flex w-fit items-center gap-1.5 rounded-full bg-[var(--ws-use-case-matrix-accent)]/10 px-3 py-1 text-xs font-medium text-[var(--ws-use-case-matrix-accent)]">Marketing</span>
<h3 class="mt-4 text-2xl font-bold text-[var(--ws-use-case-matrix-text)]">Scale content creation without scaling headcount</h3>
<p class="mt-3 text-[var(--ws-use-case-matrix-text-soft)]">Produce on-brand blog posts, social copy, and campaign briefs at 10× the speed. Your team stays in control of strategy while AI handles the first draft.</p>
<ul class="mt-6 space-y-2">
<li class="flex items-center gap-2 text-sm text-[var(--ws-use-case-matrix-text-soft)]"><svg class="h-4 w-4 shrink-0 text-[var(--ws-use-case-matrix-accent)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Brand voice configuration per campaign type</li>
<li class="flex items-center gap-2 text-sm text-[var(--ws-use-case-matrix-text-soft)]"><svg class="h-4 w-4 shrink-0 text-[var(--ws-use-case-matrix-accent)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Multi-format output from a single brief</li>
<li class="flex items-center gap-2 text-sm text-[var(--ws-use-case-matrix-text-soft)]"><svg class="h-4 w-4 shrink-0 text-[var(--ws-use-case-matrix-accent)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>SEO keyword integration built in</li>
</ul>
<a href="#" class="mt-8 inline-flex items-center gap-1 text-sm font-medium text-[var(--ws-use-case-matrix-accent)] hover:underline">See how it works <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></a>
</div>
<div class="flex items-center justify-center border-t border-[var(--ws-use-case-matrix-border)] bg-[var(--ws-use-case-matrix-bg)] p-8 lg:border-l lg:border-t-0">
<div class="w-full max-w-sm space-y-3">
<div class="flex justify-end"><div class="max-w-[75%] rounded-2xl rounded-tr-sm bg-[var(--ws-use-case-matrix-accent)] px-4 py-3 text-sm text-white">Write a LinkedIn post announcing our Series B for a technical audience.</div></div>
<div class="flex justify-start"><div class="max-w-[75%] rounded-2xl rounded-tl-sm border border-[var(--ws-use-case-matrix-border)] px-4 py-3 text-sm text-[var(--ws-use-case-matrix-text)]">🚀 Excited to announce we've raised our Series B — not to slow down, but to go deeper. We're doubling the engineering team, opening our self-hosted tier to all enterprise customers, and shipping the features our community has been asking for…</div></div>
</div>
</div>
</div>
<div id="dept-panel-6" role="tabpanel" aria-labelledby="dept-tab-6" class="ws-dept-panel hidden grid gap-0 lg:grid-cols-2">
<div class="flex flex-col justify-center p-8 lg:p-12">
<span class="inline-flex w-fit items-center gap-1.5 rounded-full bg-[var(--ws-use-case-matrix-accent)]/10 px-3 py-1 text-xs font-medium text-[var(--ws-use-case-matrix-accent)]">IT & Engineering</span>
<h3 class="mt-4 text-2xl font-bold text-[var(--ws-use-case-matrix-text)]">Automate ops tasks and internal tooling</h3>
<p class="mt-3 text-[var(--ws-use-case-matrix-text-soft)]">Build internal AI tools without a dedicated ML team. From incident triage to knowledge-base search, ship workflows your engineers will actually use.</p>
<ul class="mt-6 space-y-2">
<li class="flex items-center gap-2 text-sm text-[var(--ws-use-case-matrix-text-soft)]"><svg class="h-4 w-4 shrink-0 text-[var(--ws-use-case-matrix-accent)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Incident summarization from runbooks and logs</li>
<li class="flex items-center gap-2 text-sm text-[var(--ws-use-case-matrix-text-soft)]"><svg class="h-4 w-4 shrink-0 text-[var(--ws-use-case-matrix-accent)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Internal code review assistant</li>
<li class="flex items-center gap-2 text-sm text-[var(--ws-use-case-matrix-text-soft)]"><svg class="h-4 w-4 shrink-0 text-[var(--ws-use-case-matrix-accent)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Deploy via REST API or webhook triggers</li>
</ul>
<a href="#" class="mt-8 inline-flex items-center gap-1 text-sm font-medium text-[var(--ws-use-case-matrix-accent)] hover:underline">See how it works <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></a>
</div>
<div class="flex items-center justify-center border-t border-[var(--ws-use-case-matrix-border)] bg-[var(--ws-use-case-matrix-bg)] p-8 lg:border-l lg:border-t-0">
<div class="w-full max-w-sm rounded-xl border border-[var(--ws-use-case-matrix-border)] bg-stone-950 p-5 font-mono text-xs text-green-400"> <!-- ws-ok: terminal/code editor dark background -->
<p class="text-stone-500">$ curl api.acme.com/run</p>
<p class="mt-2">POST /v1/workflows/incident-triage</p>
<p class="mt-2 text-stone-400">{"severity": "P1", "service": "auth"}</p>
<p class="mt-4 text-green-300">→ Runbook match: auth-outage-v3</p>
<p class="mt-1">→ Suggested action: restart pod auth-7c9</p>
<p class="mt-1">→ Escalate to: @oncall-infra</p>
</div>
</div>
</div>
</div>
</div>
<script>
const tabs = document.querySelectorAll('.ws-dept-tab');
const panels = document.querySelectorAll('.ws-dept-panel');
tabs.forEach((tab) => {
tab.addEventListener('click', () => {
const target = tab.dataset.dept;
tabs.forEach((t) => { t.setAttribute('aria-selected', 'false'); t.removeAttribute('data-active'); });
panels.forEach((p) => p.classList.add('hidden'));
tab.setAttribute('aria-selected', 'true');
tab.setAttribute('data-active', '');
const panel = document.getElementById('dept-panel-' + target);
if (panel) panel.classList.remove('hidden');
});
});
</script>
</section>
Details
Responsive Dark Mode Tailwind Only Copy & Paste Requires JS
Stable Published
use-casesdepartmentsteamstabsinteractiveenterprisesaasaimockup
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Section title and eyebrow. |
| tabs | Yes | Department pill buttons (Customer Service, HR, Legal, Finance, Marketing, IT). |
| panels | Yes | Split panels — left side with benefits list, right side with a UI mockup or chat demo. |
Horizontal pill tab navigation by department — clicking a tab reveals a two-column panel with a feature/benefit list on the left and a contextual mockup (chat conversation, risk report, terminal, etc.) on the right. Popularized by enterprise AI platform landing pages (Dify, etc.) to show horizontal applicability across an organization without overwhelming the user with a feature dump.