Add Friends feature with routing and localization; update styles for feature cards

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 {

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>

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",

src/locales/zh.json

@@ -41,10 +41,15 @@
       "title": "讨论论坛",
       "description": "加入关于策略的讨论，分享您的经验，与其他玩家交流。"
     },
+    "friends": {
+      "title": "友情链接",
+      "description": "发现来自我们合作伙伴网站和游戏伙伴的精彩社区和资源。"
+    },
     "browseServers": "浏览服务器",
     "readBlog": "阅读博客",
     "viewGitHub": "查看 Git",
-    "joinForum": "加入论坛"
+    "joinForum": "加入论坛",
+    "viewFriends": "查看友链"
   },
   "activity": {
     "title": "最近活动",