𓂀𓁢𓋹𝔸ℕ𝕌𝔹𝕀𝕊𓋹𓁢𓂀 - Intelligent Guidance for

<!-- Three Core Values Section - Can be inserted after hero or as standalone --> <section class="py-20 bg-slate-900 relative overflow-hidden"> <!-- Background Animation --> <div class="absolute inset-0 opacity-5"> <div class="absolute top-1/4 left-1/4 w-96 h-96 rounded-full blur-3xl" style="background: radial-gradient(circle, var(--electric-blue), transparent)"></div> <div class="absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full blur-3xl" 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"> <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-star mr-2" style="color: var(--honey-amber)"></i> <span class="text-sm font-medium">Why Anubis?</span> </div> <h2 class="text-4xl md:text-5xl font-bold mb-6"> <span class="gradient-text">Three Intelligent Powers</span><br /> That Transform Your AI Workflows </h2> <p class="text-xl text-slate-300 max-w-3xl mx-auto"> Anubis delivers measurable business value through three core capabilities that work in perfect harmony </p> </div> <div class="grid lg:grid-cols-3 gap-8"> <!-- Power 1 --> <div class="group relative"> <div class="absolute inset-0 bg-gradient-to-r from-blue-500 to-blue-600 rounded-2xl blur-xl opacity-20 group-hover:opacity-30 transition-opacity"></div> <div class="relative bg-slate-800 rounded-2xl p-8 border border-slate-700 hover:border-blue-500 transition-all duration-300"> <div class="text-center mb-6"> <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-blue-500 bg-opacity-20 mb-4"> <span class="text-3xl">🎯</span> </div> <h3 class="text-2xl font-bold mb-2">Intelligent Guidance</h3> <p class="text-blue-400 font-semibold">For AI Agents</p> </div> <div class="space-y-4 mb-6"> <div class="flex items-start space-x-3"> <div class="flex-shrink-0 w-6 h-6 rounded-full bg-blue-500 bg-opacity-20 flex items-center justify-center mt-0.5"> <i class="fas fa-check text-xs text-blue-400"></i> </div> <p class="text-sm text-slate-300">Step-by-step rules that transforms chaotic coding into structured excellence</p> </div> <div class="flex items-start space-x-3"> <div class="flex-shrink-0 w-6 h-6 rounded-full bg-blue-500 bg-opacity-20 flex items-center justify-center mt-0.5"> <i class="fas fa-check text-xs text-blue-400"></i> </div> <p class="text-sm text-slate-300">Quality gates and validation at every phase ensure enterprise-grade output</p> </div> <div class="flex items-start space-x-3"> <div class="flex-shrink-0 w-6 h-6 rounded-full bg-blue-500 bg-opacity-20 flex items-center justify-center mt-0.5"> <i class="fas fa-check text-xs text-blue-400"></i> </div> <p class="text-sm text-slate-300">MCP-compliant architecture guides without executing commands</p> </div> </div> <div class="pt-6 border-t border-slate-700"> <div class="flex items-center justify-between"> <span class="text-sm text-slate-400">Impact</span> <span class="text-2xl font-bold text-blue-400">30-50% Faster</span> </div> </div> </div> </div> <!-- Power 2 --> <div class="group relative"> <div class="absolute inset-0 bg-gradient-to-r from-green-500 to-green-600 rounded-2xl blur-xl opacity-20 group-hover:opacity-30 transition-opacity"></div> <div class="relative bg-slate-800 rounded-2xl p-8 border border-slate-700 hover:border-green-500 transition-all duration-300"> <div class="text-center mb-6"> <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-500 bg-opacity-20 mb-4"> <span class="text-3xl">🔄</span> </div> <h3 class="text-2xl font-bold mb-2">Seamless Transitions</h3> <p class="text-green-400 font-semibold">Between Roles & Tasks</p> </div> <div class="space-y-4 mb-6"> <div class="flex items-start space-x-3"> <div class="flex-shrink-0 w-6 h-6 rounded-full bg-green-500 bg-opacity-20 flex items-center justify-center mt-0.5"> <i class="fas fa-check text-xs text-green-400"></i> </div> <p class="text-sm text-slate-300">Never lose context when switching between specialized AI roles</p> </div> <div class="flex items-start space-x-3"> <div class="flex-shrink-0 w-6 h-6 rounded-full bg-green-500 bg-opacity-20 flex items-center justify-center mt-0.5"> <i class="fas fa-check text-xs text-green-400"></i> </div> <p class="text-sm text-slate-300">Complete decision history and rationale preserved automatically</p> </div> <div class="flex items-start space-x-3"> <div class="flex-shrink-0 w-6 h-6 rounded-full bg-green-500 bg-opacity-20 flex items-center justify-center mt-0.5"> <i class="fas fa-check text-xs text-green-400"></i> </div> <p class="text-sm text-slate-300">Pause workflows Friday, resume Monday with zero friction</p> </div> </div> <div class="pt-6 border-t border-slate-700"> <div class="flex items-center justify-between"> <span class="text-sm text-slate-400">Efficiency</span> <span class="text-2xl font-bold text-green-400">100% Context</span> </div> </div> </div> </div> <!-- Power 3 --> <div class="group relative"> <div class="absolute inset-0 bg-gradient-to-r from-purple-500 to-purple-600 rounded-2xl blur-xl opacity-20 group-hover:opacity-30 transition-opacity"></div> <div class="relative bg-slate-800 rounded-2xl p-8 border border-slate-700 hover:border-purple-500 transition-all duration-300"> <div class="text-center mb-6"> <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-purple-500 bg-opacity-20 mb-4"> <span class="text-3xl">📊</span> </div> <h3 class="text-2xl font-bold mb-2">Beautiful Reports</h3> <p class="text-purple-400 font-semibold">Interactive HTML Dashboards</p> </div> <div class="space-y-4 mb-6"> <div class="flex items-start space-x-3"> <div class="flex-shrink-0 w-6 h-6 rounded-full bg-purple-500 bg-opacity-20 flex items-center justify-center mt-0.5"> <i class="fas fa-check text-xs text-purple-400"></i> </div> <p class="text-sm text-slate-300">Stunning Chart.js visualizations that make data come alive</p> </div> <div class="flex items-start space-x-3"> <div class="flex-shrink-0 w-6 h-6 rounded-full bg-purple-500 bg-opacity-20 flex items-center justify-center mt-0.5"> <i class="fas fa-check text-xs text-purple-400"></i> </div> <p class="text-sm text-slate-300">Mobile-responsive Tailwind CSS design for any device</p> </div> <div class="flex items-start space-x-3"> <div class="flex-shrink-0 w-6 h-6 rounded-full bg-purple-500 bg-opacity-20 flex items-center justify-center mt-0.5"> <i class="fas fa-check text-xs text-purple-400"></i> </div> <p class="text-sm text-slate-300">Export-ready reports that impress stakeholders instantly</p> </div> </div> <div class="pt-6 border-t border-slate-700"> <div class="flex items-center justify-between"> <span class="text-sm text-slate-400">Visibility</span> <span class="text-2xl font-bold text-purple-400">5x Better</span> </div> </div> </div> </div> </div> <!-- Bottom CTA --> <div class="text-center mt-16"> <p class="text-lg text-slate-400 mb-8"> Join the intelligent workflow revolution. Your AI agents are waiting for enlightenment. </p> <div class="code-block max-w-2xl mx-auto p-6"> <div class="flex items-center justify-between mb-3"> <span class="text-slate-400 text-sm">Add to your MCP config</span> <button class="copy-btn text-slate-400 hover:text-white transition-colors" onclick="copyToClipboard('npx -y @hive-academy/anubis')"> <i class="fas fa-copy"></i> </button> </div> <code class="font-mono text-green-400"> "anubis": { "command": "npx", "args": ["-y", "@hive-academy/anubis"] } </code> </div> </div> </div> </section>