@retrivora-ai/rag-engine 1.9.6 → 1.9.8

package/src/components/AmbientBackground.tsx

@@ -1,27 +1,27 @@
 '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">
+      {/* Soft indigo orb — top left */}
       <div
-        className="absolute -top-40 -left-40 w-[600px] h-[600px] rounded-full opacity-20 blur-3xl"
-        style={{ background: ui.primaryColor }}
+        className="absolute -top-24 -left-24 w-[600px] h-[600px] rounded-full opacity-25 blur-3xl"
+        style={{ background: 'radial-gradient(circle, #c7d2fe 0%, #a5b4fc 40%, transparent 70%)' }}
       />
+      {/* Soft violet orb — top right */}
       <div
-        className="absolute -bottom-40 -right-40 w-[600px] h-[600px] rounded-full opacity-15 blur-3xl"
-        style={{ background: ui.accentColor }}
+        className="absolute -top-20 right-0 w-[500px] h-[500px] rounded-full opacity-20 blur-3xl"
+        style={{ background: 'radial-gradient(circle, #ddd6fe 0%, #c4b5fd 50%, transparent 70%)' }}
       />
+      {/* Subtle grid */}
       <div
-        className="absolute inset-0 opacity-[0.05] dark:opacity-[0.03]"
+        className="absolute inset-0 opacity-[0.025]"
         style={{
           backgroundImage:
-            'linear-gradient(currentColor 1px, transparent 1px), linear-gradient(90deg, currentColor 1px, transparent 1px)',
-          backgroundSize: '48px 48px',
+            'linear-gradient(#6366f1 1px, transparent 1px), linear-gradient(90deg, #6366f1 1px, transparent 1px)',
+          backgroundSize: '56px 56px',
         }}
       />
     </div>

package/src/components/ArchitectureCard.tsx

@@ -1,17 +1,53 @@
 import React from 'react';
 import { ArchitectureCardProps } from '@/app/types';
+import { ArrowRight } from 'lucide-react';
 
-export function ArchitectureCard({ icon, title, description, badge, badgeColor }: ArchitectureCardProps) {
+interface ExtendedArchitectureCardProps extends ArchitectureCardProps {
+  gradientFrom?: string;
+  gradientTo?: string;
+}
+
+export function ArchitectureCard({ icon, title, description, badge, badgeColor, gradientFrom = '#6366f1', gradientTo = '#8b5cf6' }: ExtendedArchitectureCardProps) {
   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}`}>
+    <div className="group relative bg-white rounded-2xl border border-slate-200 p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-slate-200/80 overflow-hidden cursor-default">
+      {/* Gradient top accent */}
+      <div
+        className="absolute top-0 left-0 right-0 h-0.5 rounded-t-2xl opacity-80 group-hover:opacity-100 transition-opacity"
+        style={{ background: `linear-gradient(90deg, ${gradientFrom}, ${gradientTo})` }}
+      />
+
+      {/* Card top row */}
+      <div className="mb-5 flex items-center justify-between">
+        <div
+          className="w-12 h-12 rounded-xl flex items-center justify-center text-2xl transition-transform duration-300 group-hover:scale-110"
+          style={{
+            background: `linear-gradient(135deg, ${gradientFrom}18, ${gradientTo}10)`,
+            border: `1px solid ${gradientFrom}20`,
+          }}
+        >
+          {icon}
+        </div>
+        <span className={`rounded-full border px-3 py-1 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>
+
+      <h3 className="mb-2 font-bold text-slate-900 text-base">{title}</h3>
+      <p className="text-sm text-slate-500 leading-relaxed">{description}</p>
+
+      {/* "Learn more" on hover */}
+      <div
+        className="mt-5 flex items-center gap-1 text-[11px] font-semibold opacity-0 group-hover:opacity-100 transition-all duration-300 -translate-y-1 group-hover:translate-y-0"
+        style={{ color: gradientFrom }}
+      >
+        Learn more <ArrowRight className="h-3 w-3" />
+      </div>
+
+      {/* Subtle hover bg tint */}
+      <div
+        className="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"
+        style={{ background: `radial-gradient(ellipse at 50% 0%, ${gradientFrom}05 0%, transparent 70%)` }}
+      />
     </div>
   );
 }

package/src/components/ArchitectureCardsSection.tsx

@@ -1,15 +1,48 @@
 'use client';
 
 import React from 'react';
+import Link from 'next/link';
 import { ArchitectureCard } from '@/components/ArchitectureCard';
 import { ARCHITECTURE_CARDS } from '@/app/constants';
+import { ArrowRight } from 'lucide-react';
+
+const CARD_GRADIENTS = [
+  { from: '#6366f1', to: '#8b5cf6' },
+  { from: '#f59e0b', to: '#f97316' },
+  { from: '#10b981', to: '#06b6d4' },
+];
 
 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 className="relative">
+      <div className="text-center mb-12">
+        <h2 className="text-3xl md:text-4xl font-black text-slate-900 mb-4">
+          Built for every layer of the stack
+        </h2>
+        <p className="text-slate-500 max-w-xl mx-auto text-base leading-relaxed">
+          Swap providers without rewriting a single line of business logic.
+        </p>
+      </div>
+
+      <div className="grid gap-5 sm:grid-cols-3 max-w-5xl mx-auto">
+        {ARCHITECTURE_CARDS.map((card, i) => (
+          <ArchitectureCard
+            key={i}
+            {...card}
+            gradientFrom={CARD_GRADIENTS[i]?.from}
+            gradientTo={CARD_GRADIENTS[i]?.to}
+          />
+        ))}
+      </div>
+
+      <div className="mt-10 text-center">
+        <Link
+          href="/features"
+          className="inline-flex items-center gap-2 px-6 py-3 rounded-xl text-sm font-semibold text-slate-600 hover:text-indigo-600 border border-slate-200 hover:border-indigo-200 bg-white hover:bg-indigo-50 transition-all shadow-sm"
+        >
+          Explore all features <ArrowRight className="h-4 w-4" />
+        </Link>
+      </div>
     </div>
   );
 }

package/src/components/ChatWidget.tsx

@@ -46,7 +46,7 @@ const GEMINI_STYLES = `
   }
 `;
 
-export function ChatWidget({ position = 'bottom-right', onAddToCart }: ChatWidgetProps) {
+export function ChatWidget({ position = 'bottom-right', onAddToCart, apiUrl, retrivoraApiBase, headers }: ChatWidgetProps) {
   const { ui } = useConfig();
   const [isOpen, setIsOpen] = useState(false);
   const [hasUnread, setHasUnread] = useState(false);
@@ -146,6 +146,9 @@ export function ChatWidget({ position = 'bottom-right', onAddToCart }: ChatWidge
           onMaximize={ui.allowResize !== false ? handleMaximize : undefined}
           isMaximized={isMaximized}
           onAddToCart={onAddToCart}
+          apiUrl={apiUrl}
+          retrivoraApiBase={retrivoraApiBase}
+          headers={headers}
         />
         {/* Pointer (Tail) */}
         <div

package/src/components/ChatWindow.tsx

@@ -62,7 +62,10 @@ export function ChatWindow({
   isResized = false,
   onMaximize,
   isMaximized = false,
-  onAddToCart
+  onAddToCart,
+  apiUrl,
+  retrivoraApiBase,
+  headers
 }: ChatWindowProps) {
   const { ui, projectId } = useConfig();
   const [input, setInput] = useState('');
@@ -71,8 +74,11 @@ export function ChatWindow({
   const windowRef = useRef<HTMLDivElement>(null);
   const bottomRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLTextAreaElement>(null);
-  const { messages, send, clear, isLoading, error, stop } = useRagChat(projectId, {
+  const { messages, send, clear, isLoading, error, stop, submitFeedback } = useRagChat(projectId, {
     namespace: projectId,
+    apiUrl,
+    retrivoraApiBase,
+    headers,
   });
 
   const [suggestions, setSuggestions] = useState<string[]>([]);
@@ -372,6 +378,7 @@ export function ChatWindow({
               accentColor={ui.accentColor}
               onAddToCart={onAddToCart}
               viewportSize={viewportSize}
+              onFeedback={submitFeedback}
             />
           ))
         )}

package/src/components/CodeViewer.tsx

@@ -14,35 +14,40 @@ export function CodeViewer({ snippet }: { snippet: Snippet }) {
   };
 
   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 flex-col rounded-2xl border border-white/8 overflow-hidden min-h-[300px] shadow-xl">
+      {/* VS Code-style chrome header */}
+      <div className="flex items-center justify-between px-5 py-3 border-b border-white/5 bg-[#0d0d1a]">
+        <div className="flex items-center gap-4">
           <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 className="w-2.5 h-2.5 rounded-full bg-rose-500/80" />
+            <div className="w-2.5 h-2.5 rounded-full bg-amber-500/80" />
+            <div className="w-2.5 h-2.5 rounded-full bg-emerald-500/80" />
           </div>
-          <span className="text-[10px] font-mono text-slate-400 dark:text-white/30 uppercase tracking-widest ml-2">{snippet.language}</span>
+          <span className="text-[10px] font-mono text-white/25 uppercase tracking-widest">
+            {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"
+          className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-[10px] font-bold text-white/35 hover:text-white/80 hover:bg-white/5 transition-all active:scale-95"
         >
           {copied ? (
             <>
-              <Check size={14} className="text-emerald-500" />
-              <span className="text-emerald-500">Copied!</span>
+              <Check size={12} className="text-emerald-400" />
+              <span className="text-emerald-400">Copied!</span>
             </>
           ) : (
             <>
-              <Copy size={14} />
-              <span>Copy Code</span>
+              <Copy size={12} />
+              Copy Code
             </>
           )}
         </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 body */}
+      <div className="p-6 font-mono text-[12px] leading-relaxed overflow-auto flex-grow bg-[#080818]">
+        <pre className="whitespace-pre text-indigo-200/85">
           <code>{snippet.code}</code>
         </pre>
       </div>

package/src/components/DocViewer.tsx

@@ -4,34 +4,94 @@ import React from 'react';
 import { Snippet } from '@/app/types';
 import { SNIPPETS } from '@/app/constants';
 import { CodeViewer } from './CodeViewer';
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+
+export function DocViewer({ activeSnippet, setActiveSnippet }: { activeSnippet: Snippet; setActiveSnippet: (s: Snippet) => void }) {
+  const currentIndex = SNIPPETS.findIndex(s => s.id === activeSnippet.id);
+  const totalSteps   = SNIPPETS.length;
+  const isFirst      = currentIndex === 0;
+  const isLast       = currentIndex === totalSteps - 1;
+
+  const handlePrev = () => { if (!isFirst) setActiveSnippet(SNIPPETS[currentIndex - 1]); };
+  const handleNext = () => { if (!isLast)  setActiveSnippet(SNIPPETS[currentIndex + 1]); };
+
+  const progressPercent = Math.round(((currentIndex + 1) / totalSteps) * 100);
 
-export 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) => (
+    <div className="flex flex-col h-full p-6 gap-5">
+      {/* Tab selector */}
+      <div className="flex flex-wrap gap-1.5 border-b border-slate-100 pb-5">
+        {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'
-              }`}
+            className={`px-4 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-wider transition-all border ${
+              activeSnippet.id === snippet.id
+                ? 'bg-indigo-600 text-white border-indigo-600 shadow-sm scale-[1.03]'
+                : 'bg-slate-50 border-slate-200 text-slate-500 hover:text-indigo-600 hover:border-indigo-200 hover:bg-indigo-50'
+            }`}
           >
             {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>
+      {/* Progress bar */}
+      <div className="bg-slate-100 rounded-full h-1.5 overflow-hidden">
+        <div
+          className="h-full rounded-full transition-all duration-500"
+          style={{
+            width: `${progressPercent}%`,
+            background: 'linear-gradient(90deg, #4f46e5, #7c3aed)',
+            boxShadow: '0 0 6px rgba(79, 102, 241, 0.4)',
+          }}
+        />
+      </div>
+
+      {/* Content */}
+      <div className="flex-grow flex flex-col gap-5">
+        <div className="flex items-start justify-between gap-4 flex-wrap sm:flex-nowrap">
+          <div>
+            <h3 className="text-lg font-bold text-slate-900 mb-1.5 flex items-center gap-3">
+              {activeSnippet.title}
+              <span className="text-[9px] font-extrabold uppercase px-2 py-0.5 rounded bg-indigo-50 border border-indigo-100 text-indigo-600">
+                Step {currentIndex + 1} of {totalSteps}
+              </span>
+            </h3>
+            <p className="text-xs text-slate-500 leading-relaxed italic">{activeSnippet.description}</p>
+          </div>
+          <span className="text-xs font-mono font-bold text-indigo-600 self-center shrink-0">{progressPercent}% Complete</span>
         </div>
+
         <CodeViewer snippet={activeSnippet} />
+
+        {/* Navigation */}
+        <div className="flex items-center justify-between border-t border-slate-100 pt-5 mt-auto">
+          <button
+            onClick={handlePrev}
+            disabled={isFirst}
+            className={`flex items-center gap-2 px-5 py-2.5 rounded-xl text-xs font-bold transition-all border ${
+              isFirst
+                ? 'opacity-35 cursor-not-allowed border-slate-100 text-slate-300 bg-slate-50'
+                : 'bg-white border-slate-200 text-slate-600 hover:border-slate-300 hover:bg-slate-50 active:scale-95'
+            }`}
+          >
+            <ArrowLeft size={13} /> Previous Step
+          </button>
+          <button
+            onClick={handleNext}
+            disabled={isLast}
+            className={`flex items-center gap-2 px-6 py-2.5 rounded-xl text-xs font-bold transition-all border ${
+              isLast
+                ? 'opacity-35 cursor-not-allowed border-slate-100 text-slate-300 bg-slate-50'
+                : 'text-white border-transparent shadow-md active:scale-95 hover:-translate-y-0.5'
+            }`}
+            style={!isLast ? { background: 'linear-gradient(135deg, #4f46e5, #7c3aed)', boxShadow: '0 4px 14px -4px rgba(79,70,229,0.35)' } : {}}
+          >
+            {isLast ? 'Complete!' : 'Next Step'} <ArrowRight size={13} />
+          </button>
+        </div>
       </div>
-    </>
+    </div>
   );
 }

package/src/components/Documentation.tsx

@@ -1,56 +1,139 @@
 'use client';
 
 import React from 'react';
-import { FileText, Zap, Package, ExternalLink } from 'lucide-react';
+import { FileText, Zap, Package, ExternalLink, Code } from 'lucide-react';
 import { DocViewer } from '@/components/DocViewer';
-import { LANDING_PAGE_CONTENT, QUICK_START_STEPS, API_ENDPOINTS, SNIPPETS } from '@/app/constants';
+import { LANDING_PAGE_CONTENT, QUICK_START_STEPS, ADVANCED_STEPS, API_ENDPOINTS, SNIPPETS } from '@/app/constants';
 import { Snippet } from '@/app/types';
 
 export function Documentation() {
   const [activeSnippet, setActiveSnippet] = React.useState<Snippet>(SNIPPETS[0]);
 
   return (
-    <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 className="max-w-6xl mx-auto">
+      {/* Header */}
+      <div className="text-center mb-14">
+        <span className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-indigo-50 border border-indigo-100 text-[10px] font-bold uppercase tracking-widest text-indigo-600 mb-5">
+          <span className="w-1.5 h-1.5 rounded-full bg-indigo-500 animate-pulse" />
+          Developer Guide
+        </span>
+        <h2 className="text-3xl md:text-4xl font-black text-slate-900 mb-4">
+          {LANDING_PAGE_CONTENT.guide.title}
+        </h2>
+        <p className="text-slate-500 max-w-xl mx-auto text-base leading-relaxed">
+          {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">
+
+      {/* Grid */}
+      <div className="w-full grid gap-8 lg:grid-cols-[270px_1fr] items-start">
+        {/* Sidebar */}
+        <aside className="flex flex-col gap-5">
+          {/* Quick Start */}
           <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 className="mb-3 text-[10px] font-black text-slate-400 uppercase tracking-[0.3em] flex items-center gap-2">
+              <FileText size={12} 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 className="space-y-1">
+              {QUICK_START_STEPS.map((step, i) => {
+                const isActive = activeSnippet.id === step.id;
+                return (
+                  <li key={step.id}>
+                    <button
+                      onClick={() => { const s = SNIPPETS.find(s => s.id === step.id); if (s) setActiveSnippet(s); }}
+                      className={`w-full flex items-start gap-3 p-3 rounded-xl border text-left transition-all active:scale-[0.98] ${
+                        isActive
+                          ? 'bg-indigo-50 border-indigo-200 shadow-sm'
+                          : 'bg-white border-slate-200 hover:border-slate-300 hover:bg-slate-50'
+                      }`}
+                    >
+                      <span className={`flex h-6 w-6 shrink-0 items-center justify-center rounded-lg font-mono text-[10px] font-bold border transition-all ${
+                        isActive ? 'bg-indigo-600 text-white border-indigo-600 shadow-sm' : 'bg-slate-100 text-slate-500 border-slate-200'
+                      }`}>{i + 1}</span>
+                      <div className="pt-0.5">
+                        <span className={`text-xs font-semibold block ${isActive ? 'text-indigo-700 font-bold' : 'text-slate-700'}`}>{step.text}</span>
+                        <span className="text-[9px] text-slate-400 block mt-0.5">Step {i + 1}</span>
+                      </div>
+                    </button>
+                  </li>
+                );
+              })}
+            </ol>
+          </section>
+
+          {/* Advanced */}
+          <section>
+            <h2 className="mb-3 text-[10px] font-black text-slate-400 uppercase tracking-[0.3em] flex items-center gap-2">
+              <Code size={12} className="text-violet-500" /> Advanced Options
+            </h2>
+            <ol className="space-y-1">
+              {ADVANCED_STEPS.map((step, i) => {
+                const isActive = activeSnippet.id === step.id;
+                return (
+                  <li key={step.id}>
+                    <button
+                      onClick={() => { const s = SNIPPETS.find(s => s.id === step.id); if (s) setActiveSnippet(s); }}
+                      className={`w-full flex items-start gap-3 p-3 rounded-xl border text-left transition-all active:scale-[0.98] ${
+                        isActive
+                          ? 'bg-violet-50 border-violet-200 shadow-sm'
+                          : 'bg-white border-slate-200 hover:border-slate-300 hover:bg-slate-50'
+                      }`}
+                    >
+                      <span className={`flex h-6 w-6 shrink-0 items-center justify-center rounded-lg font-mono text-[10px] font-bold border transition-all ${
+                        isActive ? 'bg-violet-600 text-white border-violet-600 shadow-sm' : 'bg-slate-100 text-slate-500 border-slate-200'
+                      }`}>{i + 5}</span>
+                      <div className="pt-0.5">
+                        <span className={`text-xs font-semibold block ${isActive ? 'text-violet-700 font-bold' : 'text-slate-700'}`}>{step.text}</span>
+                        <span className="text-[9px] text-slate-400 block mt-0.5">Extension</span>
+                      </div>
+                    </button>
+                  </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
+
+          {/* API Endpoints */}
+          <section className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+            <h2 className="mb-4 text-[10px] font-black text-slate-400 uppercase tracking-[0.3em] flex items-center gap-2">
+              <Zap size={12} className="text-indigo-500" /> API Endpoints
             </h2>
-            <div className="grid gap-2.5">
+            <div className="grid gap-2">
               {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
+                  key={slug}
+                  className="flex items-center justify-between p-2.5 rounded-lg bg-slate-50 border border-slate-100 hover:border-indigo-200 hover:bg-indigo-50 transition-all group"
+                >
+                  <span className="text-[10px] font-mono text-slate-500 group-hover:text-indigo-600 transition-colors">/api/{slug}</span>
+                  <span className="text-[8px] font-bold text-indigo-600 bg-indigo-50 px-1.5 py-0.5 rounded border border-indigo-100">POST</span>
                 </div>
               ))}
             </div>
           </section>
         </aside>
+
+        {/* Code Viewer */}
         <section className="flex flex-col h-full min-h-[560px]">
-          <DocViewer activeSnippet={activeSnippet} setActiveSnippet={setActiveSnippet} />
+          <div className="rounded-2xl border border-slate-200 bg-white overflow-hidden h-full shadow-sm">
+            <DocViewer activeSnippet={activeSnippet} setActiveSnippet={setActiveSnippet} />
+          </div>
         </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" />
+
+      {/* CTA */}
+      <div className="mt-14 text-center">
+        <a
+          href="https://www.npmjs.com/package/@retrivora-ai/rag-engine"
+          target="_blank" rel="noreferrer"
+          className="inline-flex items-center gap-3 px-8 py-4 rounded-2xl text-white font-bold text-sm shadow-lg transition-all hover:-translate-y-0.5"
+          style={{
+            background: 'linear-gradient(135deg, #4f46e5, #7c3aed)',
+            boxShadow: '0 8px 24px -6px rgba(79, 70, 229, 0.35)',
+          }}
+        >
+          <Package className="w-5 h-5" />
+          Get Started on NPM
+          <ExternalLink className="w-4 h-4" />
         </a>
       </div>
     </div>