diff --git a/app/services/website/page.tsx b/app/services/website/page.tsx index 5509740..a1e2ec2 100644 --- a/app/services/website/page.tsx +++ b/app/services/website/page.tsx @@ -157,6 +157,285 @@ function useReveal() { return ref; } +function SampleMiniPreview({ type }: { type: string }) { + const W = 700, H = 350; + const inner = (content: React.ReactNode, bg: string) => ( +
+
+ {content} +
+
+ ); + + switch (type) { + case 'corporate': + return inner( +
+
+
TECHSOLUTION
+
+ {['서비스','솔루션','고객사','연락처'].map(t => {t})} +
+
상담 신청
+
+
+
ENTERPRISE IT SOLUTIONS
+
기업 IT 인프라,
처음부터 끝까지
+
15년 경험의 엔터프라이즈 IT 전문 기업.
클라우드·보안·DX 통합 솔루션을 제공합니다.
+
+
무료 상담 신청
+
서비스 소개서
+
+
+ {[['15+','년 업력'],['340+','완료 프로젝트'],['180+','기업 고객'],['99.9%','가동률']].map(([n,l]) => ( +
{n}
{l}
+ ))} +
+
+
, '#fff' + ); + + case 'bakery': + return inner( +
+
+
Le Petit Fort
ARTISAN BOULANGERIE
+
+ {['메뉴','스토리','예약'].map(t => {t})} +
+
방문 예약
+
+
+
+
Since 2018 · Paris Recipe
+
매일 아침
구워내는
정직한 빵
+
프랑스산 에슈레 버터와 천연 발효종만으로
만드는 정직한 아르티장 베이커리.
+
+
오늘의 빵 보기
+
매장 안내
+
+
+
+ {[{n:'버터 크루아상',p:'3,200',c:'#d97706'},{n:'소금빵',p:'2,800',c:'#b45309'},{n:'딸기 케이크',p:'7,500',c:'#be185d'},{n:'캄파뉴',p:'8,900',c:'#065f46'}].map(item => ( +
+
+
{item.n}
+
₩{item.p}
+
+ ))} +
+
+
, '#fffbf5' + ); + + case 'portfolio': + return inner( +
+
+
+
KJ_
+
+ {['About','Work','Skills','Contact'].map(t => {t})} +
+
+
+ Available +
HIRE ME
+
+
+
+
+
+
FULL-STACK DEVELOPER
+
Kim
Jisu
+
React · Next.js · TypeScript · Node.js
디자인과 코드의 경계를 탐험합니다.
+
+
VIEW WORK
+
CONTACT
+
+
+
+
+ KJ +
+
+
+
, '#000' + ); + + case 'dashboard': + return inner( +
+
+
DataFlow
+ {['대시보드','분석','리포트','사용자','설정'].map((item, i) => ( +
{item}
+ ))} +
+
+
+
실시간 현황
+
이번 달
+
+
+ {[{l:'총 매출',v:'₩48.2M',c:'#38bdf8',u:true},{l:'신규 사용자',v:'1,247',c:'#34d399',u:true},{l:'전환율',v:'12.4%',c:'#a78bfa',u:false}].map(s => ( +
+
{s.l}
+
{s.v}
+
{s.u ? '↑ +8.3%' : '↓ -1.2%'}
+
+ ))} +
+
+
월간 매출 추이
+
+ {[40,55,35,65,80,60,90,75,85,95,70,100].map((h, i) => ( +
+ ))} +
+
+
+
, '#0f172a' + ); + + case 'game': + return inner( +
+
+
+
+
NEXUSARENA
+
+ {['랭킹','매칭','챔피언','스토어'].map(t => {t})} +
+
PLAY NOW
+
+
+
+
SEASON 7 · COMPETITIVE
+
NEXUS
ARENA
+
실시간 매칭 · 랭크 시스템 · 글로벌 토너먼트
지금 바로 전장에 참전하세요.
+
+
PLAY NOW
+
랭킹 보기
+
+
+
+ {[{name:'VIPER',role:'Assassin',c:'#06b6d4'},{name:'NOVA',role:'Mage',c:'#a855f7'},{name:'IRON',role:'Tank',c:'#94a3b8'},{name:'KIRA',role:'Support',c:'#ec4899'}].map(ch => ( +
+
+
+
+
{ch.name}
+
{ch.role}
+
+ ))} +
+
+
, '#000' + ); + + case 'interior': + return inner( +
+
+
AURUM
INTERIOR DESIGN
+
+ {['포트폴리오','서비스','견적 문의'].map(t => {t})} +
+
CONTACT
+
+
+
+
Premium Interior Design
+
공간이
이야기가
되는 순간
+
20년 경험의 인테리어 전문가가
당신만의 공간을 완성합니다.
+
포트폴리오 보기
+
+
+ {['linear-gradient(135deg, #c9b99a, #a8927a)','linear-gradient(135deg, #8B7355, #6B5A47)','linear-gradient(135deg, #D4C5A9, #B8A88A)','linear-gradient(135deg, #7C6555, #5C4A3A)'].map((bg, i) => ( +
+ ))} +
+
+
, '#faf8f4' + ); + + case 'reading': + return inner( +
+
+
나의 독서 기록
+
+ {['서재','월별 기록','통계'].map(t => {t})} +
+
+
+
+
My Reading Journal
+
읽은 책들이
별처럼
빛나는 공간
+
독서 기록을 아름답게.
감상과 인용구를 나만의 서재에 담아보세요.
+
기록 시작하기
+
+ {[['47','완독'],['1,240','페이지'],['12','이번 달']].map(([n,l]) => ( +
{n}
{l}
+ ))} +
+
+
+ {[{h:130,bg:'linear-gradient(180deg,#1e3a5f,#0a1628)',sp:'#2563eb'},{h:152,bg:'linear-gradient(180deg,#2C1810,#1a0e0a)',sp:'#D4A853'},{h:118,bg:'linear-gradient(180deg,#1a1a1a,#0d0d0d)',sp:'#6b7280'},{h:142,bg:'linear-gradient(180deg,#1e1b4b,#0f0d2e)',sp:'#7c3aed'},{h:120,bg:'linear-gradient(180deg,#064e3b,#022c22)',sp:'#10b981'}].map((b, i) => ( +
+
+
+ ))} +
+
+
, '#0C0B09' + ); + + case 'shopping': + return inner( +
+
+
MELLOW STUDIO
+
+ {['NEW','OUTER','TOP','BOTTOM'].map(t => {t})} +
+
🔍🛍 2
+
+
+
+
+
+
NEW ARRIVAL
+
SS 2025
+
+
+
+
+
COLLECTION
+
Quiet
Luxury
+
소음 없이 존재하는 옷.
절제된 아름다움을 입으세요.
+
SHOP NOW
+
+
+ {[['#c8b89a','₩328K'],['#8a7860','₩498K'],['#d4c5a9','₩218K']].map(([bg, p], i) => ( +
+
+
{p}
+
+ ))} +
+
+
+
, '#F4F2EF' + ); + + default: + return
; + } +} + export default function WebsiteServicePage() { const [openFaq, setOpenFaq] = useState(null); const [showTop, setShowTop] = useState(false); @@ -432,23 +711,20 @@ export default function WebsiteServicePage() { {samples.map((s) => (
-
- {s.icon} -
+
+ +
{s.tags.map((tag) => ( {tag} ))}