Merge pull request #5080 from mermaid-js/holiday-promo

Holiday 2023 promo
mermaid-js · Nov 28, 2023 · e0bf7fa · e0bf7fa
2 parents 0643c71 + a1563c9
commit e0bf7fa
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 19 deletions.
diff --git a/docs/news/announcements.md b/docs/news/announcements.md
@@ -6,10 +6,15 @@
 
 # Announcements
 
-Check out our latest blog posts below. See more blog posts [here](blog.md).
+## [Mermaid Chart](https://www.mermaidchart.com/) is running a Holiday promotion 🎉
 
-## [5 Reasons You Should Be Using Mermaid Chart As Your Diagram Generator](https://www.mermaidchart.com/blog/posts/5-reasons-you-should-be-using-mermaid-chart-as-your-diagram-generator/)
+### Use <span class="text-[#FE3470]">HOLIDAYS2023</span> to get 25% off a Pro subscription
 
-14 November 2023 · 5 mins
+With a Pro subscription, you will get access to:
 
-Mermaid Chart, a user-friendly, code-based diagram generator with AI integrations, templates, collaborative tools, and plugins for developers, streamlines the process of creating and sharing diagrams, enhancing both creativity and collaboration.
+- AI functionality
+- Team collaboration and multi-user editing
+- Unlimited diagrams
+- and more!
+
+View details on how to redeem the promo code on the [Mermaid Chart website](https://www.mermaidchart.com/holiday-promo).
diff --git a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
@@ -2,13 +2,17 @@
   <div
     class="w-full top-bar bg-gradient-to-r from-[#bd34fe] to-[#ff3670] flex items-center text-center justify-center p-1 text-white"
   >
-    <a
-      href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&amp;utm_medium=badge&amp;utm_souce=badge-mermaid-chart"
-      target="_blank"
-    >
-      We've made our Product Hunt debut! &nbsp;
-      <span class="underline">Show us some love and help spread the word</span>, plus receive 25%
-      off on annual Pro subscription!</a
-    >
+    <p class="flex-grow text-center tracking-wide text-text">
+      <a
+        href="https://www.mermaidchart.com/holiday-promo"
+        target="_blank"
+        class="unstyled text-white"
+      >
+        Get AI, team collaboration, storage, and more with
+        <span class="font-bold underline"
+          >Mermaid Chart Pro. Start free trial today & get 25% off.</span
+        >
+      </a>
+    </p>
   </div>
 </template>
diff --git a/packages/mermaid/src/docs/.vitepress/theme/index.ts b/packages/mermaid/src/docs/.vitepress/theme/index.ts
@@ -6,8 +6,8 @@ import Mermaid from './Mermaid.vue';
 import Contributors from '../components/Contributors.vue';
 // @ts-ignore
 import HomePage from '../components/HomePage.vue';
-// // @ts-ignore
-// import TopBar from '../components/TopBar.vue';
+// @ts-ignore
+import TopBar from '../components/TopBar.vue';
 
 import { getRedirect } from './redirect.js';
 
@@ -22,7 +22,7 @@ export default {
   Layout() {
     return h(Theme.Layout, null, {
       // Keeping this as comment as it took a lot of time to figure out how to add a component to the top bar.
-      // 'home-hero-before': () => h(TopBar),
+      'home-hero-before': () => h(TopBar),
       'home-features-after': () => h(HomePage),
     });
   },

diff --git a/packages/mermaid/src/docs/news/announcements.md b/packages/mermaid/src/docs/news/announcements.md
@@ -1,9 +1,18 @@
+---
+outline: 'deep' # shows all h3 headings in outline in Vitepress
+---
+
 # Announcements
 
-Check out our latest blog posts below. See more blog posts [here](blog.md).
+## [Mermaid Chart](https://www.mermaidchart.com/) is running a Holiday promotion 🎉
+
+### Use <span class="text-[#FE3470]">HOLIDAYS2023</span> to get 25% off a Pro subscription
 
-## [5 Reasons You Should Be Using Mermaid Chart As Your Diagram Generator](https://www.mermaidchart.com/blog/posts/5-reasons-you-should-be-using-mermaid-chart-as-your-diagram-generator/)
+With a Pro subscription, you will get access to:
 
-14 November 2023 · 5 mins
+- AI functionality
+- Team collaboration and multi-user editing
+- Unlimited diagrams
+- and more!
 
-Mermaid Chart, a user-friendly, code-based diagram generator with AI integrations, templates, collaborative tools, and plugins for developers, streamlines the process of creating and sharing diagrams, enhancing both creativity and collaboration.
+View details on how to redeem the promo code on the [Mermaid Chart website](https://www.mermaidchart.com/holiday-promo).