Add Blog page with routing, layout, and mock posts; update navigation and localization

src/components/Nav.tsx

@@ -19,7 +19,7 @@ function Nav({ currentPage }: NavProps) {
         <div className="nav-links">
           <a href="/" className={currentPage === 'home' ? 'active' : ''}>{t('nav.home')}</a>
           <a href="/#servers" className={currentPage === 'servers' ? 'active' : ''}>{t('nav.servers')}</a>
-          <a href="/#blog" className={currentPage === 'blog' ? 'active' : ''}>{t('nav.blog')}</a>
+          <Link to="/blog" className={currentPage === 'blog' ? 'active' : ''}>{t('nav.blog')}</Link>
           <a href="https://git.cialloo.com" className={currentPage === 'git' ? 'active' : ''}>{t('nav.git')}</a>
           <a href="/#forum" className={currentPage === 'forum' ? 'active' : ''}>{t('nav.forum')}</a>
           <Link to="/friends" className={currentPage === 'friends' ? 'active' : ''}>{t('nav.friends')}</Link>

src/locales/en.json

@@ -73,6 +73,20 @@
     "english": "English",
     "chinese": "中文"
   },
+  "blog": {
+    "title": "Community Blog",
+    "subtitle": "Stay updated with the latest news, tutorials, and insights from the Counter-Strike community",
+    "featuredPost": "Featured Article",
+    "recentPosts": "Recent Posts",
+    "readMore": "Read More",
+    "by": "by",
+    "categories": "Categories",
+    "loadMore": "Load More Articles",
+    "subscribe": "Subscribe to Newsletter",
+    "subscribeDesc": "Get the latest articles and updates delivered to your inbox",
+    "emailPlaceholder": "Enter your email address",
+    "subscribeBtn": "Subscribe"
+  },
   "friends": {
     "title": "Friend Links",
     "subtitle": "Discover amazing communities and resources from our partner websites",

src/locales/zh.json

@@ -73,6 +73,20 @@
     "english": "English",
     "chinese": "中文"
   },
+  "blog": {
+    "title": "社区博客",
+    "subtitle": "及时了解反恐精英社区的最新新闻、教程和见解",
+    "featuredPost": "精选文章",
+    "recentPosts": "最新文章",
+    "readMore": "阅读更多",
+    "by": "作者",
+    "categories": "分类",
+    "loadMore": "加载更多文章",
+    "subscribe": "订阅新闻通讯",
+    "subscribeDesc": "将最新文章和更新发送到您的收件箱",
+    "emailPlaceholder": "输入您的电子邮件地址",
+    "subscribeBtn": "订阅"
+  },
   "friends": {
     "title": "友情链接",
     "subtitle": "发现来自我们合作伙伴网站的精彩社区和资源",

src/main.tsx

@@ -6,6 +6,7 @@ import './i18n'
 import { ThemeProvider } from './contexts/ThemeContext'
 import App from './App.tsx'
 import Friends from './pages/Friends.tsx'
+import Blog from './pages/Blog.tsx'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
@@ -14,6 +15,7 @@ createRoot(document.getElementById('root')!).render(
         <Routes>
           <Route path="/" element={<App />} />
           <Route path="/friends" element={<Friends />} />
+          <Route path="/blog" element={<Blog />} />
         </Routes>
       </Router>
     </ThemeProvider>

src/pages/Blog.tsx

@@ -0,0 +1,474 @@
+import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
+import Layout from '../components/Layout'
+import '../App.css'
+
+interface BlogPost {
+  id: number
+  title: string
+  excerpt: string
+  content: string
+  author: string
+  date: string
+  readTime: string
+  category: string
+  tags: string[]
+  image?: string
+}
+
+function Blog() {
+  const { t } = useTranslation()
+
+  // Mock blog posts data
+  const blogPosts: BlogPost[] = [
+    {
+      id: 1,
+      title: "Mastering Counter-Strike: Advanced Tactics and Strategies",
+      excerpt: "Learn the advanced tactics that separate professional players from casual gamers. From positioning to communication, discover the secrets of competitive CS.",
+      content: "Full article content here...",
+      author: "ProGamer99",
+      date: "2025-10-01",
+      readTime: "8 min read",
+      category: "Strategy",
+      tags: ["Counter-Strike", "Tactics", "Professional"],
+      image: "🎯"
+    },
+    {
+      id: 2,
+      title: "The Evolution of Esports: From LAN Parties to Global Tournaments",
+      excerpt: "Explore how esports has grown from small local tournaments to billion-dollar industry with global audiences and professional athletes.",
+      content: "Full article content here...",
+      author: "EsportsAnalyst",
+      date: "2025-09-28",
+      readTime: "6 min read",
+      category: "Esports",
+      tags: ["Esports", "History", "Tournaments"],
+      image: "🏆"
+    },
+    {
+      id: 3,
+      title: "Building the Perfect Gaming Setup: Hardware Guide 2025",
+      excerpt: "A comprehensive guide to building the ultimate gaming setup for Counter-Strike and other competitive games. From monitors to peripherals.",
+      content: "Full article content here...",
+      author: "TechReviewer",
+      date: "2025-09-25",
+      readTime: "12 min read",
+      category: "Hardware",
+      tags: ["Gaming Setup", "Hardware", "PC Building"],
+      image: "🖥️"
+    },
+    {
+      id: 4,
+      title: "Community Spotlight: Rising Stars in CS Competitive Scene",
+      excerpt: "Meet the up-and-coming players who are making waves in the Counter-Strike competitive scene. Their stories, strategies, and paths to success.",
+      content: "Full article content here...",
+      author: "CommunityManager",
+      date: "2025-09-22",
+      readTime: "10 min read",
+      category: "Community",
+      tags: ["Players", "Community", "Rising Stars"],
+      image: "⭐"
+    },
+    {
+      id: 5,
+      title: "Mental Health in Competitive Gaming: Staying Sharp",
+      excerpt: "The importance of mental health in competitive gaming. Tips and strategies for maintaining focus, managing stress, and performing at your best.",
+      content: "Full article content here...",
+      author: "SportsPsychologist",
+      date: "2025-09-20",
+      readTime: "7 min read",
+      category: "Wellness",
+      tags: ["Mental Health", "Gaming", "Performance"],
+      image: "🧠"
+    },
+    {
+      id: 6,
+      title: "Server Administration: Running Your Own CS Game Server",
+      excerpt: "A complete guide to setting up and managing your own Counter-Strike game server. From basic setup to advanced configuration and maintenance.",
+      content: "Full article content here...",
+      author: "ServerAdmin",
+      date: "2025-09-18",
+      readTime: "15 min read",
+      category: "Technical",
+      tags: ["Server", "Administration", "Technical"],
+      image: "🖧"
+    }
+  ]
+
+  const categories = [...new Set(blogPosts.map(post => post.category))]
+  const featuredPost = blogPosts[0]
+  const recentPosts = blogPosts.slice(1, 4)
+
+  return (
+    <Layout currentPage="blog">
+      {/* Blog Page Header */}
+      <section className="blog-header" style={{
+        padding: '120px 2rem 60px',
+        background: 'linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%)',
+        textAlign: 'center'
+      }}>
+        <div style={{ maxWidth: '800px', margin: '0 auto' }}>
+          <h1 style={{
+            fontSize: '3.5rem',
+            fontWeight: 'bold',
+            color: 'var(--text-primary)',
+            marginBottom: '1rem'
+          }}>
+            {t('blog.title')}
+          </h1>
+          <p style={{
+            fontSize: '1.3rem',
+            color: 'var(--text-secondary)',
+            lineHeight: '1.6'
+          }}>
+            {t('blog.subtitle')}
+          </p>
+        </div>
+      </section>
+
+      {/* Featured Post */}
+      <section className="featured-post" style={{ padding: '0 2rem 60px' }}>
+        <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
+          <h2 style={{
+            fontSize: '2rem',
+            color: 'var(--text-primary)',
+            marginBottom: '2rem',
+            textAlign: 'center'
+          }}>
+            {t('blog.featuredPost')}
+          </h2>
+          <div style={{
+            background: 'var(--bg-card)',
+            border: '1px solid var(--border-color)',
+            borderRadius: '12px',
+            overflow: 'hidden',
+            boxShadow: '0 4px 20px var(--shadow)',
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr',
+            gap: '2rem',
+            alignItems: 'center'
+          }}>
+            <div style={{ padding: '3rem' }}>
+              <div style={{
+                display: 'inline-block',
+                background: 'var(--accent-color)',
+                color: 'white',
+                padding: '0.5rem 1rem',
+                borderRadius: '20px',
+                fontSize: '0.9rem',
+                fontWeight: 'bold',
+                marginBottom: '1rem'
+              }}>
+                {featuredPost.category}
+              </div>
+              <h3 style={{
+                fontSize: '2rem',
+                color: 'var(--text-primary)',
+                marginBottom: '1rem',
+                lineHeight: '1.3'
+              }}>
+                {featuredPost.title}
+              </h3>
+              <p style={{
+                color: 'var(--text-secondary)',
+                fontSize: '1.1rem',
+                lineHeight: '1.6',
+                marginBottom: '1.5rem'
+              }}>
+                {featuredPost.excerpt}
+              </p>
+              <div style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '1rem',
+                marginBottom: '1.5rem'
+              }}>
+                <span style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
+                  {t('blog.by')} {featuredPost.author}
+                </span>
+                <span style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
+                  {featuredPost.date}
+                </span>
+                <span style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
+                  {featuredPost.readTime}
+                </span>
+              </div>
+              <Link
+                to={`/blog/${featuredPost.id}`}
+                style={{
+                  display: 'inline-block',
+                  background: 'var(--accent-color)',
+                  color: 'white',
+                  padding: '1rem 2rem',
+                  borderRadius: '8px',
+                  textDecoration: 'none',
+                  fontWeight: 'bold',
+                  fontSize: '1rem',
+                  transition: 'transform 0.3s ease'
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.transform = 'translateY(-2px)'
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.transform = 'translateY(0)'
+                }}
+              >
+                {t('blog.readMore')}
+              </Link>
+            </div>
+            <div style={{
+              background: 'var(--bg-secondary)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontSize: '8rem',
+              height: '300px'
+            }}>
+              {featuredPost.image}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Blog Content */}
+      <section className="blog-content" style={{ padding: '0 2rem 80px' }}>
+        <div style={{ maxWidth: '1200px', margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 300px', gap: '3rem' }}>
+
+          {/* Main Content */}
+          <div>
+            <h2 style={{
+              fontSize: '2rem',
+              color: 'var(--text-primary)',
+              marginBottom: '2rem'
+            }}>
+              {t('blog.recentPosts')}
+            </h2>
+
+            <div style={{ display: 'grid', gap: '2rem' }}>
+              {recentPosts.map(post => (
+                <article key={post.id} style={{
+                  background: 'var(--bg-card)',
+                  border: '1px solid var(--border-color)',
+                  borderRadius: '12px',
+                  overflow: 'hidden',
+                  transition: 'transform 0.3s ease, box-shadow 0.3s ease',
+                  cursor: 'pointer'
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.transform = 'translateY(-5px)'
+                  e.currentTarget.style.boxShadow = '0 10px 30px var(--accent-shadow)'
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.transform = 'translateY(0)'
+                  e.currentTarget.style.boxShadow = 'none'
+                }}
+                >
+                  <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: '0' }}>
+                    <div style={{
+                      background: 'var(--bg-secondary)',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      fontSize: '4rem'
+                    }}>
+                      {post.image}
+                    </div>
+                    <div style={{ padding: '2rem' }}>
+                      <div style={{
+                        display: 'inline-block',
+                        background: 'var(--accent-color)',
+                        color: 'white',
+                        padding: '0.3rem 0.8rem',
+                        borderRadius: '15px',
+                        fontSize: '0.8rem',
+                        fontWeight: 'bold',
+                        marginBottom: '1rem'
+                      }}>
+                        {post.category}
+                      </div>
+                      <h3 style={{
+                        fontSize: '1.5rem',
+                        color: 'var(--text-primary)',
+                        marginBottom: '1rem',
+                        lineHeight: '1.3'
+                      }}>
+                        {post.title}
+                      </h3>
+                      <p style={{
+                        color: 'var(--text-secondary)',
+                        fontSize: '1rem',
+                        lineHeight: '1.6',
+                        marginBottom: '1rem'
+                      }}>
+                        {post.excerpt}
+                      </p>
+                      <div style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '1rem',
+                        marginBottom: '1rem'
+                      }}>
+                        <span style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
+                          {t('blog.by')} {post.author}
+                        </span>
+                        <span style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
+                          {post.date}
+                        </span>
+                        <span style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
+                          {post.readTime}
+                        </span>
+                      </div>
+                      <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
+                        {post.tags.map(tag => (
+                          <span key={tag} style={{
+                            background: 'var(--bg-secondary)',
+                            color: 'var(--text-secondary)',
+                            padding: '0.2rem 0.6rem',
+                            borderRadius: '12px',
+                            fontSize: '0.8rem'
+                          }}>
+                            #{tag}
+                          </span>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </article>
+              ))}
+            </div>
+
+            {/* Load More Button */}
+            <div style={{ textAlign: 'center', marginTop: '3rem' }}>
+              <button style={{
+                background: 'var(--accent-color)',
+                color: 'white',
+                border: 'none',
+                padding: '1rem 2rem',
+                borderRadius: '8px',
+                fontSize: '1rem',
+                fontWeight: 'bold',
+                cursor: 'pointer',
+                transition: 'transform 0.3s ease'
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.transform = 'translateY(-2px)'
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.transform = 'translateY(0)'
+              }}
+              >
+                {t('blog.loadMore')}
+              </button>
+            </div>
+          </div>
+
+          {/* Sidebar */}
+          <aside>
+            {/* Categories */}
+            <div style={{
+              background: 'var(--bg-card)',
+              border: '1px solid var(--border-color)',
+              borderRadius: '12px',
+              padding: '2rem',
+              marginBottom: '2rem'
+            }}>
+              <h3 style={{
+                color: 'var(--text-primary)',
+                marginBottom: '1rem',
+                fontSize: '1.3rem'
+              }}>
+                {t('blog.categories')}
+              </h3>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+                {categories.map(category => (
+                  <button key={category} style={{
+                    background: 'var(--bg-secondary)',
+                    color: 'var(--text-primary)',
+                    border: 'none',
+                    padding: '0.75rem 1rem',
+                    borderRadius: '8px',
+                    cursor: 'pointer',
+                    textAlign: 'left',
+                    transition: 'background 0.3s ease'
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.background = 'var(--accent-color)'
+                    e.currentTarget.style.color = 'white'
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.background = 'var(--bg-secondary)'
+                    e.currentTarget.style.color = 'var(--text-primary)'
+                  }}
+                  >
+                    {category}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Newsletter Signup */}
+            <div style={{
+              background: 'var(--bg-card)',
+              border: '1px solid var(--border-color)',
+              borderRadius: '12px',
+              padding: '2rem',
+              textAlign: 'center'
+            }}>
+              <h3 style={{
+                color: 'var(--text-primary)',
+                marginBottom: '1rem',
+                fontSize: '1.3rem'
+              }}>
+                {t('blog.subscribe')}
+              </h3>
+              <p style={{
+                color: 'var(--text-secondary)',
+                marginBottom: '1.5rem',
+                fontSize: '0.9rem'
+              }}>
+                {t('blog.subscribeDesc')}
+              </p>
+              <input
+                type="email"
+                placeholder={t('blog.emailPlaceholder')}
+                style={{
+                  width: '100%',
+                  padding: '0.75rem',
+                  border: '1px solid var(--border-color)',
+                  borderRadius: '6px',
+                  background: 'var(--bg-secondary)',
+                  color: 'var(--text-primary)',
+                  marginBottom: '1rem',
+                  fontSize: '0.9rem'
+                }}
+              />
+              <button style={{
+                width: '100%',
+                background: 'var(--accent-color)',
+                color: 'white',
+                border: 'none',
+                padding: '0.75rem',
+                borderRadius: '6px',
+                fontSize: '0.9rem',
+                fontWeight: 'bold',
+                cursor: 'pointer',
+                transition: 'transform 0.3s ease'
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.transform = 'translateY(-2px)'
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.transform = 'translateY(0)'
+              }}
+              >
+                {t('blog.subscribeBtn')}
+              </button>
+            </div>
+          </aside>
+        </div>
+      </section>
+    </Layout>
+  )
+}
+
+export default Blog