Merge pull request #6279 from mermaid-js/update-promos

DOCS: update promos

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

@@ -1,29 +1,100 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue';
 
 interface Taglines {
   label: string;
   url: string;
 }
 
-const taglines: Taglines[] = [
+const allTaglines: { [key: string]: { design: number; taglines: Taglines[] } } = {
-  {
+  A: {
-    label: 'Explore the Mermaid Whiteboard from the creators of Mermaid',
+    design: 1,
-    url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=whiteboard',
+    taglines: [
+      {
+        label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Chart',
+        url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=AIbundle_A',
+      },
+      {
+        label: 'Diagram live with teammates in Mermaid Chart',
+        url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=teams_A',
+      },
+      {
+        label: 'Use the Visual Editor in Mermaid Chart to design and build diagrams',
+        url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor_A',
+      },
+      {
+        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_A',
+      },
+    ],
   },
-  {
+  B: {
-    label: 'Use the Visual Editor in Mermaid Chart to design and build diagrams',
+    design: 2,
-    url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor',
+    taglines: [
+      {
+        label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Chart',
+        url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=AIbundle_B',
+      },
+      {
+        label: 'Diagram live with teammates in Mermaid Chart',
+        url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=teams_B',
+      },
+      {
+        label: 'Use the Visual Editor in Mermaid Chart to design and build diagrams',
+        url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor_B',
+      },
+      {
+        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_A',
+      },
+    ],
   },
-  {
+  C: {
-    label: 'Diagram live with teammates in Mermaid Chart',
+    design: 1,
-    url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=teams',
+    taglines: [
+      {
+        label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Pro',
+        url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=AIbundle_C',
+      },
+      {
+        label: 'Diagram live with teammates in Mermaid Pro',
+        url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=teams_C',
+      },
+      {
+        label: 'Use the Visual Editor in Mermaid Pro to design and build diagrams',
+        url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor_C',
+      },
+      {
+        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_B',
+      },
+    ],
   },
-  {
+  D: {
-    label: 'Replace ChatGPT Pro, Mermaid.live, and LucidChart with Mermaid Pro',
+    design: 2,
-    url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=AIbundle',
+    taglines: [
+      {
+        label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Pro',
+        url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=AIbundle_D',
+      },
+      {
+        label: 'Diagram live with teammates in Mermaid Pro',
+        url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=teams_D',
+      },
+      {
+        label: 'Use the Visual Editor in Mermaid Pro to design and build diagrams',
+        url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor_D',
+      },
+      {
+        label: 'Explore the Mermaid Whiteboard from the creators of Mermaid',
+        url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=whiteboard_B',
+      },
+    ],
   },
-];
+};
+
+const { design, taglines } =
+  Object.values(allTaglines)[Math.floor(Math.random() * Object.values(allTaglines).length)];
 
 let index = ref(Math.floor(Math.random() * taglines.length));
 onMounted(() => {
@@ -34,7 +105,10 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="mb-4 w-full top-bar bg-gradient-to-r from-[#bd34fe] to-[#ff3670] flex p-1">
+  <div
+    :class="[design === 1 ? 'bg-gradient-to-r from-[#bd34fe] to-[#ff3670] ' : 'bg-[#2E2183]']"
+    class="mb-4 w-full top-bar flex p-2"
+  >
     <p class="w-full tracking-wide fade-text">
       <transition name="fade" mode="out-in">
         <a
@@ -44,7 +118,10 @@ onMounted(() => {
           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>
-          <button class="rounded bg-[#111113] p-1 px-2 text-sm font-semibold tracking-wide">
+          <button
+            :class="[design === 1 ? 'bg-[#2E2183]' : 'bg-[#E0095F]']"
+            class="rounded-lg p-1.5 px-4 font-semibold tracking-wide"
+          >
             Try now
           </button>
         </a>