@retrivora-ai/rag-engine 1.8.1 → 1.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retrivora-ai/rag-engine",
-  "version": "1.8.1",
+  "version": "1.8.3",
   "description": "Retrivora AI is a plug-and-play AI engine for RAG chat experiences — generic vector DB + LLM provider, embeddable or standalone.",
   "author": "Abhinav Alkuchi",
   "license": "MIT",
@@ -73,29 +73,30 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "build:pkg": "tsup src/index.ts src/handlers/index.ts src/server.ts --format cjs,esm --dts --clean --tsconfig tsconfig.build.json --external react,react-dom,next,mongodb,pg,openai,@anthropic-ai/sdk,@pinecone-database/pinecone,axios,lucide-react,mammoth,pdf-parse,react-markdown,remark-gfm,next-themes,langchain,@langchain/core,@langchain/openai,llamaindex",
+    "build:pkg": "tsup src/index.ts src/handlers/index.ts src/server.ts --format cjs,esm --dts --clean --no-splitting --tsconfig tsconfig.build.json --external react,react-dom,next,mongodb,pg,openai,@anthropic-ai/sdk,@pinecone-database/pinecone,axios,lucide-react,mammoth,pdf-parse,react-markdown,remark-gfm,next-themes,langchain,@langchain/core,@langchain/openai,llamaindex",
     "start": "next start",
     "lint": "eslint",
     "prepublishOnly": "npm run build:pkg"
   },
   "peerDependencies": {
-    "next": ">=14.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@anthropic-ai/sdk": "^0.90.0",
+    "@anthropic-ai/sdk": "^0.95.1",
+    "@google/genai": "^0.8.0",
     "@google/generative-ai": "^0.24.1",
     "@pinecone-database/pinecone": "^7.2.0",
+    "@types/papaparse": "^5.5.2",
     "axios": "^1.15.0",
     "lucide-react": "^1.8.0",
-    "next": ">=14.0.0",
+    "next": "^16.2.6",
     "next-themes": "^0.4.6",
     "openai": "^6.34.0",
+    "papaparse": "^5.5.3",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-is": "^18.3.1",
-    "@google/genai": "^0.8.0",
     "react-markdown": "^10.1.0",
     "recharts": "^3.8.1",
     "remark-gfm": "^4.0.1"
@@ -104,7 +105,7 @@
     "@langchain/core": "^1.1.42",
     "@langchain/openai": "^1.4.5",
     "langchain": "^1.3.5",
-    "llamaindex": "^0.12.1",
+    "llamaindex": "^0.11.9",
     "mammoth": "^1.8.0",
     "mongodb": "^7.1.1",
     "pdf-parse": "^1.1.1",
@@ -112,6 +113,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
+    "@types/estree": "^1.0.9",
     "@types/node": "^20",
     "@types/pdf-parse": "^1.1.5",
     "@types/pg": "^8.20.0",

package/src/app/api/upload/route.ts

@@ -0,0 +1,4 @@
+import { createUploadHandler } from '@/handlers';
+import { getRagConfig } from '@/config/serverConfig';
+
+export const POST = createUploadHandler(getRagConfig());

package/src/app/constants.tsx

@@ -112,12 +112,12 @@ const { reply, sources } = await pipeline.ask('How does Retrivora work?');`,
     title: 'Route Handlers',
     language: 'typescript',
     description: 'Deploy production-ready API endpoints in seconds using pre-built factories.',
-    code: `import { createChatHandler, createUploadHandler, getRagConfig } from '@retrivora-ai/rag-engine/server';
+    code: `import { createChatStreamHandler, createUploadHandler, getRagConfig } from '@retrivora-ai/rag-engine/server';
 
 const config = getRagConfig();
 
 // src/app/api/chat/route.ts
-export const POST = createChatHandler(config);
+export const POST = createChatStreamHandler(config);
 
 // src/app/api/upload/route.ts
 export const POST = createUploadHandler(config);`,

package/src/app/globals.css

@@ -7,15 +7,20 @@
 /* ─── Design Tokens ─────────────────────────────────────────── */
 :root {
   --font-inter: 'Inter', sans-serif;
-  
+
   /* Light Mode (Default) */
-  --bg-base: #f8fafc; /* slate-50 */
+  --bg-base: #f8fafc;
+  /* slate-50 */
   --bg-surface: #ffffff;
-  --bg-elevated: #f1f5f9; /* slate-100 */
+  --bg-elevated: #f1f5f9;
+  /* slate-100 */
   --border: rgba(0, 0, 0, 0.08);
-  --text-primary: #0f172a; /* slate-900 */
-  --text-secondary: #475569; /* slate-600 */
-  --text-muted: #94a3b8; /* slate-400 */
+  --text-primary: #0f172a;
+  /* slate-900 */
+  --text-secondary: #475569;
+  /* slate-600 */
+  --text-muted: #94a3b8;
+  /* slate-400 */
 }
 
 .dark {
@@ -54,13 +59,16 @@ body {
   width: 4px;
   height: 4px;
 }
+
 ::-webkit-scrollbar-track {
   background: transparent;
 }
+
 ::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 0.12);
   border-radius: 999px;
 }
+
 ::-webkit-scrollbar-thumb:hover {
   background: rgba(255, 255, 255, 0.2);
 }
@@ -93,13 +101,21 @@ body {
   margin: 0.5em 0;
 }
 
-.prose ul, .prose ol {
+.prose ul,
+.prose ol {
   padding-left: 1.5em;
   margin: 0.5em 0;
 }
 
 .prose li {
   margin: 0.25em 0;
+  list-style-type: none;
+}
+
+.prose li::before {
+  content: "\27A4";
+  /* Unicode for a right-pointing arrow */
+  padding-right: 8px;
 }
 
 .prose table {
@@ -109,7 +125,8 @@ body {
   font-size: 0.8rem;
 }
 
-.prose th, .prose td {
+.prose th,
+.prose td {
   border: 1px solid var(--border);
   padding: 0.5rem;
   text-align: left;
@@ -175,6 +192,7 @@ body {
     opacity: 0;
     transform: translateY(8px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -186,6 +204,7 @@ body {
     opacity: 0;
     transform: translateY(16px) scale(0.98);
   }
+
   to {
     opacity: 1;
     transform: translateY(0) scale(1);
@@ -193,8 +212,13 @@ body {
 }
 
 @keyframes shimmer {
-  0% { background-position: -200% 0; }
-  100% { background-position: 200% 0; }
+  0% {
+    background-position: -200% 0;
+  }
+
+  100% {
+    background-position: 200% 0;
+  }
 }
 
 .animate-fade-in-up {
@@ -218,4 +242,4 @@ body {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
-}
+}

package/src/app/page.tsx

@@ -1,334 +1,25 @@
 'use client';
 
 import React from 'react';
-import {
-  Zap,
-  GitBranch,
-  HeartPulse,
-  FileText,
-  ExternalLink,
-  Package,
-  Check,
-  Copy,
-} from 'lucide-react';
-import { ChatWindow } from '@/components/ChatWindow';
+import { AmbientBackground } from '@/components/AmbientBackground';
+import { Navbar } from '@/components/Navbar';
+import { Hero } from '@/components/Hero';
+import { Lifecycle } from '@/components/Lifecycle';
+import { ArchitectureCardsSection } from '@/components/ArchitectureCardsSection';
+import { Documentation } from '@/components/Documentation';
 import { ChatWidget } from '@/components/ChatWidget';
-import { useConfig } from '@/components/ConfigProvider';
-import { ThemeToggle } from '@/components/ThemeToggle';
-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>
-  );
-}
-
-function CodeViewer({ snippet }: { snippet: Snippet }) {
-  const [copied, setCopied] = React.useState(false);
-
-  const handleCopy = () => {
-    navigator.clipboard.writeText(snippet.code);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  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>
-  );
-}
-
-
-
-// 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 [activeSnippet, setActiveSnippet] = React.useState<Snippet>(SNIPPETS[0]);
-
   return (
     <main className="min-h-screen bg-slate-50 dark:bg-[#080811] relative transition-colors duration-300">
-      {/* ── Ambient gradient background ── */}
-      <div className="absolute inset-0 overflow-hidden pointer-events-none">
-        <div
-          className="absolute -top-40 -left-40 w-[600px] h-[600px] rounded-full opacity-20 blur-3xl"
-          style={{ background: ui.primaryColor }}
-        />
-        <div
-          className="absolute -bottom-40 -right-40 w-[600px] h-[600px] rounded-full opacity-15 blur-3xl"
-          style={{ background: ui.accentColor }}
-        />
-        <div
-          className="absolute inset-0 opacity-[0.05] dark:opacity-[0.03]"
-          style={{
-            backgroundImage:
-              'linear-gradient(currentColor 1px, transparent 1px), linear-gradient(90deg, currentColor 1px, transparent 1px)',
-            backgroundSize: '48px 48px',
-          }}
-        />
-      </div>
-
-      {/* ── Navbar ── */}
-      <nav className="sticky top-0 z-50 flex items-center justify-between px-8 py-5 border-b border-slate-200 dark:border-white/5 bg-white/80 dark:bg-[#080811]/80 backdrop-blur-md">
-        <div className="flex items-center gap-3 group cursor-default">
-          <div className="relative">
-            <div
-              className="w-10 h-10 rounded-xl flex items-center justify-center shadow-lg relative z-10 overflow-hidden transition-transform group-hover:scale-110 duration-500"
-              style={{ background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` }}
-            >
-              <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>
-            <div
-              className="absolute inset-0 blur-lg opacity-40 group-hover:opacity-80 transition-opacity"
-              style={{ background: ui.primaryColor }}
-            />
-          </div>
-          <div className="flex flex-col -gap-0.5">
-            <span className="font-black text-transparent bg-clip-text text-xl tracking-tight leading-none"
-              style={{ backgroundImage: `linear-gradient(to right, ${ui.primaryColor}, ${ui.accentColor})` }}
-            >
-              Retrivora&nbsp;AI
-            </span>
-            <div className="flex items-center gap-1.5">
-              <span className="font-bold text-slate-900 dark:text-white text-[10px] tracking-[0.15em] uppercase opacity-70">Accelerator</span>
-              <span className="text-[9px] px-1.5 py-0.5 rounded-full bg-slate-100 dark:bg-white/5 text-slate-500 dark:text-white/40 font-mono border border-slate-200/50 dark:border-white/10">v1.8.0</span>
-            </div>
-          </div>
-        </div>
-
-        <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>
-          <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>
-        </div>
-      </nav>
-
-      {/* ── Hero + Chat ── */}
+      <AmbientBackground />
+      <Navbar />
       <div className="relative z-10 container mx-auto px-6 py-12">
-        <div className="grid lg:grid-cols-2 gap-12 items-start">
-          <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` }}
-            >
-              <span className="w-1.5 h-1.5 rounded-full animate-pulse" style={{ background: ui.primaryColor }} />
-              {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">
-              {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 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>
-
-              <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>
-          <div className="lg:sticky lg:top-6">
-            <ChatWindow className="w-full" style={{ height: '620px' } as React.CSSProperties} />
-          </div>
-        </div>
-
-        {/* ── Lifecycle ── */}
-        <div className="mt-24 mb-12">
-          <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">
-            <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 ${isLeft ? 'md:flex-row' : 'md:flex-row-reverse'}`}>
-                    <div className={`w-full md:w-1/2 relative flex ${isLeft ? 'justify-end' : 'justify-start'}`}>
-                      <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">{desc}</p>
-                      </div>
-                    </div>
-                    <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>
-                    <div className="hidden md:block md:w-1/2" />
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        </div>
-
-        {/* ── 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">{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 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>
-              </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 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>
+        <Hero />
+        <Lifecycle />
+        <ArchitectureCardsSection />
+        <Documentation />
       </div>
-
       <ChatWidget position="bottom-right" />
     </main>
   );

package/src/components/AmbientBackground.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import React from 'react';
+import { useConfig } from '@/components/ConfigProvider';
+
+export function AmbientBackground() {
+  const { ui } = useConfig();
+
+  return (
+    <div className="absolute inset-0 overflow-hidden pointer-events-none">
+      <div
+        className="absolute -top-40 -left-40 w-[600px] h-[600px] rounded-full opacity-20 blur-3xl"
+        style={{ background: ui.primaryColor }}
+      />
+      <div
+        className="absolute -bottom-40 -right-40 w-[600px] h-[600px] rounded-full opacity-15 blur-3xl"
+        style={{ background: ui.accentColor }}
+      />
+      <div
+        className="absolute inset-0 opacity-[0.05] dark:opacity-[0.03]"
+        style={{
+          backgroundImage:
+            'linear-gradient(currentColor 1px, transparent 1px), linear-gradient(90deg, currentColor 1px, transparent 1px)',
+          backgroundSize: '48px 48px',
+        }}
+      />
+    </div>
+  );
+}

package/src/components/ArchitectureCard.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ArchitectureCardProps } from '@/app/types';
+
+export 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>
+  );
+}

package/src/components/ArchitectureCardsSection.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import React from 'react';
+import { ArchitectureCard } from '@/components/ArchitectureCard';
+import { ARCHITECTURE_CARDS } from '@/app/constants';
+
+export function ArchitectureCardsSection() {
+  return (
+    <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>
+  );
+}

package/src/components/ChatWidget.tsx

@@ -30,7 +30,6 @@ export function ChatWidget({ position = 'bottom-right', onAddToCart }: ChatWidge
       : 'bottom-20 right-6';
 
   const handleOpen = () => {
-    console.log('ChatWidget: Opening...');
     setIsOpen(true);
     setHasUnread(false);
   };