update promo bar

src/lib/util/promos/August2024.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+
+  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];
+  let isFadingOut = false;
+
+  const interval = setInterval(() => {
+    isFadingOut = true;
+
+    setTimeout(() => {
+      isFadingOut = false;
+      index = (index + 1) % taglines.length;
+      currentTagline = taglines[index];
+    }, 1000);
+  }, 60_000);
+
+  onDestroy(() => {
+    clearInterval(interval);
+  });
+</script>
+
+{#key currentTagline}
+  <a
+    href={currentTagline.url}
+    target="_blank"
+    class="flex-grow animate-fadeIn no-underline {isFadingOut ? 'animate-fadeOut' : ''}">
+    <span class="text-surface-50 dark:text-surface-50 text-sm tracking-wider transition-opacity"
+      >{currentTagline.label}</span>
+    <button
+      class="border:surface-50 dark:hover:surface-50 dark:white text-surface-50 ml-4 rounded border px-3 py-1 text-sm tracking-wide hover:border-[#00237A] hover:bg-[#00237A]"
+      >Try it now</button>
+  </a>
+{/key}

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
   }
 ];
 

tailwind.config.cjs

@@ -2,7 +2,22 @@ module.exports = {
   plugins: [require('daisyui')],
   content: ['./src/**/*.{html,js,svelte,ts}'],
   theme: {
-    extend: {}
+    extend: {
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' }
+        },
+        fadeOut: {
+          '0%': { opacity: '1' },
+          '100%': { opacity: '0' }
+        }
+      },
+      animation: {
+        fadeIn: 'fadeIn 1s ease-in',
+        fadeOut: 'fadeOut 1s ease-in'
+      }
+    }
   },
   variants: {
     extend: {}