@retrivora-ai/rag-engine 1.9.7 → 1.9.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retrivora-ai/rag-engine",
-  "version": "1.9.7",
+  "version": "1.9.8",
   "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",
@@ -72,16 +72,21 @@
     "README.md"
   ],
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
+    "dev": "npx @tailwindcss/cli -i src/tailwind.css -o src/index.css && tsup src/index.ts src/handlers/index.ts src/server.ts --format cjs,esm --watch --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 --inject-style",
+    "build": "npm run build:pkg",
     "build:pkg": "npx @tailwindcss/cli -i src/tailwind.css -o src/index.css && 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 --inject-style && npx @tailwindcss/cli -i src/tailwind.css -o dist/index.css && rm src/index.css",
-    "start": "next start",
     "lint": "eslint",
-    "prepublishOnly": "npm run build:pkg"
+    "clean": "rm -rf dist"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react-dom": ">=18.0.0",
+    "next": ">=15.0.0"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
   },
   "dependencies": {
     "@anthropic-ai/sdk": "^0.95.1",
@@ -91,7 +96,6 @@
     "@types/papaparse": "^5.5.2",
     "axios": "^1.15.0",
     "lucide-react": "^1.8.0",
-    "next": "^16.2.6",
     "next-themes": "^0.4.6",
     "openai": "^6.34.0",
     "papaparse": "^5.5.3",

package/src/app/constants.tsx

@@ -17,6 +17,8 @@ import {
     FileText,
     Puzzle,
     MessageSquare,
+    Cpu,
+    Cloud,
 } from 'lucide-react';
 import { ArchitectureCardProps, Snippet, PipelineStep, ProviderPill } from './types';
 
@@ -51,6 +53,8 @@ export const AI_MODELS: ProviderPill[] = [
     { Icon: Sparkles, label: 'OpenAI' },
     { Icon: Bot, label: 'Anthropic' },
     { Icon: Brain, label: 'Gemini' },
+    { Icon: Cpu, label: 'Groq' },
+    { Icon: Cloud, label: 'Qwen' },
     { Icon: Code, label: 'Copilot' },
     { Icon: Terminal, label: 'LiteLLM' },
 ];
@@ -130,23 +134,49 @@ const { reply, sources } = await pipeline.ask('How does Retrivora work?');`,
         id: 'handlers',
         title: 'Route Handlers',
         language: 'typescript',
-        description: 'Deploy production-ready API endpoints in seconds using pre-built factories.',
-        code: `// src/app/api/retrivora/[[...retrivora]]/route.ts
-import { createRagHandler } from '@retrivora-ai/rag-engine/handlers';
+        description: 'Mount pre-built API endpoints. Configuration is automatically read from environment variables, or can be passed explicitly.',
+        code: `// ─── OPTION A: ZERO CONFIG (Reads from environment variables) ───
+// src/app/api/chat/route.ts
+import { createStreamHandler } from '@retrivora-ai/rag-engine/handlers';
+export const POST = createStreamHandler();
+
+// ─── OPTION B: EXPLICIT CONFIGURATION ───
+// src/app/api/chat/route.ts
+import { createStreamHandler } from '@retrivora-ai/rag-engine/handlers';
 
-// Single catch-all handler for GET /health and POST /chat, upload, suggestions
-export const { GET, POST } = createRagHandler();`,
+export const POST = createStreamHandler({
+  vectorDb: {
+    provider: 'pinecone',
+    apiKey: process.env.CUSTOM_PINECONE_KEY,
+    indexName: 'docs-index',
+  },
+  llm: {
+    provider: 'openai',
+    apiKey: process.env.CUSTOM_OPENAI_KEY,
+    model: 'gpt-4o',
+  }
+});`,
     },
     {
         id: 'ui',
         title: 'React Components',
         language: 'typescript',
-        description: 'Embed beautiful, themeable AI interfaces with headless logic or pre-built widgets.',
+        description: 'Configure and embed themeable UI widgets using the ConfigProvider context.',
         code: `import { ConfigProvider, ChatWidget } from '@retrivora-ai/rag-engine';
 
 export default function Layout({ children }) {
   return (
-    <ConfigProvider config={{ projectId: 'demo' }}>
+    <ConfigProvider config={{
+      projectId: 'my-project-id',
+      ui: {
+        title: 'Retrivora Assistant',
+        welcomeMessage: 'Hi! Ask me anything about our software.',
+        primaryColor: '#4f46e5',  // Custom primary brand color
+        accentColor: '#8b5cf6',   // Custom accent gradient color
+        borderRadius: 'lg',       // 'none' | 'sm' | 'md' | 'lg' | 'xl'
+        allowUpload: true,        // Toggle custom file uploading
+      }
+    }}>
       {children}
       <ChatWidget position="bottom-right" />
     </ConfigProvider>

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, apiUrl, headers }: 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);
@@ -147,6 +147,7 @@ export function ChatWidget({ position = 'bottom-right', onAddToCart, apiUrl, hea
           isMaximized={isMaximized}
           onAddToCart={onAddToCart}
           apiUrl={apiUrl}
+          retrivoraApiBase={retrivoraApiBase}
           headers={headers}
         />
         {/* Pointer (Tail) */}

package/src/components/ChatWindow.tsx

@@ -64,6 +64,7 @@ export function ChatWindow({
   isMaximized = false,
   onAddToCart,
   apiUrl,
+  retrivoraApiBase,
   headers
 }: ChatWindowProps) {
   const { ui, projectId } = useConfig();
@@ -73,9 +74,10 @@ 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,
   });
 
@@ -376,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

@@ -6,98 +6,92 @@ 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;
+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 handlePrev = () => { if (!isFirst) setActiveSnippet(SNIPPETS[currentIndex - 1]); };
+  const handleNext = () => { if (!isLast)  setActiveSnippet(SNIPPETS[currentIndex + 1]); };
 
   const progressPercent = Math.round(((currentIndex + 1) / totalSteps) * 100);
 
   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>
 
-      {/* Visual Progress Bar */}
-      <div className="mb-6 bg-slate-100 dark:bg-white/5 rounded-full h-2.5 overflow-hidden border border-slate-200/50 dark:border-white/5 relative">
-        <div 
-          className="h-full bg-gradient-to-r from-indigo-500 via-indigo-600 to-violet-600 transition-all duration-500 rounded-full shadow-[0_0_8px_rgba(99,102,241,0.5)]"
-          style={{ width: `${progressPercent}%` }}
+      {/* 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>
 
-      <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 flex items-start justify-between gap-4 flex-wrap sm:flex-nowrap">
+      {/* 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-xl font-bold text-slate-900 dark:text-white mb-2 flex items-center gap-3">
+            <h3 className="text-lg font-bold text-slate-900 mb-1.5 flex items-center gap-3">
               {activeSnippet.title}
-              <span className="text-[10px] font-extrabold uppercase px-2 py-0.5 rounded bg-indigo-50 dark:bg-indigo-500/10 border border-indigo-100 dark:border-indigo-500/20 text-indigo-600 dark:text-indigo-400">
+              <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-sm text-slate-500 dark:text-white/40 leading-relaxed font-medium italic">
-              {activeSnippet.description}
-            </p>
+            <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 dark:text-indigo-400 self-center shrink-0">
-            {progressPercent}% Complete
-          </span>
+          <span className="text-xs font-mono font-bold text-indigo-600 self-center shrink-0">{progressPercent}% Complete</span>
         </div>
-        
+
         <CodeViewer snippet={activeSnippet} />
 
-        {/* Next/Prev Navigation */}
-        <div className="flex items-center justify-between border-t border-slate-200 dark:border-white/10 pt-6 mt-4">
+        {/* 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-40 cursor-not-allowed border-slate-200 dark:border-white/5 text-slate-400 dark:text-white/20 bg-slate-50 dark:bg-transparent'
-                : 'bg-white dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-700 dark:text-white/70 hover:border-slate-300 dark:hover:border-white/20 active:scale-95'
+                ? '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={14} /> Previous Step
+            <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-40 cursor-not-allowed border-slate-200 dark:border-white/5 text-slate-400 dark:text-white/20 bg-slate-50 dark:bg-transparent'
-                : 'bg-indigo-600 text-white border-indigo-600 hover:bg-indigo-700 hover:border-indigo-700 active:scale-95 shadow-md shadow-indigo-500/10'
+                ? '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={14} />
+            {isLast ? 'Complete!' : 'Next Step'} <ArrowRight size={13} />
           </button>
         </div>
       </div>
-    </>
+    </div>
   );
 }