From adf87b62edbd08029f688071e8883b3c62bece78 Mon Sep 17 00:00:00 2001
From: xdrm-brackets <xdrm.brackets.dev@gmail.com>
Date: Wed, 5 Oct 2022 17:36:23 +0200
Subject: [PATCH] feat: create scroll button on the home page

---
 src/assets/scroll_arrow.svg |  6 +++++
 src/components/Home.vue     | 49 ++++++++++++++++++++++++++++++++++++-
 2 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/scroll_arrow.svg

diff --git a/src/assets/scroll_arrow.svg b/src/assets/scroll_arrow.svg
new file mode 100644
index 0000000..cd34b78
--- /dev/null
+++ b/src/assets/scroll_arrow.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="4.2333mm" height="4.2333mm" version="1.1" viewBox="0 0 4.2333 4.2333" xmlns="http://www.w3.org/2000/svg">
+	<g transform="translate(-89.762 -60.858)">
+		<path d="m91.879 62.037a0.13229 0.13229 0 0 0-0.13281 0.13281v1.2891l-0.55078-0.55078a0.13229 0.13229 0 0 0-0.18555 0 0.13229 0.13229 0 0 0 0 0.1875l0.77539 0.77539a0.13229 0.13229 0 0 0 0.1875 0l0.77539-0.77539a0.13229 0.13229 0 0 0 0-0.1875 0.13229 0.13229 0 0 0-0.1875 0l-0.55078 0.55273v-1.291a0.13229 0.13229 0 0 0-0.13086-0.13281z" color="#000000" stroke-linecap="round" stroke-linejoin="bevel" style="-inkscape-stroke:none"/>
+	</g>
+</svg>
diff --git a/src/components/Home.vue b/src/components/Home.vue
index 3966317..b78a46b 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -4,18 +4,24 @@
 		<div class='wave'></div>
 		<div class='wave w2'></div>
 
+		<div class='scroll-arrow' @click='scrollNext()'>
+			<img src='@/assets/scroll_arrow.svg' />
+		</div>
 
 	</div>
 </template>
 
 <script lang="ts">
 	import { Component, Vue } from 'vue-property-decorator';
-	import { Themes, Theme } from '@/model/themes';
+	import { go } from '@/service/scroller';
 
 	@Component({
 		components: {},
 	})
 	export default class Home extends Vue {
+		protected scrollNext() {
+			go('skill-picker', 0);
+		}
 	}
 
 </script>
@@ -42,6 +48,11 @@
 		to{   background-position-x: 100vw; }
 	}
 
+	@keyframes fadeLoop {
+		from { opacity: 1.0; transform: translateY(-2%);  }
+		to   { opacity: 0.8; transform: translateY(2%); }
+	}
+
 	.wave {
 		display: block;
 		position: absolute;
@@ -65,4 +76,40 @@
 		z-index: 900;
 	}
 
+	$scroll-btn-size: 5rem;
+
+	.scroll-arrow {
+		display: flex;
+		position: absolute;
+			top: calc( 100% - #{1.5*$wave-height} );
+			left: calc( 50% - #{$scroll-btn-size/2} );
+			width: $scroll-btn-size;
+			height: $scroll-btn-size;
+
+		opacity: .7;
+		background: #fff;
+
+		border-radius: 50% / 50%;
+
+		z-index: 1000;
+
+		flex-flow: row nowrap;
+		justify-content: center;
+		align-items: center;
+
+		transition: opacity .2s ease-in-out;
+
+		cursor: pointer;
+
+		img {
+			width: #{.8*$scroll-btn-size};
+			height: #{.8*$scroll-btn-size};
+			animation: 1s ease-in-out fadeLoop infinite alternate-reverse;
+		}
+
+		&:hover {
+			opacity: .9;
+		}
+	}
+
 </style>