96 lines
6.0 KiB
HTML
96 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Complaint Detail — Redesign Options</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Kufi+Arabic:wght@400;500;700&display=swap" rel="stylesheet">
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
navy: '#005696',
|
|
blue: { DEFAULT: '#007bbd', light: '#eff6fb' },
|
|
light: '#eef6fb',
|
|
},
|
|
fontFamily: { sans: ['Inter', 'Noto Kufi Arabic', 'sans-serif'] },
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style>body{font-family:'Inter','Noto Kufi Arabic',sans-serif;}</style>
|
|
</head>
|
|
<body class="bg-slate-100 min-h-screen">
|
|
<div class="max-w-5xl mx-auto px-6 py-12">
|
|
<header class="mb-10">
|
|
<p class="text-xs font-bold tracking-widest text-navy uppercase mb-2">PX360 · Complaint Detail Redesign</p>
|
|
<h1 class="text-3xl md:text-4xl font-extrabold text-slate-800">Four directions to choose from</h1>
|
|
<p class="text-slate-500 mt-3 max-w-2xl">
|
|
The current page is cluttered: 8 tabs, a wall of buttons, and actions hidden behind an "activate" gate.
|
|
Each option below kills that complexity in a different way. All three are responsive and RTL-ready,
|
|
and use the same realistic case data so you can compare apples-to-apples.
|
|
</p>
|
|
</header>
|
|
|
|
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
|
<!-- A -->
|
|
<a href="sample-a.html" class="group bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl hover:-translate-y-1 transition">
|
|
<div class="h-32 bg-gradient-to-br from-navy to-blue flex items-center justify-center">
|
|
<svg class="w-12 h-12 text-white/90" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h10"/></svg>
|
|
</div>
|
|
<div class="p-5">
|
|
<p class="text-[10px] font-bold tracking-widest text-blue uppercase">Option A</p>
|
|
<h2 class="text-lg font-bold text-slate-800 mt-1">Linear Reader</h2>
|
|
<p class="text-sm text-slate-500 mt-2">Zero tabs. Reads like a clean article with a sticky action bar at the bottom. Simplest of the three.</p>
|
|
<span class="inline-flex items-center gap-1 text-sm font-bold text-navy mt-4 group-hover:gap-2 transition-all">View <span aria-hidden>→</span></span>
|
|
</div>
|
|
</a>
|
|
<!-- B -->
|
|
<a href="sample-b.html" class="group bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl hover:-translate-y-1 transition">
|
|
<div class="h-32 bg-gradient-to-br from-slate-700 to-navy flex items-center justify-center">
|
|
<svg class="w-12 h-12 text-white/90" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 5h7v14H4zM13 5h7v7h-7zM13 15h7v4h-7z"/></svg>
|
|
</div>
|
|
<div class="p-5">
|
|
<p class="text-[10px] font-bold tracking-widest text-blue uppercase">Option B</p>
|
|
<h2 class="text-lg font-bold text-slate-800 mt-1">Workspace Dashboard</h2>
|
|
<p class="text-sm text-slate-500 mt-2">Familiar two-column layout. A smart "Next Step" card and a tidy actions menu replace the button wall.</p>
|
|
<span class="inline-flex items-center gap-1 text-sm font-bold text-navy mt-4 group-hover:gap-2 transition-all">View <span aria-hidden>→</span></span>
|
|
</div>
|
|
</a>
|
|
<!-- C -->
|
|
<a href="sample-c.html" class="group bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl hover:-translate-y-1 transition">
|
|
<div class="h-32 bg-gradient-to-br from-blue to-emerald-500 flex items-center justify-center">
|
|
<svg class="w-12 h-12 text-white/90" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 8h10M5 8l3-3M5 8l3 3M19 16H9m10 0l-3-3m3 3l-3 3"/></svg>
|
|
</div>
|
|
<div class="p-5">
|
|
<p class="text-[10px] font-bold tracking-widest text-blue uppercase">Option C</p>
|
|
<h2 class="text-lg font-bold text-slate-800 mt-1">Workflow Stepper</h2>
|
|
<p class="text-sm text-slate-500 mt-2">A big lifecycle stepper shows exactly where the case is, with one context-aware primary action. Best for guiding staff.</p>
|
|
<span class="inline-flex items-center gap-1 text-sm font-bold text-navy mt-4 group-hover:gap-2 transition-all">View <span aria-hidden>→</span></span>
|
|
</div>
|
|
</a>
|
|
<!-- D -->
|
|
<a href="sample-d.html" class="group bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl hover:-translate-y-1 transition sm:col-span-2 lg:col-span-1">
|
|
<div class="h-32 bg-gradient-to-br from-indigo-600 to-navy flex items-center justify-center">
|
|
<svg class="w-12 h-12 text-white/90" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 5h10v10H4zM15 9h5v10h-5zM8 19h4"/></svg>
|
|
</div>
|
|
<div class="p-5">
|
|
<p class="text-[10px] font-bold tracking-widest text-blue uppercase">Option D</p>
|
|
<h2 class="text-lg font-bold text-slate-800 mt-1">Detail + Modals</h2>
|
|
<p class="text-sm text-slate-500 mt-2">Only the core details live on the page. Departments, Activity, AI, Resolution all open in modals on demand — cleanest canvas.</p>
|
|
<span class="inline-flex items-center gap-1 text-sm font-bold text-navy mt-4 group-hover:gap-2 transition-all">View <span aria-hidden>→</span></span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<footer class="mt-12 text-center">
|
|
<a href="sample-a.html" class="text-sm font-semibold text-slate-500 hover:text-navy">Start with Option A →</a>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|