update taglines

src/lib/util/promos/October2024.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import { fade } from 'svelte/transition';
+
+  interface Taglines {
+    label: string;
+    url: string;
+  }
+
+  const taglines: Taglines[] = [
+    {
+      label: 'Explore the Mermaid Whiteboard from the creators of Mermaid',
+      url: 'https://docs.mermaidchart.com/guides/whiteboard?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=whiteboard'
+    },
+    {
+      label: 'Use the Visual Editor in Mermaid Chart to design and build diagrams',
+      url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=visual_editor'
+    },
+    {
+      label: 'Diagram live with teammates in Mermaid Chart',
+      url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=teams'
+    },
+    {
+      label: 'Replace ChatGPT Pro, Mermaid.live, and LucidChart with Mermaid Pro',
+      url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=AIbundle'
+    }
+  ];
+
+  let index = Math.floor(Math.random() * taglines.length);
+  let currentTagline = taglines[index];
+
+  const interval = setInterval(() => {
+    index = (index + 1) % taglines.length;
+    currentTagline = taglines[index];
+  }, 40_000);
+
+  onDestroy(() => {
+    clearInterval(interval);
+  });
+</script>
+
+<div class="grid w-full">
+  {#key currentTagline}
+    <a
+      href={currentTagline.url}
+      target="_blank"
+      class="col-start-1 row-start-1 flex items-center justify-center gap-4 no-underline"
+      in:fade={{ delay: 750 }}
+      out:fade={{ duration: 1000 }}>
+      <span class="text-sm tracking-wider">{currentTagline.label}</span>
+      <button class="rounded bg-[#111113] p-1 px-2 text-sm font-semibold tracking-wide"
+        >Try now</button>
+    </a>
+  {/key}
+</div>

src/lib/util/promos/promo.ts

@@ -1,6 +1,7 @@
 import { writable, type Writable, get } from 'svelte/store';
 import { persist, localStorage } from '../persist';
 import August2024 from './August2024.svelte';
+import October2024 from './October2024.svelte';
 import { env } from '$lib/util/env';
 
 interface Promotion {
@@ -14,8 +15,14 @@ const promotions: Promotion[] = [
   {
     id: 'promo-2024',
     startDate: new Date('2024-08-01'),
-    endDate: new Date('2024-12-31'),
+    endDate: new Date('2024-10-20'),
     component: August2024
+  },
+  {
+    id: 'promo-october-2024',
+    startDate: new Date('2024-10-21'),
+    endDate: new Date('2024-12-31'),
+    component: October2024
   }
 ];