From c537002c9a7dd82b3a7bad4a46a75869772e8373 Mon Sep 17 00:00:00 2001
From: itxaiohanglover <1531137510@qq.com>
Date: Mon, 6 Jul 2026 12:32:10 +0800
Subject: [PATCH] feat: add Charter section to About page (#193)

Add a Charter section to the About page, displayed before the Board
members section. Links to the OSS Compass community charter on GitHub
(https://github.com/oss-compass/community-zh/tree/main/governance).
Includes both English and Chinese text since the charter is currently
only available in Chinese.

Signed-off-by: itxaiohanglover <1531137510@qq.com>
---
 apps/web/src/modules/about/05Charter.tsx | 24 ++++++++++++++++++++++++
 apps/web/src/modules/about/index.tsx     |  2 ++
 2 files changed, 26 insertions(+)
 create mode 100644 apps/web/src/modules/about/05Charter.tsx

diff --git a/apps/web/src/modules/about/05Charter.tsx b/apps/web/src/modules/about/05Charter.tsx
new file mode 100644
index 000000000..40572bacc
--- /dev/null
+++ b/apps/web/src/modules/about/05Charter.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import LinkLegacy from '@common/components/LinkLegacy';
+import { Paragraph, DocTitle } from './components';
+
+const Charter = () => {
+  return (
+    <div className="mb-24">
+      <DocTitle>Charter / 章程</DocTitle>
+      <Paragraph>
+        The OSS Compass community charter is available
+        <LinkLegacy href="https://github.com/oss-compass/community-zh/tree/main/governance">
+          here
+        </LinkLegacy>
+        . / OSS Compass 社区章程请
+        <LinkLegacy href="https://github.com/oss-compass/community-zh/tree/main/governance">
+          点击查看
+        </LinkLegacy>
+        。
+      </Paragraph>
+    </div>
+  );
+};
+
+export default Charter;
diff --git a/apps/web/src/modules/about/index.tsx b/apps/web/src/modules/about/index.tsx
index 5c999b74e..1bd308827 100644
--- a/apps/web/src/modules/about/index.tsx
+++ b/apps/web/src/modules/about/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import Banner from './Banner';
 import Introduce from './Introduce';
+import Charter from './05Charter';
 import Board from './10Board';
 import Members from './20Members';
 import TechnicalCommittee from './30TechnicalCommittee';
@@ -17,6 +18,7 @@ const About = () => {
       <div className="py-20">
         <div className="mx-auto  w-[1000px] md:w-full md:px-4">
           <Introduce />
+          <Charter />
           <Board />
           <Members />
           <TechnicalCommittee />