From 02ff3c1216515fffac1fe153cd305cacc9a1a7ec Mon Sep 17 00:00:00 2001
From: rajat-ht <rajat@mermaidchart.com>
Date: Mon, 5 May 2025 21:17:09 +0530
Subject: [PATCH 1/4] chore: Update announcement bar

---
 .../src/docs/.vitepress/components/TopBar.vue | 39 +++++++++++++------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
index baf484a43..658217fde 100644
--- a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type Ref, ref, onMounted } from 'vue';
+import { onMounted, type Ref, ref } from 'vue';
 
 interface Taglines {
   label: string;
@@ -8,29 +8,46 @@ interface Taglines {
 
 const taglines: Taglines[] = [
   {
-    label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Chart',
+    label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Pro',
     url: 'https://www.mermaidchart.com/mermaid-ai?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=aibundle',
   },
   {
-    label: 'Diagram live with teammates in Mermaid Chart',
+    label: 'Diagram live with teammates in Mermaid Pro',
     url: 'https://www.mermaidchart.com/landing?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=team_collaboration',
   },
+];
+
+const randomTagLines: Taglines[] = [
   {
-    label: 'Use the Visual Editor in Mermaid Chart to design and build diagrams',
-    url: 'https://www.mermaidchart.com/landing?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor',
+    label: 'Customize your layout and design in Mermaid Chart’s whiteboard!',
+    url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=whiteboard',
   },
   {
-    label: 'Explore the Mermaid Whiteboard from the creators of Mermaid',
-    url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=whiteboard',
+    label: 'Customize your layout and design in Mermaid Chart’s visual editor!',
+    url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor',
+  },
+  {
+    label: 'Customize your layout and design with Mermaid Chart’s GUI!',
+    url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=GUI',
+  },
+  {
+    label: 'Customize your layout and design in Mermaid Chart!',
+    url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor_whiteboard_gui',
   },
 ];
 
 const index: Ref<number> = ref(0);
+const currentBannerSet = ref<Taglines[]>(taglines);
+
+console.log('currentBannerSet:', currentBannerSet.value);
 
 onMounted(() => {
-  index.value = Math.floor(Math.random() * taglines.length);
+  const newIndex = Math.floor(Math.random() * randomTagLines.length);
+  console.log('newIndex:', newIndex);
+  currentBannerSet.value = [...taglines, randomTagLines[newIndex]];
+  index.value = Math.floor(Math.random() * currentBannerSet.value.length);
   setInterval(() => {
-    index.value = (index.value + 1) % taglines.length;
+    index.value = (index.value + 1) % currentBannerSet.value.length;
   }, 5_000);
 });
 </script>
@@ -41,11 +58,11 @@ onMounted(() => {
       <transition name="fade" mode="out-in">
         <a
           :key="index"
-          :href="taglines[index].url"
+          :href="currentBannerSet?.[index]?.url"
           target="_blank"
           class="unstyled flex justify-center items-center gap-4 text-white tracking-wide plausible-event-name=bannerClick"
         >
-          <span class="font-semibold">{{ taglines[index].label }}</span>
+          <span class="font-semibold">{{ currentBannerSet?.[index]?.label }}</span>
           <button class="bg-[#1E1A2E] shrink-0 rounded-lg p-1.5 px-4 font-semibold tracking-wide">
             Try now
           </button>

From 5d61a3023739e1cc4202b06b4da8eb769fde9e71 Mon Sep 17 00:00:00 2001
From: rajat-ht <rajat@mermaidchart.com>
Date: Tue, 6 May 2025 03:30:49 +0530
Subject: [PATCH 2/4] chore: update as per suggestion

---
 .../mermaid/src/docs/.vitepress/components/TopBar.vue    | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
index 658217fde..2dbfd8931 100644
--- a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
@@ -37,13 +37,10 @@ const randomTagLines: Taglines[] = [
 ];
 
 const index: Ref<number> = ref(0);
-const currentBannerSet = ref<Taglines[]>(taglines);
-
-console.log('currentBannerSet:', currentBannerSet.value);
+const currentBannerSet: Ref<Taglines[]> = ref(taglines);
 
 onMounted(() => {
   const newIndex = Math.floor(Math.random() * randomTagLines.length);
-  console.log('newIndex:', newIndex);
   currentBannerSet.value = [...taglines, randomTagLines[newIndex]];
   index.value = Math.floor(Math.random() * currentBannerSet.value.length);
   setInterval(() => {
@@ -58,11 +55,11 @@ onMounted(() => {
       <transition name="fade" mode="out-in">
         <a
           :key="index"
-          :href="currentBannerSet?.[index]?.url"
+          :href="currentBannerSet[index].url"
           target="_blank"
           class="unstyled flex justify-center items-center gap-4 text-white tracking-wide plausible-event-name=bannerClick"
         >
-          <span class="font-semibold">{{ currentBannerSet?.[index]?.label }}</span>
+          <span class="font-semibold">{{ currentBannerSet[index].label }}</span>
           <button class="bg-[#1E1A2E] shrink-0 rounded-lg p-1.5 px-4 font-semibold tracking-wide">
             Try now
           </button>

From 714496af6d22a4dbccfe3f0d3b112dbc3387caed Mon Sep 17 00:00:00 2001
From: rajat-ht <rajat@mermaidchart.com>
Date: Tue, 6 May 2025 03:46:01 +0530
Subject: [PATCH 3/4] chore: minor change

---
 packages/mermaid/src/docs/.vitepress/components/TopBar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
index 2dbfd8931..16978eff8 100644
--- a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
@@ -8,11 +8,11 @@ interface Taglines {
 
 const taglines: Taglines[] = [
   {
-    label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Pro',
+    label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Chart',
     url: 'https://www.mermaidchart.com/mermaid-ai?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=aibundle',
   },
   {
-    label: 'Diagram live with teammates in Mermaid Pro',
+    label: 'Diagram live with teammates in Mermaid Chart',
     url: 'https://www.mermaidchart.com/landing?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=team_collaboration',
   },
 ];

From c09232c44d2fb38311884473f1b05f639bdebcc4 Mon Sep 17 00:00:00 2001
From: rajat-ht <rajat@mermaidchart.com>
Date: Tue, 6 May 2025 03:52:21 +0530
Subject: [PATCH 4/4] chore: update utm_campaign

---
 packages/mermaid/src/docs/.vitepress/components/TopBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
index 16978eff8..deb6d451f 100644
--- a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
@@ -28,7 +28,7 @@ const randomTagLines: Taglines[] = [
   },
   {
     label: 'Customize your layout and design with Mermaid Chart’s GUI!',
-    url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=GUI',
+    url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=gui',
   },
   {
     label: 'Customize your layout and design in Mermaid Chart!',