feat: 샘플 홈페이지 5종 목적성에 맞게 전면 리팩토링
- bakery: 이모지 → SVG 빵/셰프 일러스트, 고객 리뷰 섹션, 시즌 스페셜 섹션, 재료 태그 추가 - portfolio: 수상내역 마퀴 배너, 서비스 섹션, 프로젝트 카테고리 필터+호버 오버레이, 클라이언트 후기 추가 - dashboard: SVG 라인 차트, KPI 스파크라인, 알림 패널, 도넛 차트, 사용자 아바타 테이블 개선 - game: 챔피언 선택 섹션, 시즌 패스 진행 바, 최근 매치 히스토리, 파티클 배경, 티어 SVG 배지 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,75 +1,98 @@
|
|||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
|
|
||||||
export default function BakerySample() {
|
const menuItems = [
|
||||||
const menuItems = [
|
{ name: '버터 크루아상', price: '3,200', tag: '인기', tagColor: '#dc2626', desc: '프랑스산 에슈레 버터만 사용한 겹겹이 살아있는 크루아상', ingredients: ['에슈레 버터', '천연 발효', 'T65 밀가루'] },
|
||||||
{ name: '버터 크루아상', price: '3,200', emoji: '🥐', tag: '인기', desc: '프랑스산 에슈레 버터만 사용한 겹겹이 살아있는 크루아상' },
|
{ name: '소금빵', price: '2,800', tag: '베스트', tagColor: '#d97706', desc: '오키나와 천연 소금과 발효 버터가 만나는 완벽한 짭조름함', ingredients: ['오키나와 소금', '발효 버터', '홋카이도 밀'] },
|
||||||
{ name: '소금빵', price: '2,800', emoji: '🍞', tag: '베스트', desc: '오키나와 천연 소금과 발효 버터가 만나는 완벽한 짭조름함' },
|
{ name: '딸기 쇼트케이크', price: '7,500', tag: '신메뉴', tagColor: '#7c3aed', desc: '국내산 딸기와 생크림이 만나는 클래식 케이크', ingredients: ['국내산 딸기', '생크림', '제노아즈'] },
|
||||||
{ name: '딸기 쇼트케이크', price: '7,500', emoji: '🍰', tag: '신메뉴', desc: '국내산 딸기와 생크림이 만나는 클래식 케이크' },
|
{ name: '캄파뉴', price: '8,900', tag: '장인', tagColor: '#065f46', desc: '72시간 저온 발효로 만든 시큼하고 깊은 맛의 통밀빵', ingredients: ['통밀', '사워도우', '72h 발효'] },
|
||||||
{ name: '캄파뉴', price: '8,900', emoji: '🫓', tag: '장인', desc: '72시간 저온 발효로 만든 시큼하고 깊은 맛의 통밀빵' },
|
];
|
||||||
];
|
|
||||||
|
|
||||||
const hours = [
|
const reviews = [
|
||||||
|
{ name: '김민서', rating: 5, text: '매일 아침 출근 전 들르게 되는 마법 같은 빵집. 크루아상은 그냥 인생 최고입니다.', date: '2024.08', verified: true },
|
||||||
|
{ name: '이준혁', rating: 5, text: '파리 유학시절 먹던 그 맛과 거의 흡사합니다. 국내에 이런 퀄리티가 있다니 놀랍습니다.', date: '2024.07', verified: true },
|
||||||
|
{ name: '박지은', rating: 5, text: '웨딩 케이크 주문했는데 하객들이 케이크 맛있다고 난리났어요. 다음에도 꼭 맡기겠습니다!', date: '2024.06', verified: true },
|
||||||
|
];
|
||||||
|
|
||||||
|
const specials = [
|
||||||
|
{ season: '봄', item: '딸기 타르틀렛', desc: '4월 한정', color: '#fda4af' },
|
||||||
|
{ season: '여름', item: '레몬 틸레', desc: '7–8월 한정', color: '#fde68a' },
|
||||||
|
{ season: '가을', item: '밤 크루아상', desc: '10월 한정', color: '#d97706' },
|
||||||
|
{ season: '겨울', item: '뱅쇼 브리오슈', desc: '12월 한정', color: '#c4b5fd' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const hours = [
|
||||||
{ day: '월~금', time: '07:00 – 20:00' },
|
{ day: '월~금', time: '07:00 – 20:00' },
|
||||||
{ day: '토요일', time: '07:00 – 21:00' },
|
{ day: '토요일', time: '07:00 – 21:00' },
|
||||||
{ day: '일요일', time: '09:00 – 18:00' },
|
{ day: '일·공휴일', time: '09:00 – 18:00' },
|
||||||
{ day: '공휴일', time: '09:00 – 18:00' },
|
];
|
||||||
];
|
|
||||||
|
|
||||||
|
export default function BakerySample() {
|
||||||
return (
|
return (
|
||||||
<div style={{ background: '#fffbf5', minHeight: '100vh', color: '#1c1008' }}>
|
<div style={{ background: '#fffbf5', minHeight: '100vh', color: '#1c1008' }}>
|
||||||
<style>{`
|
<style>{`
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,700&family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');
|
||||||
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
|
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
|
||||||
@keyframes float { 0%, 100% { transform: translateY(0px) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
|
@keyframes float { 0%, 100% { transform: translateY(0px) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } }
|
||||||
.menu-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(120,53,15,0.12); }
|
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
|
||||||
.menu-card { transition: transform 0.35s, box-shadow 0.35s; }
|
@keyframes sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
|
||||||
.bk-btn:hover { background: #92400e !important; }
|
.menu-card:hover { transform: translateY(-8px); box-shadow: 0 32px 80px rgba(120,53,15,0.15) !important; }
|
||||||
.bk-btn { transition: background 0.2s; }
|
.menu-card { transition: transform 0.4s cubic-bezier(.23,1,.32,1), box-shadow 0.4s; }
|
||||||
|
.review-card:hover { border-color: #fbbf24 !important; }
|
||||||
|
.review-card { transition: border-color 0.3s; }
|
||||||
|
.bk-btn-primary:hover { background: #92400e !important; transform: translateY(-1px); box-shadow: 0 12px 32px rgba(180,83,9,0.45) !important; }
|
||||||
|
.bk-btn-primary { transition: background 0.2s, transform 0.2s, box-shadow 0.2s; }
|
||||||
|
.bk-btn-ghost:hover { background: rgba(180,83,9,0.06) !important; }
|
||||||
|
.bk-btn-ghost { transition: background 0.2s; }
|
||||||
|
.special-card:hover { transform: scale(1.04); }
|
||||||
|
.special-card { transition: transform 0.3s; }
|
||||||
|
.ingredient-tag { background: rgba(180,83,9,0.07); color: #92400e; border: 1px solid rgba(180,83,9,0.15); border-radius: 100px; padding: 2px 10px; font-size: 11px; font-family: 'Noto Sans KR', sans-serif; white-space: nowrap; }
|
||||||
`}</style>
|
`}</style>
|
||||||
|
|
||||||
{/* Back Banner */}
|
{/* Back Banner */}
|
||||||
<div style={{
|
<div style={{ background: 'linear-gradient(135deg, #1e1b4b, #312e81)', padding: '10px 24px', display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||||
background: 'linear-gradient(135deg, #1e1b4b, #312e81)',
|
<Link href="/services/website" style={{ color: '#a5b4fc', fontSize: 13, textDecoration: 'none', fontFamily: "'Noto Sans KR', sans-serif" }}>
|
||||||
padding: '10px 24px', display: 'flex', alignItems: 'center', gap: 12,
|
|
||||||
}}>
|
|
||||||
<Link href="/services/website" style={{
|
|
||||||
color: '#a5b4fc', fontSize: 13, textDecoration: 'none',
|
|
||||||
fontFamily: "'Noto Sans KR', sans-serif",
|
|
||||||
}}>
|
|
||||||
← 홈페이지 제작 서비스로 돌아가기
|
← 홈페이지 제작 서비스로 돌아가기
|
||||||
</Link>
|
</Link>
|
||||||
<span style={{ color: '#4c1d95', fontSize: 13 }}>|</span>
|
<span style={{ color: '#4c1d95' }}>|</span>
|
||||||
<span style={{ color: '#6366f1', fontSize: 12, fontFamily: 'Playfair Display, serif', fontWeight: 700 }}>
|
<span style={{ color: '#fcd34d', fontSize: 12, fontFamily: 'Playfair Display, serif', fontStyle: 'italic', fontWeight: 700 }}>
|
||||||
SAMPLE · 베이커리 홈페이지
|
SAMPLE · 베이커리 홈페이지
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Navbar */}
|
{/* Navbar */}
|
||||||
<nav style={{
|
<nav style={{
|
||||||
background: 'rgba(255,251,245,0.95)', backdropFilter: 'blur(12px)',
|
background: 'rgba(255,251,245,0.96)', backdropFilter: 'blur(16px)',
|
||||||
borderBottom: '1px solid #fde8c8',
|
borderBottom: '1px solid #fde8c8',
|
||||||
padding: '0 48px', height: 68,
|
padding: '0 48px', height: 68,
|
||||||
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||||||
position: 'sticky', top: 0, zIndex: 100,
|
position: 'sticky', top: 0, zIndex: 100,
|
||||||
}}>
|
}}>
|
||||||
<div style={{ textAlign: 'center' }}>
|
{/* Logo with wheat SVG */}
|
||||||
<div style={{ fontSize: 20, fontFamily: 'Playfair Display, serif', fontStyle: 'italic', color: '#78350f', fontWeight: 700 }}>
|
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||||
|
<svg width="28" height="28" viewBox="0 0 28 28" fill="none">
|
||||||
|
<ellipse cx="14" cy="8" rx="5" ry="7" fill="#d97706" opacity="0.9" />
|
||||||
|
<ellipse cx="8" cy="14" rx="5" ry="4" fill="#b45309" opacity="0.7" transform="rotate(-30 8 14)" />
|
||||||
|
<ellipse cx="20" cy="14" rx="5" ry="4" fill="#b45309" opacity="0.7" transform="rotate(30 20 14)" />
|
||||||
|
<line x1="14" y1="28" x2="14" y2="8" stroke="#78350f" strokeWidth="1.5" strokeLinecap="round" />
|
||||||
|
</svg>
|
||||||
|
<div>
|
||||||
|
<div style={{ fontSize: 19, fontFamily: 'Playfair Display, serif', fontStyle: 'italic', color: '#78350f', fontWeight: 700, lineHeight: 1 }}>
|
||||||
Le Petit Fort
|
Le Petit Fort
|
||||||
</div>
|
</div>
|
||||||
<div style={{ fontSize: 10, color: '#a78060', letterSpacing: '0.2em', textTransform: 'uppercase' }}>Artisan Boulangerie</div>
|
<div style={{ fontSize: 10, color: '#c9a87c', letterSpacing: '0.18em', textTransform: 'uppercase', fontFamily: "'Noto Sans KR', sans-serif" }}>
|
||||||
|
Artisan Boulangerie
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ display: 'flex', gap: 28 }}>
|
<div style={{ display: 'flex', gap: 28 }}>
|
||||||
{['메뉴', '스토리', '매장안내', '예약'].map((item) => (
|
{['메뉴', '스토리', '시즌 메뉴', '매장안내', '예약'].map((item) => (
|
||||||
<span key={item} style={{
|
<span key={item} style={{ fontSize: 14, color: '#78350f', cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif", fontWeight: 500 }}>{item}</span>
|
||||||
fontSize: 14, color: '#78350f', cursor: 'pointer',
|
|
||||||
fontFamily: "'Noto Sans KR', sans-serif", fontWeight: 500,
|
|
||||||
}}>{item}</span>
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<button className="bk-btn" style={{
|
<button className="bk-btn-primary" style={{
|
||||||
background: '#b45309', color: 'white', border: 'none',
|
background: '#b45309', color: 'white', border: 'none',
|
||||||
padding: '9px 22px', borderRadius: 24, fontSize: 13,
|
padding: '9px 22px', borderRadius: 24, fontSize: 13,
|
||||||
fontWeight: 700, cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
|
fontWeight: 600, cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
|
||||||
}}>
|
}}>
|
||||||
예약하기
|
예약하기
|
||||||
</button>
|
</button>
|
||||||
@@ -77,52 +100,81 @@ export default function BakerySample() {
|
|||||||
|
|
||||||
{/* Hero */}
|
{/* Hero */}
|
||||||
<section style={{
|
<section style={{
|
||||||
background: 'linear-gradient(160deg, #fef3c7 0%, #fde68a 35%, #fbbf24 70%, #d97706 100%)',
|
background: 'linear-gradient(160deg, #fef3c7 0%, #fde68a 40%, #fbbf24 75%, #d97706 100%)',
|
||||||
padding: '80px 48px', position: 'relative', overflow: 'hidden', minHeight: 480,
|
padding: '80px 48px', position: 'relative', overflow: 'hidden', minHeight: 500,
|
||||||
display: 'flex', alignItems: 'center',
|
display: 'flex', alignItems: 'center',
|
||||||
}}>
|
}}>
|
||||||
{/* Decorative circles */}
|
{/* Decorative circles */}
|
||||||
<div style={{
|
<div style={{ position: 'absolute', right: -80, top: -80, width: 480, height: 480, borderRadius: '50%', background: 'rgba(180,83,9,0.07)' }} />
|
||||||
position: 'absolute', right: -60, top: -60,
|
<div style={{ position: 'absolute', right: 60, bottom: -60, width: 280, height: 280, borderRadius: '50%', background: 'rgba(180,83,9,0.1)' }} />
|
||||||
width: 400, height: 400, borderRadius: '50%',
|
|
||||||
background: 'rgba(180,83,9,0.08)',
|
|
||||||
}} />
|
|
||||||
<div style={{
|
|
||||||
position: 'absolute', right: 80, bottom: -40,
|
|
||||||
width: 240, height: 240, borderRadius: '50%',
|
|
||||||
background: 'rgba(180,83,9,0.12)',
|
|
||||||
}} />
|
|
||||||
<div style={{
|
|
||||||
position: 'absolute', right: '10%', top: '50%', transform: 'translateY(-50%)',
|
|
||||||
fontSize: 120,
|
|
||||||
animation: 'float 4s ease-in-out infinite',
|
|
||||||
filter: 'drop-shadow(0 12px 24px rgba(120,53,15,0.25))',
|
|
||||||
}}>🥐</div>
|
|
||||||
|
|
||||||
<div style={{ maxWidth: 560, animation: 'fadeUp 0.8s ease forwards' }}>
|
{/* SVG Croissant illustration */}
|
||||||
<div style={{
|
<div style={{ position: 'absolute', right: '8%', top: '50%', transform: 'translateY(-50%)', animation: 'float 5s ease-in-out infinite' }}>
|
||||||
fontSize: 13, color: '#78350f', fontFamily: 'Playfair Display, serif',
|
<svg width="180" height="180" viewBox="0 0 180 180" fill="none" style={{ filter: 'drop-shadow(0 20px 40px rgba(120,53,15,0.3))' }}>
|
||||||
fontStyle: 'italic', marginBottom: 16, letterSpacing: '0.05em',
|
{/* Croissant shape */}
|
||||||
}}>
|
<path d="M90 30 C50 30, 20 60, 20 90 C20 110, 30 130, 50 145 C65 155, 75 158, 90 155 C105 158, 115 155, 130 145 C150 130, 160 110, 160 90 C160 60, 130 30, 90 30Z" fill="#d97706" />
|
||||||
"매일 아침, 정성을 굽습니다"
|
<path d="M90 40 C55 40, 30 65, 30 90 C30 108, 38 124, 55 136 C68 145, 78 148, 90 145 C102 148, 112 145, 125 136 C142 124, 150 108, 150 90 C150 65, 125 40, 90 40Z" fill="#b45309" />
|
||||||
|
{/* Layered flakes */}
|
||||||
|
<path d="M60 80 Q90 70 120 80" stroke="#fde68a" strokeWidth="2.5" strokeLinecap="round" opacity="0.6" />
|
||||||
|
<path d="M55 92 Q90 82 125 92" stroke="#fef3c7" strokeWidth="2" strokeLinecap="round" opacity="0.5" />
|
||||||
|
<path d="M60 104 Q90 94 120 104" stroke="#fde68a" strokeWidth="2" strokeLinecap="round" opacity="0.4" />
|
||||||
|
{/* Shine */}
|
||||||
|
<ellipse cx="70" cy="65" rx="15" ry="8" fill="white" opacity="0.15" transform="rotate(-20 70 65)" />
|
||||||
|
{/* Steam */}
|
||||||
|
<path d="M75 28 Q78 20 75 12" stroke="#fbbf24" strokeWidth="2" strokeLinecap="round" opacity="0.4" />
|
||||||
|
<path d="M90 24 Q93 14 90 5" stroke="#fbbf24" strokeWidth="2" strokeLinecap="round" opacity="0.5" />
|
||||||
|
<path d="M105 28 Q108 20 105 12" stroke="#fbbf24" strokeWidth="2" strokeLinecap="round" opacity="0.4" />
|
||||||
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<h1 style={{
|
|
||||||
fontFamily: 'Playfair Display, serif', fontSize: 'clamp(40px, 5vw, 64px)',
|
{/* Wheat decoration top right */}
|
||||||
fontWeight: 700, color: '#451a03', lineHeight: 1.15, marginBottom: 18,
|
<svg width="80" height="120" viewBox="0 0 80 120" fill="none" style={{ position: 'absolute', right: '28%', top: 20, opacity: 0.15, animation: 'sway 4s ease-in-out infinite' }}>
|
||||||
}}>
|
<line x1="40" y1="120" x2="40" y2="0" stroke="#78350f" strokeWidth="2" />
|
||||||
|
{[15, 35, 55, 75].map((y, i) => (
|
||||||
|
<g key={y}>
|
||||||
|
<ellipse cx="28" cy={y} rx="10" ry="5" fill="#78350f" transform={`rotate(-40 28 ${y})`} />
|
||||||
|
<ellipse cx="52" cy={y} rx="10" ry="5" fill="#78350f" transform={`rotate(40 52 ${y})`} />
|
||||||
|
</g>
|
||||||
|
))}
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<div style={{ maxWidth: 560, animation: 'fadeUp 0.8s ease forwards', position: 'relative', zIndex: 1 }}>
|
||||||
|
<div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: 'rgba(255,255,255,0.5)', backdropFilter: 'blur(8px)', borderRadius: 100, padding: '5px 14px', marginBottom: 20 }}>
|
||||||
|
<svg width="10" height="10" viewBox="0 0 10 10"><circle cx="5" cy="5" r="5" fill="#16a34a" /><circle cx="5" cy="5" r="2" fill="white" /></svg>
|
||||||
|
<span style={{ fontSize: 12, color: '#78350f', fontFamily: "'Noto Sans KR', sans-serif", fontWeight: 600 }}>오늘도 새벽 4시부터 굽고 있습니다</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ fontSize: 13, color: '#78350f', fontFamily: 'Playfair Display, serif', fontStyle: 'italic', marginBottom: 14, letterSpacing: '0.05em' }}>
|
||||||
|
“매일 아침, 정성을 굽습니다”
|
||||||
|
</div>
|
||||||
|
<h1 style={{ fontFamily: 'Playfair Display, serif', fontSize: 'clamp(40px, 5vw, 64px)', fontWeight: 700, color: '#451a03', lineHeight: 1.15, marginBottom: 18 }}>
|
||||||
갓 구운 빵의<br />
|
갓 구운 빵의<br />
|
||||||
<span style={{ color: '#b45309' }}>따뜻한 향기</span>가<br />
|
<span style={{ color: '#b45309' }}>따뜻한 향기</span>가<br />
|
||||||
기다립니다
|
기다립니다
|
||||||
</h1>
|
</h1>
|
||||||
<p style={{
|
<p style={{ color: '#78350f', fontSize: 16, lineHeight: 1.85, marginBottom: 32, fontFamily: "'Noto Sans KR', sans-serif" }}>
|
||||||
color: '#78350f', fontSize: 16, lineHeight: 1.8, marginBottom: 32,
|
파리 전통 방식으로 매일 새벽 4시부터<br />정성껏 굽는 르 쁘띠 포르의 빵을 만나보세요.
|
||||||
fontFamily: "'Noto Sans KR', sans-serif",
|
|
||||||
}}>
|
|
||||||
프랑스 전통 방식으로 매일 새벽 4시부터<br />
|
|
||||||
정성껏 굽는 르 쁘띠 포르의 빵을 만나보세요.
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
{/* Social proof */}
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28 }}>
|
||||||
|
<div style={{ display: 'flex' }}>
|
||||||
|
{['#d97706', '#b45309', '#92400e', '#78350f'].map((c, i) => (
|
||||||
|
<div key={i} style={{ width: 30, height: 30, borderRadius: '50%', background: c, border: '2px solid white', marginLeft: i > 0 ? -8 : 0 }} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div style={{ display: 'flex', gap: 2 }}>
|
||||||
|
{[1,2,3,4,5].map(i => (
|
||||||
|
<svg key={i} width="12" height="12" viewBox="0 0 12 12"><path d="M6 1l1.3 2.6L10 4.1 8 6.1l.5 2.9L6 7.6 3.5 9l.5-2.9-2-2 2.7-.5z" fill="#d97706" /></svg>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<span style={{ fontSize: 12, color: '#78350f', fontFamily: "'Noto Sans KR', sans-serif" }}>4.9점 · 1,200+ 리뷰</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
|
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
|
||||||
<button className="bk-btn" style={{
|
<button className="bk-btn-primary" style={{
|
||||||
background: '#b45309', color: 'white', border: 'none',
|
background: '#b45309', color: 'white', border: 'none',
|
||||||
padding: '14px 32px', borderRadius: 28, fontSize: 15, fontWeight: 700,
|
padding: '14px 32px', borderRadius: 28, fontSize: 15, fontWeight: 700,
|
||||||
cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
|
cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
|
||||||
@@ -130,9 +182,9 @@ export default function BakerySample() {
|
|||||||
}}>
|
}}>
|
||||||
오늘의 메뉴 보기
|
오늘의 메뉴 보기
|
||||||
</button>
|
</button>
|
||||||
<button style={{
|
<button className="bk-btn-ghost" style={{
|
||||||
background: 'rgba(255,255,255,0.6)', color: '#78350f',
|
background: 'rgba(255,255,255,0.5)', color: '#78350f',
|
||||||
border: '1px solid rgba(180,83,9,0.3)',
|
border: '1px solid rgba(180,83,9,0.25)',
|
||||||
padding: '14px 32px', borderRadius: 28, fontSize: 15, fontWeight: 600,
|
padding: '14px 32px', borderRadius: 28, fontSize: 15, fontWeight: 600,
|
||||||
cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
|
cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
|
||||||
backdropFilter: 'blur(8px)',
|
backdropFilter: 'blur(8px)',
|
||||||
@@ -143,14 +195,27 @@ export default function BakerySample() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
{/* Season Special Banner */}
|
||||||
|
<div style={{ background: '#451a03', padding: '14px 48px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 32 }}>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||||
|
<svg width="16" height="16" viewBox="0 0 16 16"><path d="M8 1l1.8 3.6L14 5.6l-3 2.9.7 4.1L8 10.5 4.3 12.6l.7-4.1L2 5.6l4.2-.6z" fill="#fbbf24" /></svg>
|
||||||
|
<span style={{ color: '#fde68a', fontSize: 13, fontFamily: 'Playfair Display, serif', fontStyle: 'italic', fontWeight: 600 }}>Spring Limited</span>
|
||||||
|
</div>
|
||||||
|
<span style={{ color: '#78350f' }}>|</span>
|
||||||
|
<span style={{ color: 'white', fontSize: 14, fontFamily: "'Noto Sans KR', sans-serif", fontWeight: 600 }}>
|
||||||
|
🌸 딸기 타르틀렛 — 4월 한정 메뉴 출시
|
||||||
|
</span>
|
||||||
|
<span style={{ color: '#78350f' }}>|</span>
|
||||||
|
<span style={{ color: '#fcd34d', fontSize: 13, fontFamily: "'Noto Sans KR', sans-serif", cursor: 'pointer', textDecoration: 'underline' }}>자세히 보기 →</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Menu */}
|
{/* Menu */}
|
||||||
<section style={{ padding: '80px 48px', background: '#fffbf5' }}>
|
<section style={{ padding: '80px 48px', background: '#fffbf5' }}>
|
||||||
<div style={{ maxWidth: 1100, margin: '0 auto' }}>
|
<div style={{ maxWidth: 1100, margin: '0 auto' }}>
|
||||||
<div style={{ textAlign: 'center', marginBottom: 52 }}>
|
<div style={{ textAlign: 'center', marginBottom: 52 }}>
|
||||||
<div style={{
|
<div style={{ fontSize: 11, color: '#b45309', fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', fontFamily: 'Playfair Display, serif', marginBottom: 12 }}>
|
||||||
fontSize: 12, color: '#b45309', fontWeight: 700, letterSpacing: '0.2em',
|
Today's Menu
|
||||||
textTransform: 'uppercase', fontFamily: 'Playfair Display, serif', marginBottom: 12,
|
</div>
|
||||||
}}>Today's Menu</div>
|
|
||||||
<h2 style={{ fontFamily: 'Playfair Display, serif', fontSize: 40, color: '#451a03', marginBottom: 12 }}>
|
<h2 style={{ fontFamily: 'Playfair Display, serif', fontSize: 40, color: '#451a03', marginBottom: 12 }}>
|
||||||
오늘의 추천 메뉴
|
오늘의 추천 메뉴
|
||||||
</h2>
|
</h2>
|
||||||
@@ -158,40 +223,55 @@ export default function BakerySample() {
|
|||||||
매일 새벽 구운 신선한 빵을 만나보세요
|
매일 새벽 구운 신선한 빵을 만나보세요
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 24 }}>
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))', gap: 24 }}>
|
||||||
{menuItems.map((item) => (
|
{menuItems.map((item) => (
|
||||||
<div key={item.name} className="menu-card" style={{
|
<div key={item.name} className="menu-card" style={{
|
||||||
background: 'white', borderRadius: 20,
|
background: 'white', borderRadius: 20, border: '1px solid #fde8c8', overflow: 'hidden',
|
||||||
border: '1px solid #fde8c8', overflow: 'hidden',
|
boxShadow: '0 4px 20px rgba(120,53,15,0.06)',
|
||||||
boxShadow: '0 4px 20px rgba(120,53,15,0.05)',
|
|
||||||
}}>
|
}}>
|
||||||
<div style={{
|
{/* Card visual — SVG pattern instead of emoji */}
|
||||||
height: 140, background: 'linear-gradient(135deg, #fef3c7, #fde68a)',
|
<div style={{ height: 150, background: 'linear-gradient(135deg, #fef3c7, #fde68a)', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', overflow: 'hidden' }}>
|
||||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
{/* Subtle dotted pattern */}
|
||||||
fontSize: 60, position: 'relative',
|
<svg width="100%" height="100%" style={{ position: 'absolute', inset: 0 }}>
|
||||||
}}>
|
<pattern id={`dots-${item.name}`} x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||||
{item.emoji}
|
<circle cx="10" cy="10" r="1.5" fill="rgba(180,83,9,0.1)" />
|
||||||
|
</pattern>
|
||||||
|
<rect width="100%" height="100%" fill={`url(#dots-${item.name})`} />
|
||||||
|
</svg>
|
||||||
|
{/* Bread silhouette SVG */}
|
||||||
|
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" style={{ position: 'relative', zIndex: 1, filter: 'drop-shadow(0 4px 12px rgba(120,53,15,0.25))' }}>
|
||||||
|
<ellipse cx="40" cy="45" rx="30" ry="18" fill="#d97706" />
|
||||||
|
<ellipse cx="40" cy="38" rx="24" ry="16" fill="#b45309" />
|
||||||
|
<path d="M20 42 Q40 30 60 42" stroke="#fde68a" strokeWidth="2" strokeLinecap="round" opacity="0.5" />
|
||||||
|
<path d="M24 48 Q40 38 56 48" stroke="#fef3c7" strokeWidth="1.5" strokeLinecap="round" opacity="0.4" />
|
||||||
|
<ellipse cx="30" cy="32" rx="8" ry="5" fill="white" opacity="0.1" transform="rotate(-20 30 32)" />
|
||||||
|
</svg>
|
||||||
<span style={{
|
<span style={{
|
||||||
position: 'absolute', top: 12, right: 12,
|
position: 'absolute', top: 12, right: 12,
|
||||||
background: '#b45309', color: 'white',
|
background: item.tagColor, color: 'white',
|
||||||
fontSize: 10, fontWeight: 700, padding: '3px 9px', borderRadius: 100,
|
fontSize: 10, fontWeight: 700, padding: '3px 9px', borderRadius: 100,
|
||||||
fontFamily: "'Noto Sans KR', sans-serif",
|
fontFamily: "'Noto Sans KR', sans-serif",
|
||||||
}}>{item.tag}</span>
|
}}>{item.tag}</span>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ padding: '18px 20px' }}>
|
<div style={{ padding: '18px 20px' }}>
|
||||||
<div style={{ fontSize: 17, fontWeight: 700, color: '#451a03', fontFamily: 'Playfair Display, serif', marginBottom: 8 }}>
|
<div style={{ fontSize: 17, fontWeight: 700, color: '#451a03', fontFamily: 'Playfair Display, serif', marginBottom: 6 }}>
|
||||||
{item.name}
|
{item.name}
|
||||||
</div>
|
</div>
|
||||||
<div style={{ fontSize: 13, color: '#a78060', lineHeight: 1.65, fontFamily: "'Noto Sans KR', sans-serif", marginBottom: 14 }}>
|
<div style={{ fontSize: 13, color: '#a78060', lineHeight: 1.65, fontFamily: "'Noto Sans KR', sans-serif", marginBottom: 12 }}>
|
||||||
{item.desc}
|
{item.desc}
|
||||||
</div>
|
</div>
|
||||||
|
<div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 14 }}>
|
||||||
|
{item.ingredients.map(ig => (
|
||||||
|
<span key={ig} className="ingredient-tag">{ig}</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||||
<span style={{ fontSize: 18, fontWeight: 700, color: '#b45309', fontFamily: 'Playfair Display, serif' }}>
|
<span style={{ fontSize: 19, fontWeight: 700, color: '#b45309', fontFamily: 'Playfair Display, serif' }}>
|
||||||
₩{item.price}
|
₩{item.price}
|
||||||
</span>
|
</span>
|
||||||
<button style={{
|
<button style={{
|
||||||
background: '#fef3c7', color: '#b45309', border: 'none',
|
background: '#b45309', color: 'white', border: 'none',
|
||||||
padding: '6px 14px', borderRadius: 12, fontSize: 12,
|
padding: '7px 16px', borderRadius: 12, fontSize: 12,
|
||||||
fontWeight: 700, cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
|
fontWeight: 700, cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
|
||||||
}}>담기</button>
|
}}>담기</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -202,123 +282,257 @@ export default function BakerySample() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
{/* Seasonal Specials */}
|
||||||
|
<section style={{ padding: '72px 48px', background: '#fef9f0', borderTop: '1px solid #fde8c8' }}>
|
||||||
|
<div style={{ maxWidth: 1100, margin: '0 auto' }}>
|
||||||
|
<div style={{ textAlign: 'center', marginBottom: 44 }}>
|
||||||
|
<div style={{ fontSize: 11, color: '#b45309', fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', fontFamily: 'Playfair Display, serif', marginBottom: 10 }}>
|
||||||
|
Seasonal Specials
|
||||||
|
</div>
|
||||||
|
<h2 style={{ fontFamily: 'Playfair Display, serif', fontSize: 36, color: '#451a03' }}>
|
||||||
|
계절마다 새로운 감동
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
|
||||||
|
{specials.map((s) => (
|
||||||
|
<div key={s.season} className="special-card" style={{
|
||||||
|
borderRadius: 16, padding: '28px 20px', textAlign: 'center',
|
||||||
|
background: 'white', border: '1px solid #fde8c8',
|
||||||
|
cursor: 'pointer', overflow: 'hidden', position: 'relative',
|
||||||
|
}}>
|
||||||
|
<div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 4, background: s.color, borderRadius: '16px 16px 0 0' }} />
|
||||||
|
<div style={{
|
||||||
|
width: 48, height: 48, borderRadius: '50%', margin: '0 auto 14px',
|
||||||
|
background: s.color + '30', display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||||
|
}}>
|
||||||
|
<div style={{ width: 20, height: 20, borderRadius: '50%', background: s.color }} />
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: 12, color: '#a78060', fontFamily: "'Noto Sans KR', sans-serif", marginBottom: 8 }}>{s.season} 한정</div>
|
||||||
|
<div style={{ fontSize: 16, fontWeight: 700, color: '#451a03', fontFamily: 'Playfair Display, serif', marginBottom: 6 }}>{s.item}</div>
|
||||||
|
<div style={{ fontSize: 11, color: '#b45309', fontWeight: 600, fontFamily: "'Noto Sans KR', sans-serif", background: s.color + '25', borderRadius: 100, padding: '2px 10px', display: 'inline-block' }}>{s.desc}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
{/* Story */}
|
{/* Story */}
|
||||||
<section style={{ padding: '80px 48px', background: '#fef9f0', borderTop: '1px solid #fde8c8' }}>
|
<section style={{ padding: '80px 48px', background: '#fffbf5', borderTop: '1px solid #fde8c8' }}>
|
||||||
<div style={{ maxWidth: 900, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }}>
|
<div style={{ maxWidth: 960, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
|
||||||
<div>
|
<div>
|
||||||
<div style={{ fontSize: 12, color: '#b45309', fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', fontFamily: 'Playfair Display, serif', marginBottom: 12 }}>
|
<div style={{ fontSize: 11, color: '#b45309', fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', fontFamily: 'Playfair Display, serif', marginBottom: 14 }}>
|
||||||
Our Story
|
Our Story
|
||||||
</div>
|
</div>
|
||||||
<h2 style={{ fontFamily: 'Playfair Display, serif', fontSize: 36, color: '#451a03', lineHeight: 1.3, marginBottom: 20 }}>
|
<h2 style={{ fontFamily: 'Playfair Display, serif', fontSize: 36, color: '#451a03', lineHeight: 1.3, marginBottom: 22 }}>
|
||||||
2009년부터<br />한 자리를 지켜온<br />
|
2009년부터<br />한 자리를 지켜온<br />
|
||||||
<em>우리 동네 빵집</em>
|
<em>우리 동네 빵집</em>
|
||||||
</h2>
|
</h2>
|
||||||
<p style={{ color: '#78350f', fontSize: 15, lineHeight: 1.9, fontFamily: "'Noto Sans KR', sans-serif", marginBottom: 16 }}>
|
<p style={{ color: '#78350f', fontSize: 15, lineHeight: 1.9, fontFamily: "'Noto Sans KR', sans-serif", marginBottom: 16 }}>
|
||||||
파리에서 5년간 수업한 오너 셰프가 고향 서울로 돌아와 차린 작은 베이커리. 대기업 프랜차이즈가 넘쳐나는 세상에서도 손으로 빚고, 눈으로 확인하는 전통 방식을 고집합니다.
|
파리에서 5년간 수업한 오너 셰프가 고향 서울로 돌아와 차린 작은 베이커리. 대기업 프랜차이즈가 넘쳐나는 세상에서도 손으로 빚고, 눈으로 확인하는 전통 방식을 고집합니다.
|
||||||
</p>
|
</p>
|
||||||
<p style={{ color: '#78350f', fontSize: 15, lineHeight: 1.9, fontFamily: "'Noto Sans KR', sans-serif" }}>
|
<p style={{ color: '#78350f', fontSize: 15, lineHeight: 1.9, fontFamily: "'Noto Sans KR', sans-serif", marginBottom: 28 }}>
|
||||||
밀가루, 버터, 소금, 물. 단 네 가지 재료로 만드는 우리의 빵에는 흉내낼 수 없는 진심이 담겨있습니다.
|
밀가루, 버터, 소금, 물. 단 네 가지 재료로 만드는 우리의 빵에는 흉내낼 수 없는 진심이 담겨있습니다.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
<div style={{ display: 'flex', gap: 32 }}>
|
||||||
<div style={{
|
|
||||||
background: 'linear-gradient(135deg, #fde68a, #fbbf24)',
|
|
||||||
borderRadius: 24, padding: '48px 36px', textAlign: 'center',
|
|
||||||
border: '2px solid #fcd34d',
|
|
||||||
}}>
|
|
||||||
<div style={{ fontSize: 72, marginBottom: 16 }}>👨🍳</div>
|
|
||||||
<div style={{ fontSize: 22, fontFamily: 'Playfair Display, serif', color: '#451a03', fontWeight: 700 }}>
|
|
||||||
Chef Kim Dongwoo
|
|
||||||
</div>
|
|
||||||
<div style={{ fontSize: 13, color: '#78350f', fontFamily: "'Noto Sans KR', sans-serif", marginTop: 8, lineHeight: 1.6 }}>
|
|
||||||
Le Cordon Bleu Paris 졸업<br />
|
|
||||||
2009년 르 쁘띠 포르 창업
|
|
||||||
</div>
|
|
||||||
<div style={{
|
|
||||||
marginTop: 20, display: 'flex', justifyContent: 'center', gap: 20,
|
|
||||||
}}>
|
|
||||||
{[{ n: '15+', l: '년 경력' }, { n: '200+', l: '종류의 빵' }, { n: '4시', l: '매일 기상' }].map((s) => (
|
{[{ n: '15+', l: '년 경력' }, { n: '200+', l: '종류의 빵' }, { n: '4시', l: '매일 기상' }].map((s) => (
|
||||||
<div key={s.l} style={{ textAlign: 'center' }}>
|
<div key={s.l}>
|
||||||
<div style={{ fontSize: 20, fontWeight: 800, color: '#451a03', fontFamily: 'Playfair Display, serif' }}>{s.n}</div>
|
<div style={{ fontSize: 24, fontWeight: 800, color: '#b45309', fontFamily: 'Playfair Display, serif' }}>{s.n}</div>
|
||||||
<div style={{ fontSize: 11, color: '#78350f', fontFamily: "'Noto Sans KR', sans-serif" }}>{s.l}</div>
|
<div style={{ fontSize: 12, color: '#a78060', fontFamily: "'Noto Sans KR', sans-serif" }}>{s.l}</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Chef card with SVG illustration */}
|
||||||
|
<div style={{ background: 'linear-gradient(135deg, #fde68a, #fbbf24)', borderRadius: 24, padding: '44px 32px', textAlign: 'center', border: '2px solid #fcd34d', position: 'relative', overflow: 'hidden' }}>
|
||||||
|
{/* Pattern overlay */}
|
||||||
|
<svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, opacity: 0.07 }}>
|
||||||
|
<pattern id="chef-dots" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">
|
||||||
|
<circle cx="12" cy="12" r="2" fill="#78350f" />
|
||||||
|
</pattern>
|
||||||
|
<rect width="100%" height="100%" fill="url(#chef-dots)" />
|
||||||
|
</svg>
|
||||||
|
{/* Chef SVG illustration */}
|
||||||
|
<div style={{ position: 'relative', zIndex: 1 }}>
|
||||||
|
<div style={{ width: 96, height: 96, borderRadius: '50%', background: 'rgba(255,255,255,0.4)', margin: '0 auto 20px', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '3px solid rgba(255,255,255,0.6)' }}>
|
||||||
|
<svg width="56" height="56" viewBox="0 0 56 56" fill="none">
|
||||||
|
{/* Chef hat */}
|
||||||
|
<ellipse cx="28" cy="20" rx="16" ry="12" fill="white" />
|
||||||
|
<rect x="12" y="18" width="32" height="8" rx="2" fill="white" />
|
||||||
|
<ellipse cx="28" cy="18" rx="8" ry="5" fill="#f3f4f6" />
|
||||||
|
{/* Face */}
|
||||||
|
<circle cx="28" cy="34" r="12" fill="#fbbf24" />
|
||||||
|
<circle cx="24" cy="32" r="1.5" fill="#78350f" />
|
||||||
|
<circle cx="32" cy="32" r="1.5" fill="#78350f" />
|
||||||
|
<path d="M23 38 Q28 42 33 38" stroke="#78350f" strokeWidth="1.5" strokeLinecap="round" fill="none" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: 20, fontFamily: 'Playfair Display, serif', color: '#451a03', fontWeight: 700, marginBottom: 6 }}>
|
||||||
|
Chef Kim Dongwoo
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: 13, color: '#78350f', fontFamily: "'Noto Sans KR', sans-serif", lineHeight: 1.7, marginBottom: 16 }}>
|
||||||
|
Le Cordon Bleu Paris 졸업<br />
|
||||||
|
2009년 르 쁘띠 포르 창업
|
||||||
|
</div>
|
||||||
|
{/* Awards */}
|
||||||
|
<div style={{ display: 'flex', gap: 8, justifyContent: 'center', flexWrap: 'wrap' }}>
|
||||||
|
{['미쉐린 추천', '블루리본', '로컬 레전드'].map(award => (
|
||||||
|
<span key={award} style={{
|
||||||
|
background: 'rgba(255,255,255,0.5)', color: '#78350f',
|
||||||
|
fontSize: 10, fontWeight: 700, padding: '3px 10px',
|
||||||
|
borderRadius: 100, border: '1px solid rgba(255,255,255,0.7)',
|
||||||
|
fontFamily: "'Noto Sans KR', sans-serif",
|
||||||
|
}}>{award}</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Customer Reviews */}
|
||||||
|
<section style={{ padding: '80px 48px', background: '#fef9f0', borderTop: '1px solid #fde8c8' }}>
|
||||||
|
<div style={{ maxWidth: 1000, margin: '0 auto' }}>
|
||||||
|
<div style={{ textAlign: 'center', marginBottom: 48 }}>
|
||||||
|
<div style={{ fontSize: 11, color: '#b45309', fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', fontFamily: 'Playfair Display, serif', marginBottom: 10 }}>
|
||||||
|
Guest Reviews
|
||||||
|
</div>
|
||||||
|
<h2 style={{ fontFamily: 'Playfair Display, serif', fontSize: 36, color: '#451a03', marginBottom: 12 }}>
|
||||||
|
고객들의 이야기
|
||||||
|
</h2>
|
||||||
|
<div style={{ display: 'flex', gap: 4, justifyContent: 'center', alignItems: 'center', marginBottom: 8 }}>
|
||||||
|
{[1,2,3,4,5].map(i => (
|
||||||
|
<svg key={i} width="18" height="18" viewBox="0 0 18 18"><path d="M9 1.5l2 4L16 7l-3.5 3.4.8 4.8L9 13l-4.3 2.3.8-4.8L2 7l5-.5z" fill="#d97706" /></svg>
|
||||||
|
))}
|
||||||
|
<span style={{ marginLeft: 8, fontSize: 15, color: '#78350f', fontFamily: 'Playfair Display, serif', fontWeight: 700 }}>4.9</span>
|
||||||
|
<span style={{ fontSize: 13, color: '#a78060', fontFamily: "'Noto Sans KR', sans-serif" }}> (1,243개 리뷰)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
|
||||||
|
{reviews.map((r) => (
|
||||||
|
<div key={r.name} className="review-card" style={{
|
||||||
|
background: 'white', borderRadius: 20, padding: '28px 24px',
|
||||||
|
border: '1px solid #fde8c8', boxShadow: '0 2px 12px rgba(120,53,15,0.04)',
|
||||||
|
}}>
|
||||||
|
{/* Stars */}
|
||||||
|
<div style={{ display: 'flex', gap: 3, marginBottom: 14 }}>
|
||||||
|
{[1,2,3,4,5].map(i => (
|
||||||
|
<svg key={i} width="13" height="13" viewBox="0 0 13 13"><path d="M6.5 1l1.5 3 3.3.5-2.4 2.3.6 3.3L6.5 9 3 10.1l.6-3.3L1.2 4.5 4.5 4z" fill="#d97706" /></svg>
|
||||||
|
))}
|
||||||
|
{r.verified && (
|
||||||
|
<span style={{ marginLeft: 6, fontSize: 10, color: '#16a34a', fontFamily: "'Noto Sans KR', sans-serif", fontWeight: 600 }}>
|
||||||
|
✓ 인증 방문
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{/* Quote SVG */}
|
||||||
|
<svg width="24" height="18" viewBox="0 0 24 18" fill="none" style={{ marginBottom: 10, opacity: 0.3 }}>
|
||||||
|
<path d="M0 18V10.5C0 4.7 3.5 1.3 10.5 0l1.5 2.5C8.3 3.7 6.3 5.7 6 9h4.5V18H0zm12 0V10.5C12 4.7 15.5 1.3 22.5 0L24 2.5C20.3 3.7 18.3 5.7 18 9h4.5V18H12z" fill="#b45309" />
|
||||||
|
</svg>
|
||||||
|
<p style={{ fontSize: 14, color: '#78350f', lineHeight: 1.75, fontFamily: "'Noto Sans KR', sans-serif", marginBottom: 18 }}>
|
||||||
|
{r.text}
|
||||||
|
</p>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||||
|
<div style={{ width: 36, height: 36, borderRadius: '50%', background: 'linear-gradient(135deg, #fde68a, #d97706)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, fontWeight: 700, color: '#451a03', fontFamily: 'Playfair Display, serif' }}>
|
||||||
|
{r.name[0]}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div style={{ fontSize: 14, fontWeight: 600, color: '#451a03', fontFamily: "'Noto Sans KR', sans-serif" }}>{r.name}</div>
|
||||||
|
<div style={{ fontSize: 11, color: '#c9a87c', fontFamily: "'Noto Sans KR', sans-serif" }}>{r.date}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Hours & Location */}
|
{/* Hours & Location */}
|
||||||
<section style={{ padding: '72px 48px', background: '#451a03' }}>
|
<section style={{ padding: '72px 48px', background: '#451a03' }}>
|
||||||
<div style={{ maxWidth: 900, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60 }}>
|
<div style={{ maxWidth: 960, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64 }}>
|
||||||
<div>
|
<div>
|
||||||
<div style={{ fontSize: 12, color: '#fbbf24', fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', fontFamily: 'Playfair Display, serif', marginBottom: 16 }}>
|
<div style={{ fontSize: 11, color: '#fbbf24', fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', fontFamily: 'Playfair Display, serif', marginBottom: 16 }}>Hours</div>
|
||||||
Hours
|
<h3 style={{ fontFamily: 'Playfair Display, serif', fontSize: 28, color: 'white', marginBottom: 28 }}>운영 시간</h3>
|
||||||
</div>
|
|
||||||
<h3 style={{ fontFamily: 'Playfair Display, serif', fontSize: 28, color: 'white', marginBottom: 28 }}>
|
|
||||||
운영 시간
|
|
||||||
</h3>
|
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||||||
{hours.map((h) => (
|
{hours.map((h) => (
|
||||||
<div key={h.day} style={{
|
<div key={h.day} style={{ display: 'flex', justifyContent: 'space-between', borderBottom: '1px solid rgba(255,255,255,0.08)', paddingBottom: 12 }}>
|
||||||
display: 'flex', justifyContent: 'space-between',
|
|
||||||
borderBottom: '1px solid rgba(255,255,255,0.1)', paddingBottom: 12,
|
|
||||||
}}>
|
|
||||||
<span style={{ fontSize: 14, color: '#fde68a', fontFamily: "'Noto Sans KR', sans-serif", fontWeight: 600 }}>{h.day}</span>
|
<span style={{ fontSize: 14, color: '#fde68a', fontFamily: "'Noto Sans KR', sans-serif", fontWeight: 600 }}>{h.day}</span>
|
||||||
<span style={{ fontSize: 14, color: '#fcd34d', fontFamily: 'Playfair Display, serif' }}>{h.time}</span>
|
<span style={{ fontSize: 14, color: '#fcd34d', fontFamily: 'Playfair Display, serif' }}>{h.time}</span>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
<div style={{ marginTop: 20, padding: '12px 16px', background: 'rgba(251,191,36,0.1)', borderRadius: 10, border: '1px solid rgba(251,191,36,0.2)' }}>
|
||||||
|
<p style={{ fontSize: 13, color: '#fde68a', fontFamily: "'Noto Sans KR', sans-serif", lineHeight: 1.6 }}>
|
||||||
|
⚡ 품절 시 조기 마감될 수 있습니다.<br />
|
||||||
|
인스타그램에서 당일 재고를 확인하세요.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div style={{ fontSize: 12, color: '#fbbf24', fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', fontFamily: 'Playfair Display, serif', marginBottom: 16 }}>
|
<div style={{ fontSize: 11, color: '#fbbf24', fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', fontFamily: 'Playfair Display, serif', marginBottom: 16 }}>Location</div>
|
||||||
Location
|
<h3 style={{ fontFamily: 'Playfair Display, serif', fontSize: 28, color: 'white', marginBottom: 20 }}>매장 위치</h3>
|
||||||
</div>
|
<p style={{ color: '#fde68a', fontSize: 15, lineHeight: 1.7, fontFamily: "'Noto Sans KR', sans-serif", marginBottom: 20 }}>
|
||||||
<h3 style={{ fontFamily: 'Playfair Display, serif', fontSize: 28, color: 'white', marginBottom: 20 }}>
|
서울특별시 마포구 연남동 224-14<br />연남로 68 르 쁘띠 포르
|
||||||
매장 위치
|
|
||||||
</h3>
|
|
||||||
<p style={{ color: '#fde68a', fontSize: 15, lineHeight: 1.7, fontFamily: "'Noto Sans KR', sans-serif", marginBottom: 16 }}>
|
|
||||||
서울특별시 마포구 연남동 224-14<br />
|
|
||||||
연남로 68 르 쁘띠 포르
|
|
||||||
</p>
|
</p>
|
||||||
<div style={{ display: 'flex', gap: 8, flexDirection: 'column' }}>
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||||||
<div style={{ color: '#fcd34d', fontSize: 13, fontFamily: "'Noto Sans KR', sans-serif" }}>📍 지하철 2호선 홍대입구역 3번 출구 도보 5분</div>
|
{[
|
||||||
<div style={{ color: '#fcd34d', fontSize: 13, fontFamily: "'Noto Sans KR', sans-serif" }}>📞 02-334-5678</div>
|
{ icon: 'M', text: '2호선 홍대입구역 3번 출구 도보 5분' },
|
||||||
<div style={{ color: '#fcd34d', fontSize: 13, fontFamily: "'Noto Sans KR', sans-serif" }}>📱 @lepetitfort_seoul</div>
|
{ icon: 'T', text: '02-334-5678' },
|
||||||
|
{ icon: '@', text: '@lepetitfort_seoul' },
|
||||||
|
].map((info) => (
|
||||||
|
<div key={info.text} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||||
|
<div style={{ width: 24, height: 24, borderRadius: '50%', background: 'rgba(251,191,36,0.15)', border: '1px solid rgba(251,191,36,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, fontWeight: 700, color: '#fbbf24', fontFamily: 'Playfair Display, serif', flexShrink: 0 }}>
|
||||||
|
{info.icon}
|
||||||
|
</div>
|
||||||
|
<span style={{ color: '#fcd34d', fontSize: 13, fontFamily: "'Noto Sans KR', sans-serif" }}>{info.text}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* CTA */}
|
{/* CTA — Custom Cake */}
|
||||||
<section style={{
|
<section style={{ background: 'linear-gradient(135deg, #fef3c7, #fde68a)', padding: '72px 48px', textAlign: 'center' }}>
|
||||||
background: 'linear-gradient(135deg, #fef3c7, #fde68a)',
|
<div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: 'rgba(180,83,9,0.1)', borderRadius: 100, padding: '5px 14px', marginBottom: 20 }}>
|
||||||
padding: '64px 48px', textAlign: 'center',
|
<svg width="12" height="12" viewBox="0 0 12 12"><path d="M6 1l1.3 2.6L10 4.1 8 6.1l.5 2.9L6 7.6 3.5 9l.5-2.9-2-2 2.7-.5z" fill="#b45309" /></svg>
|
||||||
}}>
|
<span style={{ fontSize: 12, color: '#b45309', fontFamily: "'Noto Sans KR', sans-serif", fontWeight: 700 }}>Custom Order</span>
|
||||||
<h2 style={{ fontFamily: 'Playfair Display, serif', fontSize: 36, color: '#451a03', marginBottom: 14 }}>
|
</div>
|
||||||
|
<h2 style={{ fontFamily: 'Playfair Display, serif', fontSize: 38, color: '#451a03', marginBottom: 14 }}>
|
||||||
특별한 날을 위한 케이크
|
특별한 날을 위한 케이크
|
||||||
</h2>
|
</h2>
|
||||||
<p style={{ color: '#78350f', fontSize: 16, lineHeight: 1.7, marginBottom: 28, fontFamily: "'Noto Sans KR', sans-serif" }}>
|
<p style={{ color: '#78350f', fontSize: 16, lineHeight: 1.75, marginBottom: 12, fontFamily: "'Noto Sans KR', sans-serif" }}>
|
||||||
생일, 기념일, 웨딩 케이크까지.<br />
|
생일, 기념일, 웨딩 케이크까지.<br />
|
||||||
최소 3일 전 예약 시 원하시는 케이크를 제작해드립니다.
|
최소 3일 전 예약 시 원하시는 케이크를 제작해드립니다.
|
||||||
</p>
|
</p>
|
||||||
<button style={{
|
<p style={{ color: '#a78060', fontSize: 13, fontFamily: "'Noto Sans KR', sans-serif", marginBottom: 32 }}>
|
||||||
|
가격 상담 무료 · 사진 참고 가능 · 직접 수령 또는 배달 가능
|
||||||
|
</p>
|
||||||
|
<button className="bk-btn-primary" style={{
|
||||||
background: '#b45309', color: 'white', border: 'none',
|
background: '#b45309', color: 'white', border: 'none',
|
||||||
padding: '15px 40px', borderRadius: 28, fontSize: 16, fontWeight: 700,
|
padding: '15px 44px', borderRadius: 28, fontSize: 16, fontWeight: 700,
|
||||||
cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
|
cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
|
||||||
boxShadow: '0 8px 24px rgba(180,83,9,0.4)',
|
boxShadow: '0 8px 28px rgba(180,83,9,0.4)',
|
||||||
}}>
|
}}>
|
||||||
케이크 주문 예약하기 →
|
케이크 주문 예약하기 →
|
||||||
</button>
|
</button>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Footer */}
|
{/* Footer */}
|
||||||
<footer style={{ background: '#1c1008', padding: '28px 48px', textAlign: 'center' }}>
|
<footer style={{ background: '#1c1008', padding: '28px 48px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||||
<div style={{ color: '#78350f', fontSize: 13, fontFamily: 'Playfair Display, serif', fontStyle: 'italic', marginBottom: 6 }}>
|
<div>
|
||||||
|
<div style={{ color: '#78350f', fontSize: 14, fontFamily: 'Playfair Display, serif', fontStyle: 'italic', marginBottom: 4 }}>
|
||||||
Le Petit Fort — Artisan Boulangerie
|
Le Petit Fort — Artisan Boulangerie
|
||||||
</div>
|
</div>
|
||||||
<div style={{ color: '#3c1a08', fontSize: 12, fontFamily: "'Noto Sans KR', sans-serif" }}>
|
<div style={{ color: '#3c1a08', fontSize: 12, fontFamily: "'Noto Sans KR', sans-serif" }}>
|
||||||
© 2024 르 쁘띠 포르. All rights reserved.
|
© 2024 르 쁘띠 포르. All rights reserved.
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', gap: 16 }}>
|
||||||
|
{['Instagram', 'Naver Map', 'Kakao'].map((s) => (
|
||||||
|
<span key={s} style={{ fontSize: 12, color: '#78350f', fontFamily: "'Noto Sans KR', sans-serif", cursor: 'pointer' }}>{s}</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -3,75 +3,164 @@
|
|||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
|
|
||||||
export default function DashboardSample() {
|
const kpis = [
|
||||||
const [activeMenu, setActiveMenu] = useState('overview');
|
{ label: '월 활성 사용자', value: '124,832', change: '+12.4%', up: true, color: '#3b82f6', sparkline: [40, 55, 45, 70, 60, 85, 100] },
|
||||||
|
{ label: '월 매출', value: '₩284M', change: '+8.7%', up: true, color: '#10b981', sparkline: [50, 60, 55, 75, 80, 78, 100] },
|
||||||
|
{ label: '전환율', value: '3.62%', change: '-0.3%', up: false, color: '#f59e0b', sparkline: [90, 80, 85, 75, 70, 72, 68] },
|
||||||
|
{ label: '고객 만족도', value: '4.8', change: '+0.2', up: true, color: '#8b5cf6', sparkline: [70, 72, 74, 76, 78, 80, 85] },
|
||||||
|
];
|
||||||
|
|
||||||
const kpis = [
|
const lineData = [
|
||||||
{ label: '월 활성 사용자', value: '124,832', change: '+12.4%', up: true, icon: '👤', color: '#3b82f6' },
|
{ month: 'Jan', revenue: 65, users: 48 },
|
||||||
{ label: '월 매출', value: '₩284M', change: '+8.7%', up: true, icon: '💰', color: '#10b981' },
|
{ month: 'Feb', revenue: 78, users: 55 },
|
||||||
{ label: '전환율', value: '3.62%', change: '-0.3%', up: false, icon: '📈', color: '#f59e0b' },
|
{ month: 'Mar', revenue: 72, users: 52 },
|
||||||
{ label: '고객 만족도', value: '4.8 / 5', change: '+0.2', up: true, icon: '⭐', color: '#8b5cf6' },
|
{ month: 'Apr', revenue: 89, users: 64 },
|
||||||
];
|
{ month: 'May', revenue: 95, users: 71 },
|
||||||
|
{ month: 'Jun', revenue: 82, users: 66 },
|
||||||
|
{ month: 'Jul', revenue: 110, users: 88 },
|
||||||
|
{ month: 'Aug', revenue: 128, users: 100 },
|
||||||
|
];
|
||||||
|
|
||||||
const chartData = [
|
const activities = [
|
||||||
{ month: 'Jan', value: 65 },
|
{ user: 'lee@company.com', action: '프리미엄 플랜 구독', time: '2분 전', status: 'success', avatar: 'L' },
|
||||||
{ month: 'Feb', value: 78 },
|
{ user: 'park@startup.io', action: 'API 한도 초과 경고', time: '14분 전', status: 'warning', avatar: 'P' },
|
||||||
{ month: 'Mar', value: 72 },
|
{ user: 'kim@corp.kr', action: '팀 멤버 5명 초대', time: '31분 전', status: 'info', avatar: 'K' },
|
||||||
{ month: 'Apr', value: 89 },
|
{ user: 'choi@brand.com', action: '결제 실패 (카드 만료)', time: '1시간 전', status: 'error', avatar: 'C' },
|
||||||
{ month: 'May', value: 95 },
|
{ user: 'jung@agency.co', action: '새 워크스페이스 생성', time: '2시간 전', status: 'success', avatar: 'J' },
|
||||||
{ month: 'Jun', value: 82 },
|
];
|
||||||
{ month: 'Jul', value: 110 },
|
|
||||||
{ month: 'Aug', value: 128 },
|
|
||||||
];
|
|
||||||
|
|
||||||
const maxVal = Math.max(...chartData.map((d) => d.value));
|
const menus = [
|
||||||
|
{ id: 'overview', label: 'Overview', dot: '#3b82f6' },
|
||||||
|
{ id: 'analytics', label: 'Analytics', dot: '#10b981' },
|
||||||
|
{ id: 'users', label: 'Users', dot: null },
|
||||||
|
{ id: 'revenue', label: 'Revenue', dot: null },
|
||||||
|
{ id: 'reports', label: 'Reports', dot: null },
|
||||||
|
{ id: 'settings', label: 'Settings', dot: null },
|
||||||
|
];
|
||||||
|
|
||||||
const activities = [
|
const channels = [
|
||||||
{ user: 'lee@company.com', action: '프리미엄 플랜 구독', time: '2분 전', status: 'success' },
|
{ label: 'Organic Search', val: 78, color: '#3b82f6' },
|
||||||
{ user: 'park@startup.io', action: 'API 한도 초과 경고', time: '14분 전', status: 'warning' },
|
{ label: 'Direct', val: 55, color: '#10b981' },
|
||||||
{ user: 'kim@corp.kr', action: '팀 멤버 5명 초대', time: '31분 전', status: 'info' },
|
{ label: 'Social Media', val: 42, color: '#a855f7' },
|
||||||
{ user: 'choi@brand.com', action: '결제 실패 (카드 만료)', time: '1시간 전', status: 'error' },
|
{ label: 'Email', val: 34, color: '#f59e0b' },
|
||||||
{ user: 'jung@agency.co', action: '새 워크스페이스 생성', time: '2시간 전', status: 'success' },
|
{ label: 'Referral', val: 20, color: '#ec4899' },
|
||||||
];
|
];
|
||||||
|
|
||||||
const menus = [
|
const alerts = [
|
||||||
{ id: 'overview', icon: '⊞', label: 'Overview' },
|
{ type: 'error', msg: 'API 응답 지연 (p99 > 2s)', time: '5분 전' },
|
||||||
{ id: 'analytics', icon: '◈', label: 'Analytics' },
|
{ type: 'warning', msg: '스토리지 사용량 85% 초과', time: '32분 전' },
|
||||||
{ id: 'users', icon: '◉', label: 'Users' },
|
{ type: 'success', msg: '일일 백업 완료', time: '1시간 전' },
|
||||||
{ id: 'revenue', icon: '◆', label: 'Revenue' },
|
];
|
||||||
{ id: 'reports', icon: '▣', label: 'Reports' },
|
|
||||||
{ id: 'settings', icon: '◎', label: 'Settings' },
|
|
||||||
];
|
|
||||||
|
|
||||||
const statusColor = { success: '#10b981', warning: '#f59e0b', error: '#ef4444', info: '#3b82f6' };
|
const statusColor: Record<string, string> = { success: '#10b981', warning: '#f59e0b', error: '#ef4444', info: '#3b82f6' };
|
||||||
|
|
||||||
|
function SparkLine({ data, color }: { data: number[]; color: string }) {
|
||||||
|
const max = Math.max(...data);
|
||||||
|
const min = Math.min(...data);
|
||||||
|
const h = 28;
|
||||||
|
const w = 72;
|
||||||
|
const step = w / (data.length - 1);
|
||||||
|
const pts = data.map((v, i) => {
|
||||||
|
const x = i * step;
|
||||||
|
const y = h - ((v - min) / (max - min || 1)) * h;
|
||||||
|
return `${x},${y}`;
|
||||||
|
}).join(' ');
|
||||||
|
return (
|
||||||
|
<svg width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
|
||||||
|
<polyline points={pts} fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" opacity="0.7" />
|
||||||
|
<polyline points={`${pts} ${w},${h} 0,${h}`} fill={color} fillOpacity="0.08" stroke="none" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function LineChart({ data }: { data: typeof lineData }) {
|
||||||
|
const chartH = 130;
|
||||||
|
const chartW = 440;
|
||||||
|
const padL = 32;
|
||||||
|
const padB = 24;
|
||||||
|
const innerW = chartW - padL;
|
||||||
|
const innerH = chartH - padB;
|
||||||
|
const maxRev = Math.max(...data.map(d => d.revenue));
|
||||||
|
|
||||||
|
const revPts = data.map((d, i) => {
|
||||||
|
const x = padL + (i / (data.length - 1)) * innerW;
|
||||||
|
const y = (1 - d.revenue / maxRev) * innerH;
|
||||||
|
return `${x},${y}`;
|
||||||
|
}).join(' ');
|
||||||
|
|
||||||
|
const usrPts = data.map((d, i) => {
|
||||||
|
const x = padL + (i / (data.length - 1)) * innerW;
|
||||||
|
const y = (1 - d.users / maxRev) * innerH;
|
||||||
|
return `${x},${y}`;
|
||||||
|
}).join(' ');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ background: '#0a0f1e', minHeight: '100vh', color: 'white', fontFamily: 'system-ui, sans-serif' }}>
|
<svg width="100%" viewBox={`0 0 ${chartW} ${chartH}`} preserveAspectRatio="xMidYMid meet">
|
||||||
|
{/* Grid lines */}
|
||||||
|
{[0, 0.25, 0.5, 0.75, 1].map((t, i) => (
|
||||||
|
<g key={i}>
|
||||||
|
<line x1={padL} y1={t * innerH} x2={chartW} y2={t * innerH} stroke="rgba(255,255,255,0.04)" strokeWidth="1" />
|
||||||
|
<text x={padL - 4} y={t * innerH + 4} textAnchor="end" fontSize="8" fill="#1e3a5f">
|
||||||
|
{Math.round(maxRev * (1 - t))}
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
))}
|
||||||
|
{/* Area fills */}
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="grad-rev" x1="0" y1="0" x2="0" y2="1">
|
||||||
|
<stop offset="0%" stopColor="#3b82f6" stopOpacity="0.25" />
|
||||||
|
<stop offset="100%" stopColor="#3b82f6" stopOpacity="0" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="grad-usr" x1="0" y1="0" x2="0" y2="1">
|
||||||
|
<stop offset="0%" stopColor="#10b981" stopOpacity="0.2" />
|
||||||
|
<stop offset="100%" stopColor="#10b981" stopOpacity="0" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<polyline points={`${revPts} ${chartW},${innerH} ${padL},${innerH}`} fill="url(#grad-rev)" stroke="none" />
|
||||||
|
<polyline points={`${usrPts} ${chartW},${innerH} ${padL},${innerH}`} fill="url(#grad-usr)" stroke="none" />
|
||||||
|
{/* Lines */}
|
||||||
|
<polyline points={revPts} fill="none" stroke="#3b82f6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
<polyline points={usrPts} fill="none" stroke="#10b981" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4 2" />
|
||||||
|
{/* Dots at last point */}
|
||||||
|
{[{ pts: revPts, color: '#3b82f6' }, { pts: usrPts, color: '#10b981' }].map(({ pts: p, color }) => {
|
||||||
|
const last = p.split(' ').pop()!;
|
||||||
|
const [lx, ly] = last.split(',').map(Number);
|
||||||
|
return <circle key={color} cx={lx} cy={ly} r="3.5" fill={color} stroke="#0f172a" strokeWidth="2" />;
|
||||||
|
})}
|
||||||
|
{/* X axis labels */}
|
||||||
|
{data.map((d, i) => (
|
||||||
|
<text key={i} x={padL + (i / (data.length - 1)) * innerW} y={innerH + 16} textAnchor="middle" fontSize="8" fill="#334155">{d.month}</text>
|
||||||
|
))}
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function DashboardSample() {
|
||||||
|
const [activeMenu, setActiveMenu] = useState('overview');
|
||||||
|
const [alertsVisible, setAlertsVisible] = useState(true);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ background: '#0a0f1e', minHeight: '100vh', color: 'white' }}>
|
||||||
<style>{`
|
<style>{`
|
||||||
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
|
||||||
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||||||
@keyframes barGrow { from { height: 0; } to { height: var(--h); } }
|
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
|
||||||
.dash-menu-item:hover { background: rgba(255,255,255,0.05) !important; }
|
.dash-menu-item:hover { background: rgba(255,255,255,0.05) !important; }
|
||||||
.dash-menu-item { transition: background 0.15s; }
|
.dash-menu-item { transition: background 0.15s; }
|
||||||
.dash-kpi:hover { border-color: rgba(255,255,255,0.12) !important; transform: translateY(-2px); }
|
.dash-kpi:hover { border-color: rgba(255,255,255,0.1) !important; transform: translateY(-2px); }
|
||||||
.dash-kpi { transition: border-color 0.2s, transform 0.2s; }
|
.dash-kpi { transition: border-color 0.2s, transform 0.2s; cursor: default; }
|
||||||
.dash-row:hover { background: rgba(255,255,255,0.03) !important; }
|
.dash-row:hover { background: rgba(255,255,255,0.03) !important; }
|
||||||
.dash-row { transition: background 0.15s; }
|
.dash-row { transition: background 0.15s; }
|
||||||
|
.quick-action:hover { background: rgba(59,130,246,0.12) !important; border-color: rgba(59,130,246,0.3) !important; }
|
||||||
|
.quick-action { transition: background 0.2s, border-color 0.2s; cursor: pointer; }
|
||||||
`}</style>
|
`}</style>
|
||||||
|
|
||||||
{/* Back Banner */}
|
{/* Back Banner */}
|
||||||
<div style={{
|
<div style={{ background: 'linear-gradient(135deg, #1e1b4b, #312e81)', padding: '10px 24px', display: 'flex', alignItems: 'center', gap: 12, position: 'relative', zIndex: 200 }}>
|
||||||
background: 'linear-gradient(135deg, #1e1b4b, #312e81)',
|
<Link href="/services/website" style={{ color: '#a5b4fc', fontSize: 13, textDecoration: 'none', fontFamily: 'DM Sans, sans-serif' }}>
|
||||||
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: 'DM Sans, sans-serif',
|
|
||||||
}}>
|
|
||||||
← 홈페이지 제작 서비스로 돌아가기
|
← 홈페이지 제작 서비스로 돌아가기
|
||||||
</Link>
|
</Link>
|
||||||
<span style={{ color: '#4c1d95', fontSize: 13 }}>|</span>
|
<span style={{ color: '#4c1d95' }}>|</span>
|
||||||
<span style={{ color: '#38bdf8', fontSize: 12, fontFamily: 'DM Mono, monospace', fontWeight: 500 }}>
|
<span style={{ color: '#38bdf8', fontSize: 12, fontFamily: 'DM Mono, monospace', fontWeight: 500 }}>
|
||||||
SAMPLE · 관리자 대시보드
|
SAMPLE · 관리자 대시보드
|
||||||
</span>
|
</span>
|
||||||
@@ -79,20 +168,18 @@ export default function DashboardSample() {
|
|||||||
|
|
||||||
<div style={{ display: 'flex', height: 'calc(100vh - 40px)' }}>
|
<div style={{ display: 'flex', height: 'calc(100vh - 40px)' }}>
|
||||||
{/* Sidebar */}
|
{/* Sidebar */}
|
||||||
<aside style={{
|
<aside style={{ width: 220, background: '#060b18', borderRight: '1px solid rgba(255,255,255,0.05)', display: 'flex', flexDirection: 'column', flexShrink: 0 }}>
|
||||||
width: 220, background: '#060b18',
|
|
||||||
borderRight: '1px solid rgba(255,255,255,0.05)',
|
|
||||||
display: 'flex', flexDirection: 'column', flexShrink: 0,
|
|
||||||
}}>
|
|
||||||
{/* Logo */}
|
{/* Logo */}
|
||||||
<div style={{ padding: '20px 20px 16px', borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
|
<div style={{ padding: '18px 18px 14px', borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
|
||||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||||
<div style={{
|
<div style={{ width: 34, height: 34, borderRadius: 9, background: 'linear-gradient(135deg, #3b82f6, #06b6d4)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||||
width: 32, height: 32, borderRadius: 8,
|
{/* DF logo SVG */}
|
||||||
background: 'linear-gradient(135deg, #3b82f6, #06b6d4)',
|
<svg width="16" height="14" viewBox="0 0 16 14" fill="none">
|
||||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
<rect x="0" y="0" width="7" height="6" rx="1" fill="white" opacity="0.9" />
|
||||||
fontSize: 14, fontWeight: 700, fontFamily: 'DM Mono, monospace',
|
<rect x="0" y="8" width="7" height="6" rx="1" fill="white" opacity="0.6" />
|
||||||
}}>DF</div>
|
<rect x="9" y="0" width="7" height="14" rx="1" fill="white" opacity="0.4" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div style={{ fontSize: 14, fontWeight: 700, color: 'white', fontFamily: 'DM Sans, sans-serif' }}>DataFlow</div>
|
<div style={{ fontSize: 14, fontWeight: 700, color: 'white', fontFamily: 'DM Sans, sans-serif' }}>DataFlow</div>
|
||||||
<div style={{ fontSize: 10, color: '#334155', fontFamily: 'DM Mono, monospace' }}>v2.4.1 · PRO</div>
|
<div style={{ fontSize: 10, color: '#334155', fontFamily: 'DM Mono, monospace' }}>v2.4.1 · PRO</div>
|
||||||
@@ -100,31 +187,43 @@ export default function DashboardSample() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Nav */}
|
{/* Quick Actions */}
|
||||||
<nav style={{ flex: 1, padding: '12px 10px', overflowY: 'auto' }}>
|
<div style={{ padding: '12px 10px 8px' }}>
|
||||||
<div style={{ fontSize: 9, color: '#1e3a5f', fontFamily: 'DM Mono, monospace', letterSpacing: '0.15em', padding: '8px 10px 4px', textTransform: 'uppercase' }}>
|
<div style={{ fontSize: 9, color: '#1e3a5f', fontFamily: 'DM Mono, monospace', letterSpacing: '0.15em', padding: '4px 10px 6px', textTransform: 'uppercase' }}>QUICK ACTIONS</div>
|
||||||
MAIN
|
<div style={{ display: 'flex', gap: 6, padding: '0 2px' }}>
|
||||||
|
{[
|
||||||
|
{ label: 'Export', color: '#3b82f6' },
|
||||||
|
{ label: 'Invite', color: '#10b981' },
|
||||||
|
{ label: 'Alert', color: '#f59e0b' },
|
||||||
|
].map(a => (
|
||||||
|
<button key={a.label} className="quick-action" style={{ flex: 1, padding: '6px 4px', borderRadius: 6, border: '1px solid rgba(255,255,255,0.05)', background: 'transparent', color: a.color, fontSize: 10, fontFamily: 'DM Mono, monospace', fontWeight: 500 }}>
|
||||||
|
{a.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Nav */}
|
||||||
|
<nav style={{ flex: 1, padding: '4px 10px', overflowY: 'auto' }}>
|
||||||
|
<div style={{ fontSize: 9, color: '#1e3a5f', fontFamily: 'DM Mono, monospace', letterSpacing: '0.15em', padding: '8px 10px 4px', textTransform: 'uppercase' }}>MAIN</div>
|
||||||
{menus.map((m) => (
|
{menus.map((m) => (
|
||||||
<button
|
<button key={m.id} className="dash-menu-item" onClick={() => setActiveMenu(m.id)} style={{
|
||||||
key={m.id}
|
width: '100%', textAlign: 'left', padding: '9px 12px', borderRadius: 8, border: 'none', cursor: 'pointer',
|
||||||
className="dash-menu-item"
|
|
||||||
onClick={() => setActiveMenu(m.id)}
|
|
||||||
style={{
|
|
||||||
width: '100%', textAlign: 'left',
|
|
||||||
padding: '9px 12px', borderRadius: 8, border: 'none', cursor: 'pointer',
|
|
||||||
display: 'flex', alignItems: 'center', gap: 10, marginBottom: 2,
|
display: 'flex', alignItems: 'center', gap: 10, marginBottom: 2,
|
||||||
background: activeMenu === m.id ? 'rgba(59,130,246,0.15)' : 'transparent',
|
background: activeMenu === m.id ? 'rgba(59,130,246,0.15)' : 'transparent',
|
||||||
color: activeMenu === m.id ? '#60a5fa' : '#475569',
|
color: activeMenu === m.id ? '#60a5fa' : '#475569',
|
||||||
}}
|
}}>
|
||||||
>
|
{/* Menu icon SVG */}
|
||||||
<span style={{ fontSize: 14 }}>{m.icon}</span>
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{ flexShrink: 0 }}>
|
||||||
<span style={{ fontSize: 13, fontWeight: activeMenu === m.id ? 600 : 400, fontFamily: 'DM Sans, sans-serif' }}>
|
<rect x="1" y="1" width="5" height="5" rx="1.5" fill={activeMenu === m.id ? '#60a5fa' : '#1e3a5f'} />
|
||||||
|
<rect x="8" y="1" width="5" height="5" rx="1.5" fill={activeMenu === m.id ? '#60a5fa' : '#1e3a5f'} opacity="0.6" />
|
||||||
|
<rect x="1" y="8" width="5" height="5" rx="1.5" fill={activeMenu === m.id ? '#60a5fa' : '#1e3a5f'} opacity="0.6" />
|
||||||
|
<rect x="8" y="8" width="5" height="5" rx="1.5" fill={activeMenu === m.id ? '#60a5fa' : '#1e3a5f'} opacity="0.4" />
|
||||||
|
</svg>
|
||||||
|
<span style={{ fontSize: 13, fontWeight: activeMenu === m.id ? 600 : 400, fontFamily: 'DM Sans, sans-serif', flex: 1 }}>
|
||||||
{m.label}
|
{m.label}
|
||||||
</span>
|
</span>
|
||||||
{activeMenu === m.id && (
|
{m.dot && <div style={{ width: 4, height: 4, borderRadius: '50%', background: m.dot, animation: 'pulse-dot 2s infinite' }} />}
|
||||||
<div style={{ marginLeft: 'auto', width: 4, height: 4, borderRadius: '50%', background: '#3b82f6' }} />
|
|
||||||
)}
|
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
</nav>
|
</nav>
|
||||||
@@ -132,16 +231,9 @@ export default function DashboardSample() {
|
|||||||
{/* User */}
|
{/* User */}
|
||||||
<div style={{ padding: '12px 14px', borderTop: '1px solid rgba(255,255,255,0.05)' }}>
|
<div style={{ padding: '12px 14px', borderTop: '1px solid rgba(255,255,255,0.05)' }}>
|
||||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||||
<div style={{
|
<div style={{ width: 32, height: 32, borderRadius: '50%', background: 'linear-gradient(135deg, #6366f1, #8b5cf6)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 700 }}>A</div>
|
||||||
width: 32, height: 32, borderRadius: '50%',
|
|
||||||
background: 'linear-gradient(135deg, #6366f1, #8b5cf6)',
|
|
||||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
|
||||||
fontSize: 13, fontWeight: 700,
|
|
||||||
}}>A</div>
|
|
||||||
<div style={{ flex: 1, minWidth: 0 }}>
|
<div style={{ flex: 1, minWidth: 0 }}>
|
||||||
<div style={{ fontSize: 12, fontWeight: 600, color: '#e2e8f0', fontFamily: 'DM Sans, sans-serif', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
<div style={{ fontSize: 12, fontWeight: 600, color: '#e2e8f0', fontFamily: 'DM Sans, sans-serif', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>Admin</div>
|
||||||
Admin
|
|
||||||
</div>
|
|
||||||
<div style={{ fontSize: 10, color: '#334155', fontFamily: 'DM Mono, monospace' }}>Super Admin</div>
|
<div style={{ fontSize: 10, color: '#334155', fontFamily: 'DM Mono, monospace' }}>Super Admin</div>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ width: 6, height: 6, borderRadius: '50%', background: '#10b981', flexShrink: 0 }} />
|
<div style={{ width: 6, height: 6, borderRadius: '50%', background: '#10b981', flexShrink: 0 }} />
|
||||||
@@ -150,188 +242,193 @@ export default function DashboardSample() {
|
|||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
{/* Main */}
|
{/* Main */}
|
||||||
<main style={{ flex: 1, overflowY: 'auto', padding: '24px 28px', animation: 'fadeIn 0.4s ease' }}>
|
<main style={{ flex: 1, overflowY: 'auto', animation: 'fadeIn 0.4s ease' }}>
|
||||||
{/* Header */}
|
{/* Top bar */}
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
|
<div style={{ padding: '14px 24px', borderBottom: '1px solid rgba(255,255,255,0.05)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: '#080d1a', position: 'sticky', top: 0, zIndex: 10 }}>
|
||||||
<div>
|
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||||
<h1 style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 22, fontWeight: 700, color: 'white', marginBottom: 2 }}>
|
<div style={{ position: 'relative' }}>
|
||||||
Overview
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)' }}>
|
||||||
</h1>
|
<circle cx="7" cy="7" r="5" stroke="#334155" strokeWidth="1.5" />
|
||||||
<div style={{ fontSize: 12, color: '#334155', fontFamily: 'DM Mono, monospace' }}>
|
<line x1="11" y1="11" x2="14" y2="14" stroke="#334155" strokeWidth="1.5" strokeLinecap="round" />
|
||||||
2024.08.14 · 오전 10:32 업데이트
|
</svg>
|
||||||
|
<input placeholder="검색..." style={{ background: '#0f172a', border: '1px solid rgba(255,255,255,0.06)', color: '#94a3b8', padding: '7px 12px 7px 32px', borderRadius: 8, fontSize: 12, fontFamily: 'DM Sans, sans-serif', outline: 'none', width: 180 }} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ display: 'flex', gap: 10 }}>
|
<div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
|
||||||
<select style={{
|
<select style={{ background: '#0f172a', border: '1px solid rgba(255,255,255,0.07)', color: '#94a3b8', padding: '7px 12px', borderRadius: 8, fontSize: 12, fontFamily: 'DM Sans, sans-serif', cursor: 'pointer' }}>
|
||||||
background: '#0f172a', border: '1px solid rgba(255,255,255,0.07)',
|
|
||||||
color: '#94a3b8', padding: '8px 14px', borderRadius: 8, fontSize: 12,
|
|
||||||
fontFamily: 'DM Sans, sans-serif', cursor: 'pointer',
|
|
||||||
}}>
|
|
||||||
<option>최근 30일</option>
|
<option>최근 30일</option>
|
||||||
</select>
|
</select>
|
||||||
<button style={{
|
{/* Alert bell */}
|
||||||
background: '#3b82f6', border: 'none', color: 'white',
|
<button onClick={() => setAlertsVisible(!alertsVisible)} style={{ position: 'relative', background: '#0f172a', border: '1px solid rgba(255,255,255,0.07)', padding: '7px 10px', borderRadius: 8, cursor: 'pointer', display: 'flex' }}>
|
||||||
padding: '8px 18px', borderRadius: 8, fontSize: 12, fontWeight: 600,
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||||
cursor: 'pointer', fontFamily: 'DM Sans, sans-serif',
|
<path d="M7 1.5C4.5 1.5 3 3.2 3 5.5v3L1.5 10.5h11L11 8.5v-3C11 3.2 9.5 1.5 7 1.5z" stroke="#94a3b8" strokeWidth="1.2" fill="none" />
|
||||||
}}>
|
<path d="M5.5 10.5a1.5 1.5 0 003 0" stroke="#94a3b8" strokeWidth="1.2" />
|
||||||
|
</svg>
|
||||||
|
<div style={{ position: 'absolute', top: 5, right: 5, width: 7, height: 7, borderRadius: '50%', background: '#ef4444', border: '1.5px solid #080d1a' }} />
|
||||||
|
</button>
|
||||||
|
<button style={{ background: '#3b82f6', border: 'none', color: 'white', padding: '7px 16px', borderRadius: 8, fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'DM Sans, sans-serif' }}>
|
||||||
리포트 내보내기
|
리포트 내보내기
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div style={{ padding: '20px 24px' }}>
|
||||||
|
{/* Alerts panel */}
|
||||||
|
{alertsVisible && (
|
||||||
|
<div style={{ marginBottom: 20, padding: '14px 18px', borderRadius: 12, background: '#0f172a', border: '1px solid rgba(255,255,255,0.06)' }}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
|
||||||
|
<div style={{ fontSize: 13, fontWeight: 600, color: 'white', fontFamily: 'DM Sans, sans-serif' }}>시스템 알림</div>
|
||||||
|
<button onClick={() => setAlertsVisible(false)} style={{ background: 'none', border: 'none', color: '#334155', fontSize: 11, cursor: 'pointer', fontFamily: 'DM Sans, sans-serif' }}>닫기</button>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', gap: 12 }}>
|
||||||
|
{alerts.map((a, i) => (
|
||||||
|
<div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px', borderRadius: 8, background: statusColor[a.type] + '10', border: `1px solid ${statusColor[a.type]}25`, flex: 1 }}>
|
||||||
|
<div style={{ width: 6, height: 6, borderRadius: '50%', background: statusColor[a.type], flexShrink: 0 }} />
|
||||||
|
<div style={{ flex: 1, minWidth: 0 }}>
|
||||||
|
<div style={{ fontSize: 12, color: '#e2e8f0', fontFamily: 'DM Sans, sans-serif', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{a.msg}</div>
|
||||||
|
<div style={{ fontSize: 10, color: '#334155', fontFamily: 'DM Mono, monospace' }}>{a.time}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Page header */}
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
|
||||||
|
<div>
|
||||||
|
<h1 style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 22, fontWeight: 700, color: 'white', marginBottom: 2 }}>Overview</h1>
|
||||||
|
<div style={{ fontSize: 12, color: '#334155', fontFamily: 'DM Mono, monospace' }}>2024.08.14 · 오전 10:32 업데이트</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* KPI Cards */}
|
{/* KPI Cards */}
|
||||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 16, marginBottom: 24 }}>
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginBottom: 18 }}>
|
||||||
{kpis.map((kpi) => (
|
{kpis.map((kpi) => (
|
||||||
<div key={kpi.label} className="dash-kpi" style={{
|
<div key={kpi.label} className="dash-kpi" style={{ padding: '16px 18px', borderRadius: 14, background: '#0f172a', border: '1px solid rgba(255,255,255,0.06)' }}>
|
||||||
padding: '18px 20px', borderRadius: 14,
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 }}>
|
||||||
background: '#0f172a', border: '1px solid rgba(255,255,255,0.06)',
|
<div style={{ fontSize: 11, color: '#475569', fontFamily: 'DM Sans, sans-serif', fontWeight: 500, maxWidth: 80 }}>{kpi.label}</div>
|
||||||
}}>
|
<SparkLine data={kpi.sparkline} color={kpi.color} />
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
|
|
||||||
<div style={{ fontSize: 11, color: '#475569', fontFamily: 'DM Sans, sans-serif', fontWeight: 500 }}>{kpi.label}</div>
|
|
||||||
<span style={{ fontSize: 18 }}>{kpi.icon}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div style={{ fontSize: 26, fontWeight: 700, color: 'white', fontFamily: 'DM Sans, sans-serif', marginBottom: 6 }}>
|
<div style={{ fontSize: 24, fontWeight: 700, color: 'white', fontFamily: 'DM Sans, sans-serif', marginBottom: 6 }}>{kpi.value}</div>
|
||||||
{kpi.value}
|
<div style={{ display: 'inline-flex', alignItems: 'center', gap: 3, background: kpi.up ? 'rgba(16,185,129,0.12)' : 'rgba(239,68,68,0.12)', borderRadius: 6, padding: '2px 7px', fontSize: 11, fontWeight: 700, color: kpi.up ? '#10b981' : '#ef4444', fontFamily: 'DM Mono, monospace' }}>
|
||||||
</div>
|
|
||||||
<div style={{
|
|
||||||
display: 'inline-flex', alignItems: 'center', gap: 4,
|
|
||||||
background: kpi.up ? 'rgba(16,185,129,0.12)' : 'rgba(239,68,68,0.12)',
|
|
||||||
borderRadius: 6, padding: '2px 8px',
|
|
||||||
fontSize: 11, fontWeight: 700,
|
|
||||||
color: kpi.up ? '#10b981' : '#ef4444',
|
|
||||||
fontFamily: 'DM Mono, monospace',
|
|
||||||
}}>
|
|
||||||
{kpi.up ? '↑' : '↓'} {kpi.change}
|
{kpi.up ? '↑' : '↓'} {kpi.change}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Chart + Progress */}
|
{/* Charts row */}
|
||||||
<div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 16, marginBottom: 24 }}>
|
<div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 14, marginBottom: 18 }}>
|
||||||
{/* Bar Chart */}
|
{/* Line Chart */}
|
||||||
<div style={{
|
<div style={{ padding: '20px 22px', borderRadius: 14, background: '#0f172a', border: '1px solid rgba(255,255,255,0.06)' }}>
|
||||||
padding: '22px 24px', borderRadius: 14,
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
|
||||||
background: '#0f172a', border: '1px solid rgba(255,255,255,0.06)',
|
<div style={{ fontSize: 14, fontWeight: 700, color: 'white', fontFamily: 'DM Sans, sans-serif' }}>월별 매출 & 사용자 추이</div>
|
||||||
}}>
|
<div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
|
<div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
|
||||||
<div style={{ fontSize: 14, fontWeight: 700, color: 'white', fontFamily: 'DM Sans, sans-serif' }}>
|
<div style={{ width: 20, height: 2, background: '#3b82f6', borderRadius: 2 }} />
|
||||||
월별 매출 추이
|
<span style={{ fontSize: 10, color: '#475569', fontFamily: 'DM Mono, monospace' }}>매출</span>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ display: 'flex', gap: 8 }}>
|
<div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
|
||||||
|
<div style={{ width: 20, height: 2, background: '#10b981', borderRadius: 2, backgroundImage: 'repeating-linear-gradient(90deg, #10b981 0, #10b981 4px, transparent 4px, transparent 6px)' }} />
|
||||||
|
<span style={{ fontSize: 10, color: '#475569', fontFamily: 'DM Mono, monospace' }}>사용자</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', gap: 6 }}>
|
||||||
{['1M', '3M', '6M', '1Y'].map((p) => (
|
{['1M', '3M', '6M', '1Y'].map((p) => (
|
||||||
<button key={p} style={{
|
<button key={p} style={{ background: p === '6M' ? '#1e3a5f' : 'transparent', border: 'none', color: p === '6M' ? '#60a5fa' : '#334155', padding: '3px 7px', borderRadius: 5, fontSize: 10, cursor: 'pointer', fontFamily: 'DM Mono, monospace' }}>{p}</button>
|
||||||
background: p === '6M' ? '#1e3a5f' : 'transparent',
|
|
||||||
border: 'none', color: p === '6M' ? '#60a5fa' : '#334155',
|
|
||||||
padding: '3px 8px', borderRadius: 6, fontSize: 11, cursor: 'pointer',
|
|
||||||
fontFamily: 'DM Mono, monospace',
|
|
||||||
}}>{p}</button>
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ display: 'flex', alignItems: 'flex-end', gap: 12, height: 140 }}>
|
|
||||||
{chartData.map((d, i) => (
|
|
||||||
<div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, height: '100%', justifyContent: 'flex-end' }}>
|
|
||||||
<div style={{
|
|
||||||
width: '100%', borderRadius: '4px 4px 0 0',
|
|
||||||
background: i === chartData.length - 1
|
|
||||||
? 'linear-gradient(180deg, #60a5fa, #3b82f6)'
|
|
||||||
: 'rgba(59,130,246,0.25)',
|
|
||||||
height: `${(d.value / maxVal) * 100}%`,
|
|
||||||
transition: 'height 0.6s ease',
|
|
||||||
}} />
|
|
||||||
<div style={{ fontSize: 9, color: '#334155', fontFamily: 'DM Mono, monospace' }}>{d.month}</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
|
<LineChart data={lineData} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Progress */}
|
{/* Channel Progress */}
|
||||||
<div style={{
|
<div style={{ padding: '20px 22px', borderRadius: 14, background: '#0f172a', border: '1px solid rgba(255,255,255,0.06)' }}>
|
||||||
padding: '22px 24px', borderRadius: 14,
|
<div style={{ fontSize: 14, fontWeight: 700, color: 'white', fontFamily: 'DM Sans, sans-serif', marginBottom: 18 }}>채널별 전환율</div>
|
||||||
background: '#0f172a', border: '1px solid rgba(255,255,255,0.06)',
|
{channels.map((p) => (
|
||||||
}}>
|
<div key={p.label} style={{ marginBottom: 13 }}>
|
||||||
<div style={{ fontSize: 14, fontWeight: 700, color: 'white', fontFamily: 'DM Sans, sans-serif', marginBottom: 20 }}>
|
|
||||||
채널별 전환율
|
|
||||||
</div>
|
|
||||||
{[
|
|
||||||
{ label: 'Organic Search', val: 78, color: '#3b82f6' },
|
|
||||||
{ label: 'Direct', val: 55, color: '#10b981' },
|
|
||||||
{ label: 'Social Media', val: 42, color: '#a855f7' },
|
|
||||||
{ label: 'Email', val: 34, color: '#f59e0b' },
|
|
||||||
{ label: 'Referral', val: 20, color: '#ec4899' },
|
|
||||||
].map((p) => (
|
|
||||||
<div key={p.label} style={{ marginBottom: 14 }}>
|
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 5 }}>
|
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 5 }}>
|
||||||
<span style={{ fontSize: 12, color: '#94a3b8', fontFamily: 'DM Sans, sans-serif' }}>{p.label}</span>
|
<span style={{ fontSize: 12, color: '#94a3b8', fontFamily: 'DM Sans, sans-serif' }}>{p.label}</span>
|
||||||
<span style={{ fontSize: 11, color: p.color, fontFamily: 'DM Mono, monospace', fontWeight: 500 }}>{p.val}%</span>
|
<span style={{ fontSize: 11, color: p.color, fontFamily: 'DM Mono, monospace', fontWeight: 500 }}>{p.val}%</span>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ height: 4, background: '#1e293b', borderRadius: 2, overflow: 'hidden' }}>
|
<div style={{ height: 4, background: '#1e293b', borderRadius: 2, overflow: 'hidden', position: 'relative' }}>
|
||||||
<div style={{
|
<div style={{ height: '100%', borderRadius: 2, background: `linear-gradient(90deg, ${p.color}90, ${p.color})`, width: `${p.val}%` }} />
|
||||||
height: '100%', borderRadius: 2, background: p.color,
|
|
||||||
width: `${p.val}%`, opacity: 0.8,
|
|
||||||
}} />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
{/* Donut summary */}
|
||||||
|
<div style={{ marginTop: 18, display: 'flex', alignItems: 'center', gap: 14 }}>
|
||||||
|
<svg width="52" height="52" viewBox="0 0 52 52">
|
||||||
|
{(() => {
|
||||||
|
const total = channels.reduce((s, c) => s + c.val, 0);
|
||||||
|
let offset = 0;
|
||||||
|
const r = 20;
|
||||||
|
const circ = 2 * Math.PI * r;
|
||||||
|
return channels.map((c) => {
|
||||||
|
const dash = (c.val / total) * circ;
|
||||||
|
const el = (
|
||||||
|
<circle key={c.label} cx="26" cy="26" r={r} fill="none" stroke={c.color} strokeWidth="8"
|
||||||
|
strokeDasharray={`${dash} ${circ - dash}`}
|
||||||
|
strokeDashoffset={-offset}
|
||||||
|
transform="rotate(-90 26 26)"
|
||||||
|
style={{ transition: 'stroke-dasharray 0.5s' }} />
|
||||||
|
);
|
||||||
|
offset += dash;
|
||||||
|
return el;
|
||||||
|
});
|
||||||
|
})()}
|
||||||
|
<circle cx="26" cy="26" r="12" fill="#0f172a" />
|
||||||
|
<text x="26" y="29" textAnchor="middle" fontSize="8" fill="#60a5fa" fontWeight="700">ALL</text>
|
||||||
|
</svg>
|
||||||
|
<div style={{ fontSize: 11, color: '#475569', fontFamily: 'DM Sans, sans-serif', lineHeight: 1.6 }}>
|
||||||
|
Organic 채널이<br />
|
||||||
|
<span style={{ color: '#3b82f6', fontWeight: 700 }}>최고 전환율 78%</span><br />
|
||||||
|
달성 중
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Activity Table */}
|
{/* Activity Table */}
|
||||||
<div style={{
|
<div style={{ borderRadius: 14, background: '#0f172a', border: '1px solid rgba(255,255,255,0.06)', overflow: 'hidden' }}>
|
||||||
borderRadius: 14, background: '#0f172a',
|
<div style={{ padding: '14px 18px', borderBottom: '1px solid rgba(255,255,255,0.05)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||||
border: '1px solid rgba(255,255,255,0.06)', overflow: 'hidden',
|
<div style={{ fontSize: 14, fontWeight: 700, color: 'white', fontFamily: 'DM Sans, sans-serif' }}>최근 활동</div>
|
||||||
}}>
|
<button style={{ background: 'none', border: '1px solid rgba(255,255,255,0.08)', color: '#475569', padding: '5px 12px', borderRadius: 6, fontSize: 11, cursor: 'pointer', fontFamily: 'DM Sans, sans-serif' }}>전체 보기</button>
|
||||||
<div style={{
|
|
||||||
padding: '16px 20px', borderBottom: '1px solid rgba(255,255,255,0.05)',
|
|
||||||
display: 'flex', justifyContent: 'space-between', alignItems: 'center',
|
|
||||||
}}>
|
|
||||||
<div style={{ fontSize: 14, fontWeight: 700, color: 'white', fontFamily: 'DM Sans, sans-serif' }}>
|
|
||||||
최근 활동
|
|
||||||
</div>
|
|
||||||
<button style={{
|
|
||||||
background: 'none', border: '1px solid rgba(255,255,255,0.08)',
|
|
||||||
color: '#475569', padding: '5px 12px', borderRadius: 6,
|
|
||||||
fontSize: 11, cursor: 'pointer', fontFamily: 'DM Sans, sans-serif',
|
|
||||||
}}>전체 보기</button>
|
|
||||||
</div>
|
</div>
|
||||||
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
||||||
<thead>
|
<thead>
|
||||||
<tr style={{ borderBottom: '1px solid rgba(255,255,255,0.04)' }}>
|
<tr style={{ borderBottom: '1px solid rgba(255,255,255,0.04)' }}>
|
||||||
{['사용자', '활동', '시간', '상태'].map((h) => (
|
{['사용자', '활동', '시간', '상태'].map((h) => (
|
||||||
<th key={h} style={{
|
<th key={h} style={{ padding: '9px 18px', textAlign: 'left', fontSize: 9, color: '#334155', fontFamily: 'DM Mono, monospace', letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 500 }}>{h}</th>
|
||||||
padding: '10px 20px', textAlign: 'left',
|
|
||||||
fontSize: 10, color: '#334155', fontFamily: 'DM Mono, monospace',
|
|
||||||
letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 500,
|
|
||||||
}}>{h}</th>
|
|
||||||
))}
|
))}
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{activities.map((a, i) => (
|
{activities.map((a, i) => (
|
||||||
<tr key={i} className="dash-row" style={{ borderBottom: '1px solid rgba(255,255,255,0.03)' }}>
|
<tr key={i} className="dash-row" style={{ borderBottom: '1px solid rgba(255,255,255,0.025)' }}>
|
||||||
<td style={{ padding: '12px 20px', fontFamily: 'DM Mono, monospace', fontSize: 12, color: '#60a5fa' }}>
|
<td style={{ padding: '11px 18px' }}>
|
||||||
{a.user}
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||||
|
<div style={{ width: 26, height: 26, borderRadius: '50%', background: `hsl(${i * 60}, 60%, 40%)`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, fontWeight: 700, flexShrink: 0 }}>{a.avatar}</div>
|
||||||
|
<span style={{ fontFamily: 'DM Mono, monospace', fontSize: 11, color: '#60a5fa' }}>{a.user}</span>
|
||||||
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td style={{ padding: '12px 20px', fontFamily: 'DM Sans, sans-serif', fontSize: 13, color: '#94a3b8' }}>
|
<td style={{ padding: '11px 18px', fontFamily: 'DM Sans, sans-serif', fontSize: 13, color: '#94a3b8' }}>{a.action}</td>
|
||||||
{a.action}
|
<td style={{ padding: '11px 18px', fontFamily: 'DM Mono, monospace', fontSize: 11, color: '#334155' }}>{a.time}</td>
|
||||||
</td>
|
<td style={{ padding: '11px 18px' }}>
|
||||||
<td style={{ padding: '12px 20px', fontFamily: 'DM Mono, monospace', fontSize: 11, color: '#334155' }}>
|
<div style={{ display: 'inline-flex', alignItems: 'center', gap: 5, background: statusColor[a.status] + '12', borderRadius: 6, padding: '3px 8px' }}>
|
||||||
{a.time}
|
<div style={{ width: 5, height: 5, borderRadius: '50%', background: statusColor[a.status] }} />
|
||||||
</td>
|
<span style={{ fontSize: 10, color: statusColor[a.status], fontFamily: 'DM Mono, monospace', fontWeight: 500 }}>
|
||||||
<td style={{ padding: '12px 20px' }}>
|
{a.status === 'success' ? 'OK' : a.status === 'warning' ? 'WARN' : a.status === 'error' ? 'ERR' : 'INFO'}
|
||||||
<span style={{
|
</span>
|
||||||
display: 'inline-block',
|
</div>
|
||||||
width: 6, height: 6, borderRadius: '50%',
|
|
||||||
background: statusColor[a.status as keyof typeof statusColor],
|
|
||||||
boxShadow: `0 0 6px ${statusColor[a.status as keyof typeof statusColor]}`,
|
|
||||||
}} />
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
))}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -3,11 +3,54 @@
|
|||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
|
|
||||||
|
const rankings = [
|
||||||
|
{ rank: 1, name: 'ShadowViper_KR', score: 9_842, tier: 'GRANDMASTER', wins: 312, kda: '18.4', change: '+2' },
|
||||||
|
{ rank: 2, name: 'NightFalcon', score: 9_610, tier: 'GRANDMASTER', wins: 289, kda: '15.2', change: '0' },
|
||||||
|
{ rank: 3, name: 'Xenon_X', score: 9_241, tier: 'MASTER', wins: 267, kda: '12.9', change: '+1' },
|
||||||
|
{ rank: 4, name: 'KR_Dominator', score: 8_970, tier: 'MASTER', wins: 251, kda: '11.7', change: '-1' },
|
||||||
|
{ rank: 5, name: 'Pulse_Wave', score: 8_834, tier: 'DIAMOND', wins: 238, kda: '10.3', change: '+3' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const modes = [
|
||||||
|
{ id: 'solo', name: 'SOLO', sub: '1 vs 1', desc: '순수한 실력으로 맞붙는 1대1 대결', color: '#06b6d4', players: '12,400', season: 'S7' },
|
||||||
|
{ id: 'duo', name: 'DUO', sub: '2 vs 2', desc: '파트너와 함께하는 전략적 팀플레이', color: '#a855f7', players: '28,700', season: 'S7' },
|
||||||
|
{ id: 'squad', name: 'SQUAD', sub: '5 vs 5', desc: '전략과 팀워크로 승리를 쟁취', color: '#f59e0b', players: '7,100', season: 'S7' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const recentMatches = [
|
||||||
|
{ result: 'WIN', mode: 'DUO', duration: '18:32', kills: 12, deaths: 2, assists: 8, rating: '+32' },
|
||||||
|
{ result: 'WIN', mode: 'SOLO', duration: '22:11', kills: 8, deaths: 1, assists: 4, rating: '+24' },
|
||||||
|
{ result: 'LOSS', mode: 'SQUAD', duration: '31:45', kills: 5, deaths: 5, assists: 12, rating: '-18' },
|
||||||
|
{ result: 'WIN', mode: 'DUO', duration: '15:20', kills: 15, deaths: 3, assists: 6, rating: '+40' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const champions = [
|
||||||
|
{ name: 'VIPER', role: 'Assassin', color: '#06b6d4', power: 92, winRate: '63%' },
|
||||||
|
{ name: 'KIRA', role: 'Support', color: '#ec4899', power: 78, winRate: '58%' },
|
||||||
|
{ name: 'IRON', role: 'Tank', color: '#94a3b8', power: 85, winRate: '55%' },
|
||||||
|
{ name: 'NOVA', role: 'Mage', color: '#a855f7', power: 88, winRate: '61%' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const tierColor: Record<string, string> = {
|
||||||
|
GRANDMASTER: '#fbbf24',
|
||||||
|
MASTER: '#a855f7',
|
||||||
|
DIAMOND: '#60a5fa',
|
||||||
|
};
|
||||||
|
|
||||||
|
const tierIcon = (tier: string) => (
|
||||||
|
<svg width="14" height="16" viewBox="0 0 14 16" fill="none">
|
||||||
|
<path d="M7 0L9 4L13 5L10 8.5L11 13L7 11L3 13L4 8.5L1 5L5 4Z" fill={tierColor[tier] || '#6b7280'} opacity="0.9" />
|
||||||
|
<path d="M7 2L8.5 5L12 5.8L9.5 8.2L10.2 11.8L7 10L3.8 11.8L4.5 8.2L2 5.8L5.5 5Z" fill="white" opacity="0.2" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
export default function GameSample() {
|
export default function GameSample() {
|
||||||
const [onlinePlayers, setOnlinePlayers] = useState(48_219);
|
const [onlinePlayers, setOnlinePlayers] = useState(48_219);
|
||||||
const [matchingCount, setMatchingCount] = useState(1_342);
|
const [matchingCount, setMatchingCount] = useState(1_342);
|
||||||
const [matchingActive, setMatchingActive] = useState(false);
|
const [matchingActive, setMatchingActive] = useState(false);
|
||||||
const [matchTimer, setMatchTimer] = useState(0);
|
const [matchTimer, setMatchTimer] = useState(0);
|
||||||
|
const [selectedChampion, setSelectedChampion] = useState(0);
|
||||||
|
const [seasonProgress] = useState(67);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const interval = setInterval(() => {
|
const interval = setInterval(() => {
|
||||||
@@ -20,152 +63,94 @@ export default function GameSample() {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let timer: ReturnType<typeof setInterval>;
|
let timer: ReturnType<typeof setInterval>;
|
||||||
if (matchingActive) {
|
if (matchingActive) {
|
||||||
timer = setInterval(() => {
|
timer = setInterval(() => setMatchTimer((t) => t + 1), 1000);
|
||||||
setMatchTimer((t) => t + 1);
|
|
||||||
}, 1000);
|
|
||||||
} else {
|
} else {
|
||||||
setMatchTimer(0);
|
setMatchTimer(0);
|
||||||
}
|
}
|
||||||
return () => clearInterval(timer);
|
return () => clearInterval(timer);
|
||||||
}, [matchingActive]);
|
}, [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 (
|
return (
|
||||||
<div style={{ background: '#000000', minHeight: '100vh', color: 'white', overflowX: 'hidden' }}>
|
<div style={{ background: '#000000', minHeight: '100vh', color: 'white', overflowX: 'hidden' }}>
|
||||||
<style>{`
|
<style>{`
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;500;600;700&display=swap');
|
@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 pulse-ring { 0% { transform: scale(0.97); box-shadow: 0 0 0 0 rgba(6,182,212,0.6); } 70% { transform: scale(1); box-shadow: 0 0 0 14px rgba(6,182,212,0); } 100% { transform: scale(0.97); } }
|
||||||
@keyframes scan { 0% { top: 0; } 100% { top: 100%; } }
|
@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 glitch { 0%, 90%, 100% { transform: none; clip-path: none; } 92% { transform: translate(-2px, 1px); clip-path: inset(30% 0 50% 0); } 94% { transform: translate(2px, -1px); clip-path: inset(60% 0 10% 0); } 96% { transform: translate(-1px, 0); clip-path: inset(10% 0 70% 0); } }
|
||||||
@keyframes neonFlicker { 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: 0.4; } }
|
@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 matchPulse { 0%, 100% { box-shadow: 0 0 20px rgba(6,182,212,0.4); } 50% { box-shadow: 0 0 50px rgba(6,182,212,0.9), 0 0 100px rgba(6,182,212,0.3); } }
|
||||||
@keyframes counter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
@keyframes float-particle { 0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.6; } 50% { transform: translateY(-20px) rotate(180deg); opacity: 1; } }
|
||||||
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
|
@keyframes progress-fill { from { width: 0; } to { width: var(--w); } }
|
||||||
.mode-card:hover { border-color: var(--card-color) !important; transform: translateY(-4px); }
|
.mode-card:hover { border-color: var(--card-color) !important; transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
|
||||||
.mode-card { transition: border-color 0.3s, transform 0.3s; }
|
.mode-card { transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s; }
|
||||||
.rank-row:hover { background: rgba(6,182,212,0.04) !important; }
|
.rank-row:hover { background: rgba(6,182,212,0.04) !important; }
|
||||||
.rank-row { transition: background 0.15s; }
|
.rank-row { transition: background 0.15s; }
|
||||||
|
.champ-card:hover { border-color: var(--champ-color) !important; transform: scale(1.04); }
|
||||||
|
.champ-card { transition: border-color 0.3s, transform 0.3s; cursor: pointer; }
|
||||||
|
.match-row:hover { background: rgba(255,255,255,0.03) !important; }
|
||||||
|
.match-row { transition: background 0.15s; }
|
||||||
`}</style>
|
`}</style>
|
||||||
|
|
||||||
{/* Back Banner */}
|
{/* Back Banner */}
|
||||||
<div style={{
|
<div style={{ background: 'linear-gradient(135deg, #1e1b4b, #312e81)', padding: '10px 24px', display: 'flex', alignItems: 'center', gap: 12, position: 'relative', zIndex: 200 }}>
|
||||||
background: 'linear-gradient(135deg, #1e1b4b, #312e81)',
|
<Link href="/services/website" style={{ color: '#a5b4fc', fontSize: 13, textDecoration: 'none', fontFamily: 'Rajdhani, sans-serif' }}>
|
||||||
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>
|
</Link>
|
||||||
<span style={{ color: '#4c1d95', fontSize: 13 }}>|</span>
|
<span style={{ color: '#4c1d95' }}>|</span>
|
||||||
<span style={{ color: '#06b6d4', fontSize: 12, fontFamily: 'Orbitron, sans-serif', fontWeight: 700 }}>
|
<span style={{ color: '#06b6d4', fontSize: 12, fontFamily: 'Orbitron, sans-serif', fontWeight: 700 }}>
|
||||||
SAMPLE · 게임 매칭 시스템
|
SAMPLE · 게임 매칭 시스템
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Navbar */}
|
{/* Navbar */}
|
||||||
<nav style={{
|
<nav style={{ position: 'sticky', top: 0, zIndex: 100, background: 'rgba(0,0,0,0.95)', backdropFilter: 'blur(20px)', borderBottom: '1px solid rgba(6,182,212,0.15)', padding: '0 48px', height: 60, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||||
position: 'sticky', top: 0, zIndex: 100,
|
<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' }}>
|
||||||
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
|
NEXUS ARENA
|
||||||
</div>
|
</div>
|
||||||
<div style={{ display: 'flex', gap: 28, alignItems: 'center' }}>
|
<div style={{ display: 'flex', gap: 28, alignItems: 'center' }}>
|
||||||
{['HOME', 'MATCH', 'RANK', 'SHOP', 'CLAN'].map((item) => (
|
{['HOME', 'MATCH', 'RANK', 'SHOP', 'CLAN'].map((item) => (
|
||||||
<span key={item} style={{
|
<span key={item} style={{ fontFamily: 'Orbitron, sans-serif', fontSize: 11, fontWeight: 700, color: '#1e3a5f', cursor: 'pointer', letterSpacing: '0.1em' }}>{item}</span>
|
||||||
fontFamily: 'Orbitron, sans-serif', fontSize: 11, fontWeight: 700,
|
|
||||||
color: '#1e3a5f', cursor: 'pointer', letterSpacing: '0.1em',
|
|
||||||
}}>{item}</span>
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
|
<div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
|
||||||
<div style={{
|
{/* Season pass mini */}
|
||||||
width: 6, height: 6, borderRadius: '50%',
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||||
background: '#10b981', boxShadow: '0 0 8px rgba(16,185,129,0.8)',
|
<span style={{ fontFamily: 'Orbitron, sans-serif', fontSize: 9, color: '#f59e0b', letterSpacing: '0.1em' }}>S7 PASS</span>
|
||||||
}} />
|
<div style={{ width: 60, height: 4, background: '#1a1a2e', borderRadius: 2, overflow: 'hidden' }}>
|
||||||
|
<div style={{ height: '100%', width: `${seasonProgress}%`, background: 'linear-gradient(90deg, #f59e0b, #fbbf24)', borderRadius: 2 }} />
|
||||||
|
</div>
|
||||||
|
<span style={{ fontFamily: 'Orbitron, sans-serif', fontSize: 9, color: '#f59e0b' }}>{seasonProgress}%</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ width: 1, height: 20, background: 'rgba(6,182,212,0.2)' }} />
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
||||||
|
<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 }}>
|
<span style={{ fontFamily: 'Rajdhani, sans-serif', fontSize: 13, color: '#10b981', fontWeight: 600 }}>
|
||||||
{onlinePlayers.toLocaleString()} ONLINE
|
{onlinePlayers.toLocaleString()} ONLINE
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
{/* Hero */}
|
{/* Hero */}
|
||||||
<section style={{
|
<section style={{ minHeight: '88vh', 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.09) 0%, rgba(168,85,247,0.06) 50%, transparent 100%)' }}>
|
||||||
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 */}
|
{/* Grid */}
|
||||||
<div style={{
|
<div style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(rgba(6,182,212,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(6,182,212,0.05) 1px, transparent 1px)', backgroundSize: '60px 60px' }} />
|
||||||
position: 'absolute', inset: 0,
|
{/* Scan */}
|
||||||
backgroundImage: 'linear-gradient(rgba(6,182,212,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(6,182,212,0.06) 1px, transparent 1px)',
|
<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' }} />
|
||||||
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 */}
|
{/* Floating particles */}
|
||||||
|
{[
|
||||||
|
{ left: '10%', top: '20%', size: 4, delay: '0s', color: '#06b6d4' },
|
||||||
|
{ left: '85%', top: '30%', size: 6, delay: '1s', color: '#a855f7' },
|
||||||
|
{ left: '20%', top: '70%', size: 3, delay: '2s', color: '#06b6d4' },
|
||||||
|
{ left: '75%', top: '65%', size: 5, delay: '0.5s', color: '#f59e0b' },
|
||||||
|
{ left: '50%', top: '15%', size: 3, delay: '1.5s', color: '#a855f7' },
|
||||||
|
{ left: '60%', top: '80%', size: 4, delay: '2.5s', color: '#10b981' },
|
||||||
|
].map((p, i) => (
|
||||||
|
<div key={i} style={{ position: 'absolute', left: p.left, top: p.top, width: p.size, height: p.size, borderRadius: '50%', background: p.color, boxShadow: `0 0 ${p.size * 3}px ${p.color}`, animation: `float-particle 4s ${p.delay} ease-in-out infinite` }} />
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Corner brackets */}
|
||||||
{[
|
{[
|
||||||
{ top: 40, left: 40, borderTop: '2px solid #06b6d4', borderLeft: '2px solid #06b6d4' },
|
{ top: 40, left: 40, borderTop: '2px solid #06b6d4', borderLeft: '2px solid #06b6d4' },
|
||||||
{ top: 40, right: 40, borderTop: '2px solid #a855f7', borderRight: '2px solid #a855f7' },
|
{ top: 40, right: 40, borderTop: '2px solid #a855f7', borderRight: '2px solid #a855f7' },
|
||||||
@@ -176,154 +161,172 @@ export default function GameSample() {
|
|||||||
))}
|
))}
|
||||||
|
|
||||||
<div style={{ textAlign: 'center', position: 'relative', zIndex: 1 }}>
|
<div style={{ textAlign: 'center', position: 'relative', zIndex: 1 }}>
|
||||||
<div style={{
|
<div style={{ fontFamily: 'Orbitron, sans-serif', fontSize: 11, fontWeight: 700, letterSpacing: '0.3em', color: '#06b6d4', marginBottom: 20, textTransform: 'uppercase' }}>
|
||||||
fontFamily: 'Orbitron, sans-serif', fontSize: 11, fontWeight: 700,
|
|
||||||
letterSpacing: '0.3em', color: '#06b6d4', marginBottom: 20,
|
|
||||||
textTransform: 'uppercase',
|
|
||||||
}}>
|
|
||||||
Season 7 · RANKED MATCH
|
Season 7 · RANKED MATCH
|
||||||
</div>
|
</div>
|
||||||
<h1 style={{
|
<h1 style={{ fontFamily: 'Orbitron, sans-serif', fontSize: 'clamp(48px, 8vw, 96px)', fontWeight: 900, lineHeight: 1.0, marginBottom: 16, background: 'linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.55) 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', animation: 'glitch 12s infinite' }}>
|
||||||
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 />
|
NEXUS<br />
|
||||||
<span style={{
|
<span style={{ background: 'linear-gradient(90deg, #06b6d4, #a855f7)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>ARENA</span>
|
||||||
background: 'linear-gradient(90deg, #06b6d4, #a855f7)',
|
|
||||||
WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
|
|
||||||
}}>ARENA</span>
|
|
||||||
</h1>
|
</h1>
|
||||||
<p style={{
|
<p style={{ fontFamily: 'Rajdhani, sans-serif', fontSize: 18, color: '#475569', letterSpacing: '0.05em', marginBottom: 44 }}>
|
||||||
fontFamily: 'Rajdhani, sans-serif', fontSize: 18, color: '#475569',
|
|
||||||
letterSpacing: '0.05em', marginBottom: 48,
|
|
||||||
}}>
|
|
||||||
ENTER THE ARENA. CLAIM YOUR GLORY.
|
ENTER THE ARENA. CLAIM YOUR GLORY.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
{/* Live Stats */}
|
{/* Live Stats */}
|
||||||
<div style={{ display: 'flex', gap: 32, justifyContent: 'center', marginBottom: 48 }}>
|
<div style={{ display: 'flex', gap: 24, justifyContent: 'center', marginBottom: 44 }}>
|
||||||
{[
|
{[
|
||||||
{ label: 'ONLINE', val: onlinePlayers.toLocaleString(), color: '#06b6d4' },
|
{ label: 'ONLINE', val: onlinePlayers.toLocaleString(), color: '#06b6d4' },
|
||||||
{ label: 'IN MATCH', val: matchingCount.toLocaleString(), color: '#a855f7' },
|
{ label: 'IN MATCH', val: matchingCount.toLocaleString(), color: '#a855f7' },
|
||||||
{ label: 'SERVERS', val: '24', color: '#10b981' },
|
{ label: 'SERVERS', val: '24', color: '#10b981' },
|
||||||
|
{ label: 'AVG WAIT', val: '< 30s', color: '#f59e0b' },
|
||||||
].map((s) => (
|
].map((s) => (
|
||||||
<div key={s.label} style={{
|
<div key={s.label} style={{ padding: '14px 20px', background: 'rgba(0,0,0,0.7)', backdropFilter: 'blur(8px)', border: `1px solid ${s.color}30`, borderTop: `2px solid ${s.color}`, textAlign: 'center', minWidth: 90 }}>
|
||||||
padding: '16px 24px',
|
<div style={{ fontFamily: 'Orbitron, sans-serif', fontSize: 22, fontWeight: 900, color: s.color }}>{s.val}</div>
|
||||||
background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(8px)',
|
<div style={{ fontFamily: 'Rajdhani, sans-serif', fontSize: 10, color: '#334155', letterSpacing: '0.2em', marginTop: 4 }}>{s.label}</div>
|
||||||
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>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Matching Button */}
|
{/* Match button */}
|
||||||
{!matchingActive ? (
|
{!matchingActive ? (
|
||||||
<button
|
<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' }}>
|
||||||
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
|
FIND MATCH
|
||||||
</button>
|
</button>
|
||||||
) : (
|
) : (
|
||||||
<div style={{
|
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
|
||||||
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))' }}>
|
||||||
}}>
|
|
||||||
<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')}
|
MATCHING... {String(Math.floor(matchTimer / 60)).padStart(2, '0')}:{String(matchTimer % 60).padStart(2, '0')}
|
||||||
</div>
|
</div>
|
||||||
<button onClick={() => setMatchingActive(false)} style={{
|
<button onClick={() => setMatchingActive(false)} style={{ background: 'none', border: 'none', color: '#334155', fontFamily: 'Rajdhani, sans-serif', fontSize: 13, cursor: 'pointer', letterSpacing: '0.1em', textDecoration: 'underline' }}>
|
||||||
background: 'none', border: 'none', color: '#334155',
|
CANCEL SEARCH
|
||||||
fontFamily: 'Rajdhani, sans-serif', fontSize: 13, cursor: 'pointer',
|
|
||||||
letterSpacing: '0.1em', textDecoration: 'underline',
|
|
||||||
}}>
|
|
||||||
CANCEL
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Game Modes */}
|
{/* Season Pass */}
|
||||||
<section style={{ padding: '60px 48px', background: 'rgba(0,0,0,0.8)' }}>
|
<section style={{ padding: '40px 48px', background: 'rgba(0,0,0,0.9)', borderTop: '1px solid rgba(251,191,36,0.15)', borderBottom: '1px solid rgba(251,191,36,0.15)' }}>
|
||||||
<div style={{ maxWidth: 1100, margin: '0 auto' }}>
|
<div style={{ maxWidth: 1100, margin: '0 auto' }}>
|
||||||
<div style={{ textAlign: 'center', marginBottom: 40 }}>
|
<div style={{ display: 'flex', alignItems: 'center', gap: 32 }}>
|
||||||
<h2 style={{
|
<div style={{ flexShrink: 0 }}>
|
||||||
fontFamily: 'Orbitron, sans-serif', fontSize: 28, fontWeight: 900,
|
<div style={{ fontFamily: 'Orbitron, sans-serif', fontSize: 11, fontWeight: 700, color: '#f59e0b', letterSpacing: '0.2em', marginBottom: 4 }}>SEASON 7 PASS</div>
|
||||||
color: 'white', letterSpacing: '0.05em', marginBottom: 8,
|
<div style={{ fontFamily: 'Rajdhani, sans-serif', fontSize: 28, fontWeight: 700, color: 'white' }}>
|
||||||
}}>
|
Lv. <span style={{ color: '#f59e0b' }}>42</span>
|
||||||
|
<span style={{ fontSize: 14, color: '#475569', marginLeft: 8 }}>/ 100</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ flex: 1 }}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
|
||||||
|
<span style={{ fontFamily: 'Rajdhani, sans-serif', fontSize: 12, color: '#475569' }}>{seasonProgress}% 완료</span>
|
||||||
|
<span style={{ fontFamily: 'Orbitron, sans-serif', fontSize: 10, color: '#f59e0b' }}>다음 보상까지 1,840 XP</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ height: 8, background: '#0d0d1a', borderRadius: 4, overflow: 'hidden', border: '1px solid rgba(251,191,36,0.15)' }}>
|
||||||
|
<div style={{ height: '100%', width: `${seasonProgress}%`, background: 'linear-gradient(90deg, #d97706, #fbbf24, #f59e0b)', borderRadius: 4, boxShadow: '0 0 12px rgba(251,191,36,0.4)' }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', gap: 12, flexShrink: 0 }}>
|
||||||
|
{['스킨 3개', '이모트 5개', '칭호 2개', '골드 5,000'].map((reward) => (
|
||||||
|
<div key={reward} style={{ padding: '6px 12px', background: 'rgba(251,191,36,0.08)', border: '1px solid rgba(251,191,36,0.2)', borderRadius: 4 }}>
|
||||||
|
<span style={{ fontFamily: 'Rajdhani, sans-serif', fontSize: 11, color: '#fbbf24', fontWeight: 600 }}>{reward}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Champion Select */}
|
||||||
|
<section style={{ padding: '60px 48px', background: '#000000' }}>
|
||||||
|
<div style={{ maxWidth: 1100, margin: '0 auto' }}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 28 }}>
|
||||||
|
<div>
|
||||||
|
<div style={{ fontFamily: 'Orbitron, sans-serif', fontSize: 9, color: '#06b6d4', letterSpacing: '0.2em', marginBottom: 8 }}>// ROSTER</div>
|
||||||
|
<h2 style={{ fontFamily: 'Orbitron, sans-serif', fontSize: 22, fontWeight: 900, letterSpacing: '0.05em', color: 'white' }}>
|
||||||
|
CHAMPIONS<span style={{ color: '#06b6d4' }}>.</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<button style={{ background: 'none', border: '1px solid rgba(6,182,212,0.3)', color: '#06b6d4', padding: '7px 16px', borderRadius: 3, fontFamily: 'Orbitron, sans-serif', fontSize: 10, cursor: 'pointer', letterSpacing: '0.1em' }}>
|
||||||
|
ALL CHAMPIONS →
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
|
||||||
|
{champions.map((c, i) => (
|
||||||
|
<div
|
||||||
|
key={c.name}
|
||||||
|
className="champ-card"
|
||||||
|
onClick={() => setSelectedChampion(i)}
|
||||||
|
// @ts-expect-error CSS variable
|
||||||
|
style={{ '--champ-color': c.color, border: `1px solid ${selectedChampion === i ? c.color : c.color + '25'}`, borderRadius: 6, padding: '22px 18px', background: selectedChampion === i ? c.color + '10' : 'rgba(0,0,0,0.6)', position: 'relative', overflow: 'hidden' }}
|
||||||
|
>
|
||||||
|
{selectedChampion === i && (
|
||||||
|
<div style={{ position: 'absolute', top: 8, right: 8 }}>
|
||||||
|
<div style={{ fontFamily: 'Orbitron, sans-serif', fontSize: 8, color: c.color, border: `1px solid ${c.color}60`, padding: '1px 6px', borderRadius: 2, letterSpacing: '0.1em' }}>SELECTED</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 2, background: `linear-gradient(90deg, transparent, ${c.color}, transparent)` }} />
|
||||||
|
{/* Champion SVG silhouette */}
|
||||||
|
<div style={{ width: 56, height: 56, borderRadius: '50%', background: c.color + '20', border: `2px solid ${c.color}40`, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 14 }}>
|
||||||
|
<svg width="28" height="28" viewBox="0 0 28 28" fill="none">
|
||||||
|
<circle cx="14" cy="8" r="5" fill={c.color} opacity="0.8" />
|
||||||
|
<path d="M5 28C5 21 9 18 14 18C19 18 23 21 23 28" fill={c.color} opacity="0.6" />
|
||||||
|
<rect x="10" y="18" width="8" height="2" rx="1" fill={c.color} opacity="0.4" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div style={{ fontFamily: 'Orbitron, sans-serif', fontSize: 16, fontWeight: 900, color: 'white', marginBottom: 4 }}>{c.name}</div>
|
||||||
|
<div style={{ fontFamily: 'Rajdhani, sans-serif', fontSize: 12, color: c.color, letterSpacing: '0.1em', fontWeight: 600, marginBottom: 14 }}>{c.role}</div>
|
||||||
|
<div style={{ marginBottom: 10 }}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
|
||||||
|
<span style={{ fontFamily: 'Orbitron, sans-serif', fontSize: 8, color: '#334155', letterSpacing: '0.1em' }}>POWER</span>
|
||||||
|
<span style={{ fontFamily: 'Orbitron, sans-serif', fontSize: 9, color: c.color }}>{c.power}</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ height: 3, background: '#0d0d1a', borderRadius: 2, overflow: 'hidden' }}>
|
||||||
|
<div style={{ height: '100%', background: c.color, width: `${c.power}%`, boxShadow: `0 0 6px ${c.color}` }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ fontFamily: 'Rajdhani, sans-serif', fontSize: 12, color: '#475569' }}>
|
||||||
|
Win Rate: <span style={{ color: '#10b981', fontWeight: 700 }}>{c.winRate}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Game Modes */}
|
||||||
|
<section style={{ padding: '56px 48px', background: 'rgba(0,0,0,0.85)' }}>
|
||||||
|
<div style={{ maxWidth: 1100, margin: '0 auto' }}>
|
||||||
|
<div style={{ textAlign: 'center', marginBottom: 36 }}>
|
||||||
|
<h2 style={{ fontFamily: 'Orbitron, sans-serif', fontSize: 26, fontWeight: 900, color: 'white', letterSpacing: '0.05em', marginBottom: 8 }}>
|
||||||
GAME MODES
|
GAME MODES
|
||||||
</h2>
|
</h2>
|
||||||
<div style={{ width: 60, height: 2, background: 'linear-gradient(90deg, #06b6d4, #a855f7)', margin: '0 auto' }} />
|
<div style={{ width: 60, height: 2, background: 'linear-gradient(90deg, #06b6d4, #a855f7)', margin: '0 auto' }} />
|
||||||
</div>
|
</div>
|
||||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 20 }}>
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
|
||||||
{modes.map((mode) => (
|
{modes.map((mode) => (
|
||||||
<div
|
<div key={mode.id} className="mode-card"
|
||||||
key={mode.id}
|
|
||||||
className="mode-card"
|
|
||||||
// @ts-expect-error CSS variable
|
// @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' }}
|
style={{ '--card-color': mode.color, border: `1px solid ${mode.color}25`, borderRadius: 4, padding: '28px 24px', background: 'rgba(0,0,0,0.7)', 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={{
|
{/* Mode icon */}
|
||||||
position: 'absolute', top: 0, left: 0, right: 0, height: 2,
|
<div style={{ width: 44, height: 44, borderRadius: '50%', background: mode.color + '15', border: `1px solid ${mode.color}35`, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
|
||||||
background: `linear-gradient(90deg, transparent, ${mode.color}, transparent)`,
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||||
}} />
|
{mode.id === 'solo' && <polygon points="10,2 18,18 2,18" fill={mode.color} opacity="0.9" />}
|
||||||
<div style={{
|
{mode.id === 'duo' && <><circle cx="7" cy="10" r="5" fill={mode.color} opacity="0.9" /><circle cx="13" cy="10" r="5" fill={mode.color} opacity="0.5" /></>}
|
||||||
fontSize: 36, marginBottom: 16, color: mode.color,
|
{mode.id === 'squad' && <><rect x="2" y="2" width="7" height="7" rx="2" fill={mode.color} opacity="0.9" /><rect x="11" y="2" width="7" height="7" rx="2" fill={mode.color} opacity="0.6" /><rect x="2" y="11" width="7" height="7" rx="2" fill={mode.color} opacity="0.6" /><rect x="11" y="11" width="7" height="7" rx="2" fill={mode.color} opacity="0.4" /></>}
|
||||||
textShadow: `0 0 20px ${mode.color}`,
|
</svg>
|
||||||
}}>{mode.icon}</div>
|
</div>
|
||||||
<div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 8 }}>
|
<div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 8 }}>
|
||||||
<div style={{
|
<div style={{ fontFamily: 'Orbitron, sans-serif', fontSize: 22, fontWeight: 900, color: 'white' }}>{mode.name}</div>
|
||||||
fontFamily: 'Orbitron, sans-serif', fontSize: 24, fontWeight: 900, color: 'white',
|
<div style={{ fontFamily: 'Rajdhani, sans-serif', fontSize: 13, color: mode.color, fontWeight: 700, letterSpacing: '0.1em' }}>{mode.sub}</div>
|
||||||
}}>{mode.name}</div>
|
|
||||||
<div style={{
|
|
||||||
fontFamily: 'Rajdhani, sans-serif', fontSize: 13, color: mode.color,
|
|
||||||
fontWeight: 700, letterSpacing: '0.1em',
|
|
||||||
}}>{mode.sub}</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div style={{
|
<div style={{ fontFamily: 'Rajdhani, sans-serif', fontSize: 15, color: '#475569', lineHeight: 1.5, marginBottom: 20 }}>{mode.desc}</div>
|
||||||
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={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||||
<div style={{
|
<div>
|
||||||
fontFamily: 'Orbitron, sans-serif', fontSize: 11,
|
<div style={{ fontFamily: 'Orbitron, sans-serif', fontSize: 11, color: mode.color, letterSpacing: '0.08em' }}>{mode.players} IN QUEUE</div>
|
||||||
color: mode.color, letterSpacing: '0.1em',
|
<div style={{ fontFamily: 'Rajdhani, sans-serif', fontSize: 10, color: '#1e3a5f', letterSpacing: '0.1em' }}>AVG WAIT: < 30s</div>
|
||||||
}}>
|
|
||||||
{mode.players} IN QUEUE
|
|
||||||
</div>
|
</div>
|
||||||
<button style={{
|
<button style={{ background: `${mode.color}20`, border: `1px solid ${mode.color}50`, color: mode.color, padding: '7px 18px', borderRadius: 2, fontSize: 11, fontWeight: 700, cursor: 'pointer', fontFamily: 'Orbitron, sans-serif', letterSpacing: '0.08em' }}>
|
||||||
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 →
|
PLAY →
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -333,102 +336,90 @@ export default function GameSample() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
{/* Rankings + Recent Matches */}
|
||||||
|
<section style={{ padding: '56px 48px', background: '#000000' }}>
|
||||||
|
<div style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 24 }}>
|
||||||
{/* Rankings */}
|
{/* Rankings */}
|
||||||
<section style={{ padding: '60px 48px', background: '#000000' }}>
|
<div>
|
||||||
<div style={{ maxWidth: 900, margin: '0 auto' }}>
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 32 }}>
|
<h2 style={{ fontFamily: 'Orbitron, sans-serif', fontSize: 20, fontWeight: 900, letterSpacing: '0.05em', color: 'white' }}>
|
||||||
<h2 style={{
|
|
||||||
fontFamily: 'Orbitron, sans-serif', fontSize: 24, fontWeight: 900,
|
|
||||||
letterSpacing: '0.05em', color: 'white',
|
|
||||||
}}>
|
|
||||||
GLOBAL RANKING<span style={{ color: '#06b6d4' }}>.</span>
|
GLOBAL RANKING<span style={{ color: '#06b6d4' }}>.</span>
|
||||||
</h2>
|
</h2>
|
||||||
<div style={{
|
<div style={{ fontFamily: 'Rajdhani, sans-serif', fontSize: 11, color: '#1e3a5f', letterSpacing: '0.1em' }}>Season 7 · Top 100</div>
|
||||||
fontFamily: 'Rajdhani, sans-serif', fontSize: 13, color: '#1e3a5f',
|
|
||||||
letterSpacing: '0.1em', textTransform: 'uppercase',
|
|
||||||
}}>
|
|
||||||
Season 7 · Top 100
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div style={{ border: '1px solid rgba(6,182,212,0.12)', borderRadius: 4, overflow: 'hidden' }}>
|
||||||
<div style={{
|
<div style={{ display: 'grid', gridTemplateColumns: '52px 1fr 88px 60px 60px', padding: '9px 16px', borderBottom: '1px solid rgba(6,182,212,0.1)', background: 'rgba(6,182,212,0.05)' }}>
|
||||||
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) => (
|
{['RANK', 'PLAYER', 'SCORE', 'WINS', 'K/D/A'].map((h) => (
|
||||||
<div key={h} style={{
|
<div key={h} style={{ fontFamily: 'Orbitron, sans-serif', fontSize: 8, color: '#06b6d4', letterSpacing: '0.15em' }}>{h}</div>
|
||||||
fontFamily: 'Orbitron, sans-serif', fontSize: 9, color: '#06b6d4',
|
|
||||||
letterSpacing: '0.15em',
|
|
||||||
}}>{h}</div>
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
{rankings.map((r, i) => (
|
{rankings.map((r, i) => (
|
||||||
<div
|
<div key={i} className="rank-row" style={{ display: 'grid', gridTemplateColumns: '52px 1fr 88px 60px 60px', padding: '13px 16px', borderBottom: i < rankings.length - 1 ? '1px solid rgba(255,255,255,0.03)' : 'none', alignItems: 'center' }}>
|
||||||
key={i}
|
<div style={{ fontFamily: 'Orbitron, sans-serif', fontSize: 18, fontWeight: 900, color: i === 0 ? '#fbbf24' : i === 1 ? '#9ca3af' : i === 2 ? '#cd7c2f' : '#1e3a5f' }}>
|
||||||
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}
|
{r.rank < 10 ? `0${r.rank}` : r.rank}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div style={{ fontFamily: 'Rajdhani, sans-serif', fontSize: 15, fontWeight: 700, color: 'white' }}>
|
<div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 3 }}>
|
||||||
{r.name}
|
{tierIcon(r.tier)}
|
||||||
|
<span style={{ fontFamily: 'Rajdhani, sans-serif', fontSize: 14, fontWeight: 700, color: 'white' }}>{r.name}</span>
|
||||||
</div>
|
</div>
|
||||||
<div style={{
|
<div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
|
||||||
display: 'inline-block', marginTop: 2,
|
<span style={{ fontFamily: 'Orbitron, sans-serif', fontSize: 7, color: tierColor[r.tier] || '#6b7280', border: `1px solid ${tierColor[r.tier] || '#6b7280'}40`, padding: '1px 5px', letterSpacing: '0.08em' }}>{r.tier}</span>
|
||||||
fontFamily: 'Orbitron, sans-serif', fontSize: 8, fontWeight: 700,
|
<span style={{ fontFamily: 'Orbitron, sans-serif', fontSize: 9, color: r.change.startsWith('+') ? '#10b981' : r.change === '0' ? '#334155' : '#ef4444' }}>
|
||||||
color: tierColor[r.tier] || '#6b7280',
|
{r.change === '0' ? '–' : r.change}
|
||||||
border: `1px solid ${tierColor[r.tier] || '#6b7280'}40`,
|
</span>
|
||||||
padding: '1px 6px', letterSpacing: '0.1em',
|
|
||||||
}}>{r.tier}</div>
|
|
||||||
</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>
|
||||||
<div style={{ fontFamily: 'Orbitron, sans-serif', fontSize: 13, color: '#10b981' }}>
|
<div style={{ fontFamily: 'Orbitron, sans-serif', fontSize: 13, fontWeight: 700, color: '#06b6d4' }}>{r.score.toLocaleString()}</div>
|
||||||
{r.kda}
|
<div style={{ fontFamily: 'Rajdhani, sans-serif', fontSize: 13, color: '#475569', fontWeight: 600 }}>{r.wins}</div>
|
||||||
|
<div style={{ fontFamily: 'Orbitron, sans-serif', fontSize: 12, color: '#10b981' }}>{r.kda}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Recent Matches */}
|
||||||
|
<div>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
|
||||||
|
<h2 style={{ fontFamily: 'Orbitron, sans-serif', fontSize: 20, fontWeight: 900, letterSpacing: '0.05em', color: 'white' }}>
|
||||||
|
RECENT MATCHES<span style={{ color: '#a855f7' }}>.</span>
|
||||||
|
</h2>
|
||||||
|
<div style={{ fontFamily: 'Rajdhani, sans-serif', fontSize: 11, color: '#1e3a5f', letterSpacing: '0.1em' }}>Last 10 games</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||||||
|
{recentMatches.map((m, i) => (
|
||||||
|
<div key={i} className="match-row" style={{ display: 'grid', gridTemplateColumns: '64px 1fr auto', gap: 12, alignItems: 'center', padding: '14px 16px', border: `1px solid ${m.result === 'WIN' ? 'rgba(16,185,129,0.15)' : 'rgba(239,68,68,0.15)'}`, borderLeft: `3px solid ${m.result === 'WIN' ? '#10b981' : '#ef4444'}`, borderRadius: 4, background: m.result === 'WIN' ? 'rgba(16,185,129,0.04)' : 'rgba(239,68,68,0.04)', cursor: 'default' }}>
|
||||||
|
<div>
|
||||||
|
<div style={{ fontFamily: 'Orbitron, sans-serif', fontSize: 13, fontWeight: 900, color: m.result === 'WIN' ? '#10b981' : '#ef4444' }}>{m.result}</div>
|
||||||
|
<div style={{ fontFamily: 'Orbitron, sans-serif', fontSize: 8, color: '#334155', letterSpacing: '0.1em', marginTop: 2 }}>{m.mode}</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div style={{ fontFamily: 'Rajdhani, sans-serif', fontSize: 15, color: 'white', fontWeight: 700 }}>
|
||||||
|
{m.kills} / {m.deaths} / {m.assists}
|
||||||
|
<span style={{ fontSize: 11, color: '#475569', marginLeft: 6 }}>K/D/A</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ fontFamily: 'Orbitron, sans-serif', fontSize: 9, color: '#334155', marginTop: 2 }}>{m.duration}</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ fontFamily: 'Orbitron, sans-serif', fontSize: 14, fontWeight: 900, color: m.rating.startsWith('+') ? '#10b981' : '#ef4444', textAlign: 'right' }}>
|
||||||
|
{m.rating}
|
||||||
|
<div style={{ fontSize: 8, color: '#334155', letterSpacing: '0.1em' }}>RATING</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Footer */}
|
{/* Footer */}
|
||||||
<footer style={{
|
<footer style={{ background: '#000000', borderTop: '1px solid rgba(6,182,212,0.08)', padding: '24px 48px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||||
background: '#000000', borderTop: '1px solid rgba(6,182,212,0.1)',
|
<div style={{ fontFamily: 'Orbitron, sans-serif', fontSize: 14, fontWeight: 900, color: '#1e3a5f', letterSpacing: '0.1em' }}>NEXUS ARENA</div>
|
||||||
padding: '24px 48px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
|
<div style={{ fontFamily: 'Rajdhani, sans-serif', fontSize: 11, color: '#1e293b', letterSpacing: '0.1em' }}>
|
||||||
}}>
|
|
||||||
<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.
|
© 2024 NEXUS ARENA STUDIOS. ALL RIGHTS RESERVED.
|
||||||
</div>
|
</div>
|
||||||
<div style={{ display: 'flex', gap: 16 }}>
|
<div style={{ display: 'flex', gap: 16 }}>
|
||||||
{['Twitter', 'Discord', 'YouTube'].map((s) => (
|
{['Twitter', 'Discord', 'YouTube', 'Twitch'].map((s) => (
|
||||||
<span key={s} style={{
|
<span key={s} style={{ fontFamily: 'Rajdhani, sans-serif', fontSize: 12, color: '#1e3a5f', cursor: 'pointer', letterSpacing: '0.05em' }}>{s}</span>
|
||||||
fontFamily: 'Rajdhani, sans-serif', fontSize: 12, color: '#1e3a5f',
|
|
||||||
cursor: 'pointer', letterSpacing: '0.05em',
|
|
||||||
}}>{s}</span>
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|||||||
@@ -3,34 +3,57 @@
|
|||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
|
|
||||||
export default function PortfolioSample() {
|
const awards = [
|
||||||
const [hoveredProject, setHoveredProject] = useState<number | null>(null);
|
{ name: 'Awwwards SOTD', count: '× 2', color: '#f59e0b' },
|
||||||
|
{ name: 'CSS Design Awards', count: 'Winner', color: '#06b6d4' },
|
||||||
|
{ name: 'Adobe Design Award', count: '은상', color: '#ec4899' },
|
||||||
|
{ name: 'Google UX Cert.', count: '2023', color: '#34d399' },
|
||||||
|
];
|
||||||
|
|
||||||
const skills = [
|
const services = [
|
||||||
{ name: 'Figma', level: 98 },
|
{ title: 'UI/UX Design', desc: '사용자 중심의 인터페이스 설계와 프로토타입', icon: 'M', color: '#00ff88' },
|
||||||
{ name: 'React', level: 90 },
|
{ title: 'Creative Development', desc: 'Three.js · WebGL · 몰입형 웹 경험 구현', icon: 'C', color: '#a855f7' },
|
||||||
{ name: 'TypeScript', level: 85 },
|
{ title: 'Brand Identity', desc: '로고부터 브랜드 시스템 전체 디자인', icon: 'B', color: '#06b6d4' },
|
||||||
{ name: 'After Effects', level: 88 },
|
{ title: 'Motion Design', desc: 'After Effects · Lottie 모션 에셋 제작', icon: 'M', color: '#f59e0b' },
|
||||||
{ name: 'Three.js', level: 75 },
|
];
|
||||||
{ name: 'Framer', level: 92 },
|
|
||||||
];
|
|
||||||
|
|
||||||
const projects = [
|
const projects = [
|
||||||
{ title: 'NEON CITY UI', desc: '사이버펑크 게임 인터페이스', gradient: 'linear-gradient(135deg, #00ff88, #00d4ff)', tag: 'UI/UX' },
|
{ title: 'NEON CITY UI', desc: '사이버펑크 게임 인터페이스 디자인. 넥슨 신작 게임의 전체 UI 시스템 구축', gradient: 'linear-gradient(135deg, #00ff88, #00d4ff)', tag: 'UI/UX', year: '2024', featured: true },
|
||||||
{ title: 'FLOW BRAND', desc: '핀테크 스타트업 브랜딩', gradient: 'linear-gradient(135deg, #a855f7, #ec4899)', tag: 'Branding' },
|
{ title: 'FLOW BRAND', desc: '핀테크 스타트업 브랜딩 — 시리즈 B 투자유치 직전 리브랜딩', gradient: 'linear-gradient(135deg, #a855f7, #ec4899)', tag: 'Branding', year: '2024', featured: false },
|
||||||
{ title: 'ORBITAL APP', desc: '위성 추적 대시보드', gradient: 'linear-gradient(135deg, #3b82f6, #06b6d4)', tag: 'Web App' },
|
{ title: 'ORBITAL APP', desc: '위성 추적 실시간 대시보드 — NASA 오픈 API 활용', gradient: 'linear-gradient(135deg, #3b82f6, #06b6d4)', tag: 'Web App', year: '2023', featured: false },
|
||||||
{ title: 'TERRA SHOP', desc: '친환경 D2C 쇼핑몰', gradient: 'linear-gradient(135deg, #22c55e, #84cc16)', tag: 'E-commerce' },
|
{ title: 'TERRA SHOP', desc: '친환경 D2C 쇼핑몰 — 전환율 340% 개선 달성', gradient: 'linear-gradient(135deg, #22c55e, #84cc16)', tag: 'E-commerce', year: '2023', featured: false },
|
||||||
{ title: 'PULSE MOTION', desc: '모션 그래픽 패키지', gradient: 'linear-gradient(135deg, #f59e0b, #ef4444)', tag: 'Motion' },
|
{ title: 'PULSE MOTION', desc: '글로벌 광고 에이전시를 위한 모션 그래픽 패키지', gradient: 'linear-gradient(135deg, #f59e0b, #ef4444)', tag: 'Motion', year: '2023', featured: false },
|
||||||
{ title: 'AXIS SYSTEM', desc: '물류 관리 SaaS', gradient: 'linear-gradient(135deg, #64748b, #475569)', tag: 'Dashboard' },
|
{ title: 'AXIS SYSTEM', desc: '스타트업 물류 관리 SaaS — 현재 MAU 12만', gradient: 'linear-gradient(135deg, #64748b, #475569)', tag: 'Dashboard', year: '2022', featured: false },
|
||||||
];
|
];
|
||||||
|
|
||||||
const timeline = [
|
const skills = [
|
||||||
|
{ name: 'Figma', level: 98, category: 'Design' },
|
||||||
|
{ name: 'Framer', level: 92, category: 'Design' },
|
||||||
|
{ name: 'After Effects', level: 88, category: 'Motion' },
|
||||||
|
{ name: 'React', level: 90, category: 'Code' },
|
||||||
|
{ name: 'TypeScript', level: 85, category: 'Code' },
|
||||||
|
{ name: 'Three.js', level: 75, category: 'Code' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const timeline = [
|
||||||
{ year: '2023', event: 'Google UX Design Certificate 취득', type: 'award' },
|
{ year: '2023', event: 'Google UX Design Certificate 취득', type: 'award' },
|
||||||
{ year: '2022', event: 'Awwwards SOTD 2회 수상', type: 'award' },
|
{ year: '2022', event: 'Awwwards SOTD 2회 수상', type: 'award' },
|
||||||
{ year: '2021', event: 'LINE Corp. UI 디자이너 입사', type: 'career' },
|
{ year: '2021', event: 'LINE Corp. UI 디자이너 입사', type: 'career' },
|
||||||
{ year: '2020', event: 'Hongik University 시각디자인과 졸업', type: 'edu' },
|
{ year: '2020', event: 'Hongik University 시각디자인과 졸업', type: 'edu' },
|
||||||
{ year: '2019', event: 'Adobe Design Award Korea 은상', type: 'award' },
|
{ year: '2019', event: 'Adobe Design Award Korea 은상', type: 'award' },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
const testimonials = [
|
||||||
|
{ client: 'Joon Park', role: 'CEO, FlowTech', text: 'Jisu가 리디자인한 결과물로 투자 피칭에서 VC들의 반응이 완전히 달라졌습니다. 결과적으로 시리즈 B 클로징에 큰 역할을 했어요.' },
|
||||||
|
{ client: 'Yuna Kim', role: 'Product Lead, Orbital', text: '기술적인 복잡함을 이렇게 아름다운 인터페이스로 풀어낼 수 있다는 게 놀라웠습니다. 유저 피드백 NPS가 34점 올랐습니다.' },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function PortfolioSample() {
|
||||||
|
const [hoveredProject, setHoveredProject] = useState<number | null>(null);
|
||||||
|
const [activeCategory, setActiveCategory] = useState<string>('All');
|
||||||
|
|
||||||
|
const categories = ['All', 'UI/UX', 'Branding', 'Web App', 'Motion'];
|
||||||
|
const filteredProjects = activeCategory === 'All' ? projects : projects.filter(p => p.tag === activeCategory);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ background: '#000000', minHeight: '100vh', color: 'white' }}>
|
<div style={{ background: '#000000', minHeight: '100vh', color: 'white' }}>
|
||||||
@@ -41,198 +64,234 @@ export default function PortfolioSample() {
|
|||||||
@keyframes glow { 0%, 100% { text-shadow: 0 0 20px rgba(0,255,136,0.5); } 50% { text-shadow: 0 0 40px rgba(0,255,136,0.9), 0 0 80px rgba(0,255,136,0.3); } }
|
@keyframes glow { 0%, 100% { text-shadow: 0 0 20px rgba(0,255,136,0.5); } 50% { text-shadow: 0 0 40px rgba(0,255,136,0.9), 0 0 80px rgba(0,255,136,0.3); } }
|
||||||
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
|
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
|
||||||
@keyframes slideBar { from { width: 0; } to { width: 100%; } }
|
@keyframes slideBar { from { width: 0; } to { width: 100%; } }
|
||||||
.proj-card:hover { border-color: rgba(0,255,136,0.4) !important; }
|
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
|
||||||
.proj-card { transition: border-color 0.3s; }
|
@keyframes pulse-green { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,255,136,0.4); } 50% { box-shadow: 0 0 0 6px rgba(0,255,136,0); } }
|
||||||
|
.proj-card { transition: border-color 0.3s, transform 0.3s; }
|
||||||
|
.proj-card:hover { border-color: rgba(0,255,136,0.3) !important; transform: translateY(-4px); }
|
||||||
|
.service-card { transition: background 0.3s, border-color 0.3s; }
|
||||||
|
.service-card:hover { background: rgba(255,255,255,0.04) !important; }
|
||||||
|
.cat-btn { transition: background 0.2s, color 0.2s; cursor: pointer; }
|
||||||
|
.cat-btn:hover { color: white !important; }
|
||||||
|
.award-badge { transition: transform 0.2s; }
|
||||||
|
.award-badge:hover { transform: translateY(-2px); }
|
||||||
`}</style>
|
`}</style>
|
||||||
|
|
||||||
{/* Back Banner */}
|
{/* Back Banner */}
|
||||||
<div style={{
|
<div style={{ background: 'linear-gradient(135deg, #1e1b4b, #312e81)', padding: '10px 24px', display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||||
background: 'linear-gradient(135deg, #1e1b4b, #312e81)',
|
<Link href="/services/website" style={{ color: '#a5b4fc', fontSize: 13, textDecoration: 'none', fontFamily: 'Space Grotesk, sans-serif' }}>
|
||||||
padding: '10px 24px', display: 'flex', alignItems: 'center', gap: 12,
|
|
||||||
}}>
|
|
||||||
<Link href="/services/website" style={{
|
|
||||||
color: '#a5b4fc', fontSize: 13, textDecoration: 'none',
|
|
||||||
fontFamily: 'Space Grotesk, sans-serif',
|
|
||||||
}}>
|
|
||||||
← 홈페이지 제작 서비스로 돌아가기
|
← 홈페이지 제작 서비스로 돌아가기
|
||||||
</Link>
|
</Link>
|
||||||
<span style={{ color: '#4c1d95', fontSize: 13 }}>|</span>
|
<span style={{ color: '#4c1d95' }}>|</span>
|
||||||
<span style={{ color: '#00ff88', fontSize: 12, fontFamily: 'Space Mono, monospace', fontWeight: 700 }}>
|
<span style={{ color: '#00ff88', fontSize: 12, fontFamily: 'Space Mono, monospace', fontWeight: 700 }}>
|
||||||
SAMPLE · 개인 포트폴리오
|
SAMPLE · 개인 포트폴리오
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Awards Marquee */}
|
||||||
|
<div style={{ background: '#050505', borderBottom: '1px solid rgba(0,255,136,0.12)', padding: '10px 0', overflow: 'hidden' }}>
|
||||||
|
<div style={{ display: 'flex', gap: 48, animation: 'marquee 18s linear infinite', width: 'fit-content' }}>
|
||||||
|
{[...awards, ...awards].map((a, i) => (
|
||||||
|
<div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
|
||||||
|
<svg width="12" height="12" viewBox="0 0 12 12"><path d="M6 1l1.3 2.6L10 4.1 8 6.1l.5 2.9L6 7.6 3.5 9l.5-2.9-2-2 2.7-.5z" fill={a.color} /></svg>
|
||||||
|
<span style={{ fontFamily: 'Space Mono, monospace', fontSize: 11, color: a.color, fontWeight: 700, letterSpacing: '0.1em', whiteSpace: 'nowrap' }}>{a.name}</span>
|
||||||
|
<span style={{ fontFamily: 'Space Mono, monospace', fontSize: 10, color: '#374151' }}>{a.count}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Navbar */}
|
{/* Navbar */}
|
||||||
<nav style={{
|
<nav style={{
|
||||||
position: 'sticky', top: 0, zIndex: 100,
|
position: 'sticky', top: 0, zIndex: 100,
|
||||||
background: 'rgba(0,0,0,0.9)', backdropFilter: 'blur(20px)',
|
background: 'rgba(0,0,0,0.92)', backdropFilter: 'blur(20px)',
|
||||||
borderBottom: '1px solid rgba(0,255,136,0.15)',
|
borderBottom: '1px solid rgba(0,255,136,0.1)',
|
||||||
padding: '0 48px', height: 64,
|
padding: '0 48px', height: 64,
|
||||||
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||||||
}}>
|
}}>
|
||||||
<div style={{
|
<div style={{ fontFamily: 'Space Mono, monospace', fontSize: 15, fontWeight: 700, color: '#00ff88', letterSpacing: '-0.02em', animation: 'glow 3s ease-in-out infinite' }}>
|
||||||
fontFamily: 'Space Mono, monospace', fontSize: 15, fontWeight: 700,
|
KJ<span style={{ color: 'rgba(0,255,136,0.35)' }}>_</span>
|
||||||
color: '#00ff88', letterSpacing: '-0.02em',
|
|
||||||
animation: 'glow 3s ease-in-out infinite',
|
|
||||||
}}>
|
|
||||||
KJ<span style={{ color: 'rgba(0,255,136,0.4)' }}>_</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div style={{ display: 'flex', gap: 32 }}>
|
<div style={{ display: 'flex', gap: 32 }}>
|
||||||
{['About', 'Work', 'Skills', 'Contact'].map((item) => (
|
{['About', 'Work', 'Skills', 'Contact'].map((item) => (
|
||||||
<span key={item} style={{
|
<span key={item} style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 13, fontWeight: 600, color: '#374151', cursor: 'pointer', letterSpacing: '0.05em', textTransform: 'uppercase' }}>{item}</span>
|
||||||
fontFamily: 'Space Grotesk, sans-serif', fontSize: 13, fontWeight: 600,
|
|
||||||
color: '#4b5563', cursor: 'pointer', letterSpacing: '0.05em',
|
|
||||||
textTransform: 'uppercase',
|
|
||||||
}}>{item}</span>
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 6, marginRight: 8 }}>
|
||||||
|
<div style={{ width: 7, height: 7, borderRadius: '50%', background: '#00ff88', animation: 'pulse-green 2s infinite' }} />
|
||||||
|
<span style={{ fontFamily: 'Space Mono, monospace', fontSize: 11, color: '#00ff88' }}>Available for work</span>
|
||||||
|
</div>
|
||||||
<button style={{
|
<button style={{
|
||||||
background: 'transparent', border: '1px solid #00ff88',
|
background: 'transparent', border: '1px solid #00ff88', color: '#00ff88',
|
||||||
color: '#00ff88', padding: '8px 20px', borderRadius: 4,
|
padding: '8px 20px', borderRadius: 4, fontSize: 12, fontWeight: 700,
|
||||||
fontSize: 12, fontWeight: 700, cursor: 'pointer',
|
cursor: 'pointer', fontFamily: 'Space Mono, monospace', letterSpacing: '0.08em',
|
||||||
fontFamily: 'Space Mono, monospace', letterSpacing: '0.08em',
|
|
||||||
}}>
|
}}>
|
||||||
HIRE ME
|
HIRE ME
|
||||||
</button>
|
</button>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
{/* Hero */}
|
{/* Hero */}
|
||||||
<section style={{ padding: '100px 48px 80px', position: 'relative', overflow: 'hidden' }}>
|
<section style={{ padding: '100px 48px 80px', position: 'relative', overflow: 'hidden' }}>
|
||||||
{/* Scanline effect */}
|
<div style={{ position: 'absolute', left: 0, right: 0, height: '2px', background: 'linear-gradient(90deg, transparent, rgba(0,255,136,0.4), transparent)', animation: 'scanline 8s linear infinite', pointerEvents: 'none' }} />
|
||||||
<div style={{
|
<div style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(rgba(0,255,136,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,136,0.04) 1px, transparent 1px)', backgroundSize: '40px 40px' }} />
|
||||||
position: 'absolute', left: 0, right: 0, height: '2px',
|
|
||||||
background: 'linear-gradient(90deg, transparent, rgba(0,255,136,0.4), transparent)',
|
|
||||||
animation: 'scanline 8s linear infinite',
|
|
||||||
pointerEvents: 'none',
|
|
||||||
}} />
|
|
||||||
{/* Grid */}
|
|
||||||
<div style={{
|
|
||||||
position: 'absolute', inset: 0,
|
|
||||||
backgroundImage: 'linear-gradient(rgba(0,255,136,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,136,0.04) 1px, transparent 1px)',
|
|
||||||
backgroundSize: '40px 40px',
|
|
||||||
}} />
|
|
||||||
|
|
||||||
<div style={{ maxWidth: 900, position: 'relative', animation: 'fadeUp 0.8s ease forwards' }}>
|
<div style={{ maxWidth: 1000, display: 'grid', gridTemplateColumns: '1fr auto', gap: 48, alignItems: 'center', position: 'relative', animation: 'fadeUp 0.8s ease forwards' }}>
|
||||||
<div style={{
|
<div>
|
||||||
fontFamily: 'Space Mono, monospace', fontSize: 12,
|
<div style={{ fontFamily: 'Space Mono, monospace', fontSize: 12, color: 'rgba(0,255,136,0.6)', letterSpacing: '0.2em', marginBottom: 20, textTransform: 'uppercase' }}>
|
||||||
color: 'rgba(0,255,136,0.6)', letterSpacing: '0.2em',
|
|
||||||
marginBottom: 20, textTransform: 'uppercase',
|
|
||||||
}}>
|
|
||||||
{'> Hello, World. I am'}
|
{'> Hello, World. I am'}
|
||||||
</div>
|
</div>
|
||||||
<h1 style={{
|
<h1 style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 'clamp(52px, 7vw, 88px)', fontWeight: 700, lineHeight: 1.0, marginBottom: 16, letterSpacing: '-0.03em' }}>
|
||||||
fontFamily: 'Space Grotesk, sans-serif',
|
|
||||||
fontSize: 'clamp(52px, 7vw, 96px)',
|
|
||||||
fontWeight: 700, lineHeight: 1.0, marginBottom: 16,
|
|
||||||
letterSpacing: '-0.03em',
|
|
||||||
}}>
|
|
||||||
Kim<br />
|
Kim<br />
|
||||||
<span style={{ color: '#00ff88' }}>Jisu</span>
|
<span style={{ color: '#00ff88' }}>Jisu</span>
|
||||||
<span style={{
|
<span style={{ display: 'inline-block', width: 6, height: 'clamp(52px, 7vw, 88px)', background: '#00ff88', marginLeft: 8, verticalAlign: 'middle', animation: 'blink 1.2s step-end infinite' }} />
|
||||||
display: 'inline-block', width: 6, height: 'clamp(52px, 7vw, 96px)',
|
|
||||||
background: '#00ff88', marginLeft: 8, verticalAlign: 'middle',
|
|
||||||
animation: 'blink 1.2s step-end infinite',
|
|
||||||
}} />
|
|
||||||
</h1>
|
</h1>
|
||||||
<div style={{
|
<div style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 20, color: '#4b5563', fontWeight: 500, marginBottom: 20 }}>
|
||||||
fontFamily: 'Space Grotesk, sans-serif', fontSize: 20,
|
|
||||||
color: '#4b5563', fontWeight: 500, marginBottom: 24,
|
|
||||||
}}>
|
|
||||||
Product Designer & Creative Developer
|
Product Designer & Creative Developer
|
||||||
</div>
|
</div>
|
||||||
<p style={{
|
<p style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 16, color: '#6b7280', lineHeight: 1.8, maxWidth: 520, marginBottom: 36 }}>
|
||||||
fontFamily: 'Space Grotesk, sans-serif', fontSize: 16,
|
|
||||||
color: '#6b7280', lineHeight: 1.8, maxWidth: 520, marginBottom: 36,
|
|
||||||
}}>
|
|
||||||
픽셀 하나하나에 의미를 담는 디자이너. 아름다움과 기능의 교차점에서 디지털 경험을 설계합니다.
|
픽셀 하나하나에 의미를 담는 디자이너. 아름다움과 기능의 교차점에서 디지털 경험을 설계합니다.
|
||||||
</p>
|
</p>
|
||||||
<div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
|
<div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', alignItems: 'center' }}>
|
||||||
<button style={{
|
<button style={{
|
||||||
background: '#00ff88', color: '#000000', border: 'none',
|
background: '#00ff88', color: '#000000', border: 'none', padding: '14px 32px',
|
||||||
padding: '14px 32px', fontSize: 14, fontWeight: 700, cursor: 'pointer',
|
fontSize: 14, fontWeight: 700, cursor: 'pointer', fontFamily: 'Space Mono, monospace',
|
||||||
fontFamily: 'Space Mono, monospace', letterSpacing: '0.05em',
|
letterSpacing: '0.05em', clipPath: 'polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px))',
|
||||||
clipPath: 'polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px))',
|
|
||||||
}}>
|
}}>
|
||||||
VIEW WORK →
|
VIEW WORK →
|
||||||
</button>
|
</button>
|
||||||
<button style={{
|
<button style={{
|
||||||
background: 'transparent', color: '#9ca3af',
|
background: 'transparent', color: '#9ca3af', border: '1px solid #1f2937',
|
||||||
border: '1px solid #1f2937',
|
|
||||||
padding: '14px 32px', fontSize: 14, fontWeight: 600, cursor: 'pointer',
|
padding: '14px 32px', fontSize: 14, fontWeight: 600, cursor: 'pointer',
|
||||||
fontFamily: 'Space Grotesk, sans-serif', borderRadius: 4,
|
fontFamily: 'Space Grotesk, sans-serif', borderRadius: 4,
|
||||||
}}>
|
}}>
|
||||||
Download CV
|
Download CV
|
||||||
</button>
|
</button>
|
||||||
<div style={{ display: 'flex', gap: 8, marginLeft: 8 }}>
|
</div>
|
||||||
{['6+', '30+', '2x'].map((s, i) => (
|
</div>
|
||||||
<div key={i} style={{
|
|
||||||
padding: '8px 14px', border: '1px solid #1f2937', borderRadius: 4,
|
{/* Stats panel */}
|
||||||
fontFamily: 'Space Mono, monospace', fontSize: 12,
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||||||
color: '#4b5563',
|
{[
|
||||||
}}>
|
{ val: '6+', label: 'YEARS EXP.', color: '#00ff88' },
|
||||||
<span style={{ color: '#00ff88', fontWeight: 700 }}>{s}</span>
|
{ val: '30+', label: 'PROJECTS', color: '#a855f7' },
|
||||||
<span style={{ marginLeft: 4 }}>{['YEARS', 'PROJECTS', 'AWWWARDS'][i]}</span>
|
{ val: '2×', label: 'AWWWARDS', color: '#f59e0b' },
|
||||||
|
{ val: '340%', label: 'MAX CVR LIFT', color: '#06b6d4' },
|
||||||
|
].map((s) => (
|
||||||
|
<div key={s.label} style={{ padding: '14px 18px', border: '1px solid #111827', borderLeft: `3px solid ${s.color}`, borderRadius: 4, background: '#050505', minWidth: 140 }}>
|
||||||
|
<div style={{ fontFamily: 'Space Mono, monospace', fontSize: 24, fontWeight: 700, color: s.color }}>{s.val}</div>
|
||||||
|
<div style={{ fontFamily: 'Space Mono, monospace', fontSize: 9, color: '#374151', letterSpacing: '0.15em', marginTop: 2 }}>{s.label}</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Services */}
|
||||||
|
<section style={{ padding: '72px 48px', background: '#050505', borderTop: '1px solid rgba(0,255,136,0.08)' }}>
|
||||||
|
<div style={{ maxWidth: 1100, margin: '0 auto' }}>
|
||||||
|
<div style={{ marginBottom: 40 }}>
|
||||||
|
<div style={{ fontFamily: 'Space Mono, monospace', fontSize: 10, color: 'rgba(0,255,136,0.5)', letterSpacing: '0.2em', marginBottom: 10 }}>// WHAT I DO</div>
|
||||||
|
<h2 style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 32, fontWeight: 700, letterSpacing: '-0.02em' }}>
|
||||||
|
Services<span style={{ color: '#00ff88' }}>.</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
|
||||||
|
{services.map((svc) => (
|
||||||
|
<div key={svc.title} className="service-card" style={{
|
||||||
|
padding: '24px 20px', border: '1px solid #111827', borderRadius: 8,
|
||||||
|
background: 'transparent', cursor: 'pointer', position: 'relative', overflow: 'hidden',
|
||||||
|
}}>
|
||||||
|
<div style={{ position: 'absolute', top: 0, left: 0, width: 3, height: '100%', background: svc.color, opacity: 0.6 }} />
|
||||||
|
<div style={{ width: 36, height: 36, borderRadius: 8, background: svc.color + '15', border: `1px solid ${svc.color}30`, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
|
||||||
|
<span style={{ fontFamily: 'Space Mono, monospace', fontSize: 12, fontWeight: 700, color: svc.color }}>{svc.icon}</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 15, fontWeight: 700, color: 'white', marginBottom: 8 }}>{svc.title}</div>
|
||||||
|
<div style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 13, color: '#4b5563', lineHeight: 1.6 }}>{svc.desc}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Awards Detail */}
|
||||||
|
<section style={{ padding: '60px 48px', background: '#000000', borderTop: '1px solid rgba(0,255,136,0.08)' }}>
|
||||||
|
<div style={{ maxWidth: 1100, margin: '0 auto' }}>
|
||||||
|
<div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
|
||||||
|
{awards.map((a) => (
|
||||||
|
<div key={a.name} className="award-badge" style={{
|
||||||
|
padding: '12px 20px', border: `1px solid ${a.color}30`, borderRadius: 8,
|
||||||
|
background: a.color + '08', display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer',
|
||||||
|
}}>
|
||||||
|
<svg width="14" height="14" viewBox="0 0 14 14"><path d="M7 1l1.5 3 3.5.5-2.5 2.4.6 3.4L7 8.8 3.9 10.3l.6-3.4L2 4.5 5.5 4z" fill={a.color} /></svg>
|
||||||
|
<div>
|
||||||
|
<div style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 13, fontWeight: 700, color: 'white' }}>{a.name}</div>
|
||||||
|
<div style={{ fontFamily: 'Space Mono, monospace', fontSize: 10, color: a.color }}>{a.count}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Projects */}
|
{/* Projects */}
|
||||||
<section style={{ padding: '80px 48px', background: '#050505' }}>
|
<section style={{ padding: '80px 48px', background: '#050505', borderTop: '1px solid rgba(0,255,136,0.08)' }}>
|
||||||
<div style={{ maxWidth: 1100, margin: '0 auto' }}>
|
<div style={{ maxWidth: 1100, margin: '0 auto' }}>
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 48 }}>
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 32 }}>
|
||||||
<h2 style={{
|
<div>
|
||||||
fontFamily: 'Space Grotesk, sans-serif', fontSize: 36, fontWeight: 700,
|
<div style={{ fontFamily: 'Space Mono, monospace', fontSize: 10, color: 'rgba(0,255,136,0.5)', letterSpacing: '0.2em', marginBottom: 8 }}>// SELECTED WORK</div>
|
||||||
letterSpacing: '-0.02em',
|
<h2 style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 36, fontWeight: 700, letterSpacing: '-0.02em' }}>
|
||||||
}}>
|
Projects<span style={{ color: '#00ff88' }}>.</span>
|
||||||
Selected Work<span style={{ color: '#00ff88' }}>.</span>
|
|
||||||
</h2>
|
</h2>
|
||||||
<span style={{ color: '#374151', fontSize: 12, fontFamily: 'Space Mono, monospace' }}>
|
</div>
|
||||||
2019 — 2024
|
<span style={{ color: '#374151', fontSize: 12, fontFamily: 'Space Mono, monospace' }}>2019 — 2024</span>
|
||||||
</span>
|
</div>
|
||||||
|
{/* Category filter */}
|
||||||
|
<div style={{ display: 'flex', gap: 8, marginBottom: 32 }}>
|
||||||
|
{categories.map((cat) => (
|
||||||
|
<button key={cat} className="cat-btn" onClick={() => setActiveCategory(cat)} style={{
|
||||||
|
background: activeCategory === cat ? '#00ff88' : 'transparent',
|
||||||
|
color: activeCategory === cat ? '#000' : '#374151',
|
||||||
|
border: '1px solid ' + (activeCategory === cat ? '#00ff88' : '#1f2937'),
|
||||||
|
padding: '6px 16px', borderRadius: 4, fontSize: 11,
|
||||||
|
fontWeight: 700, fontFamily: 'Space Mono, monospace', letterSpacing: '0.06em',
|
||||||
|
}}>{cat}</button>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 16 }}>
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 16 }}>
|
||||||
{projects.map((proj, i) => (
|
{filteredProjects.map((proj, i) => (
|
||||||
<div
|
<div
|
||||||
key={i}
|
key={proj.title}
|
||||||
className="proj-card"
|
className="proj-card"
|
||||||
onMouseEnter={() => setHoveredProject(i)}
|
onMouseEnter={() => setHoveredProject(i)}
|
||||||
onMouseLeave={() => setHoveredProject(null)}
|
onMouseLeave={() => setHoveredProject(null)}
|
||||||
style={{
|
style={{ border: '1px solid #111827', borderRadius: 12, overflow: 'hidden', cursor: 'pointer', background: '#0a0a0a', position: 'relative' }}
|
||||||
border: '1px solid #111827', borderRadius: 12, overflow: 'hidden',
|
|
||||||
cursor: 'pointer', background: '#0a0a0a',
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<div style={{
|
<div style={{ height: 200, background: proj.gradient, position: 'relative', overflow: 'hidden' }}>
|
||||||
height: 180, background: proj.gradient, position: 'relative',
|
<div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
<div style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 22, fontWeight: 700, color: 'rgba(0,0,0,0.35)', letterSpacing: '-0.02em' }}>{proj.title}</div>
|
||||||
transition: 'transform 0.3s',
|
|
||||||
transform: hoveredProject === i ? 'scale(1.02)' : 'scale(1)',
|
|
||||||
}}>
|
|
||||||
<div style={{
|
|
||||||
fontFamily: 'Space Grotesk, sans-serif', fontSize: 24, fontWeight: 700,
|
|
||||||
color: 'rgba(0,0,0,0.4)', letterSpacing: '-0.02em',
|
|
||||||
}}>
|
|
||||||
{proj.title}
|
|
||||||
</div>
|
</div>
|
||||||
|
{/* Hover overlay */}
|
||||||
<div style={{
|
<div style={{
|
||||||
position: 'absolute', top: 12, right: 12,
|
position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.7)', backdropFilter: 'blur(4px)',
|
||||||
background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(8px)',
|
display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 12,
|
||||||
border: '1px solid rgba(255,255,255,0.15)',
|
transition: 'opacity 0.3s', opacity: hoveredProject === i ? 1 : 0,
|
||||||
borderRadius: 4, padding: '3px 10px',
|
}}>
|
||||||
fontSize: 10, fontWeight: 700, color: 'white',
|
<div style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 14, color: 'white', fontWeight: 600, textAlign: 'center', padding: '0 20px', lineHeight: 1.5 }}>{proj.desc}</div>
|
||||||
fontFamily: 'Space Mono, monospace', letterSpacing: '0.1em',
|
<button style={{ background: '#00ff88', color: '#000', border: 'none', padding: '8px 20px', borderRadius: 4, fontSize: 11, fontWeight: 700, cursor: 'pointer', fontFamily: 'Space Mono, monospace', letterSpacing: '0.06em' }}>
|
||||||
}}>{proj.tag}</div>
|
VIEW PROJECT →
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div style={{ position: 'absolute', top: 12, left: 12, background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(8px)', border: '1px solid rgba(255,255,255,0.15)', borderRadius: 4, padding: '3px 10px', fontSize: 10, fontWeight: 700, color: 'white', fontFamily: 'Space Mono, monospace', letterSpacing: '0.1em' }}>
|
||||||
|
{proj.tag}
|
||||||
|
</div>
|
||||||
|
<div style={{ position: 'absolute', top: 12, right: 12, fontFamily: 'Space Mono, monospace', fontSize: 10, color: 'rgba(255,255,255,0.4)' }}>
|
||||||
|
{proj.year}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ padding: '16px 18px' }}>
|
<div style={{ padding: '16px 18px' }}>
|
||||||
<div style={{ fontSize: 15, fontWeight: 700, color: 'white', fontFamily: 'Space Grotesk, sans-serif', marginBottom: 4 }}>
|
<div style={{ fontSize: 15, fontWeight: 700, color: 'white', fontFamily: 'Space Grotesk, sans-serif', marginBottom: 4 }}>{proj.title}</div>
|
||||||
{proj.title}
|
<div style={{ fontSize: 13, color: '#4b5563', fontFamily: 'Space Grotesk, sans-serif', lineHeight: 1.5 }}>{proj.desc}</div>
|
||||||
</div>
|
|
||||||
<div style={{ fontSize: 13, color: '#4b5563', fontFamily: 'Space Grotesk, sans-serif' }}>
|
|
||||||
{proj.desc}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
@@ -240,65 +299,52 @@ export default function PortfolioSample() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Skills */}
|
{/* Skills + Timeline */}
|
||||||
<section style={{ padding: '80px 48px', background: '#000000' }}>
|
<section style={{ padding: '80px 48px', background: '#000000', borderTop: '1px solid rgba(0,255,136,0.08)' }}>
|
||||||
<div style={{ maxWidth: 900, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }}>
|
<div style={{ maxWidth: 1000, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }}>
|
||||||
<div>
|
<div>
|
||||||
<h2 style={{
|
<div style={{ fontFamily: 'Space Mono, monospace', fontSize: 10, color: 'rgba(0,255,136,0.5)', letterSpacing: '0.2em', marginBottom: 10 }}>// EXPERTISE</div>
|
||||||
fontFamily: 'Space Grotesk, sans-serif', fontSize: 36, fontWeight: 700,
|
<h2 style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 32, fontWeight: 700, marginBottom: 36, letterSpacing: '-0.02em' }}>
|
||||||
marginBottom: 36, letterSpacing: '-0.02em',
|
|
||||||
}}>
|
|
||||||
Skills<span style={{ color: '#00ff88' }}>.</span>
|
Skills<span style={{ color: '#00ff88' }}>.</span>
|
||||||
</h2>
|
</h2>
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
|
||||||
{skills.map((s) => (
|
{skills.map((s) => (
|
||||||
<div key={s.name}>
|
<div key={s.name}>
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
|
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 7 }}>
|
||||||
<span style={{ fontFamily: 'Space Mono, monospace', fontSize: 12, color: '#9ca3af', letterSpacing: '0.05em' }}>
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||||
{s.name}
|
<span style={{ fontFamily: 'Space Mono, monospace', fontSize: 12, color: '#9ca3af', letterSpacing: '0.05em' }}>{s.name}</span>
|
||||||
</span>
|
<span style={{ fontFamily: 'Space Mono, monospace', fontSize: 9, color: '#1f2937', letterSpacing: '0.1em', border: '1px solid #1f2937', padding: '1px 6px', borderRadius: 2 }}>{s.category}</span>
|
||||||
<span style={{ fontFamily: 'Space Mono, monospace', fontSize: 11, color: '#00ff88' }}>
|
</div>
|
||||||
{s.level}%
|
<span style={{ fontFamily: 'Space Mono, monospace', fontSize: 11, color: '#00ff88' }}>{s.level}%</span>
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div style={{ height: 3, background: '#111827', borderRadius: 2, overflow: 'hidden' }}>
|
<div style={{ height: 3, background: '#111827', borderRadius: 2, overflow: 'hidden' }}>
|
||||||
<div style={{
|
<div style={{ height: '100%', borderRadius: 2, background: 'linear-gradient(90deg, #00ff88, #00d4ff)', width: `${s.level}%`, animation: 'slideBar 1.5s ease forwards' }} />
|
||||||
height: '100%', borderRadius: 2,
|
|
||||||
background: 'linear-gradient(90deg, #00ff88, #00d4ff)',
|
|
||||||
width: `${s.level}%`,
|
|
||||||
animation: 'slideBar 1.5s ease forwards',
|
|
||||||
}} />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h2 style={{
|
<div style={{ fontFamily: 'Space Mono, monospace', fontSize: 10, color: 'rgba(0,255,136,0.5)', letterSpacing: '0.2em', marginBottom: 10 }}>// JOURNEY</div>
|
||||||
fontFamily: 'Space Grotesk, sans-serif', fontSize: 36, fontWeight: 700,
|
<h2 style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 32, fontWeight: 700, marginBottom: 36, letterSpacing: '-0.02em' }}>
|
||||||
marginBottom: 36, letterSpacing: '-0.02em',
|
|
||||||
}}>
|
|
||||||
Timeline<span style={{ color: '#00ff88' }}>.</span>
|
Timeline<span style={{ color: '#00ff88' }}>.</span>
|
||||||
</h2>
|
</h2>
|
||||||
<div style={{ position: 'relative', paddingLeft: 20 }}>
|
<div style={{ position: 'relative', paddingLeft: 20 }}>
|
||||||
<div style={{
|
<div style={{ position: 'absolute', left: 4, top: 8, bottom: 8, width: 1, background: '#1f2937' }} />
|
||||||
position: 'absolute', left: 4, top: 8, bottom: 8,
|
|
||||||
width: 1, background: '#1f2937',
|
|
||||||
}} />
|
|
||||||
{timeline.map((t, i) => (
|
{timeline.map((t, i) => (
|
||||||
<div key={i} style={{ position: 'relative', paddingBottom: 24 }}>
|
<div key={i} style={{ position: 'relative', paddingBottom: 24 }}>
|
||||||
<div style={{
|
<div style={{
|
||||||
position: 'absolute', left: -20, top: 4,
|
position: 'absolute', left: -20, top: 4, width: 8, height: 8, borderRadius: '50%',
|
||||||
width: 8, height: 8, borderRadius: '50%',
|
|
||||||
background: t.type === 'award' ? '#00ff88' : t.type === 'career' ? '#3b82f6' : '#a855f7',
|
background: t.type === 'award' ? '#00ff88' : t.type === 'career' ? '#3b82f6' : '#a855f7',
|
||||||
boxShadow: `0 0 8px ${t.type === 'award' ? 'rgba(0,255,136,0.6)' : t.type === 'career' ? 'rgba(59,130,246,0.6)' : 'rgba(168,85,247,0.6)'}`,
|
boxShadow: `0 0 8px ${t.type === 'award' ? 'rgba(0,255,136,0.6)' : t.type === 'career' ? 'rgba(59,130,246,0.6)' : 'rgba(168,85,247,0.6)'}`,
|
||||||
}} />
|
}} />
|
||||||
<div style={{ fontFamily: 'Space Mono, monospace', fontSize: 11, color: '#374151', marginBottom: 2 }}>
|
<div style={{ fontFamily: 'Space Mono, monospace', fontSize: 11, color: '#374151', marginBottom: 3 }}>{t.year}</div>
|
||||||
{t.year}
|
<div style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 14, color: '#d1d5db', lineHeight: 1.5 }}>{t.event}</div>
|
||||||
</div>
|
{t.type === 'award' && (
|
||||||
<div style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 14, color: '#d1d5db' }}>
|
<div style={{ marginTop: 4 }}>
|
||||||
{t.event}
|
<span style={{ fontFamily: 'Space Mono, monospace', fontSize: 9, color: '#00ff88', border: '1px solid rgba(0,255,136,0.3)', padding: '1px 6px', borderRadius: 2 }}>AWARD</span>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
@@ -306,36 +352,53 @@ export default function PortfolioSample() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
{/* Testimonials */}
|
||||||
|
<section style={{ padding: '72px 48px', background: '#050505', borderTop: '1px solid rgba(0,255,136,0.08)' }}>
|
||||||
|
<div style={{ maxWidth: 1000, margin: '0 auto' }}>
|
||||||
|
<div style={{ fontFamily: 'Space Mono, monospace', fontSize: 10, color: 'rgba(0,255,136,0.5)', letterSpacing: '0.2em', marginBottom: 10 }}>// CLIENT VOICES</div>
|
||||||
|
<h2 style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 32, fontWeight: 700, marginBottom: 36, letterSpacing: '-0.02em' }}>
|
||||||
|
Testimonials<span style={{ color: '#00ff88' }}>.</span>
|
||||||
|
</h2>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
|
||||||
|
{testimonials.map((t) => (
|
||||||
|
<div key={t.client} style={{ padding: '28px 24px', border: '1px solid #111827', borderRadius: 8, background: '#0a0a0a', position: 'relative' }}>
|
||||||
|
<svg width="28" height="20" viewBox="0 0 28 20" fill="none" style={{ marginBottom: 16, opacity: 0.25 }}>
|
||||||
|
<path d="M0 20V12C0 5.3 4 1.5 12 0l1.7 3C9.5 4.3 7.3 6.7 7 10h5.3V20H0zm14.7 0V12C14.7 5.3 18.7 1.5 26.7 0l1.3 3c-4.2 1.3-6.4 3.7-6.7 7H27V20H14.7z" fill="#00ff88" />
|
||||||
|
</svg>
|
||||||
|
<p style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 14, color: '#9ca3af', lineHeight: 1.8, marginBottom: 20 }}>{t.text}</p>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||||
|
<div style={{ width: 36, height: 36, borderRadius: '50%', background: 'linear-gradient(135deg, #00ff88, #00d4ff)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, fontWeight: 700, color: '#000', fontFamily: 'Space Mono, monospace' }}>
|
||||||
|
{t.client[0]}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 14, fontWeight: 600, color: 'white' }}>{t.client}</div>
|
||||||
|
<div style={{ fontFamily: 'Space Mono, monospace', fontSize: 10, color: '#374151' }}>{t.role}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
{/* Contact */}
|
{/* Contact */}
|
||||||
<section style={{
|
<section style={{ padding: '96px 48px', textAlign: 'center', background: 'linear-gradient(180deg, #000000, #001a00)', borderTop: '1px solid rgba(0,255,136,0.1)' }}>
|
||||||
padding: '80px 48px', textAlign: 'center',
|
<div style={{ fontFamily: 'Space Mono, monospace', fontSize: 12, color: 'rgba(0,255,136,0.5)', letterSpacing: '0.2em', marginBottom: 20 }}>
|
||||||
background: 'linear-gradient(180deg, #000000, #001a00)',
|
|
||||||
borderTop: '1px solid rgba(0,255,136,0.1)',
|
|
||||||
}}>
|
|
||||||
<div style={{
|
|
||||||
fontFamily: 'Space Mono, monospace', fontSize: 12,
|
|
||||||
color: 'rgba(0,255,136,0.5)', letterSpacing: '0.2em', marginBottom: 20,
|
|
||||||
}}>
|
|
||||||
{'> LET\'S COLLABORATE'}
|
{'> LET\'S COLLABORATE'}
|
||||||
</div>
|
</div>
|
||||||
<h2 style={{
|
<h2 style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 'clamp(36px, 5vw, 60px)', fontWeight: 700, letterSpacing: '-0.03em', marginBottom: 16, animation: 'glow 3s ease-in-out infinite' }}>
|
||||||
fontFamily: 'Space Grotesk, sans-serif', fontSize: 'clamp(36px, 5vw, 60px)',
|
|
||||||
fontWeight: 700, letterSpacing: '-0.03em', marginBottom: 16,
|
|
||||||
animation: 'glow 3s ease-in-out infinite',
|
|
||||||
}}>
|
|
||||||
Have a project<span style={{ color: '#00ff88' }}>?</span>
|
Have a project<span style={{ color: '#00ff88' }}>?</span>
|
||||||
</h2>
|
</h2>
|
||||||
<p style={{
|
<p style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 16, color: '#4b5563', marginBottom: 8 }}>
|
||||||
fontFamily: 'Space Grotesk, sans-serif', fontSize: 16,
|
jisu.kim@design.studio
|
||||||
color: '#4b5563', marginBottom: 36,
|
</p>
|
||||||
}}>
|
<p style={{ fontFamily: 'Space Mono, monospace', fontSize: 12, color: '#1f2937', marginBottom: 36 }}>
|
||||||
jisu.kim@design.studio · @jisu_creates
|
@jisu_creates · Response within 24h
|
||||||
</p>
|
</p>
|
||||||
<button style={{
|
<button style={{
|
||||||
background: '#00ff88', color: '#000000', border: 'none',
|
background: '#00ff88', color: '#000000', border: 'none', padding: '16px 48px',
|
||||||
padding: '16px 44px', fontSize: 14, fontWeight: 700,
|
fontSize: 14, fontWeight: 700, cursor: 'pointer', fontFamily: 'Space Mono, monospace',
|
||||||
cursor: 'pointer', fontFamily: 'Space Mono, monospace', letterSpacing: '0.08em',
|
letterSpacing: '0.08em', clipPath: 'polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px))',
|
||||||
clipPath: 'polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px))',
|
|
||||||
}}>
|
}}>
|
||||||
START A PROJECT →
|
START A PROJECT →
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
Reference in New Issue
Block a user