<script lang="ts">
    import { fade, fly } from "svelte/transition";
    export let header: string = "Home";
    export let description: string = "";
</script>

<section out:fade={{ duration: 100 }} class="w-full">
    <header class="flex flex-column">
        <h1 in:fade={{ duration: 500 }}>
            {header}
        </h1>
        <span in:fly={{ y: 150, delay: 50, duration: 150 }}>{description}</span>
    </header>
    <section in:fade={{ delay: 150, duration: 550 }} class="py-5">
        <slot>
            <em>This page is (un?)intentionally left blank.</em>
        </slot>
    </section>
</section>
