@page "/"
@page "/docs/getting-started/overview"
@layout DocsContentLayout

<PageTitle>Overview - LumexUI</PageTitle>

<DocsSection Title="Introduction">
    <p>
        LumexUI is an open-source project that offers a diverse collection of Blazor UI components,
        all fully built with Tailwind CSS for streamlined and modern web development.
    </p>
    <p>
        These components are designed to be not only aesthetically pleasing but also highly customizable,
        allowing you to tailor them to meet your specific needs.
        The library is optimized for performance,
        ensuring that your applications remain fast and responsive.
    </p>
    <p>
        We drew inspiration from
        <LumexLink Href="https://nextui.org/"
                   Color="@ThemeColor.None"
                   External="@true">
            NextUI
        </LumexLink>, a React component library,
        in shaping the foundational ideas behind LumexUI.
        NextUI’s approach to using Tailwind CSS, its elegant design,
        and robust customization system greatly influenced us.
        Our goal is to bring these same principles to the Blazor ecosystem,
        making them accessible to developers who prefer Blazor for their projects.
    </p>

    <Callout Variant="@CalloutVariant.Info">
        This project is currently in the development stage,
        and we welcome contributions from the community to help improve and expand the library.
        Your feedback and involvement are crucial as we continue to evolve and refine the components.
    </Callout>
</DocsSection>

<DocsSection Title="Advantages of LumexUI">
    <ul>
        @foreach( var feature in _features )
        {
            <li>
                <strong>@feature.Title. </strong>@feature.Description
            </li>
        }
    </ul>
</DocsSection>

<DocsSection Title="Pick Your Learning Path">
    <p class="max-w-screen-sm">
        <strong>Ready to dive in?</strong>
        Feel free to pick a learning path that suits your preference &ndash;
        although we do recommend going over all of the content, if possible!
    </p>

    <ul class="not-prose grid grid-cols-1 gap-12 mt-8 md:grid-cols-2">
        @foreach( var quickLink in _quickLinks )
        {
            <QuickLink Icon="@quickLink.Icon"
                       Link="@quickLink.Link"
                       Title="@quickLink.Title"
                       Description="@quickLink.Description" />
        }
    </ul>
</DocsSection>

<DocsSection Title="Get involved">
    <p>
        As we continue to develop and expand this project,
        we invite you to contribute and help shape the future of LumexUI.
        Together, we can build a powerful and flexible UI toolkit for the Blazor community.
    </p>
</DocsSection>
