@retrivora-ai/rag-engine 0.1.8 → 0.1.9

package/src/app/page.tsx

@@ -5,87 +5,132 @@ import {
   Zap,
   GitBranch,
   HeartPulse,
-  Database,
-  Layers,
-  Bot,
-  Brain,
-  Rabbit,
   FileText,
-  Search,
-  Puzzle,
-  MessageSquare,
   ExternalLink,
   Package,
+  Check,
+  Copy,
 } from 'lucide-react';
 import { ChatWindow } from '@/components/ChatWindow';
 import { ChatWidget } from '@/components/ChatWidget';
 import { useConfig } from '@/components/ConfigProvider';
 import { ThemeToggle } from '@/components/ThemeToggle';
-import { Check, Copy } from 'lucide-react';
 import pkg from '../../package.json';
+import { Snippet, ArchitectureCardProps } from './types';
+import {
+  LANDING_PAGE_CONTENT,
+  VECTOR_DATABASES,
+  AI_MODELS,
+  PIPELINE_STEPS,
+  SNIPPETS,
+  ARCHITECTURE_CARDS,
+  QUICK_START_STEPS,
+  API_ENDPOINTS,
+} from './constants';
+
+// ── Components ──────────────────────────────────────────────────────────────
+
+function ArchitectureCard({ icon, title, description, badge, badgeColor }: ArchitectureCardProps) {
+  return (
+    <div className="group rounded-2xl border border-slate-200 dark:border-white/10 bg-white dark:bg-white/5 p-6 shadow-sm transition-all duration-300 hover:border-indigo-500/50 dark:hover:border-indigo-500/30 hover:shadow-xl hover:shadow-indigo-500/5">
+      <div className="mb-4 flex items-center justify-between">
+        <div className="text-3xl transition-transform duration-300 group-hover:scale-110">{icon}</div>
+        <span className={`rounded-full border px-3 py-0.5 text-[10px] font-bold uppercase tracking-wider ${badgeColor}`}>
+          {badge}
+        </span>
+      </div>
+      <h3 className="mb-2 font-bold text-slate-900 dark:text-white">{title}</h3>
+      <p className="text-xs text-slate-500 dark:text-white/40 leading-relaxed font-medium">{description}</p>
+    </div>
+  );
+}
 
-/**
- * Custom hook for copy-to-clipboard functionality
- */
-function useCopyToClipboard() {
-  const [copied, setCopied] = React.useState<string | null>(null);
+function CodeViewer({ snippet }: { snippet: Snippet }) {
+  const [copied, setCopied] = React.useState(false);
 
-  const copy = (text: string, id: string) => {
-    navigator.clipboard.writeText(text);
-    setCopied(id);
-    setTimeout(() => setCopied(null), 2000);
+  const handleCopy = () => {
+    navigator.clipboard.writeText(snippet.code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
   };
 
-  return { copied, copy };
+  return (
+    <div className="flex flex-col h-full rounded-2xl border border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-slate-900/50 shadow-lg overflow-hidden min-h-[440px]">
+      <div className="flex items-center justify-between px-5 py-3 border-b border-slate-200 dark:border-white/10 bg-white dark:bg-slate-900">
+        <div className="flex items-center gap-3">
+          <div className="flex gap-1.5">
+            <div className="w-2.5 h-2.5 rounded-full bg-red-500" />
+            <div className="w-2.5 h-2.5 rounded-full bg-yellow-500" />
+            <div className="w-2.5 h-2.5 rounded-full bg-green-500" />
+          </div>
+          <span className="text-[10px] font-mono text-slate-400 dark:text-white/30 uppercase tracking-widest ml-2">{snippet.language}</span>
+        </div>
+        <button
+          onClick={handleCopy}
+          className="flex items-center gap-2 text-[10px] font-bold text-slate-500 dark:text-white/40 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all active:scale-95"
+        >
+          {copied ? (
+            <>
+              <Check size={14} className="text-emerald-500" />
+              <span className="text-emerald-500">Copied!</span>
+            </>
+          ) : (
+            <>
+              <Copy size={14} />
+              <span>Copy Code</span>
+            </>
+          )}
+        </button>
+      </div>
+      <div className="p-8 font-mono text-[12px] leading-relaxed overflow-auto custom-scrollbar flex-grow bg-[#0f172a] text-indigo-50">
+        <pre className="whitespace-pre">
+          <code>{snippet.code}</code>
+        </pre>
+      </div>
+    </div>
+  );
 }
 
-// ── Feature pills data ────────────────────────────────────────────────────────
-const FEATURE_PILLS = [
-  { Icon: Database, label: 'MongoDB' },
-  { Icon: Layers, label: 'PostgreSQL' },
-  { Icon: Zap, label: 'Pinecone' },
-  { Icon: Bot, label: 'Claude' },
-  { Icon: Brain, label: 'Gemini' },
-  { Icon: MessageSquare, label: 'Copilot' },
-  { Icon: Rabbit, label: 'Ollama' },
-  { Icon: Package, label: 'ChromaDB' },
-] as const;
 
-// ── Pipeline step cards ───────────────────────────────────────────────────────
-const PIPELINE_STEPS = [
-  {
-    step: '01',
-    Icon: FileText,
-    title: 'Ingest',
-    desc: 'Universal support for PDF, DOCX, CSV, and JSON. Documents are parsed, chunked, and embedded.',
-    colors: { from: '#10b981', to: '#14b8a6' }, // Emerald -> Teal
-  },
-  {
-    step: '02',
-    Icon: Search,
-    title: 'Retrieve',
-    desc: 'Queries are converted to vectors. Semantic search finds context across any configured Vector DB.',
-    colors: { from: '#14b8a6', to: '#06b6d4' }, // Teal -> Cyan
-  },
-  {
-    step: '03',
-    Icon: Puzzle,
-    title: 'Augment',
-    desc: 'Retrieved context is injected into the LLM prompt with namespaced project isolation.',
-    colors: { from: '#06b6d4', to: '#3b82f6' }, // Cyan -> Blue
-  },
-  {
-    step: '04',
-    Icon: MessageSquare,
-    title: 'Generate',
-    desc: 'Providers like OpenAI, Anthropic, or Gemini produce grounded, source-cited responses.',
-    colors: { from: '#3b82f6', to: '#6366f1' }, // Blue -> Indigo
-  },
-] as const;
+
+// Data moved to constants.tsx
+
+// ── Page ────────────────────────────────────────────────────────────────────
+
+function DocViewer({ activeSnippet, setActiveSnippet }: { activeSnippet: Snippet, setActiveSnippet: (s: Snippet) => void }) {
+  return (
+    <>
+      <div className="mb-6 flex flex-wrap gap-2 border-b border-slate-100 dark:border-white/5 pb-6">
+        {SNIPPETS.map((snippet) => (
+          <button
+            key={snippet.id}
+            onClick={() => setActiveSnippet(snippet)}
+            className={`px-5 py-2 rounded-xl text-[10px] font-bold uppercase tracking-wider transition-all border ${activeSnippet.id === snippet.id
+                ? 'bg-indigo-600 text-white border-indigo-600 shadow-lg shadow-indigo-200 dark:shadow-indigo-500/20 scale-105'
+                : 'bg-white dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-500 dark:text-white/40 hover:text-indigo-600 dark:hover:text-indigo-400 hover:border-indigo-300 dark:hover:border-white/20'
+              }`}
+          >
+            {snippet.title}
+          </button>
+        ))}
+      </div>
+
+      <div className="flex-grow flex flex-col gap-6 animate-in fade-in slide-in-from-bottom-2 duration-500">
+        <div className="max-w-2xl">
+          <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-2">{activeSnippet.title}</h3>
+          <p className="text-sm text-slate-500 dark:text-white/40 leading-relaxed font-medium italic">
+            {activeSnippet.description}
+          </p>
+        </div>
+        <CodeViewer snippet={activeSnippet} />
+      </div>
+    </>
+  );
+}
 
 export default function HomePage() {
   const { ui } = useConfig();
-  const { copied, copy } = useCopyToClipboard();
+  const [activeSnippet, setActiveSnippet] = React.useState<Snippet>(SNIPPETS[0]);
 
   return (
     <main className="min-h-screen bg-slate-50 dark:bg-[#080811] relative transition-colors duration-300">
@@ -99,7 +144,6 @@ export default function HomePage() {
           className="absolute -bottom-40 -right-40 w-[600px] h-[600px] rounded-full opacity-15 blur-3xl"
           style={{ background: ui.accentColor }}
         />
-        {/* Grid pattern */}
         <div
           className="absolute inset-0 opacity-[0.05] dark:opacity-[0.03]"
           style={{
@@ -121,7 +165,6 @@ export default function HomePage() {
               <Zap className="w-5 h-5 text-white animate-pulse" />
               <div className="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 transition-opacity" />
             </div>
-            {/* Logo Glow */}
             <div
               className="absolute inset-0 blur-lg opacity-40 group-hover:opacity-80 transition-opacity"
               style={{ background: ui.primaryColor }}
@@ -142,153 +185,89 @@ export default function HomePage() {
 
         <div className="flex items-center gap-3">
           <ThemeToggle />
-          <a
-            href="https://www.npmjs.com/package/@retrivora-ai/rag-engine"
-            target="_blank"
-            rel="noreferrer"
-            className="text-slate-500 hover:text-[#CB3837] dark:text-white/40 dark:hover:text-[#CB3837] text-sm transition-colors flex items-center gap-1.5"
-          >
-            <Package className="w-4 h-4" />
-            NPM
+          <a href="https://www.npmjs.com/package/@retrivora-ai/rag-engine" target="_blank" rel="noreferrer" className="text-slate-500 hover:text-[#CB3837] dark:text-white/40 dark:hover:text-[#CB3837] text-sm transition-colors flex items-center gap-1.5">
+            <Package className="w-4 h-4" /> NPM
           </a>
-          <a
-            href="https://github.com/abhinav1201/ai-accelerator"
-            target="_blank"
-            rel="noreferrer"
-            className="text-slate-500 hover:text-slate-900 dark:text-white/40 dark:hover:text-white/70 text-sm transition-colors flex items-center gap-1.5"
-          >
-            <GitBranch className="w-4 h-4" />
-            GitHub
+          <a href="https://github.com/abhinav1201/ai-accelerator" target="_blank" rel="noreferrer" className="text-slate-500 hover:text-slate-900 dark:text-white/40 dark:hover:text-white/70 text-sm transition-colors flex items-center gap-1.5">
+            <GitBranch className="w-4 h-4" /> GitHub
           </a>
-          <a
-            href="/api/health"
-            target="_blank"
-            rel="noreferrer"
-            className="px-3 py-1.5 rounded-lg text-xs border border-slate-200 dark:border-white/10 text-slate-600 dark:text-white/50 hover:text-slate-900 dark:hover:text-white/80 hover:bg-slate-100 dark:hover:bg-white/5 transition-all flex items-center gap-1.5"
-          >
-            <HeartPulse className="w-3.5 h-3.5" />
-            Health
+          <a href="/api/health" target="_blank" rel="noreferrer" className="px-3 py-1.5 rounded-lg text-xs border border-slate-200 dark:border-white/10 text-slate-600 dark:text-white/50 hover:text-slate-900 dark:hover:text-white/80 hover:bg-slate-100 dark:hover:bg-white/5 transition-all flex items-center gap-1.5">
+            <HeartPulse className="w-3.5 h-3.5" /> Health
           </a>
         </div>
       </nav>
 
-      {/* ── Hero + Chat layout ── */}
+      {/* ── Hero + Chat ── */}
       <div className="relative z-10 container mx-auto px-6 py-12">
         <div className="grid lg:grid-cols-2 gap-12 items-start">
-          {/* Left — Hero copy */}
           <div className="flex flex-col gap-6 pt-4">
             <div
               className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs font-medium border w-fit"
-              style={{
-                borderColor: `${ui.primaryColor}40`,
-                color: ui.primaryColor,
-                background: `${ui.primaryColor}10`,
-              }}
+              style={{ borderColor: `${ui.primaryColor}40`, color: ui.primaryColor, background: `${ui.primaryColor}10` }}
             >
               <span className="w-1.5 h-1.5 rounded-full animate-pulse" style={{ background: ui.primaryColor }} />
-              Dynamic & Universal Retrivora AI
+              {LANDING_PAGE_CONTENT.hero.badge}
             </div>
-
             <h1 className="text-5xl md:text-7xl font-black text-slate-900 dark:text-white mb-6 tracking-tight">
-              The Universal Bridge <br />
-              <span
-                className="text-transparent bg-clip-text"
-                style={{ backgroundImage: `linear-gradient(to right, ${ui.primaryColor}, ${ui.accentColor})` }}
-              >
-                for Generative AI
+              {LANDING_PAGE_CONTENT.hero.title.split('for')[0]} <br />
+              <span className="text-transparent bg-clip-text" style={{ backgroundImage: `linear-gradient(to right, ${ui.primaryColor}, ${ui.accentColor})` }}>
+                for {LANDING_PAGE_CONTENT.hero.title.split('for')[1]}
               </span>
             </h1>
-            <p className="text-lg md:text-xl text-slate-600 dark:text-white/40 max-w-2xl mx-auto leading-relaxed">
-              Retrivora AI is a vendor-agnostic RAG engine that connects any Document to any LLM and Vector Database in minutes.
+            <p className="text-lg md:text-xl text-slate-600 dark:text-white/40 max-w-2xl leading-relaxed">
+              {LANDING_PAGE_CONTENT.hero.subtitle}
             </p>
+            <div className="flex flex-col gap-4 mt-4">
+              <div className="flex flex-col gap-2">
+                <span className="text-[10px] font-black text-slate-400 dark:text-white/30 uppercase tracking-[0.2em] ml-1">Vector Ecosystem</span>
+                <div className="flex flex-wrap gap-2">
+                  {VECTOR_DATABASES.map(({ Icon, label }) => (
+                    <span key={label} className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-600 dark:text-white/60 text-[11px] font-semibold hover:bg-slate-50 dark:hover:bg-white/8 transition-all shadow-sm group">
+                      <Icon className="w-3 h-3 transition-transform group-hover:scale-110" style={{ color: ui.primaryColor }} /> {label}
+                    </span>
+                  ))}
+                </div>
+              </div>
 
-            {/* Feature pills */}
-            <div className="flex flex-wrap gap-3 mt-2">
-              {FEATURE_PILLS.map(({ Icon, label }) => (
-                <span
-                  key={label}
-                  className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-600 dark:text-white/60 text-sm hover:bg-slate-50 dark:hover:bg-white/8 transition-all cursor-default shadow-sm dark:shadow-none"
-                >
-                  <Icon className="w-3.5 h-3.5" style={{ color: ui.primaryColor }} />
-                  {label}
-                </span>
-              ))}
-            </div>
-
-            {/* Stats */}
-            <div className="grid grid-cols-3 gap-4 mt-4 pt-4 border-t border-slate-200 dark:border-white/10">
-              {[
-                { value: '6+', label: 'Vector DBs' },
-                { value: '5+', label: 'LLM Providers' },
-                { value: 'Universal', label: 'File Parsing' },
-              ].map(({ value, label }) => (
-                <div key={label} className="text-center">
-                  <div
-                    className="text-2xl font-bold bg-clip-text text-transparent"
-                    style={{ backgroundImage: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` }}
-                  >
-                    {value}
-                  </div>
-                  <div className="text-slate-500 dark:text-white/40 text-xs mt-0.5">{label}</div>
+              <div className="flex flex-col gap-2">
+                <span className="text-[10px] font-black text-slate-400 dark:text-white/30 uppercase tracking-[0.2em] ml-1">AI Model Garden</span>
+                <div className="flex flex-wrap gap-2">
+                  {AI_MODELS.map(({ Icon, label }) => (
+                    <span key={label} className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-600 dark:text-white/60 text-[11px] font-semibold hover:bg-slate-50 dark:hover:bg-white/8 transition-all shadow-sm group">
+                      <Icon className="w-3 h-3 transition-transform group-hover:scale-110" style={{ color: ui.accentColor }} /> {label}
+                    </span>
+                  ))}
                 </div>
-              ))}
+              </div>
             </div>
           </div>
-
-          {/* Right — Full chat window */}
           <div className="lg:sticky lg:top-6">
             <ChatWindow className="w-full" style={{ height: '620px' } as React.CSSProperties} />
           </div>
         </div>
 
-        {/* ── Architecture section ── */}
+        {/* ── Lifecycle ── */}
         <div className="mt-24 mb-12">
-          <h2 className="text-2xl font-bold text-slate-900 dark:text-white text-center mb-2">The RAG Lifecycle</h2>
-          <p className="text-slate-500 dark:text-white/40 text-center text-sm mb-10">
-            Automated ingestion, semantic retrieval, and grounded generation
-          </p>
-
+          <h2 className="text-2xl font-bold text-slate-900 dark:text-white text-center mb-2">{LANDING_PAGE_CONTENT.lifecycle.title}</h2>
           <div className="relative max-w-5xl mx-auto py-12">
-            {/* Center Spine Line */}
             <div className="absolute left-1/2 top-0 bottom-0 w-0.5 bg-slate-200 dark:bg-white/10 -translate-x-1/2 hidden md:block" />
-
             <div className="space-y-12 md:space-y-0">
               {PIPELINE_STEPS.map(({ step, Icon, title, desc, colors }, index) => {
                 const isLeft = index % 2 === 0;
                 return (
-                  <div
-                    key={step}
-                    className={`relative flex flex-col md:flex-row items-center gap-8 cursor-pointer ${isLeft ? 'md:flex-row' : 'md:flex-row-reverse'
-                      }`}
-                  >
-                    {/* Content Card */}
+                  <div key={step} className={`relative flex flex-col md:flex-row items-center gap-8 ${isLeft ? 'md:flex-row' : 'md:flex-row-reverse'}`}>
                     <div className={`w-full md:w-1/2 relative flex ${isLeft ? 'justify-end' : 'justify-start'}`}>
-                      {/* Branch Line (Connecting icon to card) */}
-                      <div className={`absolute top-1/2 -translate-y-1/2 h-0.5 hidden md:block opacity-30 ${isLeft ? '-right-8 w-8' : '-left-8 w-8'}`} style={{ backgroundColor: colors.from }} />
-
-                      <div className="relative p-6 rounded-2xl border border-slate-200 dark:border-white/10 bg-white dark:bg-white/3 hover:bg-slate-50 dark:hover:bg-white/5 transition-all hover:border-slate-300 dark:hover:border-white/20 shadow-sm dark:shadow-none max-w-md text-left overflow-hidden group">
-                        {/* Dissolved Background Step Number */}
-                        <div className="absolute -right-2 -bottom-4 text-7xl font-bold opacity-[0.1] dark:opacity-[0.15] pointer-events-none select-none italic group-hover:scale-110 transition-transform duration-500" style={{ color: colors.from }}>
-                          {step}
-                        </div>
-
-                        <h3 className="font-semibold text-slate-900 dark:text-white mb-2 text-lg relative z-10 flex items-center gap-2">
-                          <Icon className="w-5 h-5 opacity-80" style={{ color: colors.from }} />
-                          {title}
+                      <div className="relative p-6 rounded-2xl border border-slate-200 dark:border-white/10 bg-white dark:bg-white/3 max-w-md text-left overflow-hidden group">
+                        <div className="absolute -right-2 -bottom-4 text-7xl font-bold opacity-[0.1] italic" style={{ color: colors.from }}>{step}</div>
+                        <h3 className="font-semibold text-slate-900 dark:text-white mb-2 text-lg flex items-center gap-2">
+                          <Icon className="w-5 h-5" style={{ color: colors.from }} /> {title}
                         </h3>
-                        <p className="text-slate-600 dark:text-white/40 text-sm leading-relaxed relative z-10">{desc}</p>
+                        <p className="text-slate-600 dark:text-white/40 text-sm leading-relaxed">{desc}</p>
                       </div>
                     </div>
-
-                    {/* Center Icon Node */}
-                    <div
-                      className="relative z-10 w-12 h-12 rounded-2xl flex items-center justify-center flex-shrink-0 shadow-xl transition-transform hover:scale-110 border-4 border-slate-50 dark:border-[#080811]"
-                      style={{ background: `linear-gradient(135deg, ${colors.from}, ${colors.to})` }}
-                    >
+                    <div className="relative z-10 w-12 h-12 rounded-2xl flex items-center justify-center shadow-xl border-4 border-slate-50 dark:border-[#080811]" style={{ background: `linear-gradient(135deg, ${colors.from}, ${colors.to})` }}>
                       <Icon className="w-6 h-6 text-white" />
                     </div>
-
-                    {/* Spacer for the other side */}
                     <div className="hidden md:block md:w-1/2" />
                   </div>
                 );
@@ -297,209 +276,60 @@ export default function HomePage() {
           </div>
         </div>
 
-        {/* ── How to Use Section ── */}
-        <div className="mt-32 max-w-5xl mx-auto mb-24 relative">
+        {/* ── Architecture Cards ── */}
+        <div className="relative z-10 mt-24 mb-32 grid gap-6 sm:grid-cols-3 max-w-5xl mx-auto">
+          {ARCHITECTURE_CARDS.map((card, i) => (
+            <ArchitectureCard key={i} {...card} />
+          ))}
+        </div>
+
+        {/* ── Documentation ── */}
+        <div className="mt-32 max-w-6xl mx-auto mb-24 relative">
           <div className="text-center mb-16">
-            <h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-4">How to Use</h2>
-            <p className="text-slate-600 dark:text-white/40 max-w-2xl mx-auto">
-              Integrate universal RAG capabilities into your Next.js application with just a few lines of code.
-            </p>
+            <h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-4">{LANDING_PAGE_CONTENT.guide.title}</h2>
+            <p className="text-slate-600 dark:text-white/40 max-w-2xl mx-auto">{LANDING_PAGE_CONTENT.guide.subtitle}</p>
           </div>
-
-          <div className="relative grid gap-12">
-            {/* Vertical Connector Line */}
-            <div className="absolute left-[44px] top-12 bottom-12 w-0.5 bg-slate-200 dark:bg-white/5 hidden md:block" />
-
-            {/* Step 1: Install */}
-            <div className="relative z-10 group">
-              <div className="flex flex-col md:flex-row items-start gap-8 p-8 rounded-3xl border border-slate-200 dark:border-white/10 bg-white dark:bg-white/2 backdrop-blur-sm transition-all hover:shadow-2xl hover:shadow-indigo-500/10 overflow-hidden">
-                {/* Dissolved Background Step Number */}
-                <div className="absolute -right-2 -bottom-6 text-9xl font-bold opacity-[0.08] dark:opacity-[0.12] pointer-events-none select-none italic group-hover:scale-110 transition-transform duration-700" style={{ color: ui.primaryColor }}>
-                  01
-                </div>
-
-                <div
-                  className="w-12 h-12 rounded-2xl flex items-center justify-center text-white font-bold shrink-0 shadow-xl transition-transform group-hover:scale-110 relative z-10"
-                  style={{ background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` }}
-                >
-                  <Package className="w-6 h-6" />
-                </div>
-                <div className="flex-1 w-full relative z-10">
-                  <div className="flex items-center justify-between mb-2">
-                    <h3 className="text-xl font-semibold text-slate-900 dark:text-white">Install the package</h3>
-                    <span className="text-[10px] font-mono text-slate-400 bg-slate-100 dark:bg-white/5 px-2 py-0.5 rounded">Terminal</span>
-                  </div>
-                  <p className="text-slate-600 dark:text-white/40 mb-6 text-sm">Add the Retrivora AI core to your project dependencies.</p>
-
-                  <div className="relative group/code">
-                    <div className="bg-slate-950 rounded-xl p-5 font-mono text-sm text-indigo-300 border border-white/5 flex items-center justify-between overflow-x-auto shadow-inner">
-                      <span className="whitespace-nowrap">$ npm install @retrivora-ai/rag-engine</span>
-                      <button
-                        onClick={() => copy('npm install @retrivora-ai/rag-engine', 'step1')}
-                        className="ml-4 p-2 rounded-lg bg-white/5 hover:bg-white/10 text-white/50 hover:text-white transition-all flex-shrink-0"
-                        title="Copy to clipboard"
-                      >
-                        {copied === 'step1' ? <Check className="w-4 h-4 text-emerald-400" /> : <Copy className="w-4 h-4" />}
-                      </button>
+          <div className="relative z-10 w-full grid gap-16 lg:grid-cols-[280px_1fr] items-start">
+            <aside className="flex flex-col gap-10">
+              <section>
+                <h2 className="mb-6 text-[10px] font-black text-slate-400 dark:text-white/30 uppercase tracking-[0.3em] flex items-center gap-3">
+                  <FileText size={14} className="text-indigo-500" /> Quick Start
+                </h2>
+                <ol className="space-y-6">
+                  {QUICK_START_STEPS.map((step, i) => (
+                    <li key={i} className="group flex items-start gap-4">
+                      <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg bg-white dark:bg-white/5 text-slate-600 dark:text-white/40 font-mono text-[10px] border border-slate-200 dark:border-white/10 shadow-sm">{i + 1}</span>
+                      <span className="text-xs text-slate-500 dark:text-white/50 font-medium leading-relaxed pt-1">{step}</span>
+                    </li>
+                  ))}
+                </ol>
+              </section>
+              <section className="rounded-2xl border border-slate-200 dark:border-white/10 bg-white dark:bg-white/3 p-6 shadow-sm">
+                <h2 className="mb-6 text-[10px] font-black text-slate-400 dark:text-white/30 uppercase tracking-[0.3em] flex items-center gap-3">
+                  <Zap size={14} className="text-indigo-500" /> API Endpoints
+                </h2>
+                <div className="grid gap-2.5">
+                  {API_ENDPOINTS.map((slug) => (
+                    <div key={slug} className="group flex items-center justify-between p-2 rounded-lg bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/5 hover:border-indigo-200 dark:hover:border-indigo-500/30">
+                      <span className="text-[10px] font-mono text-slate-500 dark:text-white/30 group-hover:text-indigo-600">/api/{slug}</span>
+                      <span className="text-[8px] font-bold text-indigo-600 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-500/10 px-1.5 py-0.5 rounded border border-indigo-100 dark:border-indigo-500/20">POST</span>
                     </div>
-                  </div>
+                  ))}
                 </div>
-              </div>
-            </div>
-
-            {/* Step 2 & 3 Grid */}
-            <div className="grid lg:grid-cols-2 gap-8">
-              {/* Step 2: Configure UI */}
-              <div className="relative z-10 group">
-                <div className="h-full flex flex-col p-8 rounded-3xl border border-slate-200 dark:border-white/10 bg-white dark:bg-white/2 backdrop-blur-sm transition-all hover:shadow-2xl hover:shadow-indigo-500/10 overflow-hidden">
-                  {/* Dissolved Background Step Number */}
-                  <div className="absolute -right-2 -bottom-6 text-8xl font-bold opacity-[0.08] dark:opacity-[0.12] pointer-events-none select-none italic group-hover:scale-110 transition-transform duration-700" style={{ color: ui.primaryColor }}>
-                    02
-                  </div>
-
-                  <div className="flex items-start gap-6 mb-6 relative z-10">
-                    <div
-                      className="w-12 h-12 rounded-2xl flex items-center justify-center text-white font-bold shrink-0 shadow-xl transition-transform group-hover:scale-110"
-                      style={{ background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` }}
-                    >
-                      <Layers className="w-6 h-6" />
-                    </div>
-                    <div>
-                      <h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-1">Setup UI</h3>
-                      <p className="text-slate-600 dark:text-white/40 text-xs">Drop the widget into your layout.</p>
-                    </div>
-                  </div>
-
-                  <div className="relative flex-1 group/code z-10">
-                    <div className="absolute top-3 right-3 z-20">
-                      <button
-                        onClick={() => copy(`import { ConfigProvider, ChatWidget } from '@retrivora-ai/rag-engine';\n\n<ConfigProvider config={{ projectId: 'demo' }}>\n  {children}\n  <ChatWidget position="bottom-right" />\n</ConfigProvider>`, 'step2')}
-                        className="p-1.5 rounded-md bg-white/5 hover:bg-white/10 text-white/30 hover:text-white transition-all"
-                      >
-                        {copied === 'step2' ? <Check className="w-3 h-3 text-emerald-400" /> : <Copy className="w-3 h-3" />}
-                      </button>
-                    </div>
-                    <div className="bg-slate-950 rounded-xl p-4 font-mono text-[11px] text-slate-400 border border-white/5 h-full overflow-x-auto">
-                      <div className="text-[10px] text-white/20 mb-3 flex items-center gap-1.5 uppercase tracking-widest font-sans">
-                        <FileText className="w-3 h-3" /> src/app/layout.tsx
-                      </div>
-                      <pre className="text-slate-300">
-                        {`import { ConfigProvider, ChatWidget } from '@retrivora-ai/rag-engine';
-
-<ConfigProvider config={{ projectId: 'demo' }}>
-  {children}
-  <ChatWidget position="bottom-right" />
-</ConfigProvider>`}
-                      </pre>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              {/* Step 3: API Handler */}
-              <div className="relative z-10 group">
-                <div className="h-full flex flex-col p-8 rounded-3xl border border-slate-200 dark:border-white/10 bg-white dark:bg-white/2 backdrop-blur-sm transition-all hover:shadow-2xl hover:shadow-indigo-500/10 overflow-hidden">
-                  {/* Dissolved Background Step Number */}
-                  <div className="absolute -right-2 -bottom-6 text-8xl font-bold opacity-[0.08] dark:opacity-[0.12] pointer-events-none select-none italic group-hover:scale-110 transition-transform duration-700" style={{ color: ui.primaryColor }}>
-                    03
-                  </div>
-
-                  <div className="flex items-start gap-6 mb-6 relative z-10">
-                    <div
-                      className="w-12 h-12 rounded-2xl flex items-center justify-center text-white font-bold shrink-0 shadow-xl transition-transform group-hover:scale-110"
-                      style={{ background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` }}
-                    >
-                      <Search className="w-6 h-6" />
-                    </div>
-                    <div>
-                      <h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-1">Mount Routes</h3>
-                      <p className="text-slate-600 dark:text-white/40 text-xs">Bridge your server to the AI.</p>
-                    </div>
-                  </div>
-
-                  <div className="relative flex-1 group/code z-10">
-                    <div className="absolute top-3 right-3 z-20">
-                      <button
-                        onClick={() => copy(`import { createChatHandler, getRagConfig } from '@retrivora-ai/rag-engine/server';\n\nexport const POST = createChatHandler(getRagConfig());`, 'step3')}
-                        className="p-1.5 rounded-md bg-white/5 hover:bg-white/10 text-white/30 hover:text-white transition-all"
-                      >
-                        {copied === 'step3' ? <Check className="w-3 h-3 text-emerald-400" /> : <Copy className="w-3 h-3" />}
-                      </button>
-                    </div>
-                    <div className="bg-slate-950 rounded-xl p-4 font-mono text-[11px] text-slate-400 border border-white/5 h-full overflow-x-auto">
-                      <div className="text-[10px] text-white/20 mb-3 flex items-center gap-1.5 uppercase tracking-widest font-sans">
-                        <FileText className="w-3 h-3" /> api/chat/route.ts
-                      </div>
-                      <pre className="text-slate-300">
-                        {`import { createChatHandler, getRagConfig } from '@retrivora-ai/rag-engine/server';
-
-export const POST = createChatHandler(getRagConfig());`}
-                      </pre>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* Step 4: Environment Variables */}
-            <div className="relative z-10 group">
-              <div className="flex flex-col md:flex-row items-start gap-8 p-8 rounded-3xl border border-slate-200 dark:border-white/10 bg-white dark:bg-white/2 backdrop-blur-sm transition-all hover:shadow-2xl hover:shadow-indigo-500/10 overflow-hidden">
-                {/* Dissolved Background Step Number */}
-                <div className="absolute -right-2 -bottom-6 text-9xl font-bold opacity-[0.08] dark:opacity-[0.12] pointer-events-none select-none italic group-hover:scale-110 transition-transform duration-700" style={{ color: ui.primaryColor }}>
-                  04
-                </div>
-
-                <div
-                  className="w-12 h-12 rounded-2xl flex items-center justify-center text-white font-bold shrink-0 shadow-xl transition-transform group-hover:scale-110 relative z-10"
-                  style={{ background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` }}
-                >
-                  <Search className="w-6 h-6" />
-                </div>
-                <div className="flex-1 w-full relative z-10">
-                  <div className="flex items-center justify-between mb-2">
-                    <h3 className="text-xl font-semibold text-slate-900 dark:text-white">Configure Environment</h3>
-                    <span className="text-[10px] font-mono text-slate-400 bg-slate-100 dark:bg-white/5 px-2 py-0.5 rounded">.env.local</span>
-                  </div>
-                  <p className="text-slate-600 dark:text-white/40 mb-6 text-sm">
-                    Essential variables for both <span className="text-slate-900 dark:text-white font-medium">Server (Adapters)</span> and <span className="text-slate-900 dark:text-white font-medium">Client (UI context)</span>.
-                  </p>
-
-                  <div className="relative group/code">
-                    <div className="absolute top-3 right-3 z-20">
-                      <button
-                        onClick={() => copy(`VECTOR_DB_PROVIDER=universal_rest\nLLM_PROVIDER=openai\nLLM_MODEL=gpt-4o\nNEXT_PUBLIC_UI_TITLE="AI Assistant"`, 'step4')}
-                        className="p-1.5 rounded-md bg-white/5 hover:bg-white/10 text-white/30 hover:text-white transition-all"
-                      >
-                        {copied === 'step4' ? <Check className="w-3 h-3 text-emerald-400" /> : <Copy className="w-3 h-3" />}
-                      </button>
-                    </div>
-                    <div className="bg-slate-950 rounded-xl p-5 font-mono text-sm text-indigo-300 border border-white/5 flex flex-col shadow-inner">
-                      <span className="text-slate-500 text-xs mb-2"># Core Providers</span>
-                      <span className="mb-1">VECTOR_DB_PROVIDER=universal_rest</span>
-                      <span className="mb-4">LLM_PROVIDER=openai</span>
-                      <span className="text-slate-500 text-xs mb-2"># Client UI (Public)</span>
-                      <span>NEXT_PUBLIC_UI_TITLE=&quot;AI Assistant&quot;</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
+              </section>
+            </aside>
+            <section className="flex flex-col h-full min-h-[560px]">
+              <DocViewer activeSnippet={activeSnippet} setActiveSnippet={setActiveSnippet} />
+            </section>
           </div>
-
           <div className="mt-16 text-center">
-            <a
-              href="https://www.npmjs.com/package/@retrivora-ai/rag-engine"
-              className="inline-flex items-center gap-3 px-8 py-4 rounded-2xl bg-slate-900 dark:bg-white text-white dark:text-slate-900 font-bold hover:scale-[1.02] active:scale-[0.98] transition-all shadow-xl shadow-indigo-500/20"
-            >
-              <Package className="w-5 h-5" />
-              Get Started on NPM
-              <ExternalLink className="w-4 h-4" />
+            <a href="https://www.npmjs.com/package/@retrivora-ai/rag-engine" className="inline-flex items-center gap-3 px-8 py-4 rounded-2xl bg-slate-900 dark:bg-white text-white dark:text-slate-900 font-bold shadow-xl shadow-indigo-500/20">
+              <Package className="w-5 h-5" /> Get Started on NPM <ExternalLink className="w-4 h-4" />
             </a>
           </div>
         </div>
       </div>
 
-      {/* ── Floating widget demo (bottom-right corner) ── */}
       <ChatWidget position="bottom-right" />
     </main>
   );