<template>
    <main
        class="flex flex-col justify-center items-center min-h-screen space-y-5 bg-cinza-neutro-50 text-center"
    >
        <img
            src="~/assets/img/logo.svg"
            alt="Estúdio AANY"
            class="max-w-64 pb-5"
        />
        <span class="text-2xl text-azul-noturno-950">Desculpa a bagunça!</span>
        <h1 class="text-6xl text-balance max-w-3xl text-primary">
            Estamos trabalhando para um futuro melhor
        </h1>

        <p class="text-azul-noturno-800 text-lg max-w-xl text-balance">
            Em breve teremos um site novo, com bastante informação de como ter
            autonomia digital para sua empresa ou você.
        </p>

        <ul class="flex items-center gap-5 justify-center">
            <li>
                <a
                    href="mailto:contato@estudioaany.com.br"
                    class="flex justify-center text-primary"
                >
                    <UIcon
                        name="i-mdi-email-fast-outline"
                        class="size-7 mr-2"
                    />
                    E-mail
                </a>
            </li>
            <li>
                <a
                    href="xmpp:contato@estudioaany.com.br"
                    class="flex justify-center text-primary"
                >
                    <UIcon name="i-mdi-xmpp" class="size-7 mr-2" />
                    XMPP
                </a>
            </li>
        </ul>
    </main>
</template>
