Refactor App component and styles for a complete redesign of the gaming community website
This commit is contained in:
217
src/App.tsx
217
src/App.tsx
@@ -1,35 +1,200 @@
|
||||
import { useState } from 'react'
|
||||
import reactLogo from './assets/react.svg'
|
||||
import viteLogo from '/vite.svg'
|
||||
import './App.css'
|
||||
|
||||
function App() {
|
||||
const [count, setCount] = useState(0)
|
||||
|
||||
// Mock data - in real app, this would come from API
|
||||
const stats = {
|
||||
onlinePlayers: 1247,
|
||||
totalServers: 89,
|
||||
totalPlayTime: '2.4M',
|
||||
activeGames: 23
|
||||
}
|
||||
|
||||
const recentChats = [
|
||||
{ user: 'ProGamer99', message: 'GG everyone! Great match!', time: '2m ago' },
|
||||
{ user: 'SniperElite', message: 'Anyone up for a quick match?', time: '5m ago' },
|
||||
{ user: 'HeadshotKing', message: 'New server just went live!', time: '8m ago' },
|
||||
{ user: 'TacticalNuke', message: 'Looking for team players', time: '12m ago' },
|
||||
{ user: 'FragMaster', message: 'Server maintenance complete', time: '15m ago' }
|
||||
]
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<a href="https://vite.dev" target="_blank">
|
||||
<img src={viteLogo} className="logo" alt="Vite logo" />
|
||||
</a>
|
||||
<a href="https://react.dev" target="_blank">
|
||||
<img src={reactLogo} className="logo react" alt="React logo" />
|
||||
</a>
|
||||
</div>
|
||||
<h1>Vite + React</h1>
|
||||
<div className="card">
|
||||
<button onClick={() => setCount((count) => count + 1)}>
|
||||
count is {count}
|
||||
</button>
|
||||
<p>
|
||||
Edit <code>src/App.tsx</code> and save to test HMR
|
||||
</p>
|
||||
</div>
|
||||
<p className="read-the-docs">
|
||||
Click on the Vite and React logos to learn more
|
||||
</p>
|
||||
</>
|
||||
<div className="app">
|
||||
{/* Navigation Header */}
|
||||
<nav className="navbar">
|
||||
<div className="nav-container">
|
||||
<div className="nav-logo">
|
||||
<h2>🎯 CS Community</h2>
|
||||
</div>
|
||||
<div className="nav-links">
|
||||
<a href="#servers">Servers</a>
|
||||
<a href="#blog">Blog</a>
|
||||
<a href="#git">Git</a>
|
||||
<a href="#forum">Forum</a>
|
||||
<button className="join-btn">Join Now</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="hero">
|
||||
<div className="hero-content">
|
||||
<h1 className="hero-title">
|
||||
Welcome to the Ultimate<br />
|
||||
<span className="highlight">Counter-Strike</span> Community
|
||||
</h1>
|
||||
<p className="hero-subtitle">
|
||||
Join thousands of players in competitive matches, casual games, and community events.
|
||||
Experience the best gaming community with dedicated servers and passionate players.
|
||||
</p>
|
||||
<div className="hero-buttons">
|
||||
<button className="btn-primary">🎮 Start Playing</button>
|
||||
<button className="btn-secondary">📊 View Stats</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hero-visual">
|
||||
<div className="game-preview">
|
||||
<div className="preview-screen">
|
||||
<div className="screen-content">
|
||||
<div className="crosshair">⊕</div>
|
||||
<div className="health-bar">100 HP</div>
|
||||
<div className="ammo-counter">30/90</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Statistics Section */}
|
||||
<section className="stats-section">
|
||||
<div className="stats-container">
|
||||
<div className="stat-card">
|
||||
<div className="stat-icon">👥</div>
|
||||
<div className="stat-number">{stats.onlinePlayers.toLocaleString()}</div>
|
||||
<div className="stat-label">Online Players</div>
|
||||
</div>
|
||||
<div className="stat-card">
|
||||
<div className="stat-icon">🖥️</div>
|
||||
<div className="stat-number">{stats.totalServers}</div>
|
||||
<div className="stat-label">Active Servers</div>
|
||||
</div>
|
||||
<div className="stat-card">
|
||||
<div className="stat-icon">⏱️</div>
|
||||
<div className="stat-number">{stats.totalPlayTime}</div>
|
||||
<div className="stat-label">Hours Played</div>
|
||||
</div>
|
||||
<div className="stat-card">
|
||||
<div className="stat-icon">🎯</div>
|
||||
<div className="stat-number">{stats.activeGames}</div>
|
||||
<div className="stat-label">Live Matches</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section className="features-section">
|
||||
<div className="features-container">
|
||||
<h2 className="section-title">Community Features</h2>
|
||||
<div className="features-grid">
|
||||
<div className="feature-card" id="servers">
|
||||
<div className="feature-icon">🖥️</div>
|
||||
<h3>Server Browser</h3>
|
||||
<p>Find and join the best Counter-Strike servers. Browse by game mode, region, and player count.</p>
|
||||
<button className="feature-btn">Browse Servers</button>
|
||||
</div>
|
||||
<div className="feature-card" id="blog">
|
||||
<div className="feature-icon">📝</div>
|
||||
<h3>Community Blog</h3>
|
||||
<p>Stay updated with the latest news, tournament results, and community announcements.</p>
|
||||
<button className="feature-btn">Read Blog</button>
|
||||
</div>
|
||||
<div className="feature-card" id="git">
|
||||
<div className="feature-icon">📦</div>
|
||||
<h3>Open Source</h3>
|
||||
<p>Contribute to our open-source projects. Custom maps, configs, and community tools.</p>
|
||||
<button className="feature-btn">View GitHub</button>
|
||||
</div>
|
||||
<div className="feature-card" id="forum">
|
||||
<div className="feature-icon">💬</div>
|
||||
<h3>Discussion Forum</h3>
|
||||
<p>Join discussions about strategies, share your experiences, and connect with fellow gamers.</p>
|
||||
<button className="feature-btn">Join Forum</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Recent Activity Section */}
|
||||
<section className="activity-section">
|
||||
<div className="activity-container">
|
||||
<div className="activity-main">
|
||||
<h2 className="section-title">Recent Activity</h2>
|
||||
<div className="chat-feed">
|
||||
{recentChats.map((chat, index) => (
|
||||
<div key={index} className="chat-message">
|
||||
<div className="chat-user">{chat.user}:</div>
|
||||
<div className="chat-text">{chat.message}</div>
|
||||
<div className="chat-time">{chat.time}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="activity-sidebar">
|
||||
<div className="sidebar-card">
|
||||
<h3>🏆 Top Players</h3>
|
||||
<div className="leaderboard">
|
||||
<div className="leader-item">1. ProGamer99 - 2,450 pts</div>
|
||||
<div className="leader-item">2. SniperElite - 2,180 pts</div>
|
||||
<div className="leader-item">3. HeadshotKing - 1,950 pts</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sidebar-card">
|
||||
<h3>🎯 Quick Stats</h3>
|
||||
<div className="quick-stats">
|
||||
<div>Avg Match Time: 12m 34s</div>
|
||||
<div>Most Popular Map: Dust2</div>
|
||||
<div>Peak Hours: 8-11 PM</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="footer">
|
||||
<div className="footer-container">
|
||||
<div className="footer-section">
|
||||
<h4>🎯 CS Community</h4>
|
||||
<p>The ultimate destination for Counter-Strike enthusiasts worldwide.</p>
|
||||
</div>
|
||||
<div className="footer-section">
|
||||
<h4>Quick Links</h4>
|
||||
<a href="#servers">Servers</a>
|
||||
<a href="#blog">Blog</a>
|
||||
<a href="#forum">Forum</a>
|
||||
<a href="#git">GitHub</a>
|
||||
</div>
|
||||
<div className="footer-section">
|
||||
<h4>Community</h4>
|
||||
<a href="#">Discord</a>
|
||||
<a href="#">Steam Group</a>
|
||||
<a href="#">Tournaments</a>
|
||||
<a href="#">Support</a>
|
||||
</div>
|
||||
<div className="footer-section">
|
||||
<h4>Legal</h4>
|
||||
<a href="#">Privacy Policy</a>
|
||||
<a href="#">Terms of Service</a>
|
||||
<a href="#">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer-bottom">
|
||||
<p>© 2025 CS Community. All rights reserved. | Made with ❤️ for gamers</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
|
||||
|
||||
Reference in New Issue
Block a user