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

Update promos
mermaid-js · Feb 14, 2025 · 77234d9 · 77234d9
2 parents c5eaf34 + 1df59ae
commit 77234d9
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 20 deletions.
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
@@ -60,8 +60,7 @@
 </script>
 
 {#if activePromotion}
-  <div
-    class="top-bar z-10 flex h-fit w-full items-center justify-center bg-gradient-to-r from-[#bd34fe] to-[#ff3670] p-1 text-center text-white">
+  <div class="top-bar z-10 flex h-fit w-full bg-primary">
     <div
       class="flex flex-grow"
       role="button"

diff --git a/src/lib/util/promos/January2025.svelte b/src/lib/util/promos/January2025.svelte
@@ -7,24 +7,95 @@
     url: string;
   }
 
-  const taglines: Taglines[] = [
-    {
-      label: 'Explore the Mermaid Whiteboard from the creators of Mermaid',
-      url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=whiteboard'
+  const allTaglines: { [key: string]: { design: number; taglines: Taglines[] } } = {
+    A: {
+      design: 1,
+      taglines: [
+        {
+          label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Chart',
+          url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_live_editor&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_live_editor&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_live_editor&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_live_editor&utm_medium=banner_ad&utm_campaign=whiteboard_A'
+        }
+      ]
     },
-    {
-      label: 'Use the Visual Editor in Mermaid Chart to design and build diagrams',
-      url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=visual_editor'
+    B: {
+      design: 2,
+      taglines: [
+        {
+          label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Chart',
+          url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&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_live_editor&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_live_editor&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_live_editor&utm_medium=banner_ad&utm_campaign=whiteboard_A'
+        }
+      ]
     },
-    {
-      label: 'Diagram live with teammates in Mermaid Chart',
-      url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=teams'
+    C: {
+      design: 1,
+      taglines: [
+        {
+          label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Pro',
+          url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&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_live_editor&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_live_editor&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_live_editor&utm_medium=banner_ad&utm_campaign=whiteboard_B'
+        }
+      ]
     },
-    {
-      label: 'Replace ChatGPT Pro, Mermaid.live, and LucidChart with Mermaid Pro',
-      url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=AIbundle'
+    D: {
+      design: 2,
+      taglines: [
+        {
+          label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Pro',
+          url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&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_live_editor&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_live_editor&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_live_editor&utm_medium=banner_ad&utm_campaign=whiteboard_B'
+        }
+      ]
     }
-  ];
+  };
+
+  const { design, taglines } =
+    Object.values(allTaglines)[Math.floor(Math.random() * Object.values(allTaglines).length)];
 
   let index = Math.floor(Math.random() * taglines.length);
   let currentTagline = $state(taglines[index]);
@@ -39,17 +110,22 @@
   });
 </script>
 
-<div class="grid w-full">
+<div
+  class="grid w-full {design === 1
+    ? 'bg-gradient-to-r from-[#bd34fe] to-[#ff3670]'
+    : 'bg-[#2E2183]'} ">
   {#key currentTagline}
     <a
       href={currentTagline.url}
       target="_blank"
-      class="col-start-1 row-start-1 flex items-center justify-center gap-4 no-underline"
+      class="col-start-1 row-start-1 flex items-center justify-center gap-4 p-0.5 no-underline"
       in:fade={{ delay: 750 }}
       out:fade={{ duration: 1000 }}>
       <span class="text-sm tracking-wider">{currentTagline.label}</span>
-      <button class="rounded bg-[#111113] p-1 px-2 text-sm font-semibold tracking-wide"
-        >Try now</button>
+      <button
+        class="rounded p-0.5 px-2 text-sm font-semibold tracking-wide"
+        class:bg-[#2E2183]={design === 1}
+        class:bg-[#E0095F]={design === 2}>Try now</button>
     </a>
   {/key}
 </div>