portfolio case-study project detail results case-study project detail challenge solution result detailed case study page project showcase with challenge and results
Portfolio Case Study
Fetch pattern JSON:
curl https://webspire.de/patterns/portfolio/case-study.json case-study.html
<section class="ws-portfolio bg-[var(--ws-portfolio-bg)] px-6 py-20">
<div class="mx-auto max-w-5xl">
<!-- Hero image -->
<div class="flex aspect-[21/9] items-center justify-center rounded-2xl bg-gradient-to-br from-indigo-200 to-violet-300 dark:from-indigo-800 dark:to-violet-700" role="img" aria-label="Project Horizon case study hero">
<svg class="h-16 w-16 text-white/60" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/></svg>
</div>
<!-- Header -->
<div class="mt-8">
<p class="text-sm font-medium text-[var(--ws-portfolio-text-soft)]">Client: Horizon Technologies</p>
<h1 class="mt-2 text-3xl font-bold tracking-tight text-[var(--ws-portfolio-text)] sm:text-4xl">Redesigning the Horizon Analytics Platform</h1>
<p class="mt-4 text-base leading-relaxed text-[var(--ws-portfolio-text-soft)]">Horizon Technologies needed a complete overhaul of their analytics dashboard. The existing interface suffered from information overload, poor navigation patterns, and inconsistent visual treatment. We redesigned the platform from the ground up using a token-driven design system that reduced onboarding time by 60%.</p>
</div>
<!-- Challenge / Solution / Result -->
<div class="mt-12 grid gap-8 sm:grid-cols-3">
<div class="rounded-xl border border-[var(--ws-portfolio-border)] p-6">
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-red-100 text-red-600">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/></svg>
</div>
<h3 class="mt-4 text-sm font-semibold text-[var(--ws-portfolio-text)]">Challenge</h3>
<p class="mt-2 text-sm text-[var(--ws-portfolio-text-soft)]">Legacy dashboard with 200+ screens, no design system, and a 45-minute average onboarding time for new users.</p>
</div>
<div class="rounded-xl border border-[var(--ws-portfolio-border)] p-6">
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"/></svg>
</div>
<h3 class="mt-4 text-sm font-semibold text-[var(--ws-portfolio-text)]">Solution</h3>
<p class="mt-2 text-sm text-[var(--ws-portfolio-text-soft)]">Built a modular design system with 40 components, introduced progressive disclosure, and unified the visual language with semantic tokens.</p>
</div>
<div class="rounded-xl border border-[var(--ws-portfolio-border)] p-6">
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-100 text-emerald-600">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"/></svg>
</div>
<h3 class="mt-4 text-sm font-semibold text-[var(--ws-portfolio-text)]">Result</h3>
<p class="mt-2 text-sm text-[var(--ws-portfolio-text-soft)]">60% faster onboarding, 35% increase in daily active users, and 90% design consistency score across all screens.</p>
</div>
</div>
<!-- CTA -->
<div class="mt-12 text-center">
<a href="#" class="inline-flex rounded-xl bg-[var(--ws-portfolio-action-bg)] px-6 py-3 text-sm font-semibold text-[var(--ws-portfolio-action-text)] transition hover:opacity-90">View live site →</a>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
portfoliocase-studyprojectdetailresults
Slots
| Name | Required | Description |
|---|---|---|
| heroImage | Yes | Wide project hero image. |
| header | Yes | Client name, project title, and description. |
| metrics | Yes | Challenge, Solution, Result cards. |
| cta | No | View live site button. |
Case study variant for detailed project showcases. Includes a wide hero image, client name, project title, description paragraph, and a three-column grid of Challenge, Solution, and Result cards with colored icons. Ends with a “View live site” CTA.