438 lines
19 KiB
TypeScript
438 lines
19 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { useState, useEffect } from 'react';
|
|
|
|
export default function GameSample() {
|
|
const [onlinePlayers, setOnlinePlayers] = useState(48_219);
|
|
const [matchingCount, setMatchingCount] = useState(1_342);
|
|
const [matchingActive, setMatchingActive] = useState(false);
|
|
const [matchTimer, setMatchTimer] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setOnlinePlayers((p) => p + Math.floor(Math.random() * 6 - 2));
|
|
setMatchingCount((c) => c + Math.floor(Math.random() * 4 - 1));
|
|
}, 2000);
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
let timer: ReturnType<typeof setInterval>;
|
|
if (matchingActive) {
|
|
timer = setInterval(() => {
|
|
setMatchTimer((t) => t + 1);
|
|
}, 1000);
|
|
} else {
|
|
setMatchTimer(0);
|
|
}
|
|
return () => clearInterval(timer);
|
|
}, [matchingActive]);
|
|
|
|
const rankings = [
|
|
{ rank: 1, name: 'ShadowViper_KR', score: 9_842, tier: 'GRANDMASTER', wins: 312, kda: '18.4' },
|
|
{ rank: 2, name: 'NightFalcon', score: 9_610, tier: 'GRANDMASTER', wins: 289, kda: '15.2' },
|
|
{ rank: 3, name: 'Xenon_X', score: 9_241, tier: 'MASTER', wins: 267, kda: '12.9' },
|
|
{ rank: 4, name: 'KR_Dominator', score: 8_970, tier: 'MASTER', wins: 251, kda: '11.7' },
|
|
{ rank: 5, name: 'Pulse_Wave', score: 8_834, tier: 'DIAMOND', wins: 238, kda: '10.3' },
|
|
];
|
|
|
|
const modes = [
|
|
{
|
|
id: 'solo',
|
|
name: 'SOLO',
|
|
sub: '1 vs 1',
|
|
desc: '순수한 실력으로 맞붙는 1대1 대결',
|
|
icon: '⚡',
|
|
color: '#06b6d4',
|
|
players: '12,400',
|
|
},
|
|
{
|
|
id: 'duo',
|
|
name: 'DUO',
|
|
sub: '2 vs 2',
|
|
desc: '파트너와 함께하는 팀플레이',
|
|
icon: '◈',
|
|
color: '#a855f7',
|
|
players: '28,700',
|
|
},
|
|
{
|
|
id: 'squad',
|
|
name: 'SQUAD',
|
|
sub: '5 vs 5',
|
|
desc: '전략과 팀워크로 승리를 쟁취',
|
|
icon: '▲',
|
|
color: '#f59e0b',
|
|
players: '7,100',
|
|
},
|
|
];
|
|
|
|
const tierColor: Record<string, string> = {
|
|
GRANDMASTER: '#fbbf24',
|
|
MASTER: '#a855f7',
|
|
DIAMOND: '#60a5fa',
|
|
};
|
|
|
|
return (
|
|
<div style={{ background: '#000000', minHeight: '100vh', color: 'white', overflowX: 'hidden' }}>
|
|
<style>{`
|
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;500;600;700&display=swap');
|
|
@keyframes pulse-ring { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(6,182,212,0.6); } 70% { transform: scale(1); box-shadow: 0 0 0 16px rgba(6,182,212,0); } 100% { transform: scale(0.95); } }
|
|
@keyframes scan { 0% { top: 0; } 100% { top: 100%; } }
|
|
@keyframes glitch { 0%, 90%, 100% { transform: none; } 92% { transform: translate(-2px, 1px); } 94% { transform: translate(2px, -1px); } 96% { transform: translate(-1px, 0); } }
|
|
@keyframes neonFlicker { 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: 0.4; } }
|
|
@keyframes matchPulse { 0%, 100% { box-shadow: 0 0 20px rgba(6,182,212,0.4); } 50% { box-shadow: 0 0 40px rgba(6,182,212,0.9), 0 0 80px rgba(6,182,212,0.4); } }
|
|
@keyframes counter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
|
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
|
|
.mode-card:hover { border-color: var(--card-color) !important; transform: translateY(-4px); }
|
|
.mode-card { transition: border-color 0.3s, transform 0.3s; }
|
|
.rank-row:hover { background: rgba(6,182,212,0.04) !important; }
|
|
.rank-row { transition: background 0.15s; }
|
|
`}</style>
|
|
|
|
{/* Back Banner */}
|
|
<div style={{
|
|
background: 'linear-gradient(135deg, #1e1b4b, #312e81)',
|
|
padding: '10px 24px', display: 'flex', alignItems: 'center', gap: 12,
|
|
position: 'relative', zIndex: 200,
|
|
}}>
|
|
<Link href="/services/website" style={{
|
|
color: '#a5b4fc', fontSize: 13, textDecoration: 'none',
|
|
fontFamily: 'Rajdhani, sans-serif',
|
|
}}>
|
|
← 홈페이지 제작 서비스로 돌아가기
|
|
</Link>
|
|
<span style={{ color: '#4c1d95', fontSize: 13 }}>|</span>
|
|
<span style={{ color: '#06b6d4', fontSize: 12, fontFamily: 'Orbitron, sans-serif', fontWeight: 700 }}>
|
|
SAMPLE · 게임 매칭 시스템
|
|
</span>
|
|
</div>
|
|
|
|
{/* Navbar */}
|
|
<nav style={{
|
|
position: 'sticky', top: 0, zIndex: 100,
|
|
background: 'rgba(0,0,0,0.92)', backdropFilter: 'blur(20px)',
|
|
borderBottom: '1px solid rgba(6,182,212,0.2)',
|
|
padding: '0 48px', height: 60,
|
|
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
|
}}>
|
|
<div style={{
|
|
fontFamily: 'Orbitron, sans-serif', fontSize: 18, fontWeight: 900,
|
|
background: 'linear-gradient(90deg, #06b6d4, #a855f7)',
|
|
WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
|
|
letterSpacing: '0.1em',
|
|
animation: 'neonFlicker 8s infinite',
|
|
}}>
|
|
NEXUS ARENA
|
|
</div>
|
|
<div style={{ display: 'flex', gap: 28, alignItems: 'center' }}>
|
|
{['HOME', 'MATCH', 'RANK', 'SHOP', 'CLAN'].map((item) => (
|
|
<span key={item} style={{
|
|
fontFamily: 'Orbitron, sans-serif', fontSize: 11, fontWeight: 700,
|
|
color: '#1e3a5f', cursor: 'pointer', letterSpacing: '0.1em',
|
|
}}>{item}</span>
|
|
))}
|
|
</div>
|
|
<div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
|
|
<div style={{
|
|
width: 6, height: 6, borderRadius: '50%',
|
|
background: '#10b981', boxShadow: '0 0 8px rgba(16,185,129,0.8)',
|
|
}} />
|
|
<span style={{ fontFamily: 'Rajdhani, sans-serif', fontSize: 13, color: '#10b981', fontWeight: 600 }}>
|
|
{onlinePlayers.toLocaleString()} ONLINE
|
|
</span>
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Hero */}
|
|
<section style={{
|
|
minHeight: '85vh', position: 'relative', overflow: 'hidden',
|
|
display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
|
|
padding: '60px 48px',
|
|
background: 'radial-gradient(ellipse 80% 70% at 50% 40%, rgba(6,182,212,0.08) 0%, rgba(168,85,247,0.05) 50%, transparent 100%)',
|
|
}}>
|
|
{/* Grid */}
|
|
<div style={{
|
|
position: 'absolute', inset: 0,
|
|
backgroundImage: 'linear-gradient(rgba(6,182,212,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(6,182,212,0.06) 1px, transparent 1px)',
|
|
backgroundSize: '60px 60px',
|
|
}} />
|
|
{/* Scan line */}
|
|
<div style={{
|
|
position: 'absolute', left: 0, right: 0, height: '1px',
|
|
background: 'linear-gradient(90deg, transparent, rgba(6,182,212,0.5), transparent)',
|
|
animation: 'scan 6s linear infinite',
|
|
pointerEvents: 'none',
|
|
}} />
|
|
|
|
{/* Corner decorations */}
|
|
{[
|
|
{ top: 40, left: 40, borderTop: '2px solid #06b6d4', borderLeft: '2px solid #06b6d4' },
|
|
{ top: 40, right: 40, borderTop: '2px solid #a855f7', borderRight: '2px solid #a855f7' },
|
|
{ bottom: 40, left: 40, borderBottom: '2px solid #06b6d4', borderLeft: '2px solid #06b6d4' },
|
|
{ bottom: 40, right: 40, borderBottom: '2px solid #a855f7', borderRight: '2px solid #a855f7' },
|
|
].map((s, i) => (
|
|
<div key={i} style={{ position: 'absolute', width: 40, height: 40, ...s }} />
|
|
))}
|
|
|
|
<div style={{ textAlign: 'center', position: 'relative', zIndex: 1 }}>
|
|
<div style={{
|
|
fontFamily: 'Orbitron, sans-serif', fontSize: 11, fontWeight: 700,
|
|
letterSpacing: '0.3em', color: '#06b6d4', marginBottom: 20,
|
|
textTransform: 'uppercase',
|
|
}}>
|
|
Season 7 · RANKED MATCH
|
|
</div>
|
|
<h1 style={{
|
|
fontFamily: 'Orbitron, sans-serif',
|
|
fontSize: 'clamp(48px, 8vw, 100px)',
|
|
fontWeight: 900, lineHeight: 1.0, marginBottom: 16,
|
|
background: 'linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.6) 100%)',
|
|
WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
|
|
animation: 'glitch 10s infinite',
|
|
}}>
|
|
NEXUS<br />
|
|
<span style={{
|
|
background: 'linear-gradient(90deg, #06b6d4, #a855f7)',
|
|
WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
|
|
}}>ARENA</span>
|
|
</h1>
|
|
<p style={{
|
|
fontFamily: 'Rajdhani, sans-serif', fontSize: 18, color: '#475569',
|
|
letterSpacing: '0.05em', marginBottom: 48,
|
|
}}>
|
|
ENTER THE ARENA. CLAIM YOUR GLORY.
|
|
</p>
|
|
|
|
{/* Live Stats */}
|
|
<div style={{ display: 'flex', gap: 32, justifyContent: 'center', marginBottom: 48 }}>
|
|
{[
|
|
{ label: 'ONLINE', val: onlinePlayers.toLocaleString(), color: '#06b6d4' },
|
|
{ label: 'IN MATCH', val: matchingCount.toLocaleString(), color: '#a855f7' },
|
|
{ label: 'SERVERS', val: '24', color: '#10b981' },
|
|
].map((s) => (
|
|
<div key={s.label} style={{
|
|
padding: '16px 24px',
|
|
background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(8px)',
|
|
border: `1px solid ${s.color}30`,
|
|
borderTop: `2px solid ${s.color}`,
|
|
textAlign: 'center',
|
|
}}>
|
|
<div style={{
|
|
fontFamily: 'Orbitron, sans-serif', fontSize: 28, fontWeight: 900,
|
|
color: s.color, letterSpacing: '-0.02em',
|
|
}}>{s.val}</div>
|
|
<div style={{ fontFamily: 'Rajdhani, sans-serif', fontSize: 11, color: '#334155', letterSpacing: '0.2em', marginTop: 4 }}>
|
|
{s.label}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Matching Button */}
|
|
{!matchingActive ? (
|
|
<button
|
|
onClick={() => setMatchingActive(true)}
|
|
style={{
|
|
background: 'linear-gradient(135deg, #06b6d4, #0891b2)',
|
|
border: 'none', color: 'white',
|
|
padding: '18px 56px', fontSize: 16, fontWeight: 900,
|
|
cursor: 'pointer', fontFamily: 'Orbitron, sans-serif',
|
|
letterSpacing: '0.1em',
|
|
clipPath: 'polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px))',
|
|
animation: 'pulse-ring 2s infinite',
|
|
}}
|
|
>
|
|
FIND MATCH
|
|
</button>
|
|
) : (
|
|
<div style={{
|
|
display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12,
|
|
}}>
|
|
<div style={{
|
|
padding: '18px 56px',
|
|
border: '2px solid #06b6d4', color: '#06b6d4',
|
|
fontFamily: 'Orbitron, sans-serif', fontSize: 16, fontWeight: 900,
|
|
letterSpacing: '0.1em', animation: 'matchPulse 1.5s infinite',
|
|
clipPath: 'polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px))',
|
|
}}>
|
|
MATCHING... {String(Math.floor(matchTimer / 60)).padStart(2, '0')}:{String(matchTimer % 60).padStart(2, '0')}
|
|
</div>
|
|
<button onClick={() => setMatchingActive(false)} style={{
|
|
background: 'none', border: 'none', color: '#334155',
|
|
fontFamily: 'Rajdhani, sans-serif', fontSize: 13, cursor: 'pointer',
|
|
letterSpacing: '0.1em', textDecoration: 'underline',
|
|
}}>
|
|
CANCEL
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Game Modes */}
|
|
<section style={{ padding: '60px 48px', background: 'rgba(0,0,0,0.8)' }}>
|
|
<div style={{ maxWidth: 1100, margin: '0 auto' }}>
|
|
<div style={{ textAlign: 'center', marginBottom: 40 }}>
|
|
<h2 style={{
|
|
fontFamily: 'Orbitron, sans-serif', fontSize: 28, fontWeight: 900,
|
|
color: 'white', letterSpacing: '0.05em', marginBottom: 8,
|
|
}}>
|
|
GAME MODES
|
|
</h2>
|
|
<div style={{ width: 60, height: 2, background: 'linear-gradient(90deg, #06b6d4, #a855f7)', margin: '0 auto' }} />
|
|
</div>
|
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 20 }}>
|
|
{modes.map((mode) => (
|
|
<div
|
|
key={mode.id}
|
|
className="mode-card"
|
|
// @ts-expect-error CSS variable
|
|
style={{ '--card-color': mode.color, border: `1px solid ${mode.color}25`, borderRadius: 4, padding: '28px 24px', background: 'rgba(0,0,0,0.6)', cursor: 'pointer', position: 'relative', overflow: 'hidden' }}
|
|
>
|
|
<div style={{
|
|
position: 'absolute', top: 0, left: 0, right: 0, height: 2,
|
|
background: `linear-gradient(90deg, transparent, ${mode.color}, transparent)`,
|
|
}} />
|
|
<div style={{
|
|
fontSize: 36, marginBottom: 16, color: mode.color,
|
|
textShadow: `0 0 20px ${mode.color}`,
|
|
}}>{mode.icon}</div>
|
|
<div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 8 }}>
|
|
<div style={{
|
|
fontFamily: 'Orbitron, sans-serif', fontSize: 24, fontWeight: 900, color: 'white',
|
|
}}>{mode.name}</div>
|
|
<div style={{
|
|
fontFamily: 'Rajdhani, sans-serif', fontSize: 13, color: mode.color,
|
|
fontWeight: 700, letterSpacing: '0.1em',
|
|
}}>{mode.sub}</div>
|
|
</div>
|
|
<div style={{
|
|
fontFamily: 'Rajdhani, sans-serif', fontSize: 15, color: '#475569',
|
|
lineHeight: 1.5, marginBottom: 20,
|
|
}}>{mode.desc}</div>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
<div style={{
|
|
fontFamily: 'Orbitron, sans-serif', fontSize: 11,
|
|
color: mode.color, letterSpacing: '0.1em',
|
|
}}>
|
|
{mode.players} IN QUEUE
|
|
</div>
|
|
<button style={{
|
|
background: `${mode.color}20`, border: `1px solid ${mode.color}50`,
|
|
color: mode.color, padding: '6px 16px', borderRadius: 2,
|
|
fontSize: 11, fontWeight: 700, cursor: 'pointer',
|
|
fontFamily: 'Orbitron, sans-serif', letterSpacing: '0.08em',
|
|
}}>
|
|
PLAY →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Rankings */}
|
|
<section style={{ padding: '60px 48px', background: '#000000' }}>
|
|
<div style={{ maxWidth: 900, margin: '0 auto' }}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 32 }}>
|
|
<h2 style={{
|
|
fontFamily: 'Orbitron, sans-serif', fontSize: 24, fontWeight: 900,
|
|
letterSpacing: '0.05em', color: 'white',
|
|
}}>
|
|
GLOBAL RANKING<span style={{ color: '#06b6d4' }}>.</span>
|
|
</h2>
|
|
<div style={{
|
|
fontFamily: 'Rajdhani, sans-serif', fontSize: 13, color: '#1e3a5f',
|
|
letterSpacing: '0.1em', textTransform: 'uppercase',
|
|
}}>
|
|
Season 7 · Top 100
|
|
</div>
|
|
</div>
|
|
<div style={{
|
|
border: '1px solid rgba(6,182,212,0.15)', borderRadius: 4, overflow: 'hidden',
|
|
}}>
|
|
{/* Header */}
|
|
<div style={{
|
|
display: 'grid', gridTemplateColumns: '60px 1fr 100px 80px 80px',
|
|
padding: '10px 20px', borderBottom: '1px solid rgba(6,182,212,0.1)',
|
|
background: 'rgba(6,182,212,0.05)',
|
|
}}>
|
|
{['RANK', 'PLAYER', 'SCORE', 'WINS', 'K/D/A'].map((h) => (
|
|
<div key={h} style={{
|
|
fontFamily: 'Orbitron, sans-serif', fontSize: 9, color: '#06b6d4',
|
|
letterSpacing: '0.15em',
|
|
}}>{h}</div>
|
|
))}
|
|
</div>
|
|
{rankings.map((r, i) => (
|
|
<div
|
|
key={i}
|
|
className="rank-row"
|
|
style={{
|
|
display: 'grid', gridTemplateColumns: '60px 1fr 100px 80px 80px',
|
|
padding: '14px 20px',
|
|
borderBottom: i < rankings.length - 1 ? '1px solid rgba(255,255,255,0.03)' : 'none',
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
<div style={{
|
|
fontFamily: 'Orbitron, sans-serif', fontSize: 20, fontWeight: 900,
|
|
color: i === 0 ? '#fbbf24' : i === 1 ? '#9ca3af' : i === 2 ? '#cd7c2f' : '#1e3a5f',
|
|
}}>
|
|
{r.rank < 10 ? `0${r.rank}` : r.rank}
|
|
</div>
|
|
<div>
|
|
<div style={{ fontFamily: 'Rajdhani, sans-serif', fontSize: 15, fontWeight: 700, color: 'white' }}>
|
|
{r.name}
|
|
</div>
|
|
<div style={{
|
|
display: 'inline-block', marginTop: 2,
|
|
fontFamily: 'Orbitron, sans-serif', fontSize: 8, fontWeight: 700,
|
|
color: tierColor[r.tier] || '#6b7280',
|
|
border: `1px solid ${tierColor[r.tier] || '#6b7280'}40`,
|
|
padding: '1px 6px', letterSpacing: '0.1em',
|
|
}}>{r.tier}</div>
|
|
</div>
|
|
<div style={{
|
|
fontFamily: 'Orbitron, sans-serif', fontSize: 14, fontWeight: 700,
|
|
color: '#06b6d4',
|
|
}}>{r.score.toLocaleString()}</div>
|
|
<div style={{ fontFamily: 'Rajdhani, sans-serif', fontSize: 14, color: '#475569', fontWeight: 600 }}>
|
|
{r.wins}
|
|
</div>
|
|
<div style={{ fontFamily: 'Orbitron, sans-serif', fontSize: 13, color: '#10b981' }}>
|
|
{r.kda}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<footer style={{
|
|
background: '#000000', borderTop: '1px solid rgba(6,182,212,0.1)',
|
|
padding: '24px 48px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
|
|
}}>
|
|
<div style={{
|
|
fontFamily: 'Orbitron, sans-serif', fontSize: 14, fontWeight: 900,
|
|
color: '#1e3a5f', letterSpacing: '0.1em',
|
|
}}>NEXUS ARENA</div>
|
|
<div style={{ fontFamily: 'Rajdhani, sans-serif', fontSize: 12, color: '#1e293b', letterSpacing: '0.1em' }}>
|
|
© 2024 NEXUS ARENA STUDIOS. ALL RIGHTS RESERVED.
|
|
</div>
|
|
<div style={{ display: 'flex', gap: 16 }}>
|
|
{['Twitter', 'Discord', 'YouTube'].map((s) => (
|
|
<span key={s} style={{
|
|
fontFamily: 'Rajdhani, sans-serif', fontSize: 12, color: '#1e3a5f',
|
|
cursor: 'pointer', letterSpacing: '0.05em',
|
|
}}>{s}</span>
|
|
))}
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|