<style>
.bx-artificer-splash .bx-form-element .bx-btn.bx-btn-primary {
    width: 100%;
}
</style>
<div class="bx-artificer-splash relative bg-gradient-to-br from-gray-100 to-blue-100 dark:bg-gradient-to-r dark:from-gray-900 dark:to-black overflow-hidden">
    {{~bx_artificer:get_splash_marker["header"]~}}
    <div class="relative pt-6 pb-16 sm:pb-24">
        <div class="absolute top-0 left-0 w-full h-full dark:hidden z-1">
            <img src="<bx_image_url:cover-default.svg />" class="object-cover h-full w-full" />
        </div>
        <div class="absolute top-0 left-0 w-full h-full hidden dark:block z-1">
            <img src="<bx_image_url:cover-default-dark.svg />" class="object-cover h-full w-full" />
        </div>
        <main class="relative mt-16 z-2">
            <div class="mx-auto max-w-7xl">
                <div class="lg:grid lg:grid-cols-12 lg:gap-8">
                    <div class="px-6 lg:px-8 text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex lg:items-center">
                        <div>
                            <h1 class="text-5xl tracking-tight font-bold text-gray-800 dark:text-white xl:text-6xl">
                                <span class="block"><bx_text:_bx_artificer_txt_splash_welcome_l1 /></span>                      
                                <span class="block pb-3 bg-clip-text text-transparent bg-gradient-to-r from-green-500 to-blue-500 sm:pb-5"><bx_text:_bx_artificer_txt_splash_welcome_l2 /></span>
                            </h1>
                            <p class="mt-3 text-base font-normal text-gray-700 dark:text-gray-300 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
                                <span class="block"><bx_text:_bx_artificer_txt_splash_welcome_l3 /></span>
                            </p>
                            <p class="mt-3 text-base font-light text-gray-700 dark:text-gray-300 sm:mt-5 sm:text-sm lg:text-xs xl:text-base">
                                <span class="block"><bx_text:_bx_artificer_txt_splash_welcome_l4 /></span>
                            </p>
                        </div>
                    </div>
                    <div class="relative mt-16 px-6 sm:mt-24 lg:mt-0 lg:px-8 lg:col-span-6">
                        <div class="opacity-80 relative max-w-lg ring-1 ring-white dark:ring-gray-700 sm:overflow-hidden bg-gray-50 dark:bg-gray-800 shadow-2xl rounded divide-y divide-gray-300 dark:divide-gray-700 m-2 lg:m-3  mx-auto bg-opacity-80">
                            <div class="p-8">
                                <div>
                                    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200"><bx_text:_bx_artificer_txt_splash_login_title /></h2>
                                    <div class="mt-6">{{~system:login_form:TemplServiceLogin["no_join_text no_auth_buttons"]~}}</div>
                                    <div class="mt-6 relative">
                                        <div class="absolute inset-0 flex items-center" aria-hidden="true">
                                            <div class="w-full border-t border-gray-300 dark:border-gray-700"></div>
                                        </div>
                                    </div>
                                    <div class="pt-6">
                                        <a class="bx-btn w-full flex justify-center py-2 px-4 border border-transparent rounded shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" href="__join_link__"><bx_text:_bx_artificer_txt_splash_login_join /></a>
                                    </div>
                                    <div class="mt-4">{{~system:member_auth_code:TemplServiceLogin~}}</div>
                                </div>
                            </div>
                            <div class="px-4 py-6 bg-white dark:bg-gray-900 bg-opacity-50 sm:px-10">
                                <p class="text-xs leading-5 text-gray-500">{{~bx_artificer:get_splash_marker["login_agreement"]~}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>
<div class="bg-gray-100 dark:bg-gray-900 pt-12 sm:pt-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="max-w-4xl mx-auto text-center">
            <h2 class="text-3xl font-semibold text-gray-900 dark:text-gray-100 sm:text-4xl"><bx_text:_bx_artificer_txt_splash_stats_l1 /></h2>
            <p class="mt-3 text-xl font-light text-gray-500 sm:mt-4"><bx_text:_bx_artificer_txt_splash_stats_l2 /></p>
        </div>
    </div>
    <div class="mt-10 pb-12 bg-white dark:bg-black sm:pb-16">
        <div class="relative">
            <div class="absolute inset-0 h-1/2 bg-gray-100 dark:bg-gray-900 "></div>
            <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="max-w-7xl mx-auto">
                    <dl class="rounded-lg bg-white dark:bg-gray-800 shadow-lg sm:grid sm:grid-cols-3">
                        <div class="flex flex-col border-b border-gray-100 dark:border-gray-700 p-4 pt-5 text-center sm:border-0 sm:border-r">
                            <dt class="order-2 mt-2 text-lg leading-6 font-light text-gray-500"><bx_text:_bx_artificer_txt_splash_stats_c1 /></dt>
                            <dd class="order-1 text-3xl font-bold text-blue-600">{{~bx_artificer:get_splash_marker["members"]~}}</dd>
                        </div>
                        <div class="flex flex-col border-t border-b border-gray-100 dark:border-gray-900 p-4 pt-5  text-center sm:border-0 sm:border-l sm:border-r">
                            <dt class="order-2 mt-2 text-lg leading-6 font-light text-gray-500"><bx_text:_bx_artificer_txt_splash_stats_c2 /></dt>
                            <dd class="order-1 text-3xl font-bold text-blue-600">{{~bx_artificer:get_splash_marker["posts"]~}}</dd>
                        </div>
                        <div class="flex flex-col border-t border-gray-100  dark:border-gray-700 p-4 pt-5 text-center sm:border-0 sm:border-l">
                            <dt class="order-2 mt-2 text-lg leading-6 font-light text-gray-500"><bx_text:_bx_artificer_txt_splash_stats_c3 /></dt>
                            <dd class="order-1 text-3xl font-bold text-blue-600">{{~bx_artificer:get_splash_marker["comments"]~}}</dd>
                        </div>
                    </dl>
                </div>
            </div>
        </div>
    </div>
</div>