<template>
	<div>
		<div class="banner-bg">
			<div>
				<n-gradient-text :size="40" type="success">
					Zierle-Training
				</n-gradient-text>
				<br>
				<n-gradient-text :size="30" type="info">
					Online Tools
				</n-gradient-text>
			</div>
		</div>

		<div class="home-menu">
			<n-space justify="space-around" >
				<n-space vertical>
					<h2>Documents</h2>
					<n-button type="primary">All Documents</n-button>
				</n-space>
				<n-space vertical>
					<h2>Photo Logs</h2>
					<n-space>
						<router-link :to="{name: 'LogsList'}">
							<n-button type="primary">All Logs</n-button>
						</router-link>
						<router-link :to="{name: 'CreateLog'}">
							<n-button type="info">+ New</n-button>
						</router-link>
					</n-space>
					<n-button>Crop Photos</n-button>
				</n-space>
			</n-space>
		</div>
	</div>
</template>

<script>

export default {
	name: 'HomeView'
}
</script>

<style scoped>
.home-menu {
	margin: auto;
	position: relative;
	min-width: 30vw;
	max-width: 60vw;
	min-height: 20vh;
	background-color: white;
	z-index: 1;
	margin-top: 30vh;
	box-shadow: 0 0 50px rgba(0,0,0,0.25);
	border: none;
	border-radius: 0 2em;
	padding: 1em;
}

.banner-bg {
	background-image: url('../assets/images/home_bg.jpg');
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 50%;
	position: absolute;
	top: 0;
	z-index: -1;
	border-bottom-left-radius: 100% 30%;
	border-bottom-right-radius: 100% 30%;
	box-shadow: 0 0 50px rgba(0,0,0,0.25);
}

.banner-bg div {
	margin: auto;
	text-align: center;
	margin-top: 3em;
}

a {
	text-decoration: none;
}
</style>