workflow-showcase.htmlβ’18.7 kB
<!-- Workflow Showcase Section -->
<section class="py-24 bg-slate-800 relative overflow-hidden">
<!-- Background Elements -->
<div class="absolute inset-0 opacity-5">
<div
class="absolute top-1/3 -left-48 w-96 h-96 rounded-full"
style="
background: radial-gradient(circle, var(--electric-blue), transparent);
"
></div>
<div
class="absolute bottom-1/3 -right-48 w-96 h-96 rounded-full"
style="
background: radial-gradient(circle, var(--mint-green), transparent);
"
></div>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<!-- Section Header -->
<div class="text-center mb-16">
<div
class="inline-flex items-center px-4 py-2 rounded-full mb-6"
style="
background-color: rgba(245, 166, 35, 0.2);
border: 1px solid rgba(245, 166, 35, 0.3);
"
>
<i
class="fas fa-play-circle mr-2"
style="color: var(--honey-amber)"
></i>
<span class="text-sm font-medium uppercase tracking-wider"
>See It In Action</span
>
</div>
<h2 class="text-4xl md:text-5xl font-bold mb-6">
Watch the <span class="gradient-text">Three Pillars Unite</span>
</h2>
<p class="text-xl text-slate-300 max-w-3xl mx-auto">
Follow a real user authentication system from chaos to completion,
showcasing how intelligent guidance, seamless transitions, and beautiful
reports work together
</p>
</div>
<!-- Interactive Timeline -->
<div class="max-w-6xl mx-auto">
<!-- Timeline Header -->
<div class="text-center mb-12">
<h3 class="text-2xl font-bold mb-4">
Building a User Authentication System
</h3>
<div class="flex items-center justify-center space-x-4 text-sm">
<span class="text-slate-400">Timeline:</span>
<span class="text-green-400 font-semibold">2 days</span>
<span class="text-slate-400">β’</span>
<span class="text-slate-400">Defects:</span>
<span class="text-green-400 font-semibold">0</span>
<span class="text-slate-400">β’</span>
<span class="text-slate-400">Context Loss:</span>
<span class="text-green-400 font-semibold">0%</span>
</div>
</div>
<!-- Timeline Steps -->
<div class="relative">
<!-- Timeline Line -->
<div
class="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-to-b from-blue-500 via-green-500 to-purple-500"
></div>
<!-- Step 1: Product Manager Initialization -->
<div class="relative mb-16">
<div class="flex items-center">
<div class="w-1/2 text-right pr-8">
<div
class="bg-slate-900 rounded-xl p-6 inline-block text-left max-w-md"
>
<div class="flex items-center mb-3">
<div
class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mr-3"
>
<span class="text-white font-bold">1</span>
</div>
<h4 class="text-lg font-bold text-blue-400">
Product Manager Role
</h4>
</div>
<p class="text-sm text-slate-300 mb-3">
Strategic project initialization
</p>
<div class="code-block text-xs p-3">
<code
>bootstrap_workflow({ projectPath: "./auth-system" })</code
>
</div>
<div class="mt-3 text-xs text-slate-400">
<i class="fas fa-clock mr-1"></i>Day 1, 9:00 AM
</div>
</div>
</div>
<div class="w-1/2 pl-8">
<div
class="bg-blue-900/20 rounded-lg p-4 border border-blue-500/30"
>
<h5 class="font-semibold text-blue-400 mb-2">
π― Intelligent Guidance Activated
</h5>
<ul class="text-sm text-slate-300 space-y-1">
<li>β’ Git repository initialized</li>
<li>β’ Task structure created</li>
<li>β’ Quality gates established</li>
</ul>
</div>
</div>
</div>
<div
class="absolute left-1/2 transform -translate-x-1/2 w-6 h-6 bg-blue-500 rounded-full border-4 border-slate-800"
></div>
</div>
<!-- Step 2: Researcher Analysis -->
<div class="relative mb-16">
<div class="flex items-center">
<div class="w-1/2 text-right pr-8">
<div
class="bg-green-900/20 rounded-lg p-4 border border-green-500/30"
>
<h5 class="font-semibold text-green-400 mb-2">
π Seamless Transition
</h5>
<p class="text-sm text-slate-300">
All project context transferred to Researcher role
</p>
</div>
</div>
<div class="w-1/2 pl-8">
<div class="bg-slate-900 rounded-xl p-6 inline-block max-w-md">
<div class="flex items-center mb-3">
<div
class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center mr-3"
>
<span class="text-white font-bold">2</span>
</div>
<h4 class="text-lg font-bold text-green-400">
Researcher Role
</h4>
</div>
<p class="text-sm text-slate-300 mb-3">
Evidence-based technology research
</p>
<div class="bg-slate-800 rounded p-3 text-xs">
<div class="font-mono text-green-400">
get_step_guidance()
</div>
<div class="text-slate-400 mt-1">
β Research JWT, OAuth2, Session tokens
</div>
<div class="text-slate-400">
β Analyze security implications
</div>
<div class="text-slate-400">β Document recommendations</div>
</div>
<div class="mt-3 text-xs text-slate-400">
<i class="fas fa-clock mr-1"></i>Day 1, 10:30 AM
</div>
</div>
</div>
</div>
<div
class="absolute left-1/2 transform -translate-x-1/2 w-6 h-6 bg-green-500 rounded-full border-4 border-slate-800"
></div>
</div>
<!-- Step 3: Architect Design -->
<div class="relative mb-16">
<div class="flex items-center">
<div class="w-1/2 text-right pr-8">
<div
class="bg-slate-900 rounded-xl p-6 inline-block text-left max-w-md"
>
<div class="flex items-center mb-3">
<div
class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center mr-3"
>
<span class="text-white font-bold">3</span>
</div>
<h4 class="text-lg font-bold text-purple-400">
Architect Role
</h4>
</div>
<p class="text-sm text-slate-300 mb-3">
System design with research insights
</p>
<div class="bg-slate-800 rounded p-3 text-xs">
<div class="font-semibold text-purple-400 mb-1">
Design Decisions:
</div>
<ul class="text-slate-300 space-y-1">
<li>β JWT for stateless auth</li>
<li>β PostgreSQL + Prisma ORM</li>
<li>β Bcrypt for passwords</li>
<li>β Redis for token blacklist</li>
</ul>
</div>
<div class="mt-3 text-xs text-slate-400">
<i class="fas fa-clock mr-1"></i>Day 1, 2:00 PM
</div>
</div>
</div>
<div class="w-1/2 pl-8">
<div
class="bg-purple-900/20 rounded-lg p-4 border border-purple-500/30"
>
<h5 class="font-semibold text-purple-400 mb-2">
π Progress Report Generated
</h5>
<p class="text-sm text-slate-300">
Interactive dashboard shows 40% completion
</p>
</div>
</div>
</div>
<div
class="absolute left-1/2 transform -translate-x-1/2 w-6 h-6 bg-purple-500 rounded-full border-4 border-slate-800"
></div>
</div>
<!-- Context Preservation Break -->
<div class="relative mb-16">
<div class="mx-auto max-w-lg text-center">
<div
class="bg-yellow-900/20 border border-yellow-500/30 rounded-xl p-6"
>
<i class="fas fa-pause-circle text-3xl text-yellow-400 mb-3"></i>
<h5 class="font-semibold text-yellow-400 mb-2">
End of Day 1 - Workflow Paused
</h5>
<p class="text-sm text-slate-300">
All context, decisions, and progress saved automatically
</p>
</div>
</div>
</div>
<!-- Step 4: Senior Developer Implementation -->
<div class="relative mb-16">
<div class="flex items-center">
<div class="w-1/2 text-right pr-8">
<div
class="bg-green-900/20 rounded-lg p-4 border border-green-500/30"
>
<h5 class="font-semibold text-green-400 mb-2">
π Perfect Context Resume
</h5>
<p class="text-sm text-slate-300">
Developer picks up with full architectural context
</p>
</div>
</div>
<div class="w-1/2 pl-8">
<div class="bg-slate-900 rounded-xl p-6 inline-block max-w-md">
<div class="flex items-center mb-3">
<div
class="w-10 h-10 bg-yellow-500 rounded-full flex items-center justify-center mr-3"
>
<span class="text-white font-bold">4</span>
</div>
<h4 class="text-lg font-bold text-yellow-400">
Senior Developer Role
</h4>
</div>
<p class="text-sm text-slate-300 mb-3">
Implementation with quality checks
</p>
<div class="bg-slate-800 rounded p-3 text-xs">
<div class="font-mono text-yellow-400 mb-2">
report_step_completion()
</div>
<div class="grid grid-cols-2 gap-2 text-slate-300">
<div>β User model</div>
<div>β Auth service</div>
<div>β JWT middleware</div>
<div>β Unit tests (87%)</div>
<div>β Integration tests</div>
<div>β Error handling</div>
</div>
</div>
<div class="mt-3 text-xs text-slate-400">
<i class="fas fa-clock mr-1"></i>Day 2, 9:00 AM - 3:00 PM
</div>
</div>
</div>
</div>
<div
class="absolute left-1/2 transform -translate-x-1/2 w-6 h-6 bg-yellow-500 rounded-full border-4 border-slate-800"
></div>
</div>
<!-- Step 5: Code Review -->
<div class="relative mb-16">
<div class="flex items-center">
<div class="w-1/2 text-right pr-8">
<div
class="bg-slate-900 rounded-xl p-6 inline-block text-left max-w-md"
>
<div class="flex items-center mb-3">
<div
class="w-10 h-10 bg-red-500 rounded-full flex items-center justify-center mr-3"
>
<span class="text-white font-bold">5</span>
</div>
<h4 class="text-lg font-bold text-red-400">
Code Review Role
</h4>
</div>
<p class="text-sm text-slate-300 mb-3">
Final quality validation
</p>
<div class="bg-slate-800 rounded p-3 text-xs">
<div class="font-semibold text-red-400 mb-1">
Validation Results:
</div>
<ul class="text-slate-300 space-y-1">
<li>β Security audit passed</li>
<li>β Performance benchmarks met</li>
<li>β Code quality A+</li>
<li>β Documentation complete</li>
</ul>
</div>
<div class="mt-3 text-xs text-slate-400">
<i class="fas fa-clock mr-1"></i>Day 2, 4:00 PM
</div>
</div>
</div>
<div class="w-1/2 pl-8">
<div
class="bg-red-900/20 rounded-lg p-4 border border-red-500/30"
>
<h5 class="font-semibold text-red-400 mb-2">
β
Workflow Complete
</h5>
<p class="text-sm text-slate-300">
All acceptance criteria verified
</p>
</div>
</div>
</div>
<div
class="absolute left-1/2 transform -translate-x-1/2 w-6 h-6 bg-red-500 rounded-full border-4 border-slate-800"
></div>
</div>
</div>
<!-- Final Report Section -->
<div class="mt-20">
<div
class="bg-gradient-to-br from-purple-900/20 to-pink-900/20 rounded-2xl p-8 border border-purple-500/30"
>
<div class="text-center mb-8">
<i class="fas fa-trophy text-5xl text-yellow-400 mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Final Workflow Report</h3>
<p class="text-slate-400">
Beautiful analytics showcase the intelligent journey
</p>
</div>
<div class="grid md:grid-cols-4 gap-6 mb-8">
<div class="bg-slate-800/50 rounded-xl p-4 text-center">
<div class="text-3xl font-bold text-green-400 mb-1">100%</div>
<div class="text-sm text-slate-400">Completed</div>
</div>
<div class="bg-slate-800/50 rounded-xl p-4 text-center">
<div class="text-3xl font-bold text-blue-400 mb-1">16h</div>
<div class="text-sm text-slate-400">Total Time</div>
</div>
<div class="bg-slate-800/50 rounded-xl p-4 text-center">
<div class="text-3xl font-bold text-purple-400 mb-1">0</div>
<div class="text-sm text-slate-400">Defects</div>
</div>
<div class="bg-slate-800/50 rounded-xl p-4 text-center">
<div class="text-3xl font-bold text-yellow-400 mb-1">A+</div>
<div class="text-sm text-slate-400">Quality Score</div>
</div>
</div>
<div class="text-center">
<button class="btn-primary px-6 py-3">
<i class="fas fa-chart-bar mr-2"></i>View Interactive Report
</button>
<p class="text-sm text-slate-500 mt-3">
Complete with role transitions, decision history, and
implementation details
</p>
</div>
</div>
</div>
<!-- Comparison Box -->
<div class="mt-16 grid md:grid-cols-2 gap-8">
<div class="bg-red-900/10 border border-red-500/30 rounded-xl p-6">
<h4 class="text-lg font-bold text-red-400 mb-4">Without Anubis</h4>
<ul class="space-y-2 text-sm text-slate-300">
<li class="flex items-start space-x-2">
<i class="fas fa-times text-red-400 mt-0.5"></i>
<span>3-5 days of chaotic development</span>
</li>
<li class="flex items-start space-x-2">
<i class="fas fa-times text-red-400 mt-0.5"></i>
<span>Multiple context switches and rework</span>
</li>
<li class="flex items-start space-x-2">
<i class="fas fa-times text-red-400 mt-0.5"></i>
<span>5-10 security vulnerabilities</span>
</li>
<li class="flex items-start space-x-2">
<i class="fas fa-times text-red-400 mt-0.5"></i>
<span>No visibility into progress</span>
</li>
</ul>
</div>
<div class="bg-green-900/10 border border-green-500/30 rounded-xl p-6">
<h4 class="text-lg font-bold text-green-400 mb-4">With Anubis</h4>
<ul class="space-y-2 text-sm text-slate-300">
<li class="flex items-start space-x-2">
<i class="fas fa-check text-green-400 mt-0.5"></i>
<span>2 days with structured workflows</span>
</li>
<li class="flex items-start space-x-2">
<i class="fas fa-check text-green-400 mt-0.5"></i>
<span>Perfect context preservation</span>
</li>
<li class="flex items-start space-x-2">
<i class="fas fa-check text-green-400 mt-0.5"></i>
<span>Zero security issues (validated)</span>
</li>
<li class="flex items-start space-x-2">
<i class="fas fa-check text-green-400 mt-0.5"></i>
<span>Beautiful progress reports</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>