FluentRead
diff --git a/docs/en/guide/support.md b/docs/en/guide/support.md
@@ -14,3 +14,5 @@ FluentRead is an open-source project whose continued development is made possibl
 <SupportOptions en />
 
 To contribute to development, visit [GitHub](https://github.com/FluentRead/FluentRead). For help with the extension, [report an issue](https://github.com/FluentRead/FluentRead/issues).
+
+In the extension settings, “About FluentRead” uses one card for the introduction, version, website, documentation, source code, feedback, and support links. Click “Official website” or the brand icon or name in the upper-left corner to open the [FluentRead website](https://read.thinkstu.com) in a new tab. Click the WeChat support code to view the original image.
diff --git a/docs/guide/support.md b/docs/guide/support.md
@@ -14,3 +14,5 @@ FluentRead 是一个开源项目，其持续开发离不开社区的慷慨支持
 <SupportOptions />
 
 如需参与项目开发，请访问 [GitHub](https://github.com/FluentRead/FluentRead)；使用中遇到问题，可以[提交反馈](https://github.com/FluentRead/FluentRead/issues)。
+
+扩展设置的“关于流畅阅读”页面以一张卡片展示简介和版本，下方集中提供官网、文档、源码与反馈链接，以及微信赞赏码和 Ko-fi 入口。点击“官方网站”或左上角品牌图标、名称，即可在新标签页打开 [FluentRead 官网](https://read.thinkstu.com)；点击赞赏码可查看原图。
diff --git a/src/app/options/OptionsApp.vue b/src/app/options/OptionsApp.vue
@@ -1,19 +1,19 @@
 <!--
  @file src/app/options/OptionsApp.vue
  文件职责：实现扩展 Options 页的顶层布局，组织设置导航、全局搜索结果和学习中心入口，并把选中分区交给对应 feature UI。
- 主要内容：侧栏品牌图标右侧纵向展示名称与小字多语言宣传语，关于页复用品牌文案；渲染默认展开的分组侧栏、窄屏分类选择和全局搜索；普通设置连续展示，服务目录使用完整工作区，统计与网站规则按任务保留视图切换，复用 settingsNavigation 的项目解析/过滤逻辑，在 SettingsSections 与 LearningCenter 之间切换并重置内容区滚动，同步 URL hash 的深链接与前进后退导航，兼容模型用量迁入翻译统计后的旧链接。
+ 主要内容：侧栏品牌图标右侧纵向展示名称与小字多语言宣传语，品牌区域与关于页提供统一官网入口，关于页以一张整体卡片展示简短介绍与版本、并排项目链接和赞赏方式；渲染默认展开的分组侧栏、窄屏分类选择和全局搜索；普通设置连续展示，服务目录使用完整工作区，统计与网站规则按任务保留视图切换，复用 settingsNavigation 的项目解析/过滤逻辑，在 SettingsSections 与 LearningCenter 之间切换并重置内容区滚动，同步 URL hash 的深链接与前进后退导航，兼容模型用量迁入翻译统计后的旧链接。
  模块边界：组件负责页面壳、导航状态和界面皮肤根属性同步，不定义具体配置字段、不直接写 browser.storage，也不实现词汇仓库；设置表单、收藏与阅读记录业务由各 feature 组件拥有。
 -->
 <template>
   <div class="settings-app" :class="{'has-overlay-close': Boolean(props.onClose)}">
     <aside class="sidebar">
-      <div class="brand">
+      <a class="brand" :href="websiteUrl" target="_blank" rel="noopener noreferrer" :aria-label="t('options.aboutWebsite')" :title="t('options.aboutWebsite')">
         <img :src="iconUrl" alt="" />
         <div class="brand-copy">
           <strong>流畅阅读</strong>
           <p class="sidebar-tagline" data-testid="brand-tagline" data-i18n-ignore>{{ t('brand.tagline') }}</p>
         </div>
-      </div>
+      </a>
 
           <label class="search-box">
             <UiIcon name="search" :size="16" />
@@ -75,61 +75,69 @@
           <h2>{{ t('options.userscriptUnavailableTitle') }}</h2>
           <p>{{ t('options.userscriptUnavailableDescription') }}</p>
         </section>
-        <section v-else-if="activeSection === 'settings-about'" id="settings-about" class="about-page" aria-labelledby="about-title">
-          <div class="about-hero">
-            <img class="about-logo" :src="iconUrl" alt="流畅阅读图标" />
-            <div>
-              <h3 id="about-title" class="about-tagline" data-testid="about-brand-tagline" data-i18n-ignore>{{ t('brand.tagline') }}</h3>
-              <p>{{ t('options.aboutHeroDescription') }}</p>
-              <span class="about-version">FluentRead · V{{ version }}</span>
+        <section v-else-if="activeSection === 'settings-about'" id="settings-about" class="about-page" :aria-label="t('options.aboutTitle')">
+          <div class="about-grid">
+            <div class="about-overview">
+              <div class="about-hero">
+                <img class="about-logo" :src="iconUrl" alt="流畅阅读图标" />
+                <div class="about-intro">
+                  <p>{{ t('options.aboutHeroDescription') }}</p>
+                  <span class="about-version">FluentRead · V{{ version }}</span>
+                </div>
+              </div>
+              <article class="about-panel about-links-panel">
+                <h3>{{ t('options.aboutLearnMore') }}</h3>
+                <div class="about-links">
+                  <a class="about-website" :href="websiteUrl" target="_blank" rel="noopener noreferrer">
+                    <UiIcon name="globe" :size="18" />
+                    <span>{{ t('options.aboutWebsite') }}</span>
+                    <UiIcon name="external" :size="14" />
+                  </a>
+                  <a href="https://fluent.thinkstu.com/" target="_blank" rel="noopener noreferrer">
+                    <UiIcon name="book" :size="18" />
+                    <span>{{ t('options.aboutDocs') }}</span>
+                    <UiIcon name="external" :size="14" />
+                  </a>
+                  <a href="https://github.com/Bistutu/FluentRead" target="_blank" rel="noopener noreferrer">
+                    <UiIcon name="card" :size="18" />
+                    <span>{{ t('options.aboutProject') }}</span>
+                    <UiIcon name="external" :size="14" />
+                  </a>
+                  <a href="https://github.com/Bistutu/FluentRead/issues" target="_blank" rel="noopener noreferrer">
+                    <UiIcon name="info" :size="18" />
+                    <span>{{ t('options.aboutFeedback') }}</span>
+                    <UiIcon name="external" :size="14" />
+                  </a>
+                </div>
+              </article>
             </div>
-          </div>
 
-          <div class="about-grid">
             <article class="about-panel about-support-panel">
-              <span class="about-panel-kicker">{{ t('popup.donationEyebrow') }}</span>
               <h3>{{ t('popup.donationTitle') }}</h3>
-              <p>{{ t('options.aboutThanks') }}</p>
               <div class="about-support-options">
-                <section class="about-support-option about-support-wechat-option">
-                  <h4>{{ t('popup.donationWechat') }}</h4>
-                  <a
-                    class="about-support-method about-support-wechat"
-                    data-support-method="wechat"
-                    :href="approveUrl"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    :aria-label="t('popup.donationOpenCode')"
-                  >
-                    <!-- 绑定表达式让模板编译器保留 public 路径，避免再打包一份带 hash 的同图。 -->
-                    <img class="about-support-qr" :src="approveUrl" :alt="t('popup.donationCodeAlt')" width="1152" height="1152" />
-                  </a>
-                </section>
-                <section class="about-support-option about-support-kofi-option">
-                  <h4>Ko-fi</h4>
-                  <a
-                    class="about-support-method about-support-kofi-link"
-                    data-support-method="kofi"
-                    href="https://ko-fi.com/thinkstu"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <strong>{{ t('popup.donationKofi') }}</strong>
-                    <UiIcon name="external" :size="16" />
-                  </a>
-                  <span class="about-support-account">ko-fi.com/thinkstu</span>
-                </section>
-              </div>
-            </article>
-
-            <article class="about-panel about-links-panel">
-              <span class="about-panel-kicker">{{ t('options.aboutLearnMore') }}</span>
-              <h3>{{ t('options.aboutMakeBetter') }}</h3>
-              <p>{{ t('options.aboutLinksDescription') }}</p>
-              <div class="about-links">
-                <a href="https://github.com/Bistutu/FluentRead" target="_blank" rel="noreferrer">{{ t('options.aboutProject') }} <span>↗</span></a>
-                <a href="https://fluent.thinkstu.com/" target="_blank" rel="noreferrer">{{ t('options.aboutDocs') }} <span>↗</span></a>
-                <a href="https://github.com/Bistutu/FluentRead/issues" target="_blank" rel="noreferrer">{{ t('options.aboutFeedback') }} <span>↗</span></a>
+                <a
+                  class="about-support-method about-support-wechat"
+                  data-support-method="wechat"
+                  :href="approveUrl"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  :aria-label="t('popup.donationOpenCode')"
+                  :title="t('popup.donationOpenCode')"
+                >
+                  <!-- 绑定表达式让模板编译器保留 public 路径，避免再打包一份带 hash 的同图。 -->
+                  <img class="about-support-qr" :src="approveUrl" :alt="t('popup.donationCodeAlt')" width="1152" height="1152" />
+                  <span>{{ t('popup.donationWechat') }}</span>
+                </a>
+                <a
+                  class="about-support-method about-support-kofi-link"
+                  data-support-method="kofi"
+                  href="https://ko-fi.com/thinkstu"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <span>{{ t('popup.donationKofi') }}</span>
+                  <UiIcon name="external" :size="14" />
+                </a>
               </div>
             </article>
           </div>
@@ -181,6 +189,7 @@ const props = defineProps<{
   onClose?: () => void
 }>()
 const version = process.env.VUE_APP_VERSION
+const websiteUrl = 'https://read.thinkstu.com'
 const iconUrl = globalThis.__FLUENTREAD_ICON_DATA__ || '/icon/128.png'
 const approveUrl = globalThis.__FLUENTREAD_APPROVE_DATA__ || '/misc/approve.jpg'
 const {t, translateLegacy} = useUiI18n()

diff --git a/src/core/i18n/messages/en-US.ts b/src/core/i18n/messages/en-US.ts
@@ -1129,16 +1129,17 @@ export const enUSMessages = {
     'options.searchOpen': 'Open →',
     'options.navLabel': 'Settings categories',
     'options.aboutTitle': 'About FluentRead',
-    'options.aboutHeroDescription': 'FluentRead is an open-source browser translation extension that helps you understand content in other languages more naturally.',
+    'options.aboutHeroDescription': 'An open-source browser extension for bilingual reading.',
     'options.aboutCoreExperience': 'Core experience',
     'options.aboutBornForReading': 'Built for reading',
     'options.aboutCoreDescription': 'From page translation to selection tools, hover translation, and shortcuts, common actions stay close to where you need them.',
     'options.aboutWebReading': 'Bilingual web reading',
     'options.aboutReadingTools': 'Handy reading tools',
     'options.aboutFlexibleServices': 'Flexible translation services',
-    'options.aboutLearnMore': 'Learn more',
+    'options.aboutLearnMore': 'Project links',
     'options.aboutMakeBetter': 'Help make it better',
     'options.aboutLinksDescription': 'Browse the source code and documentation, or share feedback about your reading experience.',
+    'options.aboutWebsite': 'Official website',
     'options.aboutProject': 'Open-source project',
     'options.aboutDocs': 'Documentation',
     'options.aboutFeedback': 'Report an issue',

diff --git a/src/core/i18n/messages/es-ES.ts b/src/core/i18n/messages/es-ES.ts
@@ -913,16 +913,17 @@ export const esESMessages = {
     'options.searchOpen': 'Abrir →',
     'options.navLabel': 'Categorías de ajustes',
     'options.aboutTitle': 'Acerca de FluentRead',
-    'options.aboutHeroDescription': 'FluentRead es una extensión de traducción para navegadores, de código abierto, que te ayuda a entender contenidos en otros idiomas de forma más natural.',
+    'options.aboutHeroDescription': 'Una extensión de navegador de código abierto para lectura bilingüe.',
     'options.aboutCoreExperience': 'Experiencia principal',
     'options.aboutBornForReading': 'Diseñado para leer',
     'options.aboutCoreDescription': 'Desde la traducción de páginas hasta la selección de texto, la traducción al pasar el ratón y los atajos, las acciones habituales están siempre a mano.',
     'options.aboutWebReading': 'Lectura web bilingüe',
     'options.aboutReadingTools': 'Herramientas de lectura prácticas',
     'options.aboutFlexibleServices': 'Servicios de traducción flexibles',
-    'options.aboutLearnMore': 'Más información',
+    'options.aboutLearnMore': 'Enlaces del proyecto',
     'options.aboutMakeBetter': 'Ayúdanos a mejorarlo',
     'options.aboutLinksDescription': 'Consulta el código fuente y la documentación, o comparte tus comentarios sobre tu experiencia de lectura.',
+    'options.aboutWebsite': 'Sitio web oficial',
     'options.aboutProject': 'Proyecto de código abierto',
     'options.aboutDocs': 'Documentación',
     'options.aboutFeedback': 'Informar de un problema',

diff --git a/src/core/i18n/messages/fr-FR.ts b/src/core/i18n/messages/fr-FR.ts
@@ -913,16 +913,17 @@ export const frFRMessages = {
     'options.searchOpen': 'Ouvrir →',
     'options.navLabel': 'Catégories de réglages',
     'options.aboutTitle': 'À propos de FluentRead',
-    'options.aboutHeroDescription': 'FluentRead est une extension de traduction open source qui vous aide à comprendre plus naturellement les contenus dans d’autres langues.',
+    'options.aboutHeroDescription': 'Une extension de navigateur open source pour la lecture bilingue.',
     'options.aboutCoreExperience': 'Expérience principale',
     'options.aboutBornForReading': 'Pensé pour la lecture',
     'options.aboutCoreDescription': 'Traduction de pages, sélection, survol et raccourcis : les actions courantes restent à portée de main.',
     'options.aboutWebReading': 'Lecture web bilingue',
     'options.aboutReadingTools': 'Outils de lecture pratiques',
     'options.aboutFlexibleServices': 'Services de traduction flexibles',
-    'options.aboutLearnMore': 'En savoir plus',
+    'options.aboutLearnMore': 'Liens du projet',
     'options.aboutMakeBetter': 'Nous aider à l’améliorer',
     'options.aboutLinksDescription': 'Consultez le code source et la documentation, ou partagez vos retours sur votre expérience de lecture.',
+    'options.aboutWebsite': 'Site officiel',
     'options.aboutProject': 'Projet open source',
     'options.aboutDocs': 'Documentation',
     'options.aboutFeedback': 'Signaler un problème',

diff --git a/src/core/i18n/messages/ja-JP.ts b/src/core/i18n/messages/ja-JP.ts
@@ -913,16 +913,17 @@ export const jaJPMessages = {
     'options.searchOpen': '開く →',
     'options.navLabel': '設定カテゴリ',
     'options.aboutTitle': 'FluentRead について',
-    'options.aboutHeroDescription': 'FluentRead は、他の言語のコンテンツを自然に理解するためのオープンソースブラウザー翻訳拡張機能です。',
+    'options.aboutHeroDescription': '対訳で読めるオープンソースのブラウザー拡張機能。',
     'options.aboutCoreExperience': '主な体験',
     'options.aboutBornForReading': '読書のために設計',
     'options.aboutCoreDescription': 'ページ翻訳、選択翻訳、ホバー翻訳、ショートカットなど、よく使う操作を必要な場所にまとめています。',
     'options.aboutWebReading': '二言語ウェブ読書',
     'options.aboutReadingTools': '便利な読書ツール',
     'options.aboutFlexibleServices': '柔軟な翻訳サービス',
-    'options.aboutLearnMore': '詳しく見る',
+    'options.aboutLearnMore': '関連リンク',
     'options.aboutMakeBetter': '改善に協力する',
     'options.aboutLinksDescription': 'ソースコードとドキュメントを確認したり、読書体験についてフィードバックを送ったりできます。',
+    'options.aboutWebsite': '公式サイト',
     'options.aboutProject': 'オープンソースプロジェクト',
     'options.aboutDocs': 'ドキュメント',
     'options.aboutFeedback': '問題を報告',

diff --git a/src/core/i18n/messages/ko-KR.ts b/src/core/i18n/messages/ko-KR.ts
@@ -913,16 +913,17 @@ export const koKRMessages = {
     'options.searchOpen': '열기 →',
     'options.navLabel': '설정 카테고리',
     'options.aboutTitle': 'FluentRead 정보',
-    'options.aboutHeroDescription': 'FluentRead는 다른 언어의 콘텐츠를 더 자연스럽게 이해하도록 돕는 오픈 소스 브라우저 번역 확장 프로그램입니다.',
+    'options.aboutHeroDescription': '이중 언어 읽기를 위한 오픈 소스 브라우저 확장 프로그램.',
     'options.aboutCoreExperience': '핵심 경험',
     'options.aboutBornForReading': '읽기를 위해 만들어졌습니다',
     'options.aboutCoreDescription': '페이지 번역, 선택 번역, 마우스 오버 번역, 단축키 등 자주 쓰는 작업을 필요한 곳 가까이에 둡니다.',
     'options.aboutWebReading': '이중 언어 웹 읽기',
     'options.aboutReadingTools': '편리한 읽기 도구',
     'options.aboutFlexibleServices': '유연한 번역 서비스',
-    'options.aboutLearnMore': '자세히 보기',
+    'options.aboutLearnMore': '프로젝트 링크',
     'options.aboutMakeBetter': '더 나은 서비스 만들기',
     'options.aboutLinksDescription': '소스 코드와 문서를 확인하거나 읽기 경험에 대한 의견을 남겨 주세요.',
+    'options.aboutWebsite': '공식 웹사이트',
     'options.aboutProject': '오픈 소스 프로젝트',
     'options.aboutDocs': '문서',
     'options.aboutFeedback': '문제 신고',

diff --git a/src/core/i18n/messages/ru-RU.ts b/src/core/i18n/messages/ru-RU.ts
@@ -913,16 +913,17 @@ export const ruRUMessages = {
     'options.searchOpen': 'Открыть →',
     'options.navLabel': 'Категории настроек',
     'options.aboutTitle': 'О FluentRead',
-    'options.aboutHeroDescription': 'FluentRead — браузерное расширение с открытым исходным кодом, которое помогает естественнее понимать контент на других языках.',
+    'options.aboutHeroDescription': 'Расширение с открытым исходным кодом для двуязычного чтения.',
     'options.aboutCoreExperience': 'Основные возможности',
     'options.aboutBornForReading': 'Создано для чтения',
     'options.aboutCoreDescription': 'Перевод страниц, выделений, наведением и сочетаниями клавиш — нужные действия всегда рядом.',
     'options.aboutWebReading': 'Двуязычное чтение веб-страниц',
     'options.aboutReadingTools': 'Удобные инструменты чтения',
     'options.aboutFlexibleServices': 'Гибкие сервисы перевода',
-    'options.aboutLearnMore': 'Подробнее',
+    'options.aboutLearnMore': 'Ссылки проекта',
     'options.aboutMakeBetter': 'Помочь улучшить проект',
     'options.aboutLinksDescription': 'Просмотрите исходный код и документацию или поделитесь впечатлениями о чтении.',
+    'options.aboutWebsite': 'Официальный сайт',
     'options.aboutProject': 'Проект с открытым исходным кодом',
     'options.aboutDocs': 'Документация',
     'options.aboutFeedback': 'Сообщить о проблеме',
Original file line number	Diff line number	Diff line change
Expand Up		@@ -14,3 +14,5 @@ FluentRead is an open-source project whose continued development is made possibl
		<SupportOptions en />

		To contribute to development, visit [GitHub](https://github.com/FluentRead/FluentRead). For help with the extension, [report an issue](https://github.com/FluentRead/FluentRead/issues).

		In the extension settings, “About FluentRead” uses one card for the introduction, version, website, documentation, source code, feedback, and support links. Click “Official website” or the brand icon or name in the upper-left corner to open the [FluentRead website](https://read.thinkstu.com) in a new tab. Click the WeChat support code to view the original image.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -14,3 +14,5 @@ FluentRead 是一个开源项目，其持续开发离不开社区的慷慨支持
		<SupportOptions />

		如需参与项目开发，请访问 [GitHub](https://github.com/FluentRead/FluentRead)；使用中遇到问题，可以[提交反馈](https://github.com/FluentRead/FluentRead/issues)。

		扩展设置的“关于流畅阅读”页面以一张卡片展示简介和版本，下方集中提供官网、文档、源码与反馈链接，以及微信赞赏码和 Ko-fi 入口。点击“官方网站”或左上角品牌图标、名称，即可在新标签页打开 [FluentRead 官网](https://read.thinkstu.com)；点击赞赏码可查看原图。