From 6b16ac2bf9fd9b87c4e7b8a5fcd426982f380823 Mon Sep 17 00:00:00 2001
From: cialloo <admin@cialloo.com>
Date: Sat, 4 Oct 2025 09:09:16 +0800
Subject: [PATCH] Add Friends feature with routing and localization; update
 styles for feature cards

---
 src/App.css         |  1 +
 src/App.tsx         | 15 +++++++++++----
 src/locales/en.json |  7 ++++++-
 src/locales/zh.json |  7 ++++++-
 4 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/App.css b/src/App.css
index da5fd18..b5dab76 100644
--- a/src/App.css
+++ b/src/App.css
@@ -257,6 +257,7 @@
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 2rem;
+  justify-items: center;
 }
 
 .feature-card {
diff --git a/src/App.tsx b/src/App.tsx
index bcb1544..8006cd7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
 import Layout from './components/Layout'
 import './App.css'
 
@@ -86,25 +87,31 @@ function App() {
               <div className="feature-icon">🖥️</div>
               <h3>{t('features.serverBrowser.title')}</h3>
               <p>{t('features.serverBrowser.description')}</p>
-              <button className="feature-btn">{t('features.browseServers')}</button>
+              <Link to="/servers" className="feature-btn" style={{display: 'inline-block', textDecoration: 'none'}}>{t('features.browseServers')}</Link>
             </div>
             <div className="feature-card" id="blog">
               <div className="feature-icon">📝</div>
               <h3>{t('features.blog.title')}</h3>
               <p>{t('features.blog.description')}</p>
-              <button className="feature-btn">{t('features.readBlog')}</button>
+              <Link to="/blog" className="feature-btn" style={{display: 'inline-block', textDecoration: 'none'}}>{t('features.readBlog')}</Link>
             </div>
             <div className="feature-card" id="git">
               <div className="feature-icon">📦</div>
               <h3>{t('features.git.title')}</h3>
               <p>{t('features.git.description')}</p>
-              <a href="https://git.cialloo.com" className="feature-btn" style={{display: 'inline-block', textDecoration: 'none'}}>{t('features.viewGitHub')}</a>
+              <a href="https://git.cialloo.com" target="_blank" rel="noopener noreferrer" className="feature-btn" style={{display: 'inline-block', textDecoration: 'none'}}>{t('features.viewGitHub')}</a>
             </div>
             <div className="feature-card" id="forum">
               <div className="feature-icon">💬</div>
               <h3>{t('features.forum.title')}</h3>
               <p>{t('features.forum.description')}</p>
-              <button className="feature-btn">{t('features.joinForum')}</button>
+              <Link to="/forum" className="feature-btn" style={{display: 'inline-block', textDecoration: 'none'}}>{t('features.joinForum')}</Link>
+            </div>
+            <div className="feature-card" id="friends">
+              <div className="feature-icon">🔗</div>
+              <h3>{t('features.friends.title')}</h3>
+              <p>{t('features.friends.description')}</p>
+              <Link to="/friends" className="feature-btn" style={{display: 'inline-block', textDecoration: 'none'}}>{t('features.viewFriends')}</Link>
             </div>
           </div>
         </div>
diff --git a/src/locales/en.json b/src/locales/en.json
index dcd5bbd..ea05a9e 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -41,10 +41,15 @@
       "title": "Discussion Forum",
       "description": "Join discussions about strategies, share your experiences, and connect with fellow gamers."
     },
+    "friends": {
+      "title": "Friend Links",
+      "description": "Discover amazing communities and resources from our partner websites and fellow gamers."
+    },
     "browseServers": "Browse Servers",
     "readBlog": "Read Blog",
     "viewGitHub": "View Git",
-    "joinForum": "Join Forum"
+    "joinForum": "Join Forum",
+    "viewFriends": "View Friends"
   },
   "activity": {
     "title": "Recent Activity",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index b74217d..4fce58c 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -41,10 +41,15 @@
       "title": "讨论论坛",
       "description": "加入关于策略的讨论，分享您的经验，与其他玩家交流。"
     },
+    "friends": {
+      "title": "友情链接",
+      "description": "发现来自我们合作伙伴网站和游戏伙伴的精彩社区和资源。"
+    },
     "browseServers": "浏览服务器",
     "readBlog": "阅读博客",
     "viewGitHub": "查看 Git",
-    "joinForum": "加入论坛"
+    "joinForum": "加入论坛",
+    "viewFriends": "查看友链"
   },
   "activity": {
     "title": "最近活动",