From 657e38f6e05ea723f8af921447d324191a02d5df Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 7 Aug 2024 11:35:12 +0530
Subject: [PATCH 1/3] feat: Update promo bar links

---
 .../src/docs/.vitepress/components/TopBar.vue | 35 ++++++++++++++-----
 1 file changed, 27 insertions(+), 8 deletions(-)

diff --git a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
index d8e36ded48..a51d278b3a 100644
--- a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
@@ -1,20 +1,39 @@
+<script setup lang="ts">
+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',
+  },
+];
+
+const index = Math.floor(Math.random() * taglines.length);
+const currentTagline = taglines[index];
+</script>
+
 <template>
   <div
     class="mb-4 w-full top-bar bg-gradient-to-r from-[#bd34fe] to-[#ff3670] flex items-center text-center justify-center p-1 text-white"
   >
     <p class="flex-grow text-center tracking-wide text-text">
       <a
-        href="https://www.mermaidchart.com/landing"
+        href="{{ currentTagline.url }}"
         target="_blank"
         class="unstyled flex-grow tracking-wide plausible-event-name=bannerClick"
       >
-        <span class="text-primary-50 font-semibold">{{
-          [
-            'Try diagramming with ChatGPT at Mermaid Chart',
-            'Try Mermaid’s Visual Editor at Mermaid Chart',
-            'Enjoy live collaboration with teammates at Mermaid Chart',
-          ][Math.floor(Math.random() * 3)]
-        }}</span>
+        <span class="text-primary-50 font-semibold">{{ currentTagline.label }}</span>
         <button
           class="ml-4 rounded bg-[#111113] p-1 px-2 text-sm font-semibold tracking-wide text-white"
         >

From 42177a3098ac075d1de5fd56536777f38b9f8f48 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 7 Aug 2024 12:10:35 +0530
Subject: [PATCH 2/3] Add animated transitions

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

diff --git a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
index a51d278b3a..6fdb96e743 100644
--- a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
 interface Taglines {
   label: string;
   url: string;
@@ -19,27 +21,47 @@ const taglines: Taglines[] = [
   },
 ];
 
-const index = Math.floor(Math.random() * taglines.length);
-const currentTagline = taglines[index];
+let index = ref(Math.floor(Math.random() * taglines.length));
+onMounted(() => {
+  setInterval(() => {
+    index.value = (index.value + 1) % taglines.length;
+  }, 60_000);
+});
 </script>
 
 <template>
-  <div
-    class="mb-4 w-full top-bar bg-gradient-to-r from-[#bd34fe] to-[#ff3670] flex items-center text-center justify-center p-1 text-white"
-  >
-    <p class="flex-grow text-center tracking-wide text-text">
-      <a
-        href="{{ currentTagline.url }}"
-        target="_blank"
-        class="unstyled flex-grow tracking-wide plausible-event-name=bannerClick"
-      >
-        <span class="text-primary-50 font-semibold">{{ currentTagline.label }}</span>
-        <button
-          class="ml-4 rounded bg-[#111113] p-1 px-2 text-sm font-semibold tracking-wide text-white"
+  <div class="mb-4 w-full top-bar bg-gradient-to-r from-[#bd34fe] to-[#ff3670] flex p-1">
+    <p class="w-full tracking-wide fade-text">
+      <transition name="fade" mode="out-in">
+        <a
+          :key="index"
+          href="{{ taglines[index].url }}"
+          target="_blank"
+          class="unstyled flex justify-center items-center gap-4 tracking-wide plausible-event-name=bannerClick"
         >
-          Try it now
-        </button>
-      </a>
+          <span class="text-primary-50 font-semibold">{{ taglines[index].label }}</span>
+          <button
+            class="rounded bg-[#111113] p-1 px-2 text-sm font-semibold tracking-wide text-white"
+          >
+            Try it now
+          </button>
+        </a>
+      </transition>
     </p>
   </div>
 </template>
+
+<style>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 1s;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
+</style>

From 980c97a44c47aacf88b5c63adfb1268767c9b36a Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 7 Aug 2024 12:24:03 +0530
Subject: [PATCH 3/3] Fix text color

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

diff --git a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
index 6fdb96e743..156360e805 100644
--- a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
@@ -37,12 +37,10 @@ onMounted(() => {
           :key="index"
           href="{{ taglines[index].url }}"
           target="_blank"
-          class="unstyled flex justify-center items-center gap-4 tracking-wide plausible-event-name=bannerClick"
+          class="unstyled flex justify-center items-center gap-4 text-white tracking-wide plausible-event-name=bannerClick"
         >
-          <span class="text-primary-50 font-semibold">{{ taglines[index].label }}</span>
-          <button
-            class="rounded bg-[#111113] p-1 px-2 text-sm font-semibold tracking-wide text-white"
-          >
+          <span class="font-semibold">{{ taglines[index].label }}</span>
+          <button class="rounded bg-[#111113] p-1 px-2 text-sm font-semibold tracking-wide">
             Try it now
           </button>
         </a>