Add Friends page with layout and navigation; update localization for new content
This commit is contained in:
252
src/pages/Friends.tsx
Normal file
252
src/pages/Friends.tsx
Normal file
@@ -0,0 +1,252 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Layout from '../components/Layout'
|
||||
import '../App.css'
|
||||
|
||||
interface FriendLink {
|
||||
id: number
|
||||
name: string
|
||||
description: string
|
||||
url: string
|
||||
avatar?: string
|
||||
category: string
|
||||
}
|
||||
|
||||
function Friends() {
|
||||
const { t } = useTranslation()
|
||||
|
||||
// Mock friend links data
|
||||
const friendLinks: FriendLink[] = [
|
||||
{
|
||||
id: 1,
|
||||
name: "GameDev Hub",
|
||||
description: "A community for game developers sharing tutorials and resources",
|
||||
url: "https://gamedevhub.example.com",
|
||||
category: "Development"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Counter-Strike Pro",
|
||||
description: "Professional Counter-Strike training and analysis platform",
|
||||
url: "https://cspro.example.com",
|
||||
category: "Gaming"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Tech Blog Central",
|
||||
description: "Latest technology news and programming tutorials",
|
||||
url: "https://techblog.example.com",
|
||||
category: "Technology"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Esports Arena",
|
||||
description: "Comprehensive esports coverage and tournament information",
|
||||
url: "https://esportsarena.example.com",
|
||||
category: "Esports"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "Open Source Gaming",
|
||||
description: "Open source gaming projects and community contributions",
|
||||
url: "https://opensourcegaming.example.com",
|
||||
category: "Open Source"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "Gaming News Daily",
|
||||
description: "Daily gaming news, reviews, and industry updates",
|
||||
url: "https://gamingnews.example.com",
|
||||
category: "News"
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "React Game Dev",
|
||||
description: "Building games with React and modern web technologies",
|
||||
url: "https://reactgamedev.example.com",
|
||||
category: "Development"
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: "Competitive Gaming",
|
||||
description: "Tips, strategies, and guides for competitive gaming",
|
||||
url: "https://competitivegaming.example.com",
|
||||
category: "Gaming"
|
||||
}
|
||||
]
|
||||
|
||||
const categories = [...new Set(friendLinks.map(link => link.category))]
|
||||
|
||||
return (
|
||||
<Layout currentPage="friends">
|
||||
{/* Friends Page Content */}
|
||||
<section className="friends-section" style={{ padding: '120px 2rem 80px', maxWidth: '1200px', margin: '0 auto' }}>
|
||||
<div className="friends-header" style={{ textAlign: 'center', marginBottom: '3rem' }}>
|
||||
<h1 className="section-title" style={{ fontSize: '3rem', marginBottom: '1rem' }}>
|
||||
{t('friends.title')}
|
||||
</h1>
|
||||
<p style={{ fontSize: '1.2rem', color: 'var(--text-secondary)', maxWidth: '600px', margin: '0 auto' }}>
|
||||
{t('friends.subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Category Filter */}
|
||||
<div className="friends-categories" style={{ display: 'flex', justifyContent: 'center', gap: '1rem', marginBottom: '3rem', flexWrap: 'wrap' }}>
|
||||
<button className="category-btn active" style={{
|
||||
padding: '0.5rem 1rem',
|
||||
border: '1px solid var(--accent-color)',
|
||||
background: 'var(--accent-color)',
|
||||
color: 'white',
|
||||
borderRadius: '20px',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.3s ease'
|
||||
}}>
|
||||
{t('friends.allCategories')}
|
||||
</button>
|
||||
{categories.map(category => (
|
||||
<button key={category} className="category-btn" style={{
|
||||
padding: '0.5rem 1rem',
|
||||
border: '1px solid var(--border-color)',
|
||||
background: 'var(--bg-card)',
|
||||
color: 'var(--text-primary)',
|
||||
borderRadius: '20px',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.3s ease'
|
||||
}}>
|
||||
{category}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Friends Grid */}
|
||||
<div className="friends-grid" style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
|
||||
gap: '2rem'
|
||||
}}>
|
||||
{friendLinks.map(friend => (
|
||||
<div key={friend.id} className="friend-card" style={{
|
||||
background: 'var(--bg-card)',
|
||||
border: '1px solid var(--border-color)',
|
||||
borderRadius: '12px',
|
||||
padding: '2rem',
|
||||
transition: 'all 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 className="friend-header" style={{ display: 'flex', alignItems: 'center', marginBottom: '1rem' }}>
|
||||
<div className="friend-avatar" style={{
|
||||
width: '50px',
|
||||
height: '50px',
|
||||
background: 'var(--accent-color)',
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '1.5rem',
|
||||
marginRight: '1rem',
|
||||
color: 'white'
|
||||
}}>
|
||||
{friend.name.charAt(0)}
|
||||
</div>
|
||||
<div>
|
||||
<h3 style={{ margin: '0 0 0.5rem 0', color: 'var(--text-primary)' }}>{friend.name}</h3>
|
||||
<span style={{
|
||||
background: 'var(--accent-color)',
|
||||
color: 'white',
|
||||
padding: '0.25rem 0.75rem',
|
||||
borderRadius: '12px',
|
||||
fontSize: '0.8rem',
|
||||
fontWeight: 'bold'
|
||||
}}>
|
||||
{friend.category}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<p style={{ color: 'var(--text-secondary)', marginBottom: '1.5rem', lineHeight: '1.6' }}>
|
||||
{friend.description}
|
||||
</p>
|
||||
<a
|
||||
href={friend.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="friend-link"
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
background: 'transparent',
|
||||
color: 'var(--accent-color)',
|
||||
border: '2px solid var(--accent-color)',
|
||||
padding: '0.75rem 1.5rem',
|
||||
borderRadius: '6px',
|
||||
textDecoration: 'none',
|
||||
fontWeight: 'bold',
|
||||
transition: 'all 0.3s ease',
|
||||
width: '100%',
|
||||
textAlign: 'center'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = 'var(--accent-color)'
|
||||
e.currentTarget.style.color = 'white'
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = 'transparent'
|
||||
e.currentTarget.style.color = 'var(--accent-color)'
|
||||
}}
|
||||
>
|
||||
{t('friends.visitSite')}
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Call to Action */}
|
||||
<div className="friends-cta" style={{
|
||||
textAlign: 'center',
|
||||
marginTop: '4rem',
|
||||
padding: '3rem',
|
||||
background: 'var(--bg-card)',
|
||||
borderRadius: '12px',
|
||||
border: '1px solid var(--border-color)'
|
||||
}}>
|
||||
<h2 style={{ color: 'var(--text-primary)', marginBottom: '1rem' }}>
|
||||
{t('friends.wantToJoin')}
|
||||
</h2>
|
||||
<p style={{ color: 'var(--text-secondary)', marginBottom: '2rem', maxWidth: '600px', margin: '0 auto 2rem' }}>
|
||||
{t('friends.joinDescription')}
|
||||
</p>
|
||||
<a
|
||||
href="mailto:contact@cialloo.com?subject=Friend Link Request"
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
background: 'var(--accent-color)',
|
||||
color: 'white',
|
||||
padding: '1rem 2rem',
|
||||
borderRadius: '8px',
|
||||
textDecoration: 'none',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '1.1rem',
|
||||
transition: 'transform 0.3s ease'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(-2px)'
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(0)'
|
||||
}}
|
||||
>
|
||||
{t('friends.contactUs')}
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
export default Friends
|
||||
Reference in New Issue
Block a user