---
import { Check, ArrowRight } from 'lucide-react';
import { Code } from 'astro-expressive-code/components';
const codeExamples = {
truth: `// Before: AI guesses at API
fetch('/api/users', { method: 'POST' }) // Wrong!
// After: AI cites your docs
await client.users.create({ ... }) // Correct API
// Source: internal-api-docs v2.3.0`,
current: `libragen build ./docs --name my-api
# When v2.4 releases:
libragen build ./docs --name my-api \\
--content-version 2.4.0
# ✓ Updated: my-api-2.4.0.libragen`,
private: `# Share via git, S3, or collections:
cp my-api-2.4.0.libragen ~/team-libs/
# Team member installs:
libragen install ~/team-libs/ --name my-api
# Works in any MCP client instantly`,
};
const benefits = [
{
title: 'Ground your AI in truth',
description: 'RAG libraries give your coding agents authoritative documentation to cite, dramatically reducing hallucinations and made-up APIs.',
before: 'AI invents plausible-looking but wrong code',
after: 'AI retrieves and cites actual documentation',
},
{
title: 'Always current, never stale',
description: 'Rebuild libraries when docs change. Your agents get the latest API signatures, deprecation notices, and best practices—not 2-year-old training data.',
before: 'Stuck with LLM training cutoff',
after: 'Update libraries in seconds',
},
{
title: 'Private, local, yours',
description: 'Everything runs on your machine. No API keys, no cloud bills, no data leaving your network. Keep proprietary docs private while still making them AI-searchable.',
before: 'Send docs to third-party APIs',
after: 'Data stays on your machine',
},
];
---
<section class="bg-white pb-12 pt-12 dark:bg-gray-950">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<!-- Section header -->
<div class="text-center">
<p class="text-sm font-semibold uppercase tracking-wide text-green-600 dark:text-green-400">
The Solution
</p>
<h2 class="mt-2 text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
Give your AI a source of truth
</h2>
<p class="mx-auto mt-4 max-w-2xl text-lg text-gray-600 dark:text-gray-400">
Libragen lets you package any documentation into portable, searchable libraries that your AI tools can query instantly.
</p>
</div>
<!-- Benefits -->
<div class="mt-16 space-y-20">
{benefits.map((benefit, index) => (
<div class={`flex flex-col gap-8 lg:flex-row lg:items-center ${index % 2 === 1 ? 'lg:flex-row-reverse' : ''}`}>
<!-- Text content -->
<div class="flex-1">
<h3 class="text-2xl font-bold text-gray-900 dark:text-white">
{benefit.title}
</h3>
<p class="mt-4 text-lg text-gray-600 dark:text-gray-400">
{benefit.description}
</p>
<!-- Before/After -->
<div class="mt-6 flex flex-col gap-3 sm:flex-row sm:gap-6">
<div class="flex items-center gap-2">
<span class="flex h-6 w-6 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/30">
<span class="text-sm text-red-600 dark:text-red-400">✗</span>
</span>
<span class="text-sm text-gray-500 dark:text-gray-400">{benefit.before}</span>
</div>
<div class="flex items-center gap-2">
<span class="flex h-6 w-6 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30">
<Check className="h-3.5 w-3.5 text-green-600 dark:text-green-400" />
</span>
<span class="text-sm font-medium text-gray-900 dark:text-white">{benefit.after}</span>
</div>
</div>
</div>
<!-- Visual/Code block -->
<div class="flex-1">
{index === 0 && (
<Code code={codeExamples.truth} lang="js" title="Before vs After" del={[1, 2]} ins={[4, 5, 6]} />
)}
{index === 1 && (
<Code code={codeExamples.current} lang="bash" title="Terminal" />
)}
{index === 2 && (
<Code code={codeExamples.private} lang="bash" title="Terminal" />
)}
</div>
</div>
))}
</div>
<!-- CTA -->
<div class="mt-16 text-center">
<a
href="/docs/getting-started"
class="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-6 py-3 text-base font-semibold text-white shadow-lg shadow-indigo-500/25 transition-all hover:bg-indigo-700 hover:shadow-xl hover:shadow-indigo-500/30"
>
See How It Works
<ArrowRight className="h-4 w-4" />
</a>
</div>
</div>
</section>
