<script lang="ts">

    import autoAnimate from '@formkit/auto-animate';

    import Matrix from '../../shared/matrix.svelte';
    import Blek from '../../shared/blek.svelte';
    import style from './style.module.scss';
    import Link from '../../shared/Link.svelte';

    let header_opacity = 0;
    setTimeout(() => {
        header_opacity = 1
    }, 1500);
</script>

<div class={style.root}>
    <h1 class={style.h1} style={`opacity: ${header_opacity}`}>
        Welcome to <Blek height='18pt' /> nox!
    </h1>
    <h3 class={style.h2} style={`opacity: ${header_opacity}`}>
        A decentralyzed, e2e encrypted chat system powered by
        <a href='https://matrix.org' target="_blank">
            <Matrix height='24pt' style='transform:translateY(10px)' />
        </a>
    </h3>
    <div class={style.buttons} style={`opacity: ${header_opacity}`}>
        <Link href='/sign-in'>
            <button>
                Sign In
            </button>
        </Link>

        <Link href='/homeserver-list'>
            <button>
                Create account
            </button>
        </Link>
        <br/>
        <Link href='/homeserver-list'>
            <button>
                Explore servers
            </button>
        </Link>
    </div>

    <h1 class={style.made_in + ' ' + style.h2} style={`opacity: ${header_opacity}`}>
        Made in blek! Lab
    </h1>
</div>