Feat/cloud beta card

package.json

@@ -30,6 +30,7 @@
         "logrocket": "^3.0.1",
         "pretty-bytes": "^6.1.0",
         "prismjs": "^1.29.0",
+        "svelte-confetti": "^1.2.2",
         "tippy.js": "^6.3.7",
         "web-vitals": "^3.1.1"
     },

src/lib/elements/forms/button.svelte

@@ -3,6 +3,7 @@
 
     export let submit = false;
     export let secondary = false;
+    export let github = false;
     export let text = false;
     export let danger = false;
     export let disabled = false;
@@ -38,6 +39,7 @@
         class="button"
         class:is-only-icon={round}
         class:is-secondary={secondary}
+        class:is-github={github}
         class:is-text={text}
         class:is-danger={danger}
         class:is-full-width={fullWidth}
@@ -53,6 +55,7 @@
         class="button"
         class:is-only-icon={round}
         class:is-secondary={secondary}
+        class:is-github={github}
         class:is-danger={danger}
         class:is-text={text}
         class:is-full-width={fullWidth}
@@ -62,3 +65,17 @@
         <slot />
     </button>
 {/if}
+
+<style lang="scss">
+    .is-github {
+        background-color: #373b4d;
+
+        &:hover {
+            background-color: lighten($color: #373b4d, $amount: 2.5);
+        }
+
+        &:active {
+            background-color: darken($color: #373b4d, $amount: 5);
+        }
+    }
+</style>