index.html

---
layout: default
title: Plugin Agent Marketplace - AI Agent Training Academy
description: Transform isolated AI assistants into collaborative intelligence swarms. 69 plugins, 466 agents, 8 AI mechanisms.
---

<!-- Hero Section -->
<section class="pt-32 pb-20 px-6 relative overflow-hidden">
    <!-- Background Gradient -->
    <div class="absolute inset-0 bg-gradient-to-br from-primary/20 via-gray-900 to-secondary/20"></div>
    <div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cg fill=\"none\" fill-rule=\"evenodd\"%3E%3Cg fill=\"%236366F1\" fill-opacity=\"0.05\"%3E%3Cpath d=\"M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')]"></div>

    <div class="container mx-auto relative">
        <div class="text-center max-w-4xl mx-auto">
            <!-- Animated Badge -->
            <div class="inline-flex items-center space-x-2 bg-primary/10 border border-primary/30 rounded-full px-4 py-2 mb-8" data-aos="fade-down">
                <span class="relative flex h-3 w-3">
                    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-accent opacity-75"></span>
                    <span class="relative inline-flex rounded-full h-3 w-3 bg-accent"></span>
                </span>
                <span class="text-sm text-gray-300">AI Agent Training Academy</span>
            </div>

            <!-- Main Heading -->
            <h1 class="text-5xl md:text-7xl font-extrabold mb-6" data-aos="fade-up">
                <span class="bg-gradient-to-r from-white via-gray-200 to-gray-400 bg-clip-text text-transparent">
                    Train Your AI.
                </span>
                <br>
                <span class="bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent">
                    Build Your Army.
                </span>
            </h1>

            <!-- Subtitle -->
            <p class="text-xl md:text-2xl text-gray-400 mb-12 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">
                Transform isolated AI assistants into collaborative intelligence swarms with
                <span class="text-primary font-semibold">8 breakthrough mechanisms</span>.
            </p>

            <!-- Stats -->
            <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12" data-aos="fade-up" data-aos-delay="200">
                <div class="bg-gray-800/50 backdrop-blur rounded-xl p-6 border border-gray-700">
                    <div class="text-4xl font-bold text-primary mb-2 counter" data-target="69">0</div>
                    <div class="text-gray-400">Plugins</div>
                </div>
                <div class="bg-gray-800/50 backdrop-blur rounded-xl p-6 border border-gray-700">
                    <div class="text-4xl font-bold text-secondary mb-2 counter" data-target="466">0</div>
                    <div class="text-gray-400">Agents</div>
                </div>
                <div class="bg-gray-800/50 backdrop-blur rounded-xl p-6 border border-gray-700">
                    <div class="text-4xl font-bold text-accent mb-2 counter" data-target="564">0</div>
                    <div class="text-gray-400">Skills</div>
                </div>
                <div class="bg-gray-800/50 backdrop-blur rounded-xl p-6 border border-gray-700">
                    <div class="text-4xl font-bold text-orange-400 mb-2 counter" data-target="8">0</div>
                    <div class="text-gray-400">AI Mechanisms</div>
                </div>
            </div>

            <!-- CTA Buttons -->
            <div class="flex flex-col sm:flex-row items-center justify-center gap-4" data-aos="fade-up" data-aos-delay="300">
                <a href="/plugins/" class="w-full sm:w-auto bg-gradient-to-r from-primary to-secondary hover:from-primary/80 hover:to-secondary/80 text-white font-semibold px-8 py-4 rounded-xl transition-all transform hover:scale-105 flex items-center justify-center space-x-2">
                    <span>Browse Plugins</span>
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                    </svg>
                </a>
                <a href="/mechanisms/" class="w-full sm:w-auto bg-gray-800 hover:bg-gray-700 text-white font-semibold px-8 py-4 rounded-xl transition-all border border-gray-700 flex items-center justify-center space-x-2">
                    <span>Explore Mechanisms</span>
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
                    </svg>
                </a>
            </div>
        </div>
    </div>
</section>

<!-- 8 AI Mechanisms Section -->
<section class="py-20 px-6 bg-gray-950">
    <div class="container mx-auto">
        <div class="text-center mb-16">
            <h2 class="text-3xl md:text-5xl font-bold mb-4" data-aos="fade-up">
                <span class="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
                    8 AI Mechanisms
                </span>
            </h2>
            <p class="text-xl text-gray-400 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">
                Breakthrough training systems for collective intelligence
            </p>
        </div>

        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
            <!-- Brainstorm -->
            <div class="mechanism-card bg-gray-800/50 backdrop-blur rounded-xl p-6 border border-gray-700 hover:border-primary/50 transition-all group" data-aos="fade-up" data-aos-delay="0">
                <div class="text-4xl mb-4">🧠</div>
                <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-primary transition-colors">Brainstorm</h3>
                <p class="text-gray-400 text-sm">Multi-agent idea generation & combination</p>
            </div>

            <!-- Voting -->
            <div class="mechanism-card bg-gray-800/50 backdrop-blur rounded-xl p-6 border border-gray-700 hover:border-secondary/50 transition-all group" data-aos="fade-up" data-aos-delay="50">
                <div class="text-4xl mb-4">🗳️</div>
                <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-secondary transition-colors">Voting</h3>
                <p class="text-gray-400 text-sm">5 democratic algorithms</p>
            </div>

            <!-- Rewards -->
            <div class="mechanism-card bg-gray-800/50 backdrop-blur rounded-xl p-6 border border-gray-700 hover:border-accent/50 transition-all group" data-aos="fade-up" data-aos-delay="100">
                <div class="text-4xl mb-4">🎁</div>
                <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-accent transition-colors">Rewards</h3>
                <p class="text-gray-400 text-sm">Bronze → Silver → Gold → Platinum</p>
            </div>

            <!-- Penalties -->
            <div class="mechanism-card bg-gray-800/50 backdrop-blur rounded-xl p-6 border border-gray-700 hover:border-orange-400/50 transition-all group" data-aos="fade-up" data-aos-delay="150">
                <div class="text-4xl mb-4">⚠️</div>
                <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-orange-400 transition-colors">Penalties</h3>
                <p class="text-gray-400 text-sm">6 progressive correction levels</p>
            </div>

            <!-- Mentorship -->
            <div class="mechanism-card bg-gray-800/50 backdrop-blur rounded-xl p-6 border border-gray-700 hover:border-blue-400/50 transition-all group" data-aos="fade-up" data-aos-delay="200">
                <div class="text-4xl mb-4">🎓</div>
                <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-blue-400 transition-colors">Mentorship</h3>
                <p class="text-gray-400 text-sm">10x acceleration (30 days → 3 days)</p>
            </div>

            <!-- Battle -->
            <div class="mechanism-card bg-gray-800/50 backdrop-blur rounded-xl p-6 border border-gray-700 hover:border-red-400/50 transition-all group" data-aos="fade-up" data-aos-delay="250">
                <div class="text-4xl mb-4">⚔️</div>
                <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-red-400 transition-colors">Battle</h3>
                <p class="text-gray-400 text-sm">1v1 duels, Speed Race, Hall of Fame</p>
            </div>

            <!-- Leaderboard -->
            <div class="mechanism-card bg-gray-800/50 backdrop-blur rounded-xl p-6 border border-gray-700 hover:border-yellow-400/50 transition-all group" data-aos="fade-up" data-aos-delay="300">
                <div class="text-4xl mb-4">📊</div>
                <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-yellow-400 transition-colors">Leaderboard</h3>
                <p class="text-gray-400 text-sm">ELO ratings & rankings</p>
            </div>

            <!-- Orchestrator -->
            <div class="mechanism-card bg-gray-800/50 backdrop-blur rounded-xl p-6 border border-gray-700 hover:border-pink-400/50 transition-all group" data-aos="fade-up" data-aos-delay="350">
                <div class="text-4xl mb-4">🎭</div>
                <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-pink-400 transition-colors">Orchestrator</h3>
                <p class="text-gray-400 text-sm">Task distribution & coordination</p>
            </div>
        </div>

        <div class="text-center mt-12" data-aos="fade-up" data-aos-delay="400">
            <a href="/mechanisms/" class="inline-flex items-center space-x-2 text-primary hover:text-primary/80 font-semibold transition-colors">
                <span>Learn more about each mechanism</span>
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                </svg>
            </a>
        </div>
    </div>
</section>

<!-- Plugin Categories Section -->
<section class="py-20 px-6">
    <div class="container mx-auto">
        <div class="text-center mb-16">
            <h2 class="text-3xl md:text-5xl font-bold mb-4" data-aos="fade-up">
                <span class="bg-gradient-to-r from-accent to-primary bg-clip-text text-transparent">
                    69 Specialized Plugins
                </span>
            </h2>
            <p class="text-xl text-gray-400 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">
                From programming languages to AI/ML, every domain covered
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- Programming Languages -->
            <a href="/plugins/#languages" class="category-card bg-gray-800/50 backdrop-blur rounded-xl p-6 border border-gray-700 hover:border-primary/50 transition-all group" data-aos="fade-up" data-aos-delay="0">
                <div class="flex items-center justify-between mb-4">
                    <span class="text-3xl">💻</span>
                    <span class="bg-primary/20 text-primary px-3 py-1 rounded-full text-sm">10 plugins</span>
                </div>
                <h3 class="text-xl font-semibold text-white mb-2 group-hover:text-primary transition-colors">Programming Languages</h3>
                <p class="text-gray-400 text-sm">Python, Java, Go, Rust, TypeScript, Kotlin...</p>
            </a>

            <!-- Frontend & UI -->
            <a href="/plugins/#frontend" class="category-card bg-gray-800/50 backdrop-blur rounded-xl p-6 border border-gray-700 hover:border-secondary/50 transition-all group" data-aos="fade-up" data-aos-delay="50">
                <div class="flex items-center justify-between mb-4">
                    <span class="text-3xl">🎨</span>
                    <span class="bg-secondary/20 text-secondary px-3 py-1 rounded-full text-sm">8 plugins</span>
                </div>
                <h3 class="text-xl font-semibold text-white mb-2 group-hover:text-secondary transition-colors">Frontend & UI</h3>
                <p class="text-gray-400 text-sm">React, Angular, Vue, Next.js, CSS...</p>
            </a>

            <!-- Mobile Development -->
            <a href="/plugins/#mobile" class="category-card bg-gray-800/50 backdrop-blur rounded-xl p-6 border border-gray-700 hover:border-accent/50 transition-all group" data-aos="fade-up" data-aos-delay="100">
                <div class="flex items-center justify-between mb-4">
                    <span class="text-3xl">📱</span>
                    <span class="bg-accent/20 text-accent px-3 py-1 rounded-full text-sm">5 plugins</span>
                </div>
                <h3 class="text-xl font-semibold text-white mb-2 group-hover:text-accent transition-colors">Mobile Development</h3>
                <p class="text-gray-400 text-sm">iOS, Android, React Native, Flutter, Swift...</p>
            </a>

            <!-- DevOps & Cloud -->
            <a href="/plugins/#devops" class="category-card bg-gray-800/50 backdrop-blur rounded-xl p-6 border border-gray-700 hover:border-orange-400/50 transition-all group" data-aos="fade-up" data-aos-delay="150">
                <div class="flex items-center justify-between mb-4">
                    <span class="text-3xl">☁️</span>
                    <span class="bg-orange-400/20 text-orange-400 px-3 py-1 rounded-full text-sm">10 plugins</span>
                </div>
                <h3 class="text-xl font-semibold text-white mb-2 group-hover:text-orange-400 transition-colors">DevOps & Cloud</h3>
                <p class="text-gray-400 text-sm">Docker, Kubernetes, AWS, Terraform, Linux...</p>
            </a>

            <!-- AI & Machine Learning -->
            <a href="/plugins/#ai-ml" class="category-card bg-gray-800/50 backdrop-blur rounded-xl p-6 border border-gray-700 hover:border-pink-400/50 transition-all group" data-aos="fade-up" data-aos-delay="200">
                <div class="flex items-center justify-between mb-4">
                    <span class="text-3xl">🤖</span>
                    <span class="bg-pink-400/20 text-pink-400 px-3 py-1 rounded-full text-sm">8 plugins</span>
                </div>
                <h3 class="text-xl font-semibold text-white mb-2 group-hover:text-pink-400 transition-colors">AI & Machine Learning</h3>
                <p class="text-gray-400 text-sm">ML, MLOps, AI Agents, Prompt Engineering...</p>
            </a>

            <!-- Architecture & Design -->
            <a href="/plugins/#architecture" class="category-card bg-gray-800/50 backdrop-blur rounded-xl p-6 border border-gray-700 hover:border-blue-400/50 transition-all group" data-aos="fade-up" data-aos-delay="250">
                <div class="flex items-center justify-between mb-4">
                    <span class="text-3xl">🏗️</span>
                    <span class="bg-blue-400/20 text-blue-400 px-3 py-1 rounded-full text-sm">6 plugins</span>
                </div>
                <h3 class="text-xl font-semibold text-white mb-2 group-hover:text-blue-400 transition-colors">Architecture & Design</h3>
                <p class="text-gray-400 text-sm">System Design, Software Architect, UX Design...</p>
            </a>
        </div>

        <div class="text-center mt-12" data-aos="fade-up" data-aos-delay="300">
            <a href="/plugins/" class="inline-flex items-center space-x-2 bg-gradient-to-r from-primary to-secondary hover:from-primary/80 hover:to-secondary/80 text-white font-semibold px-8 py-4 rounded-xl transition-all transform hover:scale-105">
                <span>View All 69 Plugins</span>
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                </svg>
            </a>
        </div>
    </div>
</section>

<!-- Getting Started Section -->
<section class="py-20 px-6 bg-gray-950">
    <div class="container mx-auto">
        <div class="text-center mb-16">
            <h2 class="text-3xl md:text-5xl font-bold mb-4" data-aos="fade-up">
                <span class="bg-gradient-to-r from-secondary to-accent bg-clip-text text-transparent">
                    Get Started in 3 Steps
                </span>
            </h2>
        </div>

        <div class="max-w-4xl mx-auto">
            <div class="space-y-8">
                <!-- Step 1 -->
                <div class="flex items-start space-x-6" data-aos="fade-right" data-aos-delay="0">
                    <div class="flex-shrink-0 w-12 h-12 bg-gradient-to-br from-primary to-secondary rounded-xl flex items-center justify-center text-white font-bold text-xl">
                        1
                    </div>
                    <div class="flex-grow">
                        <h3 class="text-xl font-semibold text-white mb-2">Install Claude Code</h3>
                        <div class="bg-gray-800 rounded-xl p-4 font-mono text-sm">
                            <code class="text-accent">npm install -g @anthropic-ai/claude-code</code>
                        </div>
                    </div>
                </div>

                <!-- Step 2 -->
                <div class="flex items-start space-x-6" data-aos="fade-right" data-aos-delay="100">
                    <div class="flex-shrink-0 w-12 h-12 bg-gradient-to-br from-secondary to-accent rounded-xl flex items-center justify-center text-white font-bold text-xl">
                        2
                    </div>
                    <div class="flex-grow">
                        <h3 class="text-xl font-semibold text-white mb-2">Install a Plugin</h3>
                        <div class="bg-gray-800 rounded-xl p-4 font-mono text-sm">
                            <code class="text-accent">/install pluginagentmarketplace/custom-plugin-python</code>
                        </div>
                    </div>
                </div>

                <!-- Step 3 -->
                <div class="flex items-start space-x-6" data-aos="fade-right" data-aos-delay="200">
                    <div class="flex-shrink-0 w-12 h-12 bg-gradient-to-br from-accent to-primary rounded-xl flex items-center justify-center text-white font-bold text-xl">
                        3
                    </div>
                    <div class="flex-grow">
                        <h3 class="text-xl font-semibold text-white mb-2">Start Training</h3>
                        <p class="text-gray-400">Customize <code class="text-primary">agent.md</code> and <code class="text-primary">skill.md</code> files to add your domain knowledge. Watch your AI evolve!</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Comparison Section -->
<section class="py-20 px-6">
    <div class="container mx-auto">
        <div class="text-center mb-16">
            <h2 class="text-3xl md:text-5xl font-bold mb-4" data-aos="fade-up">
                <span class="bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
                    Why Choose Us?
                </span>
            </h2>
            <p class="text-xl text-gray-400 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">
                We're not just a marketplace - we're a training academy
            </p>
        </div>

        <div class="max-w-4xl mx-auto overflow-x-auto" data-aos="fade-up" data-aos-delay="200">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-gray-700">
                        <th class="py-4 px-6 text-left text-gray-300">Feature</th>
                        <th class="py-4 px-6 text-center text-primary font-bold">Us</th>
                        <th class="py-4 px-6 text-center text-gray-400">Others</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="border-b border-gray-800">
                        <td class="py-4 px-6 text-gray-300">Topic-Specific Agents</td>
                        <td class="py-4 px-6 text-center text-accent text-2xl">✓</td>
                        <td class="py-4 px-6 text-center text-red-400 text-2xl">✗</td>
                    </tr>
                    <tr class="border-b border-gray-800">
                        <td class="py-4 px-6 text-gray-300">Golden Format (assets/scripts/references)</td>
                        <td class="py-4 px-6 text-center text-accent text-2xl">✓</td>
                        <td class="py-4 px-6 text-center text-red-400 text-2xl">✗</td>
                    </tr>
                    <tr class="border-b border-gray-800">
                        <td class="py-4 px-6 text-gray-300">Agent-Skill Bonding</td>
                        <td class="py-4 px-6 text-center text-accent text-2xl">✓</td>
                        <td class="py-4 px-6 text-center text-red-400 text-2xl">✗</td>
                    </tr>
                    <tr class="border-b border-gray-800">
                        <td class="py-4 px-6 text-gray-300">8 AI Training Mechanisms</td>
                        <td class="py-4 px-6 text-center text-accent text-2xl">✓</td>
                        <td class="py-4 px-6 text-center text-red-400 text-2xl">✗</td>
                    </tr>
                    <tr class="border-b border-gray-800">
                        <td class="py-4 px-6 text-gray-300">Collective Intelligence</td>
                        <td class="py-4 px-6 text-center text-accent text-2xl">✓</td>
                        <td class="py-4 px-6 text-center text-red-400 text-2xl">✗</td>
                    </tr>
                    <tr class="border-b border-gray-800">
                        <td class="py-4 px-6 text-gray-300">SASMP v1.3.0 Compliant</td>
                        <td class="py-4 px-6 text-center text-accent text-2xl">✓</td>
                        <td class="py-4 px-6 text-center text-red-400 text-2xl">✗</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="text-center mt-12" data-aos="fade-up" data-aos-delay="300">
            <a href="/ecosystem/" class="inline-flex items-center space-x-2 text-primary hover:text-primary/80 font-semibold transition-colors">
                <span>Compare with full ecosystem</span>
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                </svg>
            </a>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="py-20 px-6 bg-gradient-to-br from-primary/20 via-gray-900 to-secondary/20">
    <div class="container mx-auto text-center">
        <h2 class="text-3xl md:text-5xl font-bold mb-6" data-aos="fade-up">
            <span class="text-white">Ready to train your</span>
            <span class="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent"> AI army?</span>
        </h2>
        <p class="text-xl text-gray-400 mb-8 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">
            Join thousands of developers building smarter AI agents with our specialized plugins.
        </p>
        <div class="flex flex-col sm:flex-row items-center justify-center gap-4" data-aos="fade-up" data-aos-delay="200">
            <a href="https://github.com/pluginagentmarketplace" target="_blank" class="w-full sm:w-auto bg-white hover:bg-gray-100 text-gray-900 font-semibold px-8 py-4 rounded-xl transition-all transform hover:scale-105 flex items-center justify-center space-x-2">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
                </svg>
                <span>Star on GitHub</span>
            </a>
            <a href="/docs/getting-started.html" class="w-full sm:w-auto bg-transparent border border-gray-600 hover:border-gray-400 text-white font-semibold px-8 py-4 rounded-xl transition-all flex items-center justify-center">
                Read the Docs
            </a>
        </div>
    </div>
</section>