Merge pull request #1525 from mermaid-js/update-promo-bar-button-style

Update promo bar styling

src/lib/components/Navbar.svelte

@@ -73,6 +73,7 @@
       <svelte:component this={activePromotion.component} />
     </div>
     <button
+      class="rounded hover:text-black"
       title="Dismiss banner"
       on:click={() => {
         dismissPromotion(activePromotion?.id);
@@ -88,17 +89,6 @@
     <span class="text-lg font-bold">
       <a href="/">Mermaid<span class="text-xs font-thin">v{version}</span> Live Editor</a>
     </span>
-    <span class="ml-4">
-      <a
-        href="https://www.producthunt.com/products/mermaid-chart?utm_source=badge-follow&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart"
-        target="_blank"
-        ><img
-          src="https://api.producthunt.com/widgets/embed-image/v1/follow.svg?product_id=552855&theme=light&size=small"
-          alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt"
-          style="width: 86px; height: 32px;"
-          width="86"
-          height="32" /></a>
-    </span>
   </div>
 
   <label

src/lib/util/promos/August2024.svelte

@@ -0,0 +1,51 @@
+<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="rounded bg-[#111113] p-1 px-2 text-sm font-semibold tracking-wide"
+        >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
   }
 ];