Redirect home to voice interface

frontend/app/page.tsx

@@ -1,442 +1,18 @@
-'use client';
+"use client";
 
-import Link from 'next/link';
-import { Sparkles, ArrowRight, Eye, Brain, Zap, Shield, BookOpen, Heart, MessageSquare, ChevronRight } from 'lucide-react';
-import SpotlightCard from '@/components/SpotlightCard';
-import ShinyButton from '@/components/ShinyButton';
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
 
-const oraSteps = [
-  {
-    letter: 'O',
-    title: 'Observe',
-    icon: Eye,
-    description: 'ORA helps you notice key themes, patterns, and insights in Scripture with deep contextual understanding.',
-    color: 'purple',
-  },
-  {
-    letter: 'R',
-    title: 'Reflect',
-    icon: Brain,
-    description: 'Get personalized questions and prompts that deepen your understanding and connect Scripture to your life.',
-    color: 'blue',
-  },
-  {
-    letter: 'A',
-    title: 'Act',
-    icon: Zap,
-    description: 'Receive practical wisdom for applying biblical truth to real-world situations and spiritual growth.',
-    color: 'amber',
-  },
-];
+export default function Home() {
+  const router = useRouter();
 
-const features = [
-  {
-    icon: Shield,
-    title: 'Gatekeeper Agent',
-    description: 'Intelligent routing ensures your questions reach the right specialist in our AI swarm.',
-    color: 'purple',
-  },
-  {
-    icon: BookOpen,
-    title: 'Theologian Agent',
-    description: 'Deep Scripture analysis with cross-references, historical context, and doctrinal insights.',
-    color: 'blue',
-  },
-  {
-    icon: Heart,
-    title: 'Healer Agent',
-    description: 'Compassionate pastoral care with prayer guidance and emotional support.',
-    color: 'rose',
-  },
-  {
-    icon: Brain,
-    title: 'Episodic Memory',
-    description: 'ORA remembers your spiritual journey, building understanding over time.',
-    color: 'violet',
-  },
-];
+  useEffect(() => {
+    router.push("/voice");
+  }, [router]);
 
-const colorClasses: Record<string, { bg: string; border: string; text: string; glow: string }> = {
-  purple: {
-    bg: 'bg-purple-500/10',
-    border: 'border-purple-500/30',
-    text: 'text-purple-400',
-    glow: 'shadow-[0_0_30px_rgba(168,85,247,0.3)]',
-  },
-  blue: {
-    bg: 'bg-blue-500/10',
-    border: 'border-blue-500/30',
-    text: 'text-blue-400',
-    glow: 'shadow-[0_0_30px_rgba(59,130,246,0.3)]',
-  },
-  amber: {
-    bg: 'bg-amber-500/10',
-    border: 'border-amber-500/30',
-    text: 'text-amber-400',
-    glow: 'shadow-[0_0_30px_rgba(245,158,11,0.3)]',
-  },
-  rose: {
-    bg: 'bg-rose-500/10',
-    border: 'border-rose-500/30',
-    text: 'text-rose-400',
-    glow: 'shadow-[0_0_30px_rgba(244,63,94,0.3)]',
-  },
-  violet: {
-    bg: 'bg-violet-500/10',
-    border: 'border-violet-500/30',
-    text: 'text-violet-400',
-    glow: 'shadow-[0_0_30px_rgba(139,92,246,0.3)]',
-  },
-};
-
-export default function HomePage() {
   return (
-    <>
-      {/* Hero Section */}
-      <section className="relative pt-32 pb-24 overflow-hidden">
-        {/* Background Effects */}
-        <div className="absolute inset-0 ora-grid-bg pointer-events-none z-0" />
-        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[800px] bg-purple-600/20 rounded-[100%] blur-[150px] pointer-events-none -z-10" />
-        <div className="absolute top-1/4 right-0 w-[500px] h-[500px] bg-violet-500/10 rounded-full blur-[120px] pointer-events-none -z-10" />
-        <div className="absolute top-1/3 left-0 w-[400px] h-[400px] bg-amber-500/5 rounded-full blur-[100px] pointer-events-none -z-10" />
-
-        <div className="max-w-5xl mx-auto px-6 text-center">
-          {/* Badge */}
-          <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-purple-500/30 bg-purple-500/10 mb-8 backdrop-blur-sm animate-fade-slide-in">
-            <span className="relative flex h-2 w-2">
-              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" />
-              <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500" />
-            </span>
-            <span className="text-xs font-mono text-purple-300 uppercase tracking-[0.15em]">
-              Sovereign AI Spiritual Companion
-            </span>
-          </div>
-
-          {/* Main Heading */}
-          <h1 className="text-5xl sm:text-6xl md:text-7xl font-bold tracking-tight leading-[1.1] mb-6 text-white animate-fade-slide-in stagger-1">
-            Meet{' '}
-            <span className="bg-gradient-to-r from-purple-400 via-violet-400 to-purple-400 bg-clip-text text-transparent">
-              ORA
-            </span>
-          </h1>
-
-          <p className="text-xl md:text-2xl text-neutral-300 max-w-3xl mx-auto mb-4 animate-fade-slide-in stagger-2">
-            Your AI Spiritual Guide
-          </p>
-
-          <p className="text-lg text-neutral-500 max-w-2xl mx-auto mb-10 animate-fade-slide-in stagger-3">
-            <span className="text-purple-400 font-semibold">O</span>bserve.{' '}
-            <span className="text-purple-400 font-semibold">R</span>eflect.{' '}
-            <span className="text-purple-400 font-semibold">A</span>ct. — A multi-agent AI system
-            designed to deepen your faith through intelligent spiritual companionship.
-          </p>
-
-          {/* CTA Buttons */}
-          <div className="flex flex-col sm:flex-row justify-center gap-4 animate-fade-slide-in stagger-4">
-            <Link href="/dashboard">
-              <ShinyButton>
-                <span className="flex items-center gap-2">
-                  <Sparkles className="w-5 h-5" />
-                  Enter Dashboard
-                  <ArrowRight className="w-4 h-4" />
-                </span>
-              </ShinyButton>
-            </Link>
-            <Link
-              href="/ora"
-              className="px-8 py-3.5 text-sm font-medium text-neutral-300 border border-white/10 rounded-full hover:bg-white/5 hover:text-white transition-all flex items-center justify-center gap-2"
-            >
-              Learn More
-              <ChevronRight className="w-4 h-4" />
-            </Link>
-          </div>
-        </div>
-      </section>
-
-      {/* ORA Method Section */}
-      <section className="py-24 border-t border-white/5">
-        <div className="max-w-6xl mx-auto px-6">
-          <div className="text-center mb-16">
-            <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4 text-white">
-              The ORA Method
-            </h2>
-            <p className="text-neutral-400 max-w-2xl mx-auto">
-              A three-step framework that transforms how you engage with Scripture and grow in your faith.
-            </p>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-            {oraSteps.map((step, i) => {
-              const colors = colorClasses[step.color];
-              return (
-                <SpotlightCard
-                  key={step.letter}
-                  className={`p-8 rounded-2xl border ${colors.border} bg-white/[0.02] transition-all group animate-fade-slide-in text-center`}
-                  spotlightColor={`rgba(168, 85, 247, 0.15)`}
-                  style={{ animationDelay: `${i * 100}ms` }}
-                >
-                  {/* Large Letter */}
-                  <div
-                    className={`w-20 h-20 mx-auto rounded-2xl ${colors.bg} flex items-center justify-center border ${colors.border} group-hover:scale-110 transition-transform ${colors.glow} mb-6`}
-                  >
-                    <span className={`text-4xl font-bold ${colors.text}`}>{step.letter}</span>
-                  </div>
-
-                  {/* Title */}
-                  <h3 className="text-2xl font-bold text-white mb-2">{step.title}</h3>
-
-                  {/* Step Badge */}
-                  <div className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full ${colors.bg} border ${colors.border} mb-4`}>
-                    <span className={`text-xs font-medium ${colors.text}`}>Step {i + 1}</span>
-                  </div>
-
-                  {/* Description */}
-                  <p className="text-neutral-400 leading-relaxed">{step.description}</p>
-
-                  {/* Icon at bottom */}
-                  <div className={`mt-6 flex justify-center`}>
-                    <step.icon className={`w-6 h-6 ${colors.text} opacity-50 group-hover:opacity-100 transition-opacity`} />
-                  </div>
-                </SpotlightCard>
-              );
-            })}
-          </div>
-
-          {/* Connecting flow indicator */}
-          <div className="hidden md:flex justify-center items-center gap-4 mt-8">
-            <div className="flex items-center gap-2 text-neutral-500 text-sm">
-              <span className="text-purple-400 font-semibold">Observe</span>
-              <ArrowRight className="w-4 h-4" />
-              <span className="text-blue-400 font-semibold">Reflect</span>
-              <ArrowRight className="w-4 h-4" />
-              <span className="text-amber-400 font-semibold">Act</span>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Agent Swarm Section */}
-      <section className="py-24 border-t border-white/5 bg-[#030303] relative overflow-hidden">
-        {/* Background decoration */}
-        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-purple-600/5 rounded-full blur-[150px] pointer-events-none" />
-
-        <div className="max-w-6xl mx-auto px-6 relative">
-          <div className="text-center mb-16">
-            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-purple-500/20 bg-purple-500/5 mb-6">
-              <Brain className="w-3.5 h-3.5 text-purple-400" />
-              <span className="text-[10px] uppercase tracking-widest font-medium text-purple-300">
-                Multi-Agent Architecture
-              </span>
-            </div>
-            <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4 text-white">
-              Powered by Intelligent Agents
-            </h2>
-            <p className="text-neutral-400 max-w-2xl mx-auto">
-              ORA uses a swarm of specialized AI agents that work together to provide
-              comprehensive spiritual guidance.
-            </p>
-          </div>
-
-          {/* Agent Cards - 2x2 grid on larger screens */}
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 max-w-4xl mx-auto">
-            {features.map((feature, i) => {
-              const colors = colorClasses[feature.color];
-              return (
-                <SpotlightCard
-                  key={feature.title}
-                  className={`p-6 rounded-2xl border ${colors.border} bg-white/[0.02] hover:bg-white/[0.04] transition-all animate-fade-slide-in group`}
-                  spotlightColor="purple"
-                  style={{ animationDelay: `${i * 100}ms` }}
-                >
-                  <div className="flex items-start gap-4">
-                    {/* Icon */}
-                    <div
-                      className={`w-14 h-14 rounded-xl ${colors.bg} flex items-center justify-center border ${colors.border} shrink-0 group-hover:scale-110 transition-transform ${colors.glow}`}
-                    >
-                      <feature.icon className={`w-7 h-7 ${colors.text}`} />
-                    </div>
-
-                    {/* Content */}
-                    <div className="flex-1">
-                      <h3 className="text-lg font-semibold text-white mb-1">{feature.title}</h3>
-                      <p className="text-sm text-neutral-400 leading-relaxed">{feature.description}</p>
-                    </div>
-                  </div>
-
-                  {/* Status indicator */}
-                  <div className="mt-4 pt-4 border-t border-white/5 flex items-center justify-between">
-                    <span className={`text-xs ${colors.text} font-medium`}>
-                      {feature.title.includes('Agent') ? 'Active Agent' : 'System Feature'}
-                    </span>
-                    <div className="flex items-center gap-1.5">
-                      <span className="relative flex h-2 w-2">
-                        <span className={`animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 ${colors.text.replace('text-', 'bg-')}`} />
-                        <span className={`relative inline-flex rounded-full h-2 w-2 ${colors.text.replace('text-', 'bg-')}`} />
-                      </span>
-                      <span className="text-xs text-neutral-500">Online</span>
-                    </div>
-                  </div>
-                </SpotlightCard>
-              );
-            })}
-          </div>
-
-          {/* Central Hub Visualization */}
-          <div className="mt-16 flex justify-center">
-            <div className="relative w-64 h-64 flex items-center justify-center">
-              {/* Connection lines */}
-              <div className="absolute inset-0 flex items-center justify-center">
-                <div className="absolute w-px h-full bg-gradient-to-b from-transparent via-white/10 to-transparent" />
-                <div className="absolute w-full h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
-              </div>
-
-              {/* Central ORA orb */}
-              <div className="relative z-10 w-20 h-20 rounded-full bg-gradient-to-br from-purple-600 to-violet-700 flex items-center justify-center shadow-lg shadow-purple-500/30 animate-breathe">
-                <Sparkles className="w-8 h-8 text-white" />
-              </div>
-
-              {/* Top - Gatekeeper */}
-              <div className="absolute top-0 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2">
-                <span className="text-xs text-purple-400 font-medium">Gatekeeper</span>
-                <div className="w-4 h-4 rounded-full bg-purple-500/20 border border-purple-500/50 flex items-center justify-center">
-                  <div className="w-2 h-2 rounded-full bg-purple-400 animate-pulse" />
-                </div>
-              </div>
-
-              {/* Bottom - Healer */}
-              <div className="absolute bottom-0 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2">
-                <div className="w-4 h-4 rounded-full bg-rose-500/20 border border-rose-500/50 flex items-center justify-center">
-                  <div className="w-2 h-2 rounded-full bg-rose-400 animate-pulse" style={{ animationDelay: '0.5s' }} />
-                </div>
-                <span className="text-xs text-rose-400 font-medium">Healer</span>
-              </div>
-
-              {/* Left - Theologian */}
-              <div className="absolute left-0 top-1/2 -translate-y-1/2 flex items-center gap-2">
-                <span className="text-xs text-blue-400 font-medium">Theologian</span>
-                <div className="w-4 h-4 rounded-full bg-blue-500/20 border border-blue-500/50 flex items-center justify-center">
-                  <div className="w-2 h-2 rounded-full bg-blue-400 animate-pulse" style={{ animationDelay: '1s' }} />
-                </div>
-              </div>
-
-              {/* Right - Memory */}
-              <div className="absolute right-0 top-1/2 -translate-y-1/2 flex items-center gap-2">
-                <div className="w-4 h-4 rounded-full bg-violet-500/20 border border-violet-500/50 flex items-center justify-center">
-                  <div className="w-2 h-2 rounded-full bg-violet-400 animate-pulse" style={{ animationDelay: '1.5s' }} />
-                </div>
-                <span className="text-xs text-violet-400 font-medium">Memory</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Demo Preview Section */}
-      <section className="py-24 border-t border-white/5">
-        <div className="max-w-6xl mx-auto px-6">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-            {/* Left: Text */}
-            <div>
-              <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-6 text-white">
-                Experience Spiritual AI
-              </h2>
-              <p className="text-neutral-400 mb-6 leading-relaxed">
-                ORA combines advanced language models with a deep understanding of theology,
-                Scripture, and pastoral care. Whether you're seeking guidance, studying the Bible,
-                or looking for prayer support, ORA is here to help.
-              </p>
-              <ul className="space-y-3 mb-8">
-                {[
-                  'Full markdown support for Scripture references',
-                  'Reasoning traces show agent thinking',
-                  'Episodic memory learns your journey',
-                  'Multi-agent handoffs for specialized care',
-                ].map((item, i) => (
-                  <li key={i} className="flex items-center gap-3 text-neutral-300">
-                    <span className="w-1.5 h-1.5 rounded-full bg-purple-500" />
-                    {item}
-                  </li>
-                ))}
-              </ul>
-              <Link href="/dashboard">
-                <ShinyButton>
-                  <span className="flex items-center gap-2">
-                    Try ORA Now
-                    <ArrowRight className="w-4 h-4" />
-                  </span>
-                </ShinyButton>
-              </Link>
-            </div>
-
-            {/* Right: Chat Preview */}
-            <div className="rounded-2xl border border-purple-500/20 bg-[#0a0a0a] overflow-hidden">
-              <div className="px-4 py-3 border-b border-white/5 bg-purple-500/5 flex items-center gap-3">
-                <div className="w-8 h-8 rounded-full bg-purple-500/20 flex items-center justify-center">
-                  <Sparkles className="w-4 h-4 text-purple-400" />
-                </div>
-                <div>
-                  <span className="text-sm text-white font-medium">ORA</span>
-                  <span className="block text-[10px] text-emerald-400">Online</span>
-                </div>
-              </div>
-              <div className="p-4 space-y-4 min-h-[300px]">
-                {/* User Message */}
-                <div className="flex justify-end">
-                  <div className="bg-amber-500/10 border border-amber-500/20 rounded-2xl rounded-tr-sm px-4 py-3 max-w-[80%]">
-                    <p className="text-sm text-amber-50">
-                      I'm feeling anxious about a decision I need to make. Can you help?
-                    </p>
-                  </div>
-                </div>
-                {/* ORA Response */}
-                <div className="flex gap-3">
-                  <div className="w-7 h-7 rounded-full bg-rose-500/20 flex items-center justify-center border border-rose-500/30 shrink-0">
-                    <Heart className="w-3.5 h-3.5 text-rose-400" />
-                  </div>
-                  <div>
-                    <span className="text-[9px] font-mono text-rose-400 uppercase">Healer</span>
-                    <div className="bg-purple-500/10 border border-purple-500/20 rounded-2xl rounded-tl-sm px-4 py-3 mt-1">
-                      <p className="text-sm text-purple-50">
-                        I understand that feeling of anxiety when facing important decisions.
-                        Scripture reminds us in <strong>Philippians 4:6-7</strong>:
-                      </p>
-                      <blockquote className="mt-2 pl-3 border-l-2 border-purple-500/40 text-sm text-neutral-300 italic">
-                        "Do not be anxious about anything, but in everything by prayer...
-                        the peace of God will guard your hearts and minds."
-                      </blockquote>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* CTA Section */}
-      <section className="py-24 border-t border-white/5">
-        <div className="max-w-4xl mx-auto px-6 text-center">
-          <div className="w-20 h-20 mx-auto rounded-2xl bg-gradient-to-br from-purple-600 to-purple-800 flex items-center justify-center mb-8 shadow-lg shadow-purple-500/30 animate-breathe">
-            <Sparkles className="w-10 h-10 text-white" />
-          </div>
-          <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4 text-white">
-            Ready to Deepen Your Faith?
-          </h2>
-          <p className="text-neutral-400 mb-10 max-w-xl mx-auto">
-            Start your spiritual journey with ORA today. Experience AI-powered guidance
-            that respects your faith and grows with you.
-          </p>
-          <Link href="/dashboard">
-            <ShinyButton>
-              <span className="flex items-center gap-2">
-                <Sparkles className="w-5 h-5" />
-                Enter the Dashboard
-                <ArrowRight className="w-4 h-4" />
-              </span>
-            </ShinyButton>
-          </Link>
-        </div>
-      </section>
-    </>
+    <div className="min-h-screen bg-black flex items-center justify-center">
+      <p className="text-white">Redirecting to ORA...</p>
+    </div>
   );
 }