{{template "docs.html" .}}

{{define "title"}}Quickstart{{end}}

{{define "content"}}
<article class="space-y-16">
    <header>
        <div class="w-12 h-1 rounded-full bg-gradient-to-r from-violet-500 to-cyan-500 mb-6"></div>
        <h1 class="text-3xl font-bold text-white mb-3">Quickstart</h1>
        <p class="text-[#888] text-lg">Build your first site in under five minutes. No code required.</p>
    </header>

    <section class="space-y-8">
        <!-- Step 1 -->
        <div class="space-y-3">
            <div class="flex items-center gap-3">
                <span class="w-8 h-8 rounded-full bg-violet-500/20 text-violet-400 text-sm font-semibold flex items-center justify-center">1</span>
                <h2 class="text-xl font-semibold text-white">Sign up</h2>
            </div>
            <p class="text-[#888] ml-11">
                <strong class="text-white">Recommended:</strong> Create an account on <a href="/pricing" class="text-violet-400 hover:text-violet-300">ReadySite Cloud</a> &mdash; it's the fastest way to get started. We'll send a magic link to your email, no password needed. Or <a href="/docs/docker" class="text-violet-400 hover:text-violet-300">self-host</a> with Docker if you prefer full control.
            </p>
            <div class="ml-11 border border-white/10 rounded-lg p-4 bg-[#1a1a1a]/50">
                <p class="text-sm text-[#888]">Your site will be live at <code class="text-emerald-400 bg-emerald-400/10 px-1.5 py-0.5 rounded">yoursite.readysite.app</code> immediately.</p>
            </div>
        </div>

        <!-- Step 2 -->
        <div class="space-y-3">
            <div class="flex items-center gap-3">
                <span class="w-8 h-8 rounded-full bg-violet-500/20 text-violet-400 text-sm font-semibold flex items-center justify-center">2</span>
                <h2 class="text-xl font-semibold text-white">Name your site</h2>
            </div>
            <p class="text-[#888] ml-11">
                The setup wizard asks for a site name and description. This is used in your templates and can be changed any time from Settings.
            </p>
        </div>

        <!-- Step 3 -->
        <div class="space-y-3">
            <div class="flex items-center gap-3">
                <span class="w-8 h-8 rounded-full bg-violet-500/20 text-violet-400 text-sm font-semibold flex items-center justify-center">3</span>
                <h2 class="text-xl font-semibold text-white">Ask AI to build a page</h2>
            </div>
            <p class="text-[#888] ml-11">
                Open the AI chat and describe what you want. The assistant creates pages, writes content, and sets up collections for you.
            </p>
            <div class="ml-11 space-y-2">
                <div class="border border-white/10 rounded-lg p-4 bg-[#1a1a1a]/50">
                    <p class="text-sm text-white font-medium mb-2">Try these prompts:</p>
                    <ul class="space-y-2 text-sm text-[#888]">
                        <li class="flex items-start gap-2">
                            <span class="text-violet-400 mt-0.5">&rsaquo;</span>
                            <span>"Create a landing page for my bakery with hours and location"</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <span class="text-violet-400 mt-0.5">&rsaquo;</span>
                            <span>"Add a blog with a few sample posts"</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <span class="text-violet-400 mt-0.5">&rsaquo;</span>
                            <span>"Create a portfolio site with project cards"</span>
                        </li>
                    </ul>
                </div>
            </div>
            <p class="text-[#888] ml-11 text-sm">
                Learn more about what the AI can do in the <a href="/docs/ai-assistant" class="text-violet-400 hover:text-violet-300">AI Assistant</a> guide.
            </p>
        </div>

        <!-- Step 4 -->
        <div class="space-y-3">
            <div class="flex items-center gap-3">
                <span class="w-8 h-8 rounded-full bg-violet-500/20 text-violet-400 text-sm font-semibold flex items-center justify-center">4</span>
                <h2 class="text-xl font-semibold text-white">Create a collection</h2>
            </div>
            <p class="text-[#888] ml-11">
                Collections store your structured content &mdash; blog posts, products, team members, events. Define fields (text, number, date, etc.) and add records through the admin UI or API.
            </p>
            <p class="text-[#888] ml-11 text-sm">
                See the <a href="/docs/collections" class="text-violet-400 hover:text-violet-300">Collections</a> guide for field types and template usage.
            </p>
        </div>

        <!-- Step 5 -->
        <div class="space-y-3">
            <div class="flex items-center gap-3">
                <span class="w-8 h-8 rounded-full bg-violet-500/20 text-violet-400 text-sm font-semibold flex items-center justify-center">5</span>
                <h2 class="text-xl font-semibold text-white">Go live</h2>
            </div>
            <p class="text-[#888] ml-11">
                Your site is already live at <code class="text-emerald-400 bg-emerald-400/10 px-1.5 py-0.5 rounded text-sm">yoursite.readysite.app</code>. Pages are published immediately when you mark them as published. Share your URL, connect a custom domain (Pro plan), or keep building.
            </p>
        </div>
    </section>

    <!-- What's next -->
    <section class="space-y-4">
        <h2 class="text-xl font-semibold text-white">What's next?</h2>
        <div class="grid sm:grid-cols-2 gap-4">
            <a href="/docs/ai-assistant" class="border border-white/10 rounded-lg p-5 hover:border-white/20 hover:bg-white/[0.02] transition-all">
                <div class="text-violet-400 font-medium mb-1">AI Assistant</div>
                <p class="text-sm text-[#888]">Learn what the AI tools can do for your site.</p>
            </a>
            <a href="/docs/pages" class="border border-white/10 rounded-lg p-5 hover:border-white/20 hover:bg-white/[0.02] transition-all">
                <div class="text-cyan-400 font-medium mb-1">Pages</div>
                <p class="text-sm text-[#888]">Create pages, organize with hierarchy, and publish.</p>
            </a>
            <a href="/docs/collections" class="border border-white/10 rounded-lg p-5 hover:border-white/20 hover:bg-white/[0.02] transition-all">
                <div class="text-emerald-400 font-medium mb-1">Collections</div>
                <p class="text-sm text-[#888]">Store and query structured content like blog posts or products.</p>
            </a>
            <a href="/docs/docker" class="border border-white/10 rounded-lg p-5 hover:border-white/20 hover:bg-white/[0.02] transition-all">
                <div class="text-amber-400 font-medium mb-1">Self-Hosting</div>
                <p class="text-sm text-[#888]">Run ReadySite on your own server with Docker.</p>
            </a>
        </div>
    </section>
</article>
{{end}}