---
import { ArrowRight } from 'lucide-react';
import CopyButton from '../ui/CopyButton';
const version = import.meta.env.PUBLIC_LIBRAGEN_VERSION || '0.1.0';
const libraryFilename = `libragen-docs-${version}.libragen`;
const steps = [
{
number: '1',
title: 'Build',
description: 'Create a library from your docs',
code: 'libragen build ./my-docs -n my-library',
},
{
number: '2',
title: 'Query',
description: 'Search with natural language',
code: 'libragen query -l my-library "How do I authenticate?"',
},
{
number: '3',
title: 'Install (optional)',
description: 'Install globally for convenience',
code: 'npm install -g @libragen/cli',
},
];
---
<section class="bg-white py-24 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">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
Get started in 60 seconds
</h2>
<p class="mx-auto mt-4 max-w-2xl text-lg text-gray-600 dark:text-gray-400">
From installation to your first query in three simple steps.
</p>
</div>
<!-- Steps -->
<div class="mt-16 grid gap-8 md:grid-cols-3">
{steps.map((step) => (
<div class="relative">
{/* Step number */}
<div class="mb-4 flex h-10 w-10 items-center justify-center rounded-full bg-indigo-600 text-lg font-bold text-white">
{step.number}
</div>
{/* Content */}
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
{step.title}
</h3>
<p class="mt-2 text-gray-600 dark:text-gray-400">
{step.description}
</p>
{/* Code block */}
<div class="mt-4 overflow-hidden rounded-lg bg-gray-900">
<div class="flex items-center justify-between border-b border-gray-700 px-4 py-2">
<span class="text-xs text-gray-400">Terminal</span>
<CopyButton text={step.code} client:load />
</div>
<pre class="overflow-x-auto p-4 font-mono text-sm"><code class="text-green-400">$ </code><code class="text-white">{step.code}</code></pre>
</div>
</div>
))}
</div>
<!-- Dogfood callout -->
<div class="mt-12 rounded-xl border border-indigo-200 bg-indigo-50 p-6 dark:border-indigo-800 dark:bg-indigo-950/50">
<p class="text-center text-gray-700 dark:text-gray-300">
<span class="font-semibold">We use libragen to build libragen!</span> This site's docs are available as a library you can query locally.
<a href={`/${libraryFilename}`} class="ml-2 font-medium text-indigo-600 underline hover:text-indigo-500 dark:text-indigo-400">
Download {libraryFilename}
</a>
</p>
</div>
<!-- CTA -->
<div class="mt-12 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"
>
View Full Guide
<ArrowRight className="h-4 w-4" />
</a>
</div>
</div>
</section>
