Merge pull request #6624 from mermaid-js/rajat-ht/chore-update-banner-ad

chore: update banner ad

packages/mermaid/src/docs/.vitepress/components/TopBar.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { onMounted, type Ref, ref } from 'vue';
+import { useRoute } from 'vitepress';
+import { computed, onMounted, type Ref, ref } from 'vue';
 
 interface Taglines {
   label: string;
@@ -7,6 +8,10 @@ interface Taglines {
 }
 
 const taglines: Taglines[] = [
+  {
+    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: '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',
@@ -17,38 +22,21 @@ const taglines: Taglines[] = [
   },
 ];
 
-const randomTagLines: Taglines[] = [
-  {
-    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: "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[]> = ref(taglines);
 const isPaused: Ref<boolean> = ref(false);
+const route = useRoute();
+
+const isHomePage = computed(() => {
+  return route.path === '/';
+});
 
 onMounted(() => {
-  const newIndex = Math.floor(Math.random() * randomTagLines.length);
+  index.value = Math.floor(Math.random() * taglines.length);
-  currentBannerSet.value = [...taglines, randomTagLines[newIndex]];
-  index.value = Math.floor(Math.random() * currentBannerSet.value.length);
   setInterval(() => {
     if (isPaused.value) {
       return;
     }
-    index.value = (index.value + 1) % currentBannerSet.value.length;
+    index.value = (index.value + 1) % taglines.length;
   }, 5_000);
 });
 </script>
@@ -59,16 +47,19 @@ onMounted(() => {
     @mouseenter="isPaused = true"
     @mouseleave="isPaused = false"
   >
-    <p class="w-full tracking-wide fade-text text-sm">
+    <p class="w-full tracking-wide fade-text" :class="isHomePage ? 'text-lg' : 'text-sm'">
       <transition name="fade" mode="out-in">
         <a
           :key="index"
-          :href="currentBannerSet[index].url"
+          :href="taglines[index].url"
           target="_blank"
-          class="unstyled flex justify-center items-center gap-4 text-white no-tooltip tracking-wide plausible-event-name=bannerClick"
+          class="unstyled flex justify-center items-center gap-4 no-tooltip text-white tracking-wide plausible-event-name=bannerClick"
         >
-          <span class="font-semibold">{{ currentBannerSet[index].label }}</span>
+          <span class="font-semibold">{{ taglines[index].label }}</span>
-          <button class="bg-[#1E1A2E] shrink-0 rounded-lg p-1.5 px-4 font-semibold tracking-wide">
+          <button
+            class="bg-[#1E1A2E] shrink-0 rounded-lg p-1.5 px-4 font-semibold tracking-wide"
+            :class="isHomePage ? 'text-lg' : 'text-sm'"
+          >
             Try now
           </button>
         </a>