feat(web): 리전별 가격표 추가

원가 + 20% 마진 기준 리전별 차등 가격:
- 도쿄/오사카, 싱가포르 (Linode): ₩8,900 ~ ₩39,900
- 홍콩 (Google Cloud): ₩14,900 ~ ₩57,900
- 서울 (AWS): ₩19,900 ~ ₩63,900

공통 포함 사항: DDoS 방어, 무료 SSL, 24시간 지원

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
kappa
2026-01-19 11:22:17 +09:00
parent 25adda4497
commit 9dbcb8b0e5

View File

@@ -572,71 +572,85 @@
<h2 class="text-3xl md:text-4xl font-bold mb-4 font-hand"> <h2 class="text-3xl md:text-4xl font-bold mb-4 font-hand">
<span class="sketch-underline">요금제</span> <span class="sketch-underline">요금제</span>
</h2> </h2>
<p class="text-xl text-sketch-line/70">필요에 맞는 플랜을 선택하세요~</p> <p class="text-xl text-sketch-line/70">리전별 월간 요금 (VAT 별도)</p>
</div> </div>
<div class="grid md:grid-cols-3 gap-8"> <!-- 가격표 테이블 -->
<!-- Starter --> <div class="sketch-border p-6 md:p-8 mb-12" style="transform: rotate(0deg);">
<div class="sketch-border p-8"> <div class="overflow-x-auto">
<h3 class="text-xl font-bold mb-2">Starter</h3> <table class="w-full text-center">
<p class="text-sketch-line/70 text-sm mb-6">개인 프로젝트에 적합</p> <thead>
<div class="mb-6"> <tr class="border-b-2 border-dashed border-sketch-line/30">
<span class="text-4xl font-bold">₩4,900</span> <th class="py-4 px-3 text-left">사양</th>
<span class="text-sketch-line/70">/월</span> <th class="py-4 px-3">🇯🇵 도쿄/오사카</th>
</div> <th class="py-4 px-3">🇸🇬 싱가포르</th>
<ul class="space-y-3 mb-8 text-left"> <th class="py-4 px-3">🇭🇰 홍콩</th>
<li class="sketch-check">1vCPU / 1GB RAM</li> <th class="py-4 px-3">🇰🇷 서울</th>
<li class="sketch-check">SSD 30GB</li> </tr>
<li class="sketch-check">트래픽 500GB</li> </thead>
<li class="sketch-check">기본 DDoS 방어</li> <tbody class="text-sketch-line/80">
</ul> <tr class="border-b border-dashed border-sketch-line/20">
<a href="#contact" class="sketch-btn block text-center py-3"> <td class="py-4 px-3 text-left">
선택하기 <div class="font-bold">Starter</div>
</a> <div class="text-xs text-sketch-line/50">1vCPU · 1GB · 25GB SSD · 1TB</div>
</td>
<td class="py-4 px-3 font-bold text-sketch-green">₩8,900</td>
<td class="py-4 px-3 font-bold text-sketch-green">₩8,900</td>
<td class="py-4 px-3 font-bold">₩14,900</td>
<td class="py-4 px-3 font-bold">₩19,900</td>
</tr>
<tr class="border-b border-dashed border-sketch-line/20 bg-sketch-blue/5">
<td class="py-4 px-3 text-left">
<div class="font-bold text-sketch-blue">Pro ⭐</div>
<div class="text-xs text-sketch-line/50">1vCPU · 2GB · 50GB SSD · 2TB</div>
</td>
<td class="py-4 px-3 font-bold text-sketch-green">₩19,900</td>
<td class="py-4 px-3 font-bold text-sketch-green">₩19,900</td>
<td class="py-4 px-3 font-bold">₩28,900</td>
<td class="py-4 px-3 font-bold">₩31,900</td>
</tr>
<tr>
<td class="py-4 px-3 text-left">
<div class="font-bold">Business</div>
<div class="text-xs text-sketch-line/50">2vCPU · 4GB · 80GB SSD · 4TB</div>
</td>
<td class="py-4 px-3 font-bold text-sketch-green">₩39,900</td>
<td class="py-4 px-3 font-bold text-sketch-green">₩39,900</td>
<td class="py-4 px-3 font-bold">₩57,900</td>
<td class="py-4 px-3 font-bold">₩63,900</td>
</tr>
</tbody>
</table>
</div> </div>
<p class="text-sketch-line/50 text-sm mt-4 text-center">
💡 도쿄/오사카, 싱가포르가 가장 저렴합니다!
</p>
</div>
<!-- Pro (인기) --> <!-- 공통 포함 사항 -->
<div class="sketch-border p-8 relative" style="border-color: #1971c2; border-width: 3px;"> <div class="grid md:grid-cols-3 gap-6">
<div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-sketch-blue text-white text-sm font-bold px-4 py-1 border-2 border-sketch-line" style="transform: translateX(-50%) rotate(-2deg);"> <div class="sketch-border p-6 text-center">
⭐ 인기 <div class="text-3xl mb-3">🛡️</div>
</div> <h4 class="font-bold mb-2">DDoS 방어</h4>
<h3 class="text-xl font-bold mb-2">Pro</h3> <p class="text-sketch-line/70 text-sm">모든 요금제 기본 포함</p>
<p class="text-sketch-line/70 text-sm mb-6">성장하는 비즈니스에 적합</p>
<div class="mb-6">
<span class="text-4xl font-bold text-sketch-blue">₩14,900</span>
<span class="text-sketch-line/70">/월</span>
</div>
<ul class="space-y-3 mb-8 text-left">
<li class="sketch-check">2vCPU / 2GB RAM</li>
<li class="sketch-check">SSD 50GB</li>
<li class="sketch-check">트래픽 1TB</li>
<li class="sketch-check">고급 DDoS 방어</li>
<li class="sketch-check">무료 SSL 인증서</li>
</ul>
<a href="#contact" class="sketch-btn sketch-btn-primary block text-center py-3">
선택하기
</a>
</div> </div>
<div class="sketch-border p-6 text-center">
<div class="text-3xl mb-3">🔒</div>
<h4 class="font-bold mb-2">무료 SSL</h4>
<p class="text-sketch-line/70 text-sm">Let's Encrypt 자동 발급</p>
</div>
<div class="sketch-border p-6 text-center">
<div class="text-3xl mb-3">🎧</div>
<h4 class="font-bold mb-2">24시간 지원</h4>
<p class="text-sketch-line/70 text-sm">텔레그램 실시간 상담</p>
</div>
</div>
<!-- Business --> <!-- CTA -->
<div class="sketch-border p-8"> <div class="text-center mt-12">
<h3 class="text-xl font-bold mb-2">Business</h3> <a href="https://t.me/AnvilForgeBot" target="_blank" class="sketch-btn sketch-btn-primary px-8 py-4 text-xl inline-flex items-center gap-2">
<p class="text-sketch-line/70 text-sm mb-6">대규모 서비스에 적합</p> 서버 신청하기 →
<div class="mb-6"> </a>
<span class="text-4xl font-bold">₩29,900</span>
<span class="text-sketch-line/70">/월</span>
</div>
<ul class="space-y-3 mb-8 text-left">
<li class="sketch-check">4vCPU / 4GB RAM</li>
<li class="sketch-check">SSD 100GB</li>
<li class="sketch-check">트래픽 2TB</li>
<li class="sketch-check">엔터프라이즈 DDoS 방어</li>
<li class="sketch-check">무료 SSL 인증서</li>
</ul>
<a href="#contact" class="sketch-btn block text-center py-3">
선택하기
</a>
</div>
</div> </div>
</div> </div>
</section> </section>