Merge pull request #1367 from mermaid-js/janPromo

feat: Jan 2024 Promo

src/lib/components/Navbar.svelte

@@ -62,7 +62,7 @@
 
 {#if activePromotion}
   <div
-    class="z-10 w-full top-bar bg-gradient-to-r from-[#bd34fe] to-[#ff3670] flex items-center text-center justify-center p-1 text-white">
+    class="z-10 w-full h-fit top-bar bg-gradient-to-r from-[#bd34fe] to-[#ff3670] flex items-center text-center justify-center p-1 text-white">
     <div class="flex flex-grow" on:click={trackBannerClick} on:keypress={trackBannerClick}>
       <svelte:component this={activePromotion.component} />
     </div>

src/lib/util/promos/Jan2024.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  const taglines = [
+    'Try diagramming with ChatGPT at Mermaid Chart',
+    "Try Mermaid's Visual Editor at Mermaid Chart",
+    'Enjoy live collaboration with teammates at Mermaid Chart'
+  ];
+</script>
+
+<a
+  href="https://www.mermaidchart.com/"
+  target="_blank"
+  class="tracking-wide flex-grow justify-center align-middle flex gap-6">
+  {taglines[Math.floor(Math.random() * taglines.length)]}
+  <button class="font-light text-sm p-1 rounded bg-gray-800 px-4">Try it now</button>
+</a>

src/lib/util/promos/promo.ts

@@ -1,6 +1,7 @@
 import { writable, type Writable, get } from 'svelte/store';
 import { persist, localStorage } from '../persist';
 import Holiday2023 from './Holiday2023.svelte';
+import Jan2024 from './Jan2024.svelte';
 
 interface Promotion {
   id: string;
@@ -13,8 +14,14 @@ const promotions: Promotion[] = [
   {
     id: 'holiday-2023',
     startDate: new Date('2023-11-27'),
-    endDate: new Date('2024-01-01'),
+    endDate: new Date('2024-01-10'),
     component: Holiday2023
+  },
+  {
+    id: 'jan-2024',
+    startDate: new Date('2024-01-10'),
+    endDate: new Date('2024-06-01'),
+    component: Jan2024
   }
 ];