From 82ad573cac81748f720b99e0642add84fa4f1aa2 Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Wed, 8 Oct 2025 11:58:52 +0200
Subject: [PATCH] Add stoat link

---
 common/src/constants.ts |  1 +
 web/pages/about.tsx     | 39 ++++++++++++++++++++++++---------------
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/common/src/constants.ts b/common/src/constants.ts
index e85805ca..f66e49e9 100644
--- a/common/src/constants.ts
+++ b/common/src/constants.ts
@@ -10,6 +10,7 @@ export const githubIssues = `${githubRepo}/issues`
 export const paypalLink = "https://www.paypal.com/paypalme/CompassConnections"
 export const patreonLink = "https://patreon.com/CompassMeet"
 export const discordLink = "https://discord.gg/8Vd7jzqjun"
+export const stoatLink = "https://stt.gg/YKQp81yA"
 export const formLink = "https://forms.gle/tKnXUMAbEreMK6FC6"
 
 export const pStyle = "mt-1 text-gray-800 dark:text-white whitespace-pre-line";
diff --git a/web/pages/about.tsx b/web/pages/about.tsx
index 66725084..5ccf8e97 100644
--- a/web/pages/about.tsx
+++ b/web/pages/about.tsx
@@ -1,7 +1,7 @@
 import {LovePage} from 'web/components/love-page'
 import {ReactNode} from "react";
 import Link from "next/link";
-import {discordLink, formLink, githubRepo} from "common/constants";
+import {discordLink, formLink, githubRepo, stoatLink} from "common/constants";
 
 
 export const AboutBlock = (props: {
@@ -94,17 +94,6 @@ export default function About() {
                     Suggest Here
                   </a>
                 </div>
-                <div className="rounded-xl shadow p-6 flex flex-col items-center">
-                  <h5 id="join-chats" className="font-bold mb-4 text-xl text-center">Join the Community</h5>
-                  <p className="mb-4 text-center">Shape the product or chat with like-minded people.</p>
-                  <a
-                    href={discordLink}
-                    className="px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-semibold text-lg shadow hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 transition"
-                    target="_blank" rel="noopener noreferrer"
-                  >
-                    Join the Discord
-                  </a>
-                </div>
                 <div className="rounded-xl shadow p-6 flex flex-col items-center">
                   <h5 id="share" className="font-bold mb-4 text-xl text-center">Develop the App</h5>
                   <p className="mb-4 text-center">The full source code and instructions are available on GitHub.</p>
@@ -115,6 +104,26 @@ export default function About() {
                     View Code
                   </a>
                 </div>
+                <div className="rounded-xl shadow p-6 flex flex-col items-center">
+                  <h5 id="join-chats" className="font-bold mb-4 text-xl text-center">Join the Community</h5>
+                  <p className="mb-4 text-center">Shape the product or chat with like-minded people.</p>
+                  <div className="flex flex-col gap-4 w-full items-center">
+                  <a
+                    href={discordLink}
+                    className="px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-semibold text-lg shadow hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 transition"
+                    target="_blank" rel="noopener noreferrer"
+                  >
+                    Join the Discord
+                  </a>
+                  <a
+                    href={stoatLink}
+                    className="px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-semibold text-lg shadow hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 transition"
+                    target="_blank" rel="noopener noreferrer"
+                  >
+                    Join on Stoat / Revolt
+                  </a>
+                  </div>
+                </div>
                 <div className="rounded-xl shadow p-6 flex flex-col items-center">
                   <h5 id="donate" className="font-bold mb-4 text-xl text-center">Donate</h5>
                   <p className="mb-4 text-center customlink"><Link href="/support">Support</Link> our not-for-profit
@@ -122,21 +131,21 @@ export default function About() {
                   <div className="flex flex-col gap-4 w-full items-center">
                     <a
                       href="https://patreon.com/CompassMeet"
-                      className="px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-semibold text-lg shadow hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 transition w-full text-center"
+                      className="px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-semibold text-lg shadow hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 transition text-center"
                       target="_blank" rel="noopener noreferrer"
                     >
                       Donate on Patreon
                     </a>
                     <a
                       href="https://www.paypal.com/paypalme/CompassConnections"
-                      className="px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-semibold text-lg shadow hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 transition w-full text-center"
+                      className="px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-semibold text-lg shadow hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 transition text-center"
                       target="_blank" rel="noopener noreferrer"
                     >
                       Donate on PayPal
                     </a>
                     <a
                       href="https://ko-fi.com/compassconnections"
-                      className="px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-semibold text-lg shadow hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 transition w-full text-center"
+                      className="px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-semibold text-lg shadow hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 transition text-center"
                       target="_blank" rel="noopener noreferrer"
                     >
                       Donate on Ko-fi