{% extends "docs/layout.html" %}

{% block title %}Getting Started - Mycelium Marketplace{% endblock %}

{% block docs_content %}
<div class="my-4">
    <h1>Getting Started with Mycelium Marketplace</h1>
    <p class="lead">A step-by-step guide to begin your journey with the Mycelium ecosystem.</p>

    <div class="doc-section">
        <h2>Welcome to Mycelium Marketplace</h2>
        <p>This guide will help you get started with the Mycelium Marketplace platform, covering everything from account creation to making your first transaction.</p>
    </div>

    <div class="doc-section">
        <h2>Step 1: Create an Account</h2>
        <div class="card mb-4">
            <div class="card-body">
                <h5 class="mb-3"><i class="bi bi-person-plus me-2 text-primary"></i>Registration Process</h5>
                <p>Creating an account on the Mycelium Marketplace is simple and straightforward:</p>
                <ol>
                    <li>Navigate to the <a href="/register">Registration Page</a></li>
                    <li>Enter your email address and create a secure password</li>
                    <li>Verify your email address through the confirmation link sent to your inbox</li>
                    <li>Complete your profile by adding required information</li>
                </ol>
                <div class="alert alert-info">
                    <i class="bi bi-info-circle me-2"></i>
                    <strong>Note:</strong> If you already have a Mycelium Connect identity, you can use it to sign in directly.
                </div>
            </div>
        </div>
    </div>

    <div class="doc-section">
        <h2>Step 2: Setup Your Credits Wallet</h2>
        <div class="card mb-4">
            <div class="card-body">
                <h5 class="mb-3"><i class="bi bi-wallet2 me-2 text-primary"></i>Wallet Configuration</h5>
                <p>To participate in the marketplace, you'll need a USD Credits wallet:</p>
                <ol>
                    <li>Navigate to the Dashboard and select the "Wallet" section</li>
                    <li>Follow the prompts to create a new Credits wallet</li>
                    <li>Record your recovery phrase and store it in a secure location</li>
                    <li>Add Credits to your wallet through one of the available methods</li>
                </ol>
                <p>For more detailed information about Credits and wallet management, visit the <a href="/docs/credits">USD Credits documentation</a>.</p>
            </div>
        </div>
    </div>

    <div class="doc-section">
        <h2>Step 3: Explore the Marketplace</h2>
        <div class="card mb-4">
            <div class="card-body">
                <h5 class="mb-3"><i class="bi bi-shop me-2 text-primary"></i>Discovering Resources</h5>
                <p>Once your account and wallet are set up, you can start exploring the marketplace:</p>
                <ul>
                    <li><strong>Browse Categories:</strong> Explore different sections such as compute resources, Mycelium Nodes, applications, and services</li>
                    <li><strong>Apply Filters:</strong> Narrow down options based on specifications, location, pricing, and other criteria</li>
                    <li><strong>Compare Options:</strong> Evaluate different offerings to find the best fit for your needs</li>
                    <li><strong>Read Reviews:</strong> Check ratings and feedback from other users</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="doc-section">
        <h2>Step 4: Make Your First Transaction</h2>
        <div class="card mb-4">
            <div class="card-body">
                <h5 class="mb-3"><i class="bi bi-cart-check me-2 text-primary"></i>Transaction Process</h5>
                <p>When you're ready to make a purchase or exchange resources:</p>
                <ol>
                    <li>Select the resource or service you wish to acquire</li>
                    <li>Review the details, including specifications and pricing</li>
                    <li>Click "Deploy" or "Purchase" depending on the resource type</li>
                    <li>Confirm the transaction and authorize the Credits transfer</li>
                    <li>Wait for confirmation and follow any additional setup instructions</li>
                </ol>
                <div class="alert alert-warning">
                    <i class="bi bi-exclamation-triangle me-2"></i>
                    <strong>Important:</strong> Always verify the details of your transaction before confirming. Credits transfers are typically final and may not be reversible.
                </div>
            </div>
        </div>
    </div>

    <div class="doc-section">
        <h2>Step 5: Manage Your Resources</h2>
        <div class="card mb-4">
            <div class="card-body">
                <h5 class="mb-3"><i class="bi bi-gear me-2 text-primary"></i>Resource Management</h5>
                <p>After acquiring resources or services, you can manage them through your dashboard:</p>
                <ul>
                    <li>Monitor resource utilization and performance metrics</li>
                    <li>Configure settings and preferences</li>
                    <li>Extend or terminate service agreements</li>
                    <li>Request support or assistance when needed</li>
                </ul>
                <p>For specific management instructions, refer to the documentation for each resource type.</p>
            </div>
        </div>
    </div>

    <div class="card bg-light mt-5">
        <div class="card-body">
            <h2><i class="bi bi-question-circle me-2"></i>Need Further Assistance?</h2>
            <p class="lead">Our community is here to help you get started.</p>
            <div class="mt-3">
                <a href="https://forum.threefold.io" class="btn btn-primary me-2">Join Community Forum</a>
                <a href="https://threefoldfaq.crisp.help/en/" class="btn btn-primary me-2">Contact Support</a>
                <a href="/docs" class="btn btn-outline-secondary">Back to Documentation</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}