{{ ... }}
<main class="container mx-auto px-4 py-8">
    <h1 class="text-4xl font-bold mb-8 text-center gradient-text">Documentation</h1>

    <!-- Quick Links -->
    <div class="mb-12">
        <h2 class="text-2xl font-semibold mb-4">Quick Links</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <a href="#getting-started" class="p-4 bg-white rounded-lg shadow hover:shadow-md transition-all">
                <h3 class="font-semibold text-lg mb-2">Getting Started</h3>
                <p class="text-gray-600">Quick setup guide and basic usage</p>
            </a>
            <a href="#api-reference" class="p-4 bg-white rounded-lg shadow hover:shadow-md transition-all">
                <h3 class="font-semibold text-lg mb-2">API Reference</h3>
                <p class="text-gray-600">Complete API documentation</p>
            </a>
            <a href="#tutorials" class="p-4 bg-white rounded-lg shadow hover:shadow-md transition-all">
                <h3 class="font-semibold text-lg mb-2">Tutorials</h3>
                <p class="text-gray-600">Step-by-step guides</p>
            </a>
        </div>
    </div>

    <!-- Main Documentation -->
    <div class="space-y-12">
        <!-- Getting Started Section -->
        <section id="getting-started" class="bg-white p-6 rounded-lg shadow">
            <h2 class="text-2xl font-semibold mb-4">Getting Started</h2>
            <div class="prose max-w-none">
                <h3>Installation</h3>
                <pre class="bg-gray-100 p-4 rounded"><code>git clone https://github.com/anya-org/anya-core.git
cd anya-core
cargo build --release</code></pre>

                <h3>Basic Configuration</h3>
                <p>Configure your environment by creating a .env file:</p>
                <pre class="bg-gray-100 p-4 rounded"><code>NETWORK_TYPE=testnet
LOG_LEVEL=info
ENABLE_AI=true</code></pre>
            </div>
        </section>

        <!-- API Reference Section -->
        <section id="api-reference" class="bg-white p-6 rounded-lg shadow">
            <h2 class="text-2xl font-semibold mb-4">API Reference</h2>
            <div class="prose max-w-none">
                <h3>Core API</h3>
                <ul>
                    <li><strong>GET /api/v1/health</strong> - Health check endpoint</li>
                    <li><strong>GET /api/v1/wallet/status</strong> - Wallet status</li>
                    <li><strong>POST /api/v1/transaction</strong> - Create transaction</li>
                </ul>

                <h3>AI Endpoints</h3>
                <ul>
                    <li><strong>POST /api/v1/ai/analyze</strong> - Analyze transaction patterns</li>
                    <li><strong>GET /api/v1/ai/insights</strong> - Get AI insights</li>
                </ul>
            </div>
        </section>

        <!-- Tutorials Section -->
        <section id="tutorials" class="bg-white p-6 rounded-lg shadow">
            <h2 class="text-2xl font-semibold mb-4">Tutorials</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="p-4 border rounded">
                    <h3 class="font-semibold mb-2">Setting Up Multi-Signature Wallet</h3>
                    <p class="text-gray-600">Learn how to create and manage multi-signature wallets</p>
                    <a href="#" class="text-blue-600 hover:text-blue-800">Read More →</a>
                </div>
                <div class="p-4 border rounded">
                    <h3 class="font-semibold mb-2">Implementing AI Analytics</h3>
                    <p class="text-gray-600">Guide to implementing AI-powered analytics</p>
                    <a href="#" class="text-blue-600 hover:text-blue-800">Read More →</a>
                </div>
            </div>
        </section>
    </div>
</main>
{{ ... }}