add buttons to welcome screen

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@fontsource-variable/red-hat-display": "^5.0.9",
+    "@formkit/auto-animate": "^0.7.0",
     "@reduxjs/toolkit": "^1.9.5",
     "@tauri-apps/api": "^1.4.0",
     "redux": "^4.2.1",

src/page/Home/Home.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
+
+    import autoAnimate from '@formkit/auto-animate';
+
     import Matrix from '../../shared/matrix.svelte';
     import Blek from '../../shared/blek.svelte';
     import style from './style.module.scss';
+    import Link from '../../shared/Link.svelte';
 
     let header_opacity = 0;
     setTimeout(() => {
         header_opacity = 1
-    }, 950);
+    }, 1500);
 </script>
 
 <div class={style.root}>
@@ -19,4 +23,27 @@
             <Matrix height='24pt' style='transform:translateY(10px)' />
         </a>
     </h3>
+    <div class={style.buttons} style={`opacity: ${header_opacity}`}>
+        <Link href='/sign-in'>
+            <button>
+                Sign In
+            </button>
+        </Link>
+
+        <Link href='/homeserver_list'>
+            <button>
+                Create account
+            </button>
+        </Link>
+        <br/>
+        <Link href='/homeserver_list'>
+            <button>
+                Explore servers
+            </button>
+        </Link>
+    </div>
+
+    <h1 class={style.made_in + ' ' + style.h2} style={`opacity: ${header_opacity}`}>
+        Made in blek! Lab
+    </h1>
 </div>

src/page/Home/style.module.scss

@@ -19,14 +19,39 @@
     h1, h3 {
         font-weight: 400;
     }
-    .header_opacity {
+    .h1, .h2, .buttons {
-        opacity: 0;
+        animation: appear 1.5s ease;
     }
-    .h1, .h2 {
+    .h1 { margin-top: 10% }
-        animation: appear 1s ease;
+    .h2 { animation-delay: 750ms }
-        &::before {
+    .buttons {
-            opacity: 0;
+        animation-delay: 1450ms;
+        button {
+            background: #0001;
+            border: 1px solid #767876;
+            border-radius: 6px;
+            padding: 6px 12px;
+            margin: 3px 2px;
+            color: #c2c4c2;
+            transition: 150ms ease;
+
+            &:hover {
+                transform: translateY(-1px);
+            }
+            &:active {
+                transform: scale(0.98);
+                background: #0008;
+            }
         }
     }
-    .h2 { animation-delay: 940ms; }
+
+    .made_in {
+        position: fixed;
+        bottom: 16px; left: 0%;
+        width: 100%;
+        text-align: center;
+        margin: 0;
+        font-size: 12pt;
+        color: #ffffff40
+    }
 }

src/shared/Link.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    import RouteState from "../store/RouteStore";
+    export let href = '#';
+    
+    function setUrl() {
+        RouteState.dispatch({ type: 'setPath', path: href });
+    }
+</script>
+
+<!-- svelte-ignore a11y-missing-attribute -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<a on:click={setUrl}><slot/></a>

yarn.lock

@@ -124,6 +124,11 @@
   resolved "https://registry.yarnpkg.com/@fontsource-variable/red-hat-display/-/red-hat-display-5.0.9.tgz#429f7526aec5f4cbc623e3b434d6dc1d73cf9a9a"
   integrity sha512-REiFby1Q+TA2ndQoaOInVBV7hYWleEYj1Vf0bDC4CoahIuEsO0+73bqy40jaJNLOqMXTfK3NXGJrcJmRA/WC8Q==
 
+"@formkit/auto-animate@^0.7.0":
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/@formkit/auto-animate/-/auto-animate-0.7.0.tgz#7a68df578e972d63d999378571ce6e012d9059ae"
+  integrity sha512-RczHUr0AhRPssREoNdRjLfk2b/id9/DFnbIq18QM8L7E4zNV3XH+WO480EZ46BQHDEsv76YPJ0JbG2Y2i3GfXw==
+
 "@jridgewell/resolve-uri@^3.1.0":
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz#c08679063f279615a3326583ba3a90d1d82cc721"