@namespace LumexUI.Docs.Client.Components
@inherits LayoutComponentBase
@layout DocsLayout

<PageTitle>Installation - LumexUI</PageTitle>

<div class="mx-auto pt-10 lg:pl-10">
    <DocsHeader Title="Installation"
                Category="Getting Started"
                Description="Follow the steps below to get started with LumexUI quickly!" />

    <main class="mt-8">
        <div class="mb-8 prose prose-zinc dark:prose-invert">
            <DocsSection Title="Prerequisites">
                <p>Before you begin, ensure that you have the following:</p>
                <ul>
                    <li>
                        <LumexLink Href="https://dotnet.microsoft.com/en-us/download"
                                   External="@true">
                            .NET SDK 8
                            <LumexIcon Icon="@Icons.Rounded.OpenInNew"
                                       Size="@new("16")"
                                       Class="mx-1 text-orange-400" />
                        </LumexLink>
                        or later
                    </li>
                    <li>
                        An existing Blazor project or create
                        <LumexLink Href="https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/intro"
                                   External="@true">
                            a new one
                            <LumexIcon Icon="@Icons.Rounded.OpenInNew"
                                       Size="@new("16")"
                                       Class="mx-1 text-orange-400" />
                        </LumexLink>
                    </li>
                </ul>
            </DocsSection>
            <LumexDivider />
        </div>

        @Body
    </main>

    <DocsFooter />
</div>
