Docs: Add Product Hunt info (#4900)

* update card and announcements page

* update integrations link and add product hunt badge

* Revert navbar link change

---------

Co-authored-by: Sidharth Vinod <sidharthv96@gmail.com>

docs/ecosystem/mermaid-chart.md

@@ -6,6 +6,10 @@
 
 # Mermaid Chart
 
+<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>
+
 ## About
 
 [Mermaid Chart](https://www.mermaidchart.com) was born out of the Mermaid open source project and was founded by Knut Sveidqvist together with Open Core Ventures. The lead developers from Mermaid have joined the company and there is a strong connection between the project we all love and Mermaid Chart. Mermaid Chart brings resources to the open source development of Mermaid and makes it possible to work with Mermaid professionally.

docs/news/announcements.md

@@ -6,8 +6,18 @@
 
 # Announcements
 
-## [How to Make a Git Graph with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/)
+<br />
 
-22 September 2023 · 7 mins
+<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 git graph is one of the more useful forms of diagrams for developers and DevOps professionals.
+## Calling all fans of Mermaid and Mermaid Chart! 🎉
+
+We’ve officially made our Product Hunt debut, and would love any and all support from the community!
+
+[Click here](https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart) to check out our Product Hunt launch.
+
+Feel free to drop us a comment and let us know what you think. All new sign ups will receive a 30-day free trial of our Pro subscription, plus 25% off your first year.
+
+We’re on a mission to make text-based diagramming fun again. And we need your help to make that happen.
+
+Your support means the world to us. Thank you for being part of the diagramming movement.

packages/mermaid/src/docs/ecosystem/mermaid-chart.md

@@ -4,6 +4,10 @@ outline: 'deep' # shows all h3 headings in outline in Vitepress
 
 # Mermaid Chart
 
+<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>
+
 ## About
 
 [Mermaid Chart](https://www.mermaidchart.com) was born out of the Mermaid open source project and was founded by Knut Sveidqvist together with Open Core Ventures. The lead developers from Mermaid have joined the company and there is a strong connection between the project we all love and Mermaid Chart. Mermaid Chart brings resources to the open source development of Mermaid and makes it possible to work with Mermaid professionally.

packages/mermaid/src/docs/index.md

@@ -9,6 +9,7 @@ hero:
   name: Mermaid
   text: Diagramming and charting tool
   tagline: JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
+
   image:
     src: /mermaid-logo.svg
     alt: Mermaid
@@ -30,7 +31,7 @@ features:
   - title: 🏆 Award winning!
     details: 2019 JavaScript Open Source Award winner for "The Most Exciting Use of Technology".
     link: https://osawards.com/javascript/2019
-  - title: 🥰 Mermaid + Mermaid Chart
+  - title: 🎉 We are on Product Hunt!
-    details: Mermaid Chart is a major supporter of the Mermaid project.
+    details: We would love any and all support from the Mermaid community!
-    link: https://www.mermaidchart.com/
+    link: https://www.producthunt.com/posts/mermaid-chart
 ---

packages/mermaid/src/docs/news/announcements.md

@@ -1,7 +1,17 @@
 # Announcements
 
-## [How to Make a Git Graph with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/)
+<br />
 
-22 September 2023 · 7 mins
+<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 git graph is one of the more useful forms of diagrams for developers and DevOps professionals.
+## Calling all fans of Mermaid and Mermaid Chart! 🎉
+
+We’ve officially made our Product Hunt debut, and would love any and all support from the community!
+
+[Click here](https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart) to check out our Product Hunt launch.
+
+Feel free to drop us a comment and let us know what you think. All new sign ups will receive a 30-day free trial of our Pro subscription, plus 25% off your first year.
+
+We’re on a mission to make text-based diagramming fun again. And we need your help to make that happen.
+
+Your support means the world to us. Thank you for being part of the diagramming movement.