Merge pull request #1506 from mermaid-js/update-promo-bar

update promo bar

src/lib/util/promos/August2024.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import { fade } from 'svelte/transition';
+
+  interface Taglines {
+    label: string;
+    url: string;
+  }
+
+  const taglines: Taglines[] = [
+    {
+      label: 'Use the Visual Editor in Mermaid Chart to design and build diagrams',
+      url: 'https://www.mermaidchart.com/landing?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/landing?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=teams'
+    },
+    {
+      label: 'Skip the rough draft with Mermaid AI in Mermaid Chart',
+      url: 'https://www.mermaidchart.com/mermaid-ai?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=mermaid_ai'
+    }
+  ];
+
+  let index = Math.floor(Math.random() * taglines.length);
+  let currentTagline = taglines[index];
+
+  const interval = setInterval(() => {
+    index = (index + 1) % taglines.length;
+    currentTagline = taglines[index];
+  }, 60_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="border:surface-50 dark:hover:surface-50 dark:white text-surface-50 rounded border px-3 py-1 text-sm tracking-wide hover:border-[#00237A] hover:bg-[#00237A]"
+        >Try it now</button>
+    </a>
+  {/key}
+</div>

src/lib/util/promos/Holiday2023.svelte

@@ -1,7 +0,0 @@
-<a
-  href="https://www.mermaidchart.com/app/user/billing/checkout?coupon=HOLIDAYS2023"
-  target="_blank"
-  class="flex-grow tracking-wide">
-  Get AI, team collaboration, storage, and more with
-  <span class="font-bold underline">Mermaid Chart Pro. Start free trial today & get 25% off.</span>
-</a>

src/lib/util/promos/Jan2024.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">
-  const taglines = {
-    announcement_bar_ai_diagramming: 'Try diagramming with ChatGPT at Mermaid Chart',
-    announcement_bar_visual_editor: "Try Mermaid's Visual Editor at Mermaid Chart",
-    announcement_bar_live_collaboration: 'Enjoy live collaboration with teammates at Mermaid Chart'
-  };
-  const taglineKeys = Object.keys(taglines);
-  const taglineKey = taglineKeys[Math.floor(Math.random() * taglineKeys.length)];
-  const tagline = taglines[taglineKey];
-  const url =
-    'https://www.mermaidchart.com/landing/?' +
-    new URLSearchParams({
-      utm_source: 'mermaid_live_editor',
-      utm_medium: taglineKey,
-      utm_campaign: 'promo_2024'
-    }).toString();
-</script>
-
-<a
-  href={url}
-  target="_blank"
-  class="flex flex-grow justify-center gap-6 align-middle tracking-wide">
-  {tagline}
-  <button class="rounded bg-gray-800 p-1 px-4 text-sm font-light">Try it now</button>
-</a>

src/lib/util/promos/promo.ts

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