웹페이지 제작 소개 페이지 생성 & 사주 분석 고도화

app/services/website/samples/bakery/page.tsx

@@ -0,0 +1,325 @@
+import Link from 'next/link';
+
+export default function BakerySample() {
+  const menuItems = [
+    { name: '버터 크루아상', price: '3,200', emoji: '🥐', tag: '인기', desc: '프랑스산 에슈레 버터만 사용한 겹겹이 살아있는 크루아상' },
+    { name: '소금빵', price: '2,800', emoji: '🍞', tag: '베스트', desc: '오키나와 천연 소금과 발효 버터가 만나는 완벽한 짭조름함' },
+    { name: '딸기 쇼트케이크', price: '7,500', emoji: '🍰', tag: '신메뉴', desc: '국내산 딸기와 생크림이 만나는 클래식 케이크' },
+    { name: '캄파뉴', price: '8,900', emoji: '🫓', tag: '장인', desc: '72시간 저온 발효로 만든 시큼하고 깊은 맛의 통밀빵' },
+  ];
+
+  const hours = [
+    { day: '월~금', time: '07:00 – 20:00' },
+    { day: '토요일', time: '07:00 – 21:00' },
+    { day: '일요일', time: '09:00 – 18:00' },
+    { day: '공휴일', time: '09:00 – 18:00' },
+  ];
+
+  return (
+    <div style={{ background: '#fffbf5', minHeight: '100vh', color: '#1c1008' }}>
+      <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');
+        @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); } }
+        .menu-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(120,53,15,0.12); }
+        .menu-card { transition: transform 0.35s, box-shadow 0.35s; }
+        .bk-btn:hover { background: #92400e !important; }
+        .bk-btn { transition: background 0.2s; }
+      `}</style>
+
+      {/* Back Banner */}
+      <div style={{
+        background: 'linear-gradient(135deg, #1e1b4b, #312e81)',
+        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>
+        <span style={{ color: '#4c1d95', fontSize: 13 }}>|</span>
+        <span style={{ color: '#6366f1', fontSize: 12, fontFamily: 'Playfair Display, serif', fontWeight: 700 }}>
+          SAMPLE · 베이커리 홈페이지
+        </span>
+      </div>
+
+      {/* Navbar */}
+      <nav style={{
+        background: 'rgba(255,251,245,0.95)', backdropFilter: 'blur(12px)',
+        borderBottom: '1px solid #fde8c8',
+        padding: '0 48px', height: 68,
+        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+        position: 'sticky', top: 0, zIndex: 100,
+      }}>
+        <div style={{ textAlign: 'center' }}>
+          <div style={{ fontSize: 20, fontFamily: 'Playfair Display, serif', fontStyle: 'italic', color: '#78350f', fontWeight: 700 }}>
+            Le Petit Fort
+          </div>
+          <div style={{ fontSize: 10, color: '#a78060', letterSpacing: '0.2em', textTransform: 'uppercase' }}>Artisan Boulangerie</div>
+        </div>
+        <div style={{ display: 'flex', gap: 28 }}>
+          {['메뉴', '스토리', '매장안내', '예약'].map((item) => (
+            <span key={item} style={{
+              fontSize: 14, color: '#78350f', cursor: 'pointer',
+              fontFamily: "'Noto Sans KR', sans-serif", fontWeight: 500,
+            }}>{item}</span>
+          ))}
+        </div>
+        <button className="bk-btn" style={{
+          background: '#b45309', color: 'white', border: 'none',
+          padding: '9px 22px', borderRadius: 24, fontSize: 13,
+          fontWeight: 700, cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
+        }}>
+          예약하기
+        </button>
+      </nav>
+
+      {/* Hero */}
+      <section style={{
+        background: 'linear-gradient(160deg, #fef3c7 0%, #fde68a 35%, #fbbf24 70%, #d97706 100%)',
+        padding: '80px 48px', position: 'relative', overflow: 'hidden', minHeight: 480,
+        display: 'flex', alignItems: 'center',
+      }}>
+        {/* Decorative circles */}
+        <div style={{
+          position: 'absolute', right: -60, top: -60,
+          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' }}>
+          <div style={{
+            fontSize: 13, color: '#78350f', fontFamily: 'Playfair Display, serif',
+            fontStyle: 'italic', marginBottom: 16, 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 />
+            <span style={{ color: '#b45309' }}>따뜻한 향기</span>가<br />
+            기다립니다
+          </h1>
+          <p style={{
+            color: '#78350f', fontSize: 16, lineHeight: 1.8, marginBottom: 32,
+            fontFamily: "'Noto Sans KR', sans-serif",
+          }}>
+            프랑스 전통 방식으로 매일 새벽 4시부터<br />
+            정성껏 굽는 르 쁘띠 포르의 빵을 만나보세요.
+          </p>
+          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+            <button className="bk-btn" style={{
+              background: '#b45309', color: 'white', border: 'none',
+              padding: '14px 32px', borderRadius: 28, fontSize: 15, fontWeight: 700,
+              cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
+              boxShadow: '0 8px 24px rgba(180,83,9,0.35)',
+            }}>
+              오늘의 메뉴 보기
+            </button>
+            <button style={{
+              background: 'rgba(255,255,255,0.6)', color: '#78350f',
+              border: '1px solid rgba(180,83,9,0.3)',
+              padding: '14px 32px', borderRadius: 28, fontSize: 15, fontWeight: 600,
+              cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
+              backdropFilter: 'blur(8px)',
+            }}>
+              매장 찾아오기
+            </button>
+          </div>
+        </div>
+      </section>
+
+      {/* Menu */}
+      <section style={{ padding: '80px 48px', background: '#fffbf5' }}>
+        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
+          <div style={{ textAlign: 'center', marginBottom: 52 }}>
+            <div style={{
+              fontSize: 12, color: '#b45309', fontWeight: 700, letterSpacing: '0.2em',
+              textTransform: 'uppercase', fontFamily: 'Playfair Display, serif', marginBottom: 12,
+            }}>Today&apos;s Menu</div>
+            <h2 style={{ fontFamily: 'Playfair Display, serif', fontSize: 40, color: '#451a03', marginBottom: 12 }}>
+              오늘의 추천 메뉴
+            </h2>
+            <p style={{ color: '#a78060', fontSize: 15, fontFamily: "'Noto Sans KR', sans-serif" }}>
+              매일 새벽 구운 신선한 빵을 만나보세요
+            </p>
+          </div>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 24 }}>
+            {menuItems.map((item) => (
+              <div key={item.name} className="menu-card" style={{
+                background: 'white', borderRadius: 20,
+                border: '1px solid #fde8c8', overflow: 'hidden',
+                boxShadow: '0 4px 20px rgba(120,53,15,0.05)',
+              }}>
+                <div style={{
+                  height: 140, background: 'linear-gradient(135deg, #fef3c7, #fde68a)',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  fontSize: 60, position: 'relative',
+                }}>
+                  {item.emoji}
+                  <span style={{
+                    position: 'absolute', top: 12, right: 12,
+                    background: '#b45309', color: 'white',
+                    fontSize: 10, fontWeight: 700, padding: '3px 9px', borderRadius: 100,
+                    fontFamily: "'Noto Sans KR', sans-serif",
+                  }}>{item.tag}</span>
+                </div>
+                <div style={{ padding: '18px 20px' }}>
+                  <div style={{ fontSize: 17, fontWeight: 700, color: '#451a03', fontFamily: 'Playfair Display, serif', marginBottom: 8 }}>
+                    {item.name}
+                  </div>
+                  <div style={{ fontSize: 13, color: '#a78060', lineHeight: 1.65, fontFamily: "'Noto Sans KR', sans-serif", marginBottom: 14 }}>
+                    {item.desc}
+                  </div>
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <span style={{ fontSize: 18, fontWeight: 700, color: '#b45309', fontFamily: 'Playfair Display, serif' }}>
+                      ₩{item.price}
+                    </span>
+                    <button style={{
+                      background: '#fef3c7', color: '#b45309', border: 'none',
+                      padding: '6px 14px', borderRadius: 12, fontSize: 12,
+                      fontWeight: 700, cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
+                    }}>담기</button>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Story */}
+      <section style={{ padding: '80px 48px', background: '#fef9f0', borderTop: '1px solid #fde8c8' }}>
+        <div style={{ maxWidth: 900, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }}>
+          <div>
+            <div style={{ fontSize: 12, color: '#b45309', fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', fontFamily: 'Playfair Display, serif', marginBottom: 12 }}>
+              Our Story
+            </div>
+            <h2 style={{ fontFamily: 'Playfair Display, serif', fontSize: 36, color: '#451a03', lineHeight: 1.3, marginBottom: 20 }}>
+              2009년부터<br />한 자리를 지켜온<br />
+              <em>우리 동네 빵집</em>
+            </h2>
+            <p style={{ color: '#78350f', fontSize: 15, lineHeight: 1.9, fontFamily: "'Noto Sans KR', sans-serif", marginBottom: 16 }}>
+              파리에서 5년간 수업한 오너 셰프가 고향 서울로 돌아와 차린 작은 베이커리. 대기업 프랜차이즈가 넘쳐나는 세상에서도 손으로 빚고, 눈으로 확인하는 전통 방식을 고집합니다.
+            </p>
+            <p style={{ color: '#78350f', fontSize: 15, lineHeight: 1.9, fontFamily: "'Noto Sans KR', sans-serif" }}>
+              밀가루, 버터, 소금, 물. 단 네 가지 재료로 만드는 우리의 빵에는 흉내낼 수 없는 진심이 담겨있습니다.
+            </p>
+          </div>
+          <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) => (
+                <div key={s.l} style={{ textAlign: 'center' }}>
+                  <div style={{ fontSize: 20, fontWeight: 800, color: '#451a03', fontFamily: 'Playfair Display, serif' }}>{s.n}</div>
+                  <div style={{ fontSize: 11, color: '#78350f', fontFamily: "'Noto Sans KR', sans-serif" }}>{s.l}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Hours & Location */}
+      <section style={{ padding: '72px 48px', background: '#451a03' }}>
+        <div style={{ maxWidth: 900, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60 }}>
+          <div>
+            <div style={{ fontSize: 12, color: '#fbbf24', fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', fontFamily: 'Playfair Display, serif', marginBottom: 16 }}>
+              Hours
+            </div>
+            <h3 style={{ fontFamily: 'Playfair Display, serif', fontSize: 28, color: 'white', marginBottom: 28 }}>
+              운영 시간
+            </h3>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+              {hours.map((h) => (
+                <div key={h.day} style={{
+                  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: '#fcd34d', fontFamily: 'Playfair Display, serif' }}>{h.time}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div>
+            <div style={{ fontSize: 12, color: '#fbbf24', fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', fontFamily: 'Playfair Display, serif', marginBottom: 16 }}>
+              Location
+            </div>
+            <h3 style={{ fontFamily: 'Playfair Display, serif', fontSize: 28, color: 'white', marginBottom: 20 }}>
+              매장 위치
+            </h3>
+            <p style={{ color: '#fde68a', fontSize: 15, lineHeight: 1.7, fontFamily: "'Noto Sans KR', sans-serif", marginBottom: 16 }}>
+              서울특별시 마포구 연남동 224-14<br />
+              연남로 68 르 쁘띠 포르
+            </p>
+            <div style={{ display: 'flex', gap: 8, flexDirection: 'column' }}>
+              <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>
+              <div style={{ color: '#fcd34d', fontSize: 13, fontFamily: "'Noto Sans KR', sans-serif" }}>📱 @lepetitfort_seoul</div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section style={{
+        background: 'linear-gradient(135deg, #fef3c7, #fde68a)',
+        padding: '64px 48px', textAlign: 'center',
+      }}>
+        <h2 style={{ fontFamily: 'Playfair Display, serif', fontSize: 36, color: '#451a03', marginBottom: 14 }}>
+          특별한 날을 위한 케이크
+        </h2>
+        <p style={{ color: '#78350f', fontSize: 16, lineHeight: 1.7, marginBottom: 28, fontFamily: "'Noto Sans KR', sans-serif" }}>
+          생일, 기념일, 웨딩 케이크까지.<br />
+          최소 3일 전 예약 시 원하시는 케이크를 제작해드립니다.
+        </p>
+        <button style={{
+          background: '#b45309', color: 'white', border: 'none',
+          padding: '15px 40px', borderRadius: 28, fontSize: 16, fontWeight: 700,
+          cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
+          boxShadow: '0 8px 24px rgba(180,83,9,0.4)',
+        }}>
+          케이크 주문 예약하기 →
+        </button>
+      </section>
+
+      {/* Footer */}
+      <footer style={{ background: '#1c1008', padding: '28px 48px', textAlign: 'center' }}>
+        <div style={{ color: '#78350f', fontSize: 13, fontFamily: 'Playfair Display, serif', fontStyle: 'italic', marginBottom: 6 }}>
+          Le Petit Fort — Artisan Boulangerie
+        </div>
+        <div style={{ color: '#3c1a08', fontSize: 12, fontFamily: "'Noto Sans KR', sans-serif" }}>
+          © 2024 르 쁘띠 포르. All rights reserved.
+        </div>
+      </footer>
+    </div>
+  );
+}

app/services/website/samples/corporate/page.tsx

@@ -0,0 +1,292 @@
+import Link from 'next/link';
+
+export default function CorporateSample() {
+  const services = [
+    {
+      icon: '🔧',
+      title: 'IT 인프라 구축',
+      desc: '기업 맞춤형 서버 환경 설계부터 클라우드 마이그레이션까지, 안정적인 IT 기반을 구축해드립니다.',
+    },
+    {
+      icon: '🔒',
+      title: '보안 솔루션',
+      desc: '최신 사이버 위협에 대응하는 엔터프라이즈급 보안 시스템을 제공합니다.',
+    },
+    {
+      icon: '📡',
+      title: '디지털 전환',
+      desc: '레거시 시스템을 현대화하고 비즈니스 프로세스를 효율화하는 DX 컨설팅을 제공합니다.',
+    },
+  ];
+
+  const stats = [
+    { num: '15+', label: '년 업력' },
+    { num: '340+', label: '완료 프로젝트' },
+    { num: '180+', label: '기업 고객사' },
+    { num: '98%', label: '고객 만족도' },
+  ];
+
+  const clients = ['삼성전자', 'LG유플러스', '현대모비스', 'SK하이닉스', 'KT', '신한은행', 'NH농협', '롯데정보통신'];
+
+  return (
+    <div style={{ background: '#ffffff', minHeight: '100vh', color: '#1e293b', fontFamily: "'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" }}>
+      <style>{`
+        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
+        @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+        @keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
+        .corp-nav-link:hover { color: #1d4ed8 !important; }
+        .corp-service-card:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,0.1); }
+        .corp-service-card { transition: transform 0.3s, box-shadow 0.3s; }
+        .corp-btn:hover { background: #1d4ed8 !important; }
+        .corp-btn { transition: background 0.2s; }
+        .corp-client:hover { background: #eff6ff !important; color: #1d4ed8 !important; }
+        .corp-client { transition: background 0.2s, color 0.2s; }
+      `}</style>
+
+      {/* Back Banner */}
+      <div style={{
+        background: 'linear-gradient(135deg, #1e1b4b, #312e81)',
+        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",
+          display: 'flex', alignItems: 'center', gap: 6,
+        }}>
+          ← 홈페이지 제작 서비스로 돌아가기
+        </Link>
+        <span style={{ color: '#4c1d95', fontSize: 13 }}>|</span>
+        <span style={{ color: '#6366f1', fontSize: 12, fontFamily: 'Montserrat, sans-serif', fontWeight: 700 }}>
+          SAMPLE · 기업 홈페이지
+        </span>
+      </div>
+
+      {/* Navbar */}
+      <nav style={{
+        background: '#ffffff', borderBottom: '1px solid #e2e8f0',
+        padding: '0 48px', display: 'flex', alignItems: 'center',
+        justifyContent: 'space-between', height: 64, position: 'sticky', top: 0, zIndex: 100,
+        boxShadow: '0 2px 20px rgba(0,0,0,0.06)',
+      }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <div style={{
+            width: 36, height: 36, borderRadius: 8,
+            background: 'linear-gradient(135deg, #1d4ed8, #1e40af)',
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            color: 'white', fontSize: 16, fontWeight: 800, fontFamily: 'Montserrat, sans-serif',
+          }}>T</div>
+          <div>
+            <div style={{ fontSize: 15, fontWeight: 700, color: '#0f172a', fontFamily: 'Montserrat, sans-serif', lineHeight: 1 }}>
+              TechSolution
+            </div>
+            <div style={{ fontSize: 10, color: '#64748b', letterSpacing: '0.05em' }}>㈜테크솔루션</div>
+          </div>
+        </div>
+        <div style={{ display: 'flex', gap: 28, alignItems: 'center' }}>
+          {['회사소개', '서비스', '포트폴리오', '고객사', '채용', '연락처'].map((item) => (
+            <span key={item} className="corp-nav-link" style={{
+              fontSize: 14, color: '#475569', cursor: 'pointer',
+              fontFamily: "'Noto Sans KR', sans-serif", fontWeight: 500,
+            }}>{item}</span>
+          ))}
+          <button style={{
+            background: '#1d4ed8', color: 'white', border: 'none',
+            padding: '8px 20px', borderRadius: 8, fontSize: 13, fontWeight: 700,
+            cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
+          }}>
+            문의하기
+          </button>
+        </div>
+      </nav>
+
+      {/* Hero */}
+      <section style={{
+        background: 'linear-gradient(150deg, #0a192f 0%, #112240 45%, #0d3b7e 100%)',
+        padding: '100px 48px', position: 'relative', overflow: 'hidden',
+      }}>
+        <div style={{
+          position: 'absolute', inset: 0,
+          backgroundImage: 'radial-gradient(circle at 80% 50%, rgba(59,130,246,0.15) 0%, transparent 60%)',
+        }} />
+        <div style={{
+          position: 'absolute', right: 80, top: '50%', transform: 'translateY(-50%)',
+          width: 360, height: 360,
+          background: 'linear-gradient(135deg, rgba(59,130,246,0.12), rgba(139,92,246,0.08))',
+          borderRadius: '50%', border: '1px solid rgba(59,130,246,0.2)',
+        }} />
+        <div style={{ maxWidth: 700, position: 'relative', animation: 'fadeInUp 0.8s ease forwards' }}>
+          <div style={{
+            display: 'inline-block', fontSize: 11, fontWeight: 700, letterSpacing: '0.2em',
+            color: '#60a5fa', textTransform: 'uppercase',
+            border: '1px solid rgba(96,165,250,0.3)', padding: '5px 14px', borderRadius: 4,
+            marginBottom: 24, fontFamily: 'Montserrat, sans-serif',
+          }}>
+            Enterprise IT Solutions
+          </div>
+          <h1 style={{
+            fontFamily: 'Montserrat, sans-serif', fontSize: 'clamp(36px, 4vw, 54px)',
+            fontWeight: 800, color: 'white', lineHeight: 1.2, marginBottom: 20,
+          }}>
+            디지털 혁신으로<br />
+            <span style={{ color: '#60a5fa' }}>비즈니스의 미래</span>를<br />
+            설계합니다
+          </h1>
+          <p style={{
+            color: '#94a3b8', fontSize: 17, lineHeight: 1.8, marginBottom: 36,
+            fontFamily: "'Noto Sans KR', sans-serif",
+          }}>
+            15년의 경험과 기술력으로 기업의 IT 인프라를 혁신합니다.<br />
+            클라우드, 보안, 디지털 전환까지 원스톱으로 제공합니다.
+          </p>
+          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
+            <button className="corp-btn" style={{
+              background: '#2563eb', color: 'white', border: 'none',
+              padding: '14px 32px', borderRadius: 8, fontSize: 15, fontWeight: 700,
+              cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
+            }}>
+              서비스 상담 신청 →
+            </button>
+            <button style={{
+              background: 'transparent', color: 'white',
+              border: '1px solid rgba(255,255,255,0.25)',
+              padding: '14px 32px', borderRadius: 8, fontSize: 15, fontWeight: 600,
+              cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
+            }}>
+              회사 소개서 다운로드
+            </button>
+          </div>
+        </div>
+      </section>
+
+      {/* Stats */}
+      <section style={{
+        background: '#1d4ed8', padding: '40px 48px',
+        display: 'flex', justifyContent: 'center', gap: 0, flexWrap: 'wrap',
+      }}>
+        {stats.map((s, i) => (
+          <div key={i} style={{
+            textAlign: 'center', padding: '16px 48px',
+            borderRight: i < stats.length - 1 ? '1px solid rgba(255,255,255,0.2)' : 'none',
+          }}>
+            <div style={{ fontSize: 36, fontWeight: 800, color: 'white', fontFamily: 'Montserrat, sans-serif' }}>
+              {s.num}
+            </div>
+            <div style={{ fontSize: 13, color: '#bfdbfe', fontFamily: "'Noto Sans KR', sans-serif", marginTop: 4 }}>
+              {s.label}
+            </div>
+          </div>
+        ))}
+      </section>
+
+      {/* Services */}
+      <section style={{ padding: '80px 48px', background: '#f8fafc' }}>
+        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
+          <div style={{ textAlign: 'center', marginBottom: 52 }}>
+            <div style={{ fontSize: 12, color: '#2563eb', fontWeight: 700, letterSpacing: '0.15em', textTransform: 'uppercase', fontFamily: 'Montserrat, sans-serif', marginBottom: 12 }}>
+              Our Services
+            </div>
+            <h2 style={{ fontFamily: 'Montserrat, sans-serif', fontSize: 36, fontWeight: 800, color: '#0f172a', marginBottom: 14 }}>
+              핵심 서비스
+            </h2>
+            <p style={{ color: '#64748b', fontSize: 16, fontFamily: "'Noto Sans KR', sans-serif" }}>
+              기업의 성장을 이끄는 IT 솔루션을 제공합니다
+            </p>
+          </div>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 28 }}>
+            {services.map((svc) => (
+              <div key={svc.title} className="corp-service-card" style={{
+                padding: 36, borderRadius: 16, background: 'white',
+                border: '1px solid #e2e8f0', boxShadow: '0 4px 24px rgba(0,0,0,0.05)',
+              }}>
+                <div style={{
+                  width: 56, height: 56, borderRadius: 14,
+                  background: 'linear-gradient(135deg, #eff6ff, #dbeafe)',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  fontSize: 26, marginBottom: 20,
+                }}>
+                  {svc.icon}
+                </div>
+                <h3 style={{ fontSize: 20, fontWeight: 700, color: '#0f172a', fontFamily: 'Montserrat, sans-serif', marginBottom: 12 }}>
+                  {svc.title}
+                </h3>
+                <p style={{ fontSize: 14, color: '#64748b', lineHeight: 1.75, fontFamily: "'Noto Sans KR', sans-serif" }}>
+                  {svc.desc}
+                </p>
+                <div style={{ marginTop: 20, color: '#2563eb', fontSize: 13, fontWeight: 700, cursor: 'pointer', fontFamily: 'Montserrat, sans-serif' }}>
+                  자세히 보기 →
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Clients */}
+      <section style={{ padding: '72px 48px', background: 'white' }}>
+        <div style={{ maxWidth: 1100, margin: '0 auto', textAlign: 'center' }}>
+          <div style={{ fontSize: 12, color: '#2563eb', fontWeight: 700, letterSpacing: '0.15em', textTransform: 'uppercase', fontFamily: 'Montserrat, sans-serif', marginBottom: 12 }}>
+            Trusted By
+          </div>
+          <h2 style={{ fontFamily: 'Montserrat, sans-serif', fontSize: 32, fontWeight: 800, color: '#0f172a', marginBottom: 40 }}>
+            함께하는 고객사
+          </h2>
+          <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 12 }}>
+            {clients.map((c) => (
+              <div key={c} className="corp-client" style={{
+                padding: '12px 24px', borderRadius: 10,
+                border: '1px solid #e2e8f0', background: '#f8fafc',
+                fontSize: 14, fontWeight: 600, color: '#475569',
+                fontFamily: "'Noto Sans KR', sans-serif", cursor: 'pointer',
+              }}>{c}</div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Contact */}
+      <section style={{
+        background: 'linear-gradient(135deg, #0f172a, #1e293b)',
+        padding: '80px 48px', textAlign: 'center',
+      }}>
+        <div style={{ maxWidth: 600, margin: '0 auto' }}>
+          <h2 style={{ fontFamily: 'Montserrat, sans-serif', fontSize: 36, fontWeight: 800, color: 'white', marginBottom: 16 }}>
+            프로젝트를 시작하세요
+          </h2>
+          <p style={{ color: '#94a3b8', fontSize: 16, lineHeight: 1.7, marginBottom: 32, fontFamily: "'Noto Sans KR', sans-serif" }}>
+            IT 솔루션이 필요하시면 언제든지 연락해주세요.<br />
+            전담 컨설턴트가 최적의 방안을 제안해드립니다.
+          </p>
+          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
+            <button style={{
+              background: '#2563eb', color: 'white', border: 'none',
+              padding: '14px 36px', borderRadius: 8, fontSize: 15, fontWeight: 700,
+              cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
+            }}>
+              무료 상담 신청
+            </button>
+            <button style={{
+              background: 'transparent', color: 'white',
+              border: '1px solid rgba(255,255,255,0.2)',
+              padding: '14px 36px', borderRadius: 8, fontSize: 15, fontWeight: 600,
+              cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
+            }}>
+              02-1234-5678
+            </button>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer style={{ background: '#020817', padding: '32px 48px' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
+          <div style={{ color: '#475569', fontSize: 13, fontFamily: "'Noto Sans KR', sans-serif" }}>
+            © 2024 ㈜테크솔루션. All rights reserved.
+          </div>
+          <div style={{ color: '#334155', fontSize: 12, fontFamily: 'Montserrat, sans-serif' }}>
+            서울특별시 강남구 테헤란로 123 테크타워 15F
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}

app/services/website/samples/dashboard/page.tsx

@@ -0,0 +1,339 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+
+export default function DashboardSample() {
+  const [activeMenu, setActiveMenu] = useState('overview');
+
+  const kpis = [
+    { label: '월 활성 사용자', value: '124,832', change: '+12.4%', up: true, icon: '👤', color: '#3b82f6' },
+    { label: '월 매출', value: '₩284M', change: '+8.7%', up: true, icon: '💰', color: '#10b981' },
+    { label: '전환율', value: '3.62%', change: '-0.3%', up: false, icon: '📈', color: '#f59e0b' },
+    { label: '고객 만족도', value: '4.8 / 5', change: '+0.2', up: true, icon: '⭐', color: '#8b5cf6' },
+  ];
+
+  const chartData = [
+    { month: 'Jan', value: 65 },
+    { month: 'Feb', value: 78 },
+    { month: 'Mar', value: 72 },
+    { month: 'Apr', value: 89 },
+    { month: 'May', value: 95 },
+    { month: 'Jun', value: 82 },
+    { month: 'Jul', value: 110 },
+    { month: 'Aug', value: 128 },
+  ];
+
+  const maxVal = Math.max(...chartData.map((d) => d.value));
+
+  const activities = [
+    { user: 'lee@company.com', action: '프리미엄 플랜 구독', time: '2분 전', status: 'success' },
+    { user: 'park@startup.io', action: 'API 한도 초과 경고', time: '14분 전', status: 'warning' },
+    { user: 'kim@corp.kr', action: '팀 멤버 5명 초대', time: '31분 전', status: 'info' },
+    { user: 'choi@brand.com', action: '결제 실패 (카드 만료)', time: '1시간 전', status: 'error' },
+    { user: 'jung@agency.co', action: '새 워크스페이스 생성', time: '2시간 전', status: 'success' },
+  ];
+
+  const menus = [
+    { id: 'overview', icon: '⊞', label: 'Overview' },
+    { id: 'analytics', icon: '◈', label: 'Analytics' },
+    { id: 'users', icon: '◉', label: 'Users' },
+    { 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' };
+
+  return (
+    <div style={{ background: '#0a0f1e', minHeight: '100vh', color: 'white', fontFamily: 'system-ui, sans-serif' }}>
+      <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');
+        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+        @keyframes barGrow { from { height: 0; } to { height: var(--h); } }
+        .dash-menu-item:hover { background: rgba(255,255,255,0.05) !important; }
+        .dash-menu-item { transition: background 0.15s; }
+        .dash-kpi:hover { border-color: rgba(255,255,255,0.12) !important; transform: translateY(-2px); }
+        .dash-kpi { transition: border-color 0.2s, transform 0.2s; }
+        .dash-row:hover { background: rgba(255,255,255,0.03) !important; }
+        .dash-row { transition: background 0.15s; }
+      `}</style>
+
+      {/* Back Banner */}
+      <div style={{
+        background: 'linear-gradient(135deg, #1e1b4b, #312e81)',
+        padding: '10px 24px', display: 'flex', alignItems: 'center', gap: 12,
+        position: 'relative', zIndex: 200,
+      }}>
+        <Link href="/services/website" style={{
+          color: '#a5b4fc', fontSize: 13, textDecoration: 'none',
+          fontFamily: 'DM Sans, sans-serif',
+        }}>
+          ← 홈페이지 제작 서비스로 돌아가기
+        </Link>
+        <span style={{ color: '#4c1d95', fontSize: 13 }}>|</span>
+        <span style={{ color: '#38bdf8', fontSize: 12, fontFamily: 'DM Mono, monospace', fontWeight: 500 }}>
+          SAMPLE · 관리자 대시보드
+        </span>
+      </div>
+
+      <div style={{ display: 'flex', height: 'calc(100vh - 40px)' }}>
+        {/* Sidebar */}
+        <aside style={{
+          width: 220, background: '#060b18',
+          borderRight: '1px solid rgba(255,255,255,0.05)',
+          display: 'flex', flexDirection: 'column', flexShrink: 0,
+        }}>
+          {/* Logo */}
+          <div style={{ padding: '20px 20px 16px', borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+              <div style={{
+                width: 32, height: 32, borderRadius: 8,
+                background: 'linear-gradient(135deg, #3b82f6, #06b6d4)',
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                fontSize: 14, fontWeight: 700, fontFamily: 'DM Mono, monospace',
+              }}>DF</div>
+              <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>
+            </div>
+          </div>
+
+          {/* Nav */}
+          <nav style={{ flex: 1, padding: '12px 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) => (
+              <button
+                key={m.id}
+                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,
+                  background: activeMenu === m.id ? 'rgba(59,130,246,0.15)' : 'transparent',
+                  color: activeMenu === m.id ? '#60a5fa' : '#475569',
+                }}
+              >
+                <span style={{ fontSize: 14 }}>{m.icon}</span>
+                <span style={{ fontSize: 13, fontWeight: activeMenu === m.id ? 600 : 400, fontFamily: 'DM Sans, sans-serif' }}>
+                  {m.label}
+                </span>
+                {activeMenu === m.id && (
+                  <div style={{ marginLeft: 'auto', width: 4, height: 4, borderRadius: '50%', background: '#3b82f6' }} />
+                )}
+              </button>
+            ))}
+          </nav>
+
+          {/* User */}
+          <div style={{ padding: '12px 14px', borderTop: '1px solid rgba(255,255,255,0.05)' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+              <div style={{
+                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={{ fontSize: 12, fontWeight: 600, color: '#e2e8f0', fontFamily: 'DM Sans, sans-serif', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                  Admin
+                </div>
+                <div style={{ fontSize: 10, color: '#334155', fontFamily: 'DM Mono, monospace' }}>Super Admin</div>
+              </div>
+              <div style={{ width: 6, height: 6, borderRadius: '50%', background: '#10b981', flexShrink: 0 }} />
+            </div>
+          </div>
+        </aside>
+
+        {/* Main */}
+        <main style={{ flex: 1, overflowY: 'auto', padding: '24px 28px', animation: 'fadeIn 0.4s ease' }}>
+          {/* Header */}
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
+            <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 style={{ display: 'flex', gap: 10 }}>
+              <select style={{
+                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>
+              </select>
+              <button style={{
+                background: '#3b82f6', border: 'none', color: 'white',
+                padding: '8px 18px', borderRadius: 8, fontSize: 12, fontWeight: 600,
+                cursor: 'pointer', fontFamily: 'DM Sans, sans-serif',
+              }}>
+                리포트 내보내기
+              </button>
+            </div>
+          </div>
+
+          {/* KPI Cards */}
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 16, marginBottom: 24 }}>
+            {kpis.map((kpi) => (
+              <div key={kpi.label} className="dash-kpi" style={{
+                padding: '18px 20px', borderRadius: 14,
+                background: '#0f172a', border: '1px solid rgba(255,255,255,0.06)',
+              }}>
+                <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 style={{ fontSize: 26, fontWeight: 700, color: 'white', fontFamily: 'DM Sans, sans-serif', marginBottom: 6 }}>
+                  {kpi.value}
+                </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}
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* Chart + Progress */}
+          <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 16, marginBottom: 24 }}>
+            {/* Bar Chart */}
+            <div style={{
+              padding: '22px 24px', borderRadius: 14,
+              background: '#0f172a', border: '1px solid rgba(255,255,255,0.06)',
+            }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
+                <div style={{ fontSize: 14, fontWeight: 700, color: 'white', fontFamily: 'DM Sans, sans-serif' }}>
+                  월별 매출 추이
+                </div>
+                <div style={{ display: 'flex', gap: 8 }}>
+                  {['1M', '3M', '6M', '1Y'].map((p) => (
+                    <button key={p} style={{
+                      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 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>
+
+            {/* Progress */}
+            <div style={{
+              padding: '22px 24px', borderRadius: 14,
+              background: '#0f172a', border: '1px solid rgba(255,255,255,0.06)',
+            }}>
+              <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 }}>
+                    <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>
+                  </div>
+                  <div style={{ height: 4, background: '#1e293b', borderRadius: 2, overflow: 'hidden' }}>
+                    <div style={{
+                      height: '100%', borderRadius: 2, background: p.color,
+                      width: `${p.val}%`, opacity: 0.8,
+                    }} />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Activity Table */}
+          <div style={{
+            borderRadius: 14, background: '#0f172a',
+            border: '1px solid rgba(255,255,255,0.06)', overflow: 'hidden',
+          }}>
+            <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>
+            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+              <thead>
+                <tr style={{ borderBottom: '1px solid rgba(255,255,255,0.04)' }}>
+                  {['사용자', '활동', '시간', '상태'].map((h) => (
+                    <th key={h} style={{
+                      padding: '10px 20px', textAlign: 'left',
+                      fontSize: 10, color: '#334155', fontFamily: 'DM Mono, monospace',
+                      letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 500,
+                    }}>{h}</th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {activities.map((a, i) => (
+                  <tr key={i} className="dash-row" style={{ borderBottom: '1px solid rgba(255,255,255,0.03)' }}>
+                    <td style={{ padding: '12px 20px', fontFamily: 'DM Mono, monospace', fontSize: 12, color: '#60a5fa' }}>
+                      {a.user}
+                    </td>
+                    <td style={{ padding: '12px 20px', fontFamily: 'DM Sans, sans-serif', fontSize: 13, color: '#94a3b8' }}>
+                      {a.action}
+                    </td>
+                    <td style={{ padding: '12px 20px', fontFamily: 'DM Mono, monospace', fontSize: 11, color: '#334155' }}>
+                      {a.time}
+                    </td>
+                    <td style={{ padding: '12px 20px' }}>
+                      <span style={{
+                        display: 'inline-block',
+                        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>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}

app/services/website/samples/game/page.tsx

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

app/services/website/samples/portfolio/page.tsx

@@ -0,0 +1,345 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+
+export default function PortfolioSample() {
+  const [hoveredProject, setHoveredProject] = useState<number | null>(null);
+
+  const skills = [
+    { name: 'Figma', level: 98 },
+    { name: 'React', level: 90 },
+    { name: 'TypeScript', level: 85 },
+    { name: 'After Effects', level: 88 },
+    { name: 'Three.js', level: 75 },
+    { name: 'Framer', level: 92 },
+  ];
+
+  const projects = [
+    { title: 'NEON CITY UI', desc: '사이버펑크 게임 인터페이스', gradient: 'linear-gradient(135deg, #00ff88, #00d4ff)', tag: 'UI/UX' },
+    { title: 'FLOW BRAND', desc: '핀테크 스타트업 브랜딩', gradient: 'linear-gradient(135deg, #a855f7, #ec4899)', tag: 'Branding' },
+    { title: 'ORBITAL APP', desc: '위성 추적 대시보드', gradient: 'linear-gradient(135deg, #3b82f6, #06b6d4)', tag: 'Web App' },
+    { title: 'TERRA SHOP', desc: '친환경 D2C 쇼핑몰', gradient: 'linear-gradient(135deg, #22c55e, #84cc16)', tag: 'E-commerce' },
+    { title: 'PULSE MOTION', desc: '모션 그래픽 패키지', gradient: 'linear-gradient(135deg, #f59e0b, #ef4444)', tag: 'Motion' },
+    { title: 'AXIS SYSTEM', desc: '물류 관리 SaaS', gradient: 'linear-gradient(135deg, #64748b, #475569)', tag: 'Dashboard' },
+  ];
+
+  const timeline = [
+    { year: '2023', event: 'Google UX Design Certificate 취득', type: 'award' },
+    { year: '2022', event: 'Awwwards SOTD 2회 수상', type: 'award' },
+    { year: '2021', event: 'LINE Corp. UI 디자이너 입사', type: 'career' },
+    { year: '2020', event: 'Hongik University 시각디자인과 졸업', type: 'edu' },
+    { year: '2019', event: 'Adobe Design Award Korea 은상', type: 'award' },
+  ];
+
+  return (
+    <div style={{ background: '#000000', minHeight: '100vh', color: 'white' }}>
+      <style>{`
+        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');
+        @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
+        @keyframes scanline { 0% { top: -10%; } 100% { top: 110%; } }
+        @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 slideBar { from { width: 0; } to { width: 100%; } }
+        .proj-card:hover { border-color: rgba(0,255,136,0.4) !important; }
+        .proj-card { transition: border-color 0.3s; }
+      `}</style>
+
+      {/* Back Banner */}
+      <div style={{
+        background: 'linear-gradient(135deg, #1e1b4b, #312e81)',
+        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>
+        <span style={{ color: '#4c1d95', fontSize: 13 }}>|</span>
+        <span style={{ color: '#00ff88', fontSize: 12, fontFamily: 'Space Mono, monospace', fontWeight: 700 }}>
+          SAMPLE · 개인 포트폴리오
+        </span>
+      </div>
+
+      {/* Navbar */}
+      <nav style={{
+        position: 'sticky', top: 0, zIndex: 100,
+        background: 'rgba(0,0,0,0.9)', backdropFilter: 'blur(20px)',
+        borderBottom: '1px solid rgba(0,255,136,0.15)',
+        padding: '0 48px', height: 64,
+        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+      }}>
+        <div style={{
+          fontFamily: 'Space Mono, monospace', fontSize: 15, fontWeight: 700,
+          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 style={{ display: 'flex', gap: 32 }}>
+          {['About', 'Work', 'Skills', 'Contact'].map((item) => (
+            <span key={item} style={{
+              fontFamily: 'Space Grotesk, sans-serif', fontSize: 13, fontWeight: 600,
+              color: '#4b5563', cursor: 'pointer', letterSpacing: '0.05em',
+              textTransform: 'uppercase',
+            }}>{item}</span>
+          ))}
+        </div>
+        <button style={{
+          background: 'transparent', border: '1px solid #00ff88',
+          color: '#00ff88', padding: '8px 20px', borderRadius: 4,
+          fontSize: 12, fontWeight: 700, cursor: 'pointer',
+          fontFamily: 'Space Mono, monospace', letterSpacing: '0.08em',
+        }}>
+          HIRE ME
+        </button>
+      </nav>
+
+      {/* Hero */}
+      <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',
+        }} />
+        {/* 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={{
+            fontFamily: 'Space Mono, monospace', fontSize: 12,
+            color: 'rgba(0,255,136,0.6)', letterSpacing: '0.2em',
+            marginBottom: 20, textTransform: 'uppercase',
+          }}>
+            {'> Hello, World. I am'}
+          </div>
+          <h1 style={{
+            fontFamily: 'Space Grotesk, sans-serif',
+            fontSize: 'clamp(52px, 7vw, 96px)',
+            fontWeight: 700, lineHeight: 1.0, marginBottom: 16,
+            letterSpacing: '-0.03em',
+          }}>
+            Kim<br />
+            <span style={{ color: '#00ff88' }}>Jisu</span>
+            <span style={{
+              display: 'inline-block', width: 6, height: 'clamp(52px, 7vw, 96px)',
+              background: '#00ff88', marginLeft: 8, verticalAlign: 'middle',
+              animation: 'blink 1.2s step-end infinite',
+            }} />
+          </h1>
+          <div style={{
+            fontFamily: 'Space Grotesk, sans-serif', fontSize: 20,
+            color: '#4b5563', fontWeight: 500, marginBottom: 24,
+          }}>
+            Product Designer & Creative Developer
+          </div>
+          <p style={{
+            fontFamily: 'Space Grotesk, sans-serif', fontSize: 16,
+            color: '#6b7280', lineHeight: 1.8, maxWidth: 520, marginBottom: 36,
+          }}>
+            픽셀 하나하나에 의미를 담는 디자이너. 아름다움과 기능의 교차점에서 디지털 경험을 설계합니다.
+          </p>
+          <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
+            <button style={{
+              background: '#00ff88', color: '#000000', border: 'none',
+              padding: '14px 32px', fontSize: 14, fontWeight: 700, cursor: 'pointer',
+              fontFamily: 'Space Mono, monospace', letterSpacing: '0.05em',
+              clipPath: 'polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px))',
+            }}>
+              VIEW WORK →
+            </button>
+            <button style={{
+              background: 'transparent', color: '#9ca3af',
+              border: '1px solid #1f2937',
+              padding: '14px 32px', fontSize: 14, fontWeight: 600, cursor: 'pointer',
+              fontFamily: 'Space Grotesk, sans-serif', borderRadius: 4,
+            }}>
+              Download CV
+            </button>
+            <div style={{ display: 'flex', gap: 8, marginLeft: 8 }}>
+              {['6+', '30+', '2x'].map((s, i) => (
+                <div key={i} style={{
+                  padding: '8px 14px', border: '1px solid #1f2937', borderRadius: 4,
+                  fontFamily: 'Space Mono, monospace', fontSize: 12,
+                  color: '#4b5563',
+                }}>
+                  <span style={{ color: '#00ff88', fontWeight: 700 }}>{s}</span>
+                  <span style={{ marginLeft: 4 }}>{['YEARS', 'PROJECTS', 'AWWWARDS'][i]}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Projects */}
+      <section style={{ padding: '80px 48px', background: '#050505' }}>
+        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 48 }}>
+            <h2 style={{
+              fontFamily: 'Space Grotesk, sans-serif', fontSize: 36, fontWeight: 700,
+              letterSpacing: '-0.02em',
+            }}>
+              Selected Work<span style={{ color: '#00ff88' }}>.</span>
+            </h2>
+            <span style={{ color: '#374151', fontSize: 12, fontFamily: 'Space Mono, monospace' }}>
+              2019 — 2024
+            </span>
+          </div>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 16 }}>
+            {projects.map((proj, i) => (
+              <div
+                key={i}
+                className="proj-card"
+                onMouseEnter={() => setHoveredProject(i)}
+                onMouseLeave={() => setHoveredProject(null)}
+                style={{
+                  border: '1px solid #111827', borderRadius: 12, overflow: 'hidden',
+                  cursor: 'pointer', background: '#0a0a0a',
+                }}
+              >
+                <div style={{
+                  height: 180, background: proj.gradient, position: 'relative',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  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 style={{
+                    position: 'absolute', top: 12, right: 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>
+                <div style={{ padding: '16px 18px' }}>
+                  <div style={{ fontSize: 15, fontWeight: 700, color: 'white', fontFamily: 'Space Grotesk, sans-serif', marginBottom: 4 }}>
+                    {proj.title}
+                  </div>
+                  <div style={{ fontSize: 13, color: '#4b5563', fontFamily: 'Space Grotesk, sans-serif' }}>
+                    {proj.desc}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Skills */}
+      <section style={{ padding: '80px 48px', background: '#000000' }}>
+        <div style={{ maxWidth: 900, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }}>
+          <div>
+            <h2 style={{
+              fontFamily: 'Space Grotesk, sans-serif', fontSize: 36, fontWeight: 700,
+              marginBottom: 36, letterSpacing: '-0.02em',
+            }}>
+              Skills<span style={{ color: '#00ff88' }}>.</span>
+            </h2>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
+              {skills.map((s) => (
+                <div key={s.name}>
+                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
+                    <span style={{ fontFamily: 'Space Mono, monospace', fontSize: 12, color: '#9ca3af', letterSpacing: '0.05em' }}>
+                      {s.name}
+                    </span>
+                    <span style={{ fontFamily: 'Space Mono, monospace', fontSize: 11, color: '#00ff88' }}>
+                      {s.level}%
+                    </span>
+                  </div>
+                  <div style={{ height: 3, background: '#111827', borderRadius: 2, overflow: 'hidden' }}>
+                    <div style={{
+                      height: '100%', borderRadius: 2,
+                      background: 'linear-gradient(90deg, #00ff88, #00d4ff)',
+                      width: `${s.level}%`,
+                      animation: 'slideBar 1.5s ease forwards',
+                    }} />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div>
+            <h2 style={{
+              fontFamily: 'Space Grotesk, sans-serif', fontSize: 36, fontWeight: 700,
+              marginBottom: 36, letterSpacing: '-0.02em',
+            }}>
+              Timeline<span style={{ color: '#00ff88' }}>.</span>
+            </h2>
+            <div style={{ position: 'relative', paddingLeft: 20 }}>
+              <div style={{
+                position: 'absolute', left: 4, top: 8, bottom: 8,
+                width: 1, background: '#1f2937',
+              }} />
+              {timeline.map((t, i) => (
+                <div key={i} style={{ position: 'relative', paddingBottom: 24 }}>
+                  <div style={{
+                    position: 'absolute', left: -20, top: 4,
+                    width: 8, height: 8, borderRadius: '50%',
+                    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)'}`,
+                  }} />
+                  <div style={{ fontFamily: 'Space Mono, monospace', fontSize: 11, color: '#374151', marginBottom: 2 }}>
+                    {t.year}
+                  </div>
+                  <div style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 14, color: '#d1d5db' }}>
+                    {t.event}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Contact */}
+      <section style={{
+        padding: '80px 48px', textAlign: 'center',
+        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'}
+        </div>
+        <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',
+        }}>
+          Have a project<span style={{ color: '#00ff88' }}>?</span>
+        </h2>
+        <p style={{
+          fontFamily: 'Space Grotesk, sans-serif', fontSize: 16,
+          color: '#4b5563', marginBottom: 36,
+        }}>
+          jisu.kim@design.studio · @jisu_creates
+        </p>
+        <button style={{
+          background: '#00ff88', color: '#000000', border: 'none',
+          padding: '16px 44px', fontSize: 14, fontWeight: 700,
+          cursor: 'pointer', fontFamily: 'Space Mono, monospace', letterSpacing: '0.08em',
+          clipPath: 'polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px))',
+        }}>
+          START A PROJECT →
+        </button>
+      </section>
+    </div>
+  );
+}