diff --git a/.cspell/libraries.txt b/.cspell/libraries.txt
index c185429b0..3bfec1d5f 100644
--- a/.cspell/libraries.txt
+++ b/.cspell/libraries.txt
@@ -58,6 +58,7 @@ rehype
 roughjs
 rscratch
 shiki
+Slidev
 sparkline
 sphinxcontrib
 ssim
diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md
index 25be52fd6..949e53277 100644
--- a/docs/ecosystem/integrations-community.md
+++ b/docs/ecosystem/integrations-community.md
@@ -59,6 +59,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
 - [MonsterWriter](https://www.monsterwriter.com/) ✅
 - [Joplin](https://joplinapp.org) ✅
 - [LiveBook](https://livebook.dev) ✅
+- [Slidev](https://sli.dev) ✅
 - [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅
 - [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅
 - [Mermerd](https://github.com/KarnerTh/mermerd)
diff --git a/docs/ecosystem/mermaid-chart.md b/docs/ecosystem/mermaid-chart.md
index f1ca85af0..9b3440a0a 100644
--- a/docs/ecosystem/mermaid-chart.md
+++ b/docs/ecosystem/mermaid-chart.md
@@ -12,7 +12,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
 
 <br />
 
-<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+<a href="https://www.producthunt.com/products/mermaid-chart?utm_source=badge-follow&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/follow.svg?product_id=552855&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
 
 ## About
 
diff --git a/docs/news/blog.md b/docs/news/blog.md
index 65fa9246e..4c7c982c3 100644
--- a/docs/news/blog.md
+++ b/docs/news/blog.md
@@ -6,6 +6,30 @@
 
 # Blog
 
+## [Mermaid AI Is Here to Change the Game For Diagram Creation](https://www.mermaidchart.com/blog/posts/mermaid-ai-is-here-to-change-the-game-for-diagram-creation/)
+
+22 July 2024 · 5 mins
+
+The Mermaid AI chat interface
+
+## [How to Make a Sequence Diagram with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-sequence-diagram-in-mermaid-chart-step-by-step-guide/)
+
+8 July 2024 · 6 mins
+
+Sequence diagrams are important for communicating complex systems in a clear and concise manner.
+
+## [How to Use the New “Comments” Feature in Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-use-the-new-comments-feature-in-mermaid-chart/)
+
+2 July 2024 · 3 mins
+
+How to Use the New Comments Feature in Mermaid Chart
+
+## [How to Use the official Mermaid Chart for Confluence app](https://www.mermaidchart.com/blog/posts/how-to-use-the-official-mermaid-chart-for-confluence-app/)
+
+21 May 2024 · 4 mins
+
+It doesn’t matter if you’re a data enthusiast, software engineer, or visual storyteller; our Confluence app can allow you to embed Mermaid Chart diagrams — and dynamically edit them — within your Confluence pages.
+
 ## [How to Choose the Right Documentation Software](https://www.mermaidchart.com/blog/posts/how-to-choose-the-right-documentation-software/)
 
 7 May 2024 · 5 mins
diff --git a/packages/mermaid/src/docs/.vitepress/components/ProductHuntBadge.vue b/packages/mermaid/src/docs/.vitepress/components/ProductHuntBadge.vue
new file mode 100644
index 000000000..17f0767d7
--- /dev/null
+++ b/packages/mermaid/src/docs/.vitepress/components/ProductHuntBadge.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="-mt-6 mb-8">
+    <a
+      href="https://www.producthunt.com/posts/mermaid-ai-2?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;ai&#0045;2"
+      target="_blank"
+      ><img
+        src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=465568&theme=light"
+        alt="Mermaid&#0032;AI - Maximize&#0032;your&#0032;diagramming&#0032;efficiency&#0032;with&#0032;Mermaid&#0032;AI | Product Hunt"
+        style="width: 250px; height: 54px"
+        width="250"
+        height="54"
+    /></a>
+  </div>
+</template>
diff --git a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
index 130d6babc..5aa515575 100644
--- a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
@@ -1,26 +1,65 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+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/play?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/play?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/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=mermaid_ai',
+  },
+];
+
+let index = ref(Math.floor(Math.random() * taglines.length));
+onMounted(() => {
+  setInterval(() => {
+    index.value = (index.value + 1) % taglines.length;
+  }, 60_000);
+});
+</script>
+
 <template>
-  <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"
-  >
-    <p class="flex-grow text-center tracking-wide text-text">
-      <a
-        href="https://www.mermaidchart.com/landing"
-        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>
-        <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 text-white tracking-wide plausible-event-name=bannerClick"
         >
-          Try it now
-        </button>
-      </a>
+          <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>
+      </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>
diff --git a/packages/mermaid/src/docs/.vitepress/theme/index.ts b/packages/mermaid/src/docs/.vitepress/theme/index.ts
index 3ce3aea23..3ec200937 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/index.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/index.ts
@@ -11,11 +11,11 @@ import HomePage from '../components/HomePage.vue';
 import TopBar from '../components/TopBar.vue';
 import { getRedirect } from './redirect.js';
 // @ts-ignore Type not available
-import { h } from 'vue';
-import Theme from 'vitepress/theme';
-import '../style/main.css';
 import 'uno.css';
 import type { EnhanceAppContext } from 'vitepress';
+import Theme from 'vitepress/theme';
+import { h } from 'vue';
+import '../style/main.css';
 
 export default {
   ...DefaultTheme,
@@ -24,6 +24,7 @@ export default {
       // 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-features-after': () => h(HomePage),
+      'doc-before': () => h(TopBar),
     });
   },
   enhanceApp({ app, router }: EnhanceAppContext) {
diff --git a/packages/mermaid/src/docs/ecosystem/integrations-community.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md
index 2d5972f20..f7bc859b1 100644
--- a/packages/mermaid/src/docs/ecosystem/integrations-community.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md
@@ -54,6 +54,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
 - [MonsterWriter](https://www.monsterwriter.com/) ✅
 - [Joplin](https://joplinapp.org) ✅
 - [LiveBook](https://livebook.dev) ✅
+- [Slidev](https://sli.dev) ✅
 - [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅
 - [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅
 - [Mermerd](https://github.com/KarnerTh/mermerd)
diff --git a/packages/mermaid/src/docs/ecosystem/mermaid-chart.md b/packages/mermaid/src/docs/ecosystem/mermaid-chart.md
index 732b9b68c..049df836e 100644
--- a/packages/mermaid/src/docs/ecosystem/mermaid-chart.md
+++ b/packages/mermaid/src/docs/ecosystem/mermaid-chart.md
@@ -6,7 +6,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
 
 <br />
 
-<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+<a href="https://www.producthunt.com/products/mermaid-chart?utm_source=badge-follow&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/follow.svg?product_id=552855&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
 
 ## About
 
diff --git a/packages/mermaid/src/docs/news/blog.md b/packages/mermaid/src/docs/news/blog.md
index 4ada1e05c..10f7672fd 100644
--- a/packages/mermaid/src/docs/news/blog.md
+++ b/packages/mermaid/src/docs/news/blog.md
@@ -1,5 +1,29 @@
 # Blog
 
+## [Mermaid AI Is Here to Change the Game For Diagram Creation](https://www.mermaidchart.com/blog/posts/mermaid-ai-is-here-to-change-the-game-for-diagram-creation/)
+
+22 July 2024 · 5 mins
+
+The Mermaid AI chat interface
+
+## [How to Make a Sequence Diagram with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-sequence-diagram-in-mermaid-chart-step-by-step-guide/)
+
+8 July 2024 · 6 mins
+
+Sequence diagrams are important for communicating complex systems in a clear and concise manner.
+
+## [How to Use the New “Comments” Feature in Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-use-the-new-comments-feature-in-mermaid-chart/)
+
+2 July 2024 · 3 mins
+
+How to Use the New Comments Feature in Mermaid Chart
+
+## [How to Use the official Mermaid Chart for Confluence app](https://www.mermaidchart.com/blog/posts/how-to-use-the-official-mermaid-chart-for-confluence-app/)
+
+21 May 2024 · 4 mins
+
+It doesn’t matter if you’re a data enthusiast, software engineer, or visual storyteller; our Confluence app can allow you to embed Mermaid Chart diagrams — and dynamically edit them — within your Confluence pages.
+
 ## [How to Choose the Right Documentation Software](https://www.mermaidchart.com/blog/posts/how-to-choose-the-right-documentation-software/)
 
 7 May 2024 · 5 mins