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

This commit is contained in:
2025-10-04 09:09:16 +08:00
parent 0f709df621
commit 6b16ac2bf9
4 changed files with 24 additions and 6 deletions

View File

@@ -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>