features.htmlβ’10.7 kB
<section id="features" class="py-24 bg-slate-800 relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-4xl md:text-5xl font-bold mb-6">
Three Pillars of Intelligent Excellence
</h2>
<p class="text-xl text-slate-300 max-w-3xl mx-auto">
Transform your AI workflows with Anubis's three core capabilities that
deliver measurable business value
</p>
</div>
<!-- Three Core Values Section -->
<div class="grid lg:grid-cols-3 gap-8 mb-20">
<!-- Intelligent Guidance -->
<div
class="feature-highlight rounded-2xl p-8 text-center transform hover:scale-105 transition-all duration-300"
style="
background: linear-gradient(
135deg,
rgba(59, 130, 246, 0.1),
rgba(59, 130, 246, 0.05)
);
border: 2px solid rgba(59, 130, 246, 0.3);
"
>
<div class="mb-6">
<div
class="w-20 h-20 mx-auto mb-4 rounded-full flex items-center justify-center"
style="background: rgba(59, 130, 246, 0.2)"
>
<i class="fas fa-compass text-4xl text-blue-400"></i>
</div>
<h3 class="text-2xl font-bold mb-3 text-blue-400">
Intelligent Guidance for AI Agents
</h3>
</div>
<p class="text-slate-300 mb-6">
Transform chaotic AI development into structured, quality-driven
workflows with step-by-step intelligent rules
</p>
<div class="space-y-3 text-left">
<div class="flex items-start space-x-3">
<i class="fas fa-check-circle text-blue-400 mt-1"></i>
<span class="text-sm"
>Intelligent step-by-step guidance for every development
phase</span
>
</div>
<div class="flex items-start space-x-3">
<i class="fas fa-shield-alt text-blue-400 mt-1"></i>
<span class="text-sm"
>Built-in quality gates and validation checkpoints</span
>
</div>
<div class="flex items-start space-x-3">
<i class="fas fa-brain text-blue-400 mt-1"></i>
<span class="text-sm"
>Context-aware recommendations based on project needs</span
>
</div>
</div>
<div class="mt-6 pt-6 border-t border-slate-700">
<div class="text-3xl font-bold text-blue-400">30-50%</div>
<div class="text-sm text-slate-400">Faster Development</div>
</div>
</div>
<!-- Seamless Transitions -->
<div
class="feature-highlight rounded-2xl p-8 text-center transform hover:scale-105 transition-all duration-300"
style="
background: linear-gradient(
135deg,
rgba(34, 197, 94, 0.1),
rgba(34, 197, 94, 0.05)
);
border: 2px solid rgba(34, 197, 94, 0.3);
"
>
<div class="mb-6">
<div
class="w-20 h-20 mx-auto mb-4 rounded-full flex items-center justify-center"
style="background: rgba(34, 197, 94, 0.2)"
>
<i class="fas fa-sync-alt text-4xl text-green-400"></i>
</div>
<h3 class="text-2xl font-bold mb-3 text-green-400">
Seamless Task & Role Transitions
</h3>
</div>
<p class="text-slate-300 mb-6">
Never lose context when switching between roles or continuing tasks
across sessions
</p>
<div class="space-y-3 text-left">
<div class="flex items-start space-x-3">
<i class="fas fa-history text-green-400 mt-1"></i>
<span class="text-sm"
>Complete context preservation between role switches</span
>
</div>
<div class="flex items-start space-x-3">
<i class="fas fa-exchange-alt text-green-400 mt-1"></i>
<span class="text-sm"
>Automatic task handoffs with full decision history</span
>
</div>
<div class="flex items-start space-x-3">
<i class="fas fa-pause-circle text-green-400 mt-1"></i>
<span class="text-sm"
>Pause and resume workflows anytime without data loss</span
>
</div>
</div>
<div class="mt-6 pt-6 border-t border-slate-700">
<div class="text-3xl font-bold text-green-400">100%</div>
<div class="text-sm text-slate-400">Context Retention</div>
</div>
</div>
<!-- Beautiful Reporting -->
<div
class="feature-highlight rounded-2xl p-8 text-center transform hover:scale-105 transition-all duration-300"
style="
background: linear-gradient(
135deg,
rgba(168, 85, 247, 0.1),
rgba(168, 85, 247, 0.05)
);
border: 2px solid rgba(168, 85, 247, 0.3);
"
>
<div class="mb-6">
<div
class="w-20 h-20 mx-auto mb-4 rounded-full flex items-center justify-center"
style="background: rgba(168, 85, 247, 0.2)"
>
<i class="fas fa-chart-line text-4xl text-purple-400"></i>
</div>
<h3 class="text-2xl font-bold mb-3 text-purple-400">
Beautiful HTML Reports
</h3>
</div>
<p class="text-slate-300 mb-6">
Transform workflow data into stunning, interactive reports that
stakeholders love
</p>
<div class="space-y-3 text-left">
<div class="flex items-start space-x-3">
<i class="fas fa-chart-pie text-purple-400 mt-1"></i>
<span class="text-sm"
>Interactive dashboards with Chart.js visualizations</span
>
</div>
<div class="flex items-start space-x-3">
<i class="fas fa-mobile-alt text-purple-400 mt-1"></i>
<span class="text-sm"
>Mobile-responsive design with Tailwind CSS</span
>
</div>
<div class="flex items-start space-x-3">
<i class="fas fa-file-export text-purple-400 mt-1"></i>
<span class="text-sm"
>Export-ready reports for presentations and reviews</span
>
</div>
</div>
<div class="mt-6 pt-6 border-t border-slate-700">
<div class="text-3xl font-bold text-purple-400">5x</div>
<div class="text-sm text-slate-400">Better Visibility</div>
</div>
</div>
</div>
<!-- Additional Features Section -->
<div class="text-center mb-12">
<h3 class="text-2xl font-semibold mb-4">
Plus Enterprise-Grade Features
</h3>
<p class="text-slate-400">
Built on NestJS v11 + Prisma v6.9 with MCP protocol compliance
</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Role-Based AI -->
<div
class="feature-card rounded-xl p-6 hover:scale-105 transition-transform duration-300"
>
<div class="flex items-center mb-4">
<i class="fas fa-users-cog text-2xl text-blue-400 mr-3"></i>
<h4 class="text-lg font-semibold">5 Specialized AI Roles</h4>
</div>
<p class="text-sm text-slate-300">
Product Manager, Architect, Senior Dev, and Code Review roles for
complete workflow coverage
</p>
</div>
<!-- MCP Compliance -->
<div
class="feature-card rounded-xl p-6 hover:scale-105 transition-transform duration-300"
>
<div class="flex items-center mb-4">
<i class="fas fa-shield-alt text-2xl text-green-400 mr-3"></i>
<h4 class="text-lg font-semibold">100% MCP Compliant</h4>
</div>
<p class="text-sm text-slate-300">
Guidance-only architecture with proper separation of concerns and zero
execution violations
</p>
</div>
<!-- Performance -->
<div
class="feature-card rounded-xl p-6 hover:scale-105 transition-transform duration-300"
>
<div class="flex items-center mb-4">
<i class="fas fa-tachometer-alt text-2xl text-purple-400 mr-3"></i>
<h4 class="text-lg font-semibold">Lightning Fast</h4>
</div>
<p class="text-sm text-slate-300">
Two-layer caching system with sub-50ms response times and 25-75% token
reduction
</p>
</div>
<!-- Zero Setup -->
<div
class="feature-card rounded-xl p-6 hover:scale-105 transition-transform duration-300"
>
<div class="flex items-center mb-4">
<i class="fas fa-rocket text-2xl text-yellow-400 mr-3"></i>
<h4 class="text-lg font-semibold">Zero Setup</h4>
</div>
<p class="text-sm text-slate-300">
NPX package with automatic database setup, migrations, and dependency
management
</p>
</div>
<!-- Database Intelligence -->
<div
class="feature-card rounded-xl p-6 hover:scale-105 transition-transform duration-300"
>
<div class="flex items-center mb-4">
<i class="fas fa-database text-2xl text-red-400 mr-3"></i>
<h4 class="text-lg font-semibold">Dynamic Rules</h4>
</div>
<p class="text-sm text-slate-300">
Database-driven workflow rules that update without deployment
</p>
</div>
<!-- Quality Assurance -->
<div
class="feature-card rounded-xl p-6 hover:scale-105 transition-transform duration-300"
>
<div class="flex items-center mb-4">
<i class="fas fa-check-double text-2xl text-cyan-400 mr-3"></i>
<h4 class="text-lg font-semibold">Built-in QA</h4>
</div>
<p class="text-sm text-slate-300">
Automated quality gates with 40-60% defect reduction
</p>
</div>
</div>
<!-- CTA Section -->
<div class="text-center mt-16">
<p class="text-lg text-slate-300 mb-6">
Experience the intelligent difference in AI workflow management
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#getting-started" class="btn-primary px-8 py-3">
<i class="fas fa-bolt mr-2"></i>Start Your Intelligent Journey
</a>
<a
href="https://github.com/Hive-Academy/Anubis-MCP/tree/main/workflow-reports"
class="btn-secondary px-8 py-3"
>
<i class="fas fa-chart-bar mr-2"></i>View Sample Reports
</a>
</div>
</div>
</div>
</section>