start init banner

src/lib/components/AnnouncementBanner.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { browser } from '$app/environment';
     import { BANNER_KEY } from '$lib/constants';
 
     const hideTopBanner = () => {
@@ -8,16 +7,40 @@
     };
 </script>
 
-<div class="web-top-banner">
-    <div class="web-top-banner-content web-u-color-text-primary">
-        <slot />
-
-        <button
-            class="web-top-banner-button"
-            aria-label="close discord message"
-            on:click={hideTopBanner}
-        >
-            <span class="web-icon-close" aria-hidden="true" />
-        </button>
+<div class="banner">
+    <div class="content web-u-color-text-primary">
+        <div class="headings">
+            <span>init_ is coming </span>
+            <span class="web-u-color-text-secondary">The start of something new</span>
+        </div>
+        <a href="/init/tickets" rel="noopener noreferrer">
+            <span class="web-caption-500">Register now</span>
+            <span class="web-icon-arrow-right" aria-hidden="true" />
+        </a>
     </div>
 </div>
+
+<style lang="scss">
+    .banner {
+        min-height: 80px;
+        display: flex;
+        align-items: center;
+        background: linear-gradient(
+            to right,
+            hsl(var(--web-color-background) / 100%) 0,
+            hsl(var(--web-color-background) / 80%) 100%
+        );
+
+        .content {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: 100%;
+
+            .headings {
+                display: flex;
+                flex-direction: column;
+            }
+        }
+    }
+</style>

src/lib/constants.ts

@@ -1,11 +1,12 @@
 export const GITHUB_STARS = '42.8K';
-export const BANNER_KEY = 'discord-banner-01'; // Change key to force banner to show again
+export const BANNER_KEY = 'init-banner-02'; // Change key to force banner to show again
 export const SENTRY_DSN =
     'https://27d41dc8bb67b596f137924ab8599e59@o1063647.ingest.us.sentry.io/4507497727000576';
 
 /**
  * History:
  * discord-banner-01
+ * init-banner-02
  * pricing-banner-01
  */
 

src/lib/layouts/Main.svelte

@@ -143,11 +143,6 @@
 
         return $scrollInfo.deltaDirChange < 200;
     })();
-
-    const hideTopBanner = () => {
-        document.body.dataset.bannerHidden = '';
-        localStorage.setItem(BANNER_KEY, 'true');
-    };
 </script>
 
 <div class="u-position-relative">
@@ -197,14 +192,7 @@
         class="web-main-header is-special-padding theme-{resolvedTheme} is-transparent"
         class:is-hidden={$isHeaderHidden}
     >
-        <AnnouncementBanner>
-            <a href="/discord" target="_blank" rel="noopener noreferrer">
-                <span class="web-caption-500">We are having lots of fun on</span>
-                <span class="web-icon-discord" aria-hidden="true" />
-                <span class="web-caption-500">Discord. Come and join us!</span>
-            </a>
-        </AnnouncementBanner>
-
+        <AnnouncementBanner />
         <div class="web-main-header-wrapper">
             <div class="web-main-header-start">
                 <a href="/">