<template>
    <div class="home-header">
        <div class="container">
            <header>
                <router-link class="brand" :to="{ name: 'index' }">
                    <img
                        class="brand-logo"
                        src="//via.placeholder.com/256"
                        alt="Brand Logo"
                    />
                    <span class="brand-name">Daniel de Cloet</span>
                </router-link>
                <nav class="site-nav">
                    <site-nav></site-nav>
                </nav>
            </header>

            <section class="hero">
                <h1>I'm Daniel, junior software engineer</h1>
                <p>
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                    Deleniti iure earum odio architecto? Tenetur in ea, animi
                    illo non voluptatibus distinctio consequuntur ipsam adipisci
                    officiis quod, recusandae facilis? Ut, aliquid.
                </p>
            </section>
        </div>

        <div class="wave">
            <svg
                preserveAspectRatio="none"
                width="1440"
                height="74"
                viewBox="0 0 1440 74"
            >
                <path
                    d="M456.464 0.0433865C277.158 -1.70575 0 50.0141 0 50.0141V74H1440V50.0141C1440 50.0141 1320.4 31.1925 1243.09 27.0276C1099.33 19.2816 1019.08 53.1981 875.138 50.0141C710.527 46.3727 621.108 1.64949 456.464 0.0433865Z"
                ></path>
            </svg>
        </div>
    </div>
</template>

<script>
import SiteNav from './SiteNav.vue';

export default {
    components: {
        SiteNav,
    }
}
</script>
