navigateToElement('contribute')}>
Contribute
diff --git a/src/pagesToDisplay/EtherpadEcosystem.tsx b/src/pagesToDisplay/EtherpadEcosystem.tsx
new file mode 100644
index 0000000..85687b4
--- /dev/null
+++ b/src/pagesToDisplay/EtherpadEcosystem.tsx
@@ -0,0 +1,133 @@
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import Link from "next/link";
+import type {IconDefinition} from "@fortawesome/fontawesome-svg-core";
+import {
+ faCubes,
+ faPlug,
+ faDesktop,
+ faTerminal,
+ faNetworkWired,
+ faDatabase,
+ faHouse,
+ faCalculator,
+ faKeyboard,
+ faRobot,
+} from "@fortawesome/free-solid-svg-icons";
+import {ETHERPAD_ORG} from "../Constants.ts";
+
+type EcosystemProject = {
+ name: string,
+ url: string,
+ icon: IconDefinition,
+ description: string,
+ // Internal routes (e.g. /plugins) use next/link for client-side
+ // navigation; everything else opens the external project in a new tab.
+ internal?: boolean,
+}
+
+// Curated, user-facing companion projects and resources from the Etherpad
+// Foundation, surfaced alongside the core editor on the homepage.
+const PROJECTS: EcosystemProject[] = [
+ {
+ name: "Plugins",
+ url: "/plugins",
+ icon: faPlug,
+ description: "Hundreds of community plugins add features, themes and integrations. Browse the directory and extend your Etherpad however you like.",
+ internal: true,
+ },
+ {
+ name: "Desktop & Mobile App",
+ url: `${ETHERPAD_ORG}/etherpad-desktop`,
+ icon: faDesktop,
+ description: "Run Etherpad as a native app on Windows, macOS, Linux, Android and iOS — collaborate without opening a browser.",
+ },
+ {
+ name: "Command-line Client",
+ url: `${ETHERPAD_ORG}/etherpad-cli`,
+ icon: faTerminal,
+ description: "Create, read and edit pads straight from your terminal. Great for scripting and automating your Etherpad instance.",
+ },
+ {
+ name: "pad — Terminal Editor",
+ url: `${ETHERPAD_ORG}/pad`,
+ icon: faKeyboard,
+ description: "A nano-class terminal text editor. Edit files locally, or join any pad to collaborate in real time — your edits and everyone else's sync live, right in your terminal.",
+ },
+ {
+ name: "Printing Press",
+ url: "https://printingpress.dev",
+ icon: faRobot,
+ description: "Agent-native Etherpad tooling — a Go CLI, a Claude Code skill and an MCP server, generated from a spec so AI agents can drive Etherpad.",
+ },
+ {
+ name: "Socket.IO Proxy",
+ url: `${ETHERPAD_ORG}/etherpad-proxy`,
+ icon: faNetworkWired,
+ description: "A reference proxy for Etherpad's real-time Socket.IO traffic — a starting point for inspecting or routing pad messages.",
+ },
+ {
+ name: "Scale Calculator",
+ url: "https://scale.etherpad.org",
+ icon: faCalculator,
+ description: "Estimate the CPU, memory and number of instances your deployment needs for a target number of concurrent users.",
+ },
+ {
+ name: "ueberDB",
+ url: `${ETHERPAD_ORG}/ueberDB`,
+ icon: faDatabase,
+ description: "The database abstraction layer that powers Etherpad — one API over MySQL, PostgreSQL, Redis, MongoDB, SQLite and more.",
+ },
+ {
+ name: "Home Assistant Add-on",
+ url: `${ETHERPAD_ORG}/home-assistant-addon-etherpad`,
+ icon: faHouse,
+ description: "Self-host Etherpad on your Home Assistant box in a couple of clicks — collaborative notes for your smart home.",
+ },
+]
+
+const CARD_CLASS = "group flex flex-col h-full p-5 rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 transition-shadow hover:shadow-md focus:shadow-md no-underline"
+
+const CardBody = ({project}: {project: EcosystemProject}) => <>
+
+
+
+ {project.name}
+
+
+
+ {project.description}
+
+>
+
+export const EtherpadEcosystem = () => {
+ return
+
+
+ More from Etherpad
+
+
+ Etherpad is more than the editor. The Foundation maintains a family of official
+ apps, clients and tools — plus a large plugin ecosystem — to help you extend, run,
+ embed and scale Etherpad.
+
+
+ {PROJECTS.map((project) => (
+ project.internal ? (
+
+
+
+ ) : (
+
+
+
+ )
+ ))}
+
+
+}
diff --git a/src/pagesToDisplay/Header.tsx b/src/pagesToDisplay/Header.tsx
index 9391002..ea32e9b 100644
--- a/src/pagesToDisplay/Header.tsx
+++ b/src/pagesToDisplay/Header.tsx
@@ -38,6 +38,7 @@ export const Header = () => {