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

<!-- Hero Section with Three Pillars Focus --> <section class="min-h-screen tech-gradient flex items-center justify-center relative overflow-hidden"> <!-- Background Animation --> <div class="absolute inset-0 opacity-10"> <div class="floating absolute top-20 left-10 w-64 h-64 rounded-full blur-3xl" style="background-color: var(--honey-amber)"></div> <div class="floating absolute bottom-20 right-10 w-64 h-64 rounded-full blur-3xl" style="background-color: var(--electric-blue); animation-delay: -3s"></div> <div class="floating absolute top-1/2 left-1/2 w-64 h-64 rounded-full blur-3xl" style="background-color: var(--mint-green); animation-delay: -1.5s"></div> </div> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10"> <div class="hero-content mt-8"> <!-- Egyptian Symbol --> <div class="text-6xl mb-6 animate-pulse">𓂀</div> <!-- Main Headline --> <h1 class="text-5xl md:text-7xl font-bold mb-4 leading-tight"> <span class="gradient-text">Anubis</span> </h1> <p class="text-2xl md:text-3xl text-slate-300 mb-12"> Intelligent Workflow Orchestration for AI Agents </p> <!-- Three Pillars Visual --> <div class="grid md:grid-cols-3 gap-8 mb-12 max-w-5xl mx-auto"> <!-- Pillar 1 --> <div class="group cursor-pointer"> <div class="relative overflow-hidden rounded-2xl p-6 transition-all duration-300 hover:scale-105" style="background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05)); border: 1px solid rgba(59, 130, 246, 0.3);"> <div class="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div> <div class="relative z-10"> <div class="text-4xl mb-3">🎯</div> <h3 class="text-xl font-bold mb-2 text-blue-400">Intelligent Guidance</h3> <p class="text-sm text-slate-300">Step-by-step rules for structured AI workflows</p> <div class="mt-4 text-2xl font-bold text-blue-400">30-50% Faster</div> </div> </div> </div> <!-- Pillar 2 --> <div class="group cursor-pointer"> <div class="relative overflow-hidden rounded-2xl p-6 transition-all duration-300 hover:scale-105" style="background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05)); border: 1px solid rgba(34, 197, 94, 0.3);"> <div class="absolute inset-0 bg-gradient-to-br from-green-500/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div> <div class="relative z-10"> <div class="text-4xl mb-3">🔄</div> <h3 class="text-xl font-bold mb-2 text-green-400">Seamless Transitions</h3> <p class="text-sm text-slate-300">Never lose context between roles or sessions</p> <div class="mt-4 text-2xl font-bold text-green-400">100% Retention</div> </div> </div> </div> <!-- Pillar 3 --> <div class="group cursor-pointer"> <div class="relative overflow-hidden rounded-2xl p-6 transition-all duration-300 hover:scale-105" style="background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(168, 85, 247, 0.05)); border: 1px solid rgba(168, 85, 247, 0.3);"> <div class="absolute inset-0 bg-gradient-to-br from-purple-500/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div> <div class="relative z-10"> <div class="text-4xl mb-3">📊</div> <h3 class="text-xl font-bold mb-2 text-purple-400">Beautiful Reports</h3> <p class="text-sm text-slate-300">Interactive dashboards that stakeholders love</p> <div class="mt-4 text-2xl font-bold text-purple-400">5x Visibility</div> </div> </div> </div> </div> <!-- Value Proposition --> <p class="text-xl text-slate-400 mb-8 max-w-3xl mx-auto"> Transform your AI agent from a chaotic coder into a intelligent workflow orchestrator with <span class="text-white font-semibold">structured guidance</span>, <span class="text-white font-semibold">perfect memory</span>, and <span class="text-white font-semibold">stunning analytics</span> </p> </div> </div> <!-- Scroll Indicator --> <div class="scroll-indicator"> <i class="fas fa-chevron-down text-slate-400 text-2xl"></i> </div> </section>