@retrivora-ai/rag-engine 1.9.7 → 1.9.8

package/src/components/Documentation.tsx

@@ -10,43 +10,49 @@ 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-8">
+
+      {/* 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-4 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-2.5">
+            <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 snip = SNIPPETS.find((s) => s.id === step.id);
-                        if (snip) setActiveSnippet(snip);
-                      }}
-                      className={`w-full flex items-start gap-4 p-3 rounded-xl border text-left transition-all active:scale-[0.98] ${
+                      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-500/10 dark:bg-indigo-500/10 border-indigo-200 dark:border-indigo-500/30'
-                          : 'bg-white dark:bg-white/3 border-slate-200 dark:border-white/5 hover:border-slate-300 dark:hover:border-white/10 hover:bg-slate-50 dark:hover:bg-white/5 shadow-sm'
+                          ? '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-md shadow-indigo-500/20'
-                          : 'bg-slate-100 dark:bg-white/5 text-slate-600 dark:text-white/40 border-slate-200 dark:border-white/10'
+                        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 transition-colors ${
-                          isActive ? 'text-indigo-600 dark:text-indigo-400 font-bold' : 'text-slate-700 dark:text-white/70 font-medium'
-                        }`}>{step.text}</span>
-                        <span className="text-[9px] text-slate-400 dark:text-white/30 block mt-0.5">Step {i + 1}</span>
+                        <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>
@@ -55,36 +61,30 @@ export function Documentation() {
             </ol>
           </section>
 
+          {/* Advanced */}
           <section>
-            <h2 className="mb-4 text-[10px] font-black text-slate-400 dark:text-white/30 uppercase tracking-[0.3em] flex items-center gap-3">
-              <Code size={14} className="text-violet-500" /> Advanced Options
+            <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-2.5">
+            <ol className="space-y-1">
               {ADVANCED_STEPS.map((step, i) => {
                 const isActive = activeSnippet.id === step.id;
                 return (
                   <li key={step.id}>
                     <button
-                      onClick={() => {
-                        const snip = SNIPPETS.find((s) => s.id === step.id);
-                        if (snip) setActiveSnippet(snip);
-                      }}
-                      className={`w-full flex items-start gap-4 p-3 rounded-xl border text-left transition-all active:scale-[0.98] ${
+                      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-500/10 dark:bg-violet-500/10 border-violet-200 dark:border-violet-500/30'
-                          : 'bg-white dark:bg-white/3 border-slate-200 dark:border-white/5 hover:border-slate-300 dark:hover:border-white/10 hover:bg-slate-50 dark:hover:bg-white/5 shadow-sm'
+                          ? '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-md shadow-violet-500/20'
-                          : 'bg-slate-100 dark:bg-white/5 text-slate-600 dark:text-white/40 border-slate-200 dark:border-white/10'
+                        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 transition-colors ${
-                          isActive ? 'text-violet-600 dark:text-violet-400 font-bold' : 'text-slate-700 dark:text-white/70 font-medium'
-                        }`}>{step.text}</span>
-                        <span className="text-[9px] text-slate-400 dark:text-white/30 block mt-0.5">Extension</span>
+                        <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>
@@ -93,27 +93,47 @@ export function Documentation() {
             </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>

package/src/components/Hero.tsx

@@ -1,58 +1,141 @@
 'use client';
 
 import React from 'react';
+import Link from 'next/link';
 import { useConfig } from '@/components/ConfigProvider';
 import { ChatWindow } from '@/components/ChatWindow';
 import { LANDING_PAGE_CONTENT, VECTOR_DATABASES, AI_MODELS } from '@/app/constants';
+import { ArrowRight, Package, GitBranch, Shield, Zap, CheckCircle } from 'lucide-react';
 
 export function Hero() {
   const { ui } = useConfig();
 
   return (
-    <div className="grid lg:grid-cols-2 gap-12 items-start">
-      <div className="flex flex-col gap-6 pt-4">
+    <div className="grid lg:grid-cols-2 gap-12 xl:gap-16 items-start">
+      {/* ── Left Column ─────────────────────────────── */}
+      <div className="flex flex-col gap-7 pt-4">
+        {/* Badge */}
         <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` }}
+          className="inline-flex items-center gap-2.5 px-4 py-2 rounded-full text-xs font-semibold border w-fit"
+          style={{
+            borderColor: `${ui.primaryColor}30`,
+            color: ui.primaryColor,
+            background: `${ui.primaryColor}08`,
+          }}
         >
-          <span className="w-1.5 h-1.5 rounded-full animate-pulse" style={{ background: ui.primaryColor }} />
+          <span
+            className="w-2 h-2 rounded-full"
+            style={{ background: ui.primaryColor, animation: 'pulseRing 2.5s ease-in-out infinite' }}
+          />
           {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})` }}>
+
+        {/* Headline */}
+        <h1 className="text-5xl md:text-6xl xl:text-7xl font-black text-slate-900 tracking-tight leading-[1.05]">
+          {LANDING_PAGE_CONTENT.hero.title.split('for')[0]}
+          <br />
+          <span
+            className="text-transparent bg-clip-text"
+            style={{ backgroundImage: `linear-gradient(135deg, ${ui.primaryColor} 0%, ${ui.accentColor} 60%, #a855f7 100%)` }}
+          >
             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">
+
+        {/* Subtitle */}
+        <p className="text-lg md:text-xl text-slate-500 max-w-lg 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>
+
+        {/* Trust pills */}
+        {/* <div className="flex flex-wrap items-center gap-2 mt-1">
+          {[
+            // { icon: Shield, color: 'text-emerald-600', bg: 'bg-emerald-50 border-emerald-100', label: 'MIT Licensed' },
+            { icon: Package, color: 'text-red-500', bg: 'bg-red-50 border-red-100', label: 'npm install @retrivora-ai/rag-engine' },
+            // { icon: CheckCircle, color: 'text-indigo-600', bg: 'bg-indigo-50 border-indigo-100', label: 'TypeScript First' },
+          ].map(({ icon: Icon, color, bg, label }) => (
+            <span key={label} className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg border text-[11px] font-semibold text-slate-600 ${bg}`}>
+              <Icon className={`h-3 w-3 ${color}`} /> {label}
+            </span>
+          ))}
+        </div> */}
+
+        {/* Provider ecosystem */}
+        <div className="flex flex-col gap-4 border-t border-slate-100">
+          <div className="flex flex-col gap-2.5">
+            <span className="text-[10px] font-black text-slate-400 uppercase tracking-[0.22em] 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
+                  key={label}
+                  className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white border border-slate-200 text-slate-600 text-[11px] font-semibold hover:border-indigo-300 hover:bg-indigo-50 hover:text-indigo-700 transition-all cursor-default group shadow-sm"
+                >
+                  <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-col gap-2.5">
+            <span className="text-[10px] font-black text-slate-400 uppercase tracking-[0.22em] 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
+                  key={label}
+                  className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white border border-slate-200 text-slate-600 text-[11px] font-semibold hover:border-violet-300 hover:bg-violet-50 hover:text-violet-700 transition-all cursor-default group shadow-sm"
+                >
+                  <Icon className="w-3 h-3 transition-transform group-hover:scale-110" style={{ color: ui.accentColor }} />
+                  {label}
                 </span>
               ))}
             </div>
           </div>
         </div>
+
+        {/* CTAs */}
+        <div className="flex flex-wrap items-center gap-3 mt-1">
+          <Link
+            href="/register"
+            className="group flex items-center gap-2 px-6 py-3.5 rounded-xl text-sm font-bold text-white transition-all duration-200 shadow-lg hover:-translate-y-0.5"
+            style={{
+              background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})`,
+              boxShadow: `0 8px 24px -6px ${ui.primaryColor}45`,
+            }}
+          >
+            Get Started Free
+            <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
+          </Link>
+          {/* <a
+            href="https://github.com/abhinav1201/ai-accelerator"
+            target="_blank" rel="noreferrer"
+            className="flex items-center gap-2 px-6 py-3.5 rounded-xl text-sm font-semibold text-slate-700 hover:text-slate-900 border border-slate-200 hover:border-slate-300 bg-white hover:bg-slate-50 transition-all shadow-sm"
+          >
+            <GitBranch className="h-4 w-4" />
+            View on GitHub
+          </a> */}
+        </div>
       </div>
-      <div className="lg:sticky lg:top-6 h-[calc(100vh-3rem)] min-h-[500px] max-h-[800px]">
-        <ChatWindow className="w-full h-full" />
+
+      {/* ── Right Column — Live Demo ─────────────────── */}
+      <div className="relative lg:sticky lg:top-6 h-[480px] lg:h-[calc(100vh-6rem)] min-h-[400px] lg:min-h-[520px] max-h-[800px]">
+        {/* Decorative glow ring */}
+        <div
+          className="absolute -inset-3 rounded-3xl pointer-events-none"
+          style={{ background: `radial-gradient(ellipse at center, ${ui.primaryColor}12 0%, transparent 70%)` }}
+        />
+        <div className="relative h-full rounded-2xl overflow-hidden border border-slate-200 shadow-xl shadow-slate-200/80">
+          <ChatWindow className="w-full h-full" />
+        </div>
+        {/* "Live demo" tag */}
+        <div className="absolute -bottom-3 left-1/2 -translate-x-1/2 flex items-center gap-1.5 px-3.5 py-1.5 bg-white border border-slate-200 rounded-full text-[10px] font-semibold text-slate-500 shadow-md whitespace-nowrap">
+          <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
+          Live Retrivora demo — powered by this SDK
+        </div>
       </div>
     </div>
   );

package/src/components/Lifecycle.tsx

@@ -5,32 +5,72 @@ import { LANDING_PAGE_CONTENT, PIPELINE_STEPS } from '@/app/constants';
 
 export function Lifecycle() {
   return (
-    <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 className="relative">
+      {/* Section 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" />
+          How It Works
+        </span>
+        <h2 className="text-3xl md:text-4xl font-black text-slate-900 mb-4">
+          {LANDING_PAGE_CONTENT.lifecycle.title}
+        </h2>
+        <p className="text-slate-500 max-w-lg mx-auto text-base leading-relaxed">
+          Four composable stages from raw documents to grounded AI responses.
+        </p>
+      </div>
+
+      {/* Steps grid */}
+      <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-5 max-w-6xl mx-auto">
+        {PIPELINE_STEPS.map(({ step, Icon, title, desc, colors }, index) => (
+          <div
+            key={step}
+            className="group relative bg-white rounded-2xl border border-slate-200 p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:shadow-slate-200/80 overflow-hidden cursor-default"
+          >
+            {/* Gradient top border */}
+            <div
+              className="absolute top-0 left-0 right-0 h-0.5 rounded-t-2xl"
+              style={{ background: `linear-gradient(90deg, ${colors.from}, ${colors.to})` }}
+            />
+
+            {/* Step number watermark */}
+            <div
+              className="absolute -right-2 -bottom-4 text-8xl font-black opacity-[0.05] select-none pointer-events-none group-hover:opacity-[0.08] transition-opacity"
+              style={{ color: colors.from }}
+            >
+              {step}
+            </div>
+
+            {/* Icon container */}
+            <div
+              className="relative z-10 w-11 h-11 rounded-xl flex items-center justify-center mb-5 transition-transform duration-300 group-hover:scale-105"
+              style={{
+                background: `linear-gradient(135deg, ${colors.from}18, ${colors.to}10)`,
+                border: `1px solid ${colors.from}25`,
+              }}
+            >
+              <Icon className="w-5 h-5" style={{ color: colors.from }} />
+            </div>
+
+            {/* Content */}
+            <div className="relative z-10">
+              <div
+                className="text-[10px] font-black uppercase tracking-widest mb-1.5"
+                style={{ color: colors.from }}
+              >
+                Step {index + 1}
               </div>
-            );
-          })}
-        </div>
+              <h3 className="text-base font-bold text-slate-900 mb-2">{title}</h3>
+              <p className="text-sm text-slate-500 leading-relaxed">{desc}</p>
+            </div>
+
+            {/* Hover glow */}
+            <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%, ${colors.from}07 0%, transparent 70%)` }}
+            />
+          </div>
+        ))}
       </div>
     </div>
   );

package/src/components/MarkdownComponents.tsx

@@ -116,10 +116,11 @@ export function createMarkdownComponents({
             />
           );
         }
+        return <CodeBlock language={lang}>{content}</CodeBlock>;
       }
 
       return (
-        <code className={className} {...props}>
+        <code className="px-1.5 py-0.5 rounded bg-slate-100 dark:bg-white/10 text-rose-600 dark:text-rose-400 font-mono text-[11px]" {...props}>
           {typeof children === 'string' || typeof children === 'number'
             ? children
             : JSON.stringify(children)}
@@ -129,6 +130,48 @@ export function createMarkdownComponents({
   };
 }
 
+function CodeBlock({ children, language }: { children: string; language?: string }) {
+  const [copied, setCopied] = React.useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(children);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (e) {
+      console.warn('Failed to copy code', e);
+    }
+  };
+
+  return (
+    <div className="not-prose my-4 rounded-xl border border-slate-200 dark:border-white/10 overflow-hidden bg-slate-900 text-slate-100 shadow-lg select-text">
+      <div className="flex items-center justify-between px-4 py-2 bg-slate-950 border-b border-slate-800 text-xs font-semibold text-slate-400 select-none">
+        <span className="font-mono lowercase">{language || 'code'}</span>
+        <button
+          onClick={handleCopy}
+          className="flex items-center gap-1.5 px-2 py-1 rounded hover:bg-slate-800 hover:text-slate-250 transition-colors cursor-pointer text-slate-400 border border-transparent hover:border-slate-800"
+          type="button"
+        >
+          {copied ? (
+            <>
+              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" className="text-emerald-500"><polyline points="20 6 9 17 4 12"/></svg>
+              <span className="text-emerald-500">Copied!</span>
+            </>
+          ) : (
+            <>
+              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+              <span>Copy</span>
+            </>
+          )}
+        </button>
+      </div>
+      <div className="p-4 overflow-x-auto font-mono text-[11px] leading-relaxed text-slate-200 bg-slate-900/90 whitespace-pre">
+        <code>{children}</code>
+      </div>
+    </div>
+  );
+}
+
 /** Safely render table cell children that might be plain objects. */
 function normaliseChild(children: unknown): React.ReactNode {
   if (