From 1da5938ff29bc05c81208d4914d9c5e12846454a Mon Sep 17 00:00:00 2001
From: Steph <35910788+huynhicode@users.noreply.github.com>
Date: Tue, 23 Jul 2024 16:28:50 -0700
Subject: [PATCH 1/5] update product hunt content

---
 src/lib/components/Navbar.svelte | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 53da4e7b..6f3737fc 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -88,17 +88,23 @@
     <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">
+    <div class="ml-8 flex items-center gap-4">
       <a
-        href="https://www.producthunt.com/products/mermaid-chart?utm_source=badge-follow&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart"
+        href="https://www.producthunt.com/posts/mermaid-ai-2"
         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>
+        class="decoration font-semibold underline decoration-orange-500 decoration-2 underline-offset-4">
+        We're live on Product Hunt!
+      </a>
+      <span>
+        <a
+          href="https://www.producthunt.com/posts/mermaid-ai-2?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;ai&#0045;2"
+          target="_blank"
+          ><img
+            src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=465568&theme=light"
+            alt="Mermaid&#0032;AI - Maximize&#0032;your&#0032;diagramming&#0032;efficiency&#0032;with&#0032;Mermaid&#0032;AI | Product Hunt"
+            style="width: 150px; height: 54px;" /></a>
+      </span>
+    </div>
   </div>
 
   <label

From 6e167163769141472f9041550fdfe4a55ee2424a Mon Sep 17 00:00:00 2001
From: Steph <35910788+huynhicode@users.noreply.github.com>
Date: Mon, 29 Jul 2024 00:27:48 -0700
Subject: [PATCH 2/5] remove product hunt text and badge

---
 src/lib/components/Navbar.svelte | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 6f3737fc..96340b6c 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -88,23 +88,6 @@
     <span class="text-lg font-bold">
       <a href="/">Mermaid<span class="text-xs font-thin">v{version}</span> Live Editor</a>
     </span>
-    <div class="ml-8 flex items-center gap-4">
-      <a
-        href="https://www.producthunt.com/posts/mermaid-ai-2"
-        target="_blank"
-        class="decoration font-semibold underline decoration-orange-500 decoration-2 underline-offset-4">
-        We're live on Product Hunt!
-      </a>
-      <span>
-        <a
-          href="https://www.producthunt.com/posts/mermaid-ai-2?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;ai&#0045;2"
-          target="_blank"
-          ><img
-            src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=465568&theme=light"
-            alt="Mermaid&#0032;AI - Maximize&#0032;your&#0032;diagramming&#0032;efficiency&#0032;with&#0032;Mermaid&#0032;AI | Product Hunt"
-            style="width: 150px; height: 54px;" /></a>
-      </span>
-    </div>
   </div>
 
   <label

From 9dc4f5773c19b73d7524c1586f63a24307d5ea9f Mon Sep 17 00:00:00 2001
From: Steph <35910788+huynhicode@users.noreply.github.com>
Date: Tue, 6 Aug 2024 04:26:43 -0700
Subject: [PATCH 3/5] update promo bar

---
 src/lib/util/promos/August2024.svelte  | 54 ++++++++++++++++++++++++++
 src/lib/util/promos/Holiday2023.svelte |  7 ----
 src/lib/util/promos/Jan2024.svelte     | 25 ------------
 src/lib/util/promos/promo.ts           | 15 ++-----
 tailwind.config.cjs                    | 17 +++++++-
 5 files changed, 74 insertions(+), 44 deletions(-)
 create mode 100644 src/lib/util/promos/August2024.svelte
 delete mode 100644 src/lib/util/promos/Holiday2023.svelte
 delete mode 100644 src/lib/util/promos/Jan2024.svelte

diff --git a/src/lib/util/promos/August2024.svelte b/src/lib/util/promos/August2024.svelte
new file mode 100644
index 00000000..7a9b54e1
--- /dev/null
+++ b/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}
diff --git a/src/lib/util/promos/Holiday2023.svelte b/src/lib/util/promos/Holiday2023.svelte
deleted file mode 100644
index b723ac3e..00000000
--- a/src/lib/util/promos/Holiday2023.svelte
+++ /dev/null
@@ -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>
diff --git a/src/lib/util/promos/Jan2024.svelte b/src/lib/util/promos/Jan2024.svelte
deleted file mode 100644
index 3d3a662c..00000000
--- a/src/lib/util/promos/Jan2024.svelte
+++ /dev/null
@@ -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>
diff --git a/src/lib/util/promos/promo.ts b/src/lib/util/promos/promo.ts
index 20e540a8..45630714 100644
--- a/src/lib/util/promos/promo.ts
+++ b/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
   }
 ];
 
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 18cb32c1..d2b0cd08 100644
--- a/tailwind.config.cjs
+++ b/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: {}

From 2916eaedaaccfee00cf140610c5934fba074667c Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 7 Aug 2024 10:22:45 +0530
Subject: [PATCH 4/5] chore: Simplify promotion

---
 src/lib/util/promos/August2024.svelte | 38 +++++++++++++--------------
 tailwind.config.cjs                   | 17 +-----------
 2 files changed, 19 insertions(+), 36 deletions(-)

diff --git a/src/lib/util/promos/August2024.svelte b/src/lib/util/promos/August2024.svelte
index 7a9b54e1..7a4e1b6c 100644
--- a/src/lib/util/promos/August2024.svelte
+++ b/src/lib/util/promos/August2024.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onDestroy } from 'svelte';
+  import { fade } from 'svelte/transition';
 
   interface Taglines {
     label: string;
@@ -23,16 +24,10 @@
 
   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);
+    index = (index + 1) % taglines.length;
+    currentTagline = taglines[index];
   }, 60_000);
 
   onDestroy(() => {
@@ -40,15 +35,18 @@
   });
 </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}
+<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>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index d2b0cd08..18cb32c1 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -2,22 +2,7 @@ module.exports = {
   plugins: [require('daisyui')],
   content: ['./src/**/*.{html,js,svelte,ts}'],
   theme: {
-    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'
-      }
-    }
+    extend: {}
   },
   variants: {
     extend: {}

From fbf2bcb202238b6e386b218fcc642177d7b43994 Mon Sep 17 00:00:00 2001
From: Steph <35910788+huynhicode@users.noreply.github.com>
Date: Wed, 4 Sep 2024 18:19:40 -0700
Subject: [PATCH 5/5] update promo bar styling

---
 src/lib/components/Navbar.svelte      | 1 +
 src/lib/util/promos/August2024.svelte | 3 +--
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 96340b6c..37a16b7b 100644
--- a/src/lib/components/Navbar.svelte
+++ b/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);
diff --git a/src/lib/util/promos/August2024.svelte b/src/lib/util/promos/August2024.svelte
index 7a4e1b6c..ea734bf4 100644
--- a/src/lib/util/promos/August2024.svelte
+++ b/src/lib/util/promos/August2024.svelte
@@ -44,8 +44,7 @@
       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]"
+      <button class="rounded bg-[#111113] p-1 px-2 text-sm font-semibold tracking-wide"
         >Try it now</button>
     </a>
   {/key}