<script>
    import Content from '@/components/Content.vue'
    import Header from '@/components/Header.vue'
    import TextFrame from '@/components/TextFrame.vue'
    import RoadVariant from '@/components/icons/RoadVariant.vue'

    export default {
        name: 'QuizConsole',
        components: {
            Content,
            Header,
            RoadVariant,
            TextFrame
        }
    }
</script>
<template>
    <TextFrame>
        <Header>
            Take the Quiz
        </Header>
        <Content>
            <article class="prose mx-auto">
                <h2 class="uncial-antiqua" key="welcome-0">
                    Gather your Things
                </h2>
                <p class="text-leader" key="welcome-1">
                    We are about to embark upon a journey.
                </p>
                <p class="text-leader" key="welcome-2">
                    In a minute, I will ask you a series of multiple choice questions.
                    For most of them, you will need to select the one answer.
                    Some questions will need multiple answers.
                    Don&rsquo;t over-think them!
                </p>
                <p class="text-leader" key="welcome-3">
                    <em class="uncial-antiqua">Wanderhome</em> is about going wherever the road takes you, and reflecting on how the journey changes us.
                    The road is full of myriad travellers, each with their rich lives and stories.
                    This quiz will help you figure out what kinds of stories you will bring to the table.
                </p>
                <p class="text-leader" key="welcome-4">
                    Will you join me?
                </p>
                <div class="w-fit mx-auto" key="welcome-5">
                    <router-link active-class="active-link" class="navlink" to="/quiz/question/0">
                        <div class="inline-flex px-3 py-1 space-x-2 rounded-md bg-olive-800 text-white transition-all duration-300 ease-in-out hover:bg-olive-600">
                            <span class="scale-75">
                                <RoadVariant/>
                            </span>
                            <span class="uncial-antiqua">Let&rsquo;s Go</span>
                        </div>
                    </router-link>
                </div>
            </article>
        </Content>
    </TextFrame>
</template>
<style scoped>
</style>