kaffa/telegram-bot-workers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
166ea6dde8838c595c7c14a08fa814b757cc516f
telegram-bot-workers/web/index.html
kappa 4d22ea73f2 feat(web): add footer with business info 
- Add 3-column footer layout (Company, Contact, Links)
- Add LIBEHAIM Inc. registrant info (matches namecheap-api .env)
- Add terms and privacy policy links

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-18 16:10:31 +09:00

563 lines
31 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anvil Hosting - 안정적인 호스팅 서비스</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
},
},
}
</script>
<style>
html { scroll-behavior: smooth; }
.gradient-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.card-hover {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(102, 126, 234, 0.15);
}
</style>
</head>
<body class="bg-gray-950 text-gray-100 font-sans">
<!-- Navigation -->
<nav class="fixed top-0 w-full bg-gray-950/80 backdrop-blur-md z-50 border-b border-gray-800">
<div class="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
<a href="#" class="flex items-center gap-2">
<svg class="w-9 h-9" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- 모루 메탈 그라데이션 (위에서 아래로, 밝은→어두운) -->
<linearGradient id="anvilMetal" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#9ca3af"/>
<stop offset="50%" style="stop-color:#6b7280"/>
<stop offset="100%" style="stop-color:#4b5563"/>
</linearGradient>
<!-- 모루 상단 하이라이트 -->
<linearGradient id="anvilTop" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#d1d5db"/>
<stop offset="100%" style="stop-color:#9ca3af"/>
</linearGradient>
<!-- 망치 머리 메탈 -->
<linearGradient id="hammerMetal" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#d1d5db"/>
<stop offset="40%" style="stop-color:#9ca3af"/>
<stop offset="100%" style="stop-color:#6b7280"/>
</linearGradient>
<!-- 손잡이 나무 -->
<linearGradient id="woodHandle" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#92400e"/>
<stop offset="50%" style="stop-color:#b45309"/>
<stop offset="100%" style="stop-color:#78350f"/>
</linearGradient>
</defs>
<!-- Anvil base (모루 받침) -->
<path d="M4 26 L4 30 L28 30 L28 26 Z" fill="url(#anvilMetal)"/>
<!-- Anvil body (모루 몸체) -->
<path d="M6 22 L6 26 L26 26 L26 22 Z" fill="url(#anvilMetal)"/>
<!-- Anvil top surface (모루 상판 - 하이라이트) -->
<path d="M8 20 L8 22 L24 22 L24 20 Z" fill="url(#anvilTop)"/>
<!-- Anvil top highlight edge -->
<path d="M8 20 L24 20" stroke="#e5e7eb" stroke-width="0.5"/>
<!-- Anvil horn (뿔) -->
<path d="M26 23 L33 21 L33 23 L26 25 Z" fill="url(#anvilMetal)"/>
<path d="M26 23 L33 21" stroke="#d1d5db" stroke-width="0.5"/>
<!-- Hammer handle (손잡이) -->
<rect x="5" y="3" width="3" height="13" rx="1" fill="url(#woodHandle)" transform="rotate(-50 6.5 9.5)"/>
<!-- Hammer head (망치 머리) -->
<rect x="11" y="1" width="13" height="6" rx="1" fill="url(#hammerMetal)" transform="rotate(-50 17.5 4)"/>
<!-- Hammer head highlight -->
<path d="M14 2 L22 -2" stroke="#e5e7eb" stroke-width="0.8" stroke-linecap="round" transform="rotate(-50 17.5 4)"/>
<!-- Sparks (불꽃) -->
<circle cx="17" cy="17" r="1.5" fill="#f59e0b"/>
<circle cx="20" cy="15" r="1" fill="#fbbf24"/>
<circle cx="14" cy="15.5" r="1" fill="#fbbf24"/>
<path d="M17 14 L17 11 M14 13 L12 10 M20 13 L22 10" stroke="#f59e0b" stroke-width="1.5" stroke-linecap="round"/>
</svg>
<span class="text-xl font-bold" style="background: linear-gradient(180deg, #e5e7eb 0%, #9ca3af 40%, #6b7280 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">Anvil</span>
</a>
<div class="hidden md:flex gap-8">
<a href="#services" class="text-gray-400 hover:text-white transition">서비스</a>
<a href="#domain" class="text-gray-400 hover:text-white transition">도메인</a>
<a href="#features" class="text-gray-400 hover:text-white transition">특징</a>
<a href="#pricing" class="text-gray-400 hover:text-white transition">가격</a>
<a href="#contact" class="text-gray-400 hover:text-white transition">문의</a>
</div>
<a href="#contact" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg text-sm font-medium transition">
시작하기
</a>
</div>
</nav>
<!-- Hero Section -->
<section class="min-h-screen flex items-center justify-center pt-20">
<div class="max-w-6xl mx-auto px-6 text-center">
<div class="inline-block px-4 py-2 bg-indigo-500/10 border border-indigo-500/20 rounded-full text-indigo-400 text-sm mb-6">
안정적인 인프라, 합리적인 가격
</div>
<h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
당신의 서비스를 위한<br>
<span class="gradient-text">완벽한 호스팅</span>
</h1>
<p class="text-xl text-gray-400 mb-10 max-w-2xl mx-auto">
해외 서버, DDoS 방어, 도메인까지<br>
원스톱으로 제공하는 프리미엄 호스팅 서비스
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#contact" class="bg-indigo-600 hover:bg-indigo-700 px-8 py-4 rounded-xl font-medium text-lg transition">
무료 상담 받기
</a>
<a href="#services" class="border border-gray-700 hover:border-gray-500 px-8 py-4 rounded-xl font-medium text-lg transition">
서비스 둘러보기
</a>
</div>
<!-- Telegram Bot Highlight -->
<div class="mt-16 bg-gradient-to-r from-indigo-900/30 to-purple-900/30 border border-indigo-500/20 rounded-2xl p-8">
<div class="flex flex-col md:flex-row items-center gap-6">
<div class="w-16 h-16 bg-indigo-500/20 rounded-2xl flex items-center justify-center flex-shrink-0">
<svg class="w-8 h-8 text-indigo-400" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.562 8.161c-.18 1.897-.962 6.502-1.359 8.627-.168.9-.5 1.201-.82 1.23-.697.064-1.226-.461-1.901-.903-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.139-5.062 3.345-.479.329-.913.489-1.302.481-.428-.009-1.252-.242-1.865-.442-.751-.244-1.349-.374-1.297-.789.027-.216.324-.437.893-.663 3.498-1.524 5.831-2.529 6.998-3.015 3.333-1.386 4.025-1.627 4.477-1.635.099-.002.321.023.465.141.121.099.154.232.17.325.015.093.034.305.019.471z"/>
</svg>
</div>
<div class="text-center md:text-left flex-1">
<h3 class="text-xl font-semibold mb-2">텔레그램 하나로 모든 것을 관리하세요</h3>
<p class="text-gray-400">
서비스 신청, 상태 조회, 도메인 등록, 결제까지 —<br class="hidden md:block">
복잡한 대시보드 없이 <span class="text-indigo-400 font-medium">대화만으로</span> 모든 것이 가능합니다.
</p>
</div>
<a href="https://t.me/AnvilForgeBot" target="_blank" class="bg-indigo-600 hover:bg-indigo-700 px-6 py-3 rounded-xl font-medium transition flex items-center gap-2 flex-shrink-0">
<span>봇 시작하기</span>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
</svg>
</a>
</div>
</div>
<!-- Stats -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 mt-12 pt-10 border-t border-gray-800">
<div>
<div class="text-3xl font-bold gradient-text">99.9%</div>
<div class="text-gray-500 mt-1">업타임 보장</div>
</div>
<div>
<div class="text-3xl font-bold gradient-text">10+</div>
<div class="text-gray-500 mt-1">글로벌 리전</div>
</div>
<div>
<div class="text-3xl font-bold gradient-text">24/7</div>
<div class="text-gray-500 mt-1">기술 지원</div>
</div>
<div>
<div class="text-3xl font-bold gradient-text">1Tbps+</div>
<div class="text-gray-500 mt-1">DDoS 방어</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-20">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">서비스</h2>
<p class="text-gray-400">비즈니스에 필요한 모든 인프라를 제공합니다</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Domain -->
<div class="bg-gray-900 border border-gray-800 rounded-2xl p-6 card-hover">
<div class="w-12 h-12 bg-orange-500/10 rounded-xl flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
</svg>
</div>
<h3 class="text-xl font-semibold mb-2">도메인</h3>
<p class="text-gray-400 text-sm">
AI 작명 추천 · 3초 등록 · 실시간 가용성 확인 · 네임서버 관리
</p>
</div>
<!-- DDoS Protection -->
<div class="bg-gray-900 border border-gray-800 rounded-2xl p-6 card-hover">
<div class="w-12 h-12 bg-green-500/10 rounded-xl flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
</svg>
</div>
<h3 class="text-xl font-semibold mb-2">DDoS 방어</h3>
<p class="text-gray-400 text-sm">
1Tbps 이상의 공격도 막아내는 엔터프라이즈급 보안 시스템
</p>
</div>
<!-- Overseas Server -->
<div class="bg-gray-900 border border-gray-800 rounded-2xl p-6 card-hover">
<div class="w-12 h-12 bg-purple-500/10 rounded-xl flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
<h3 class="text-xl font-semibold mb-2">해외 서버</h3>
<p class="text-gray-400 text-sm">
미국, 일본, 유럽 등 전 세계 데이터센터에서 최적의 위치 선택
</p>
</div>
<!-- Hosting -->
<div class="bg-gray-900 border border-gray-800 rounded-2xl p-6 card-hover">
<div class="w-12 h-12 bg-indigo-500/10 rounded-xl flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/>
</svg>
</div>
<h3 class="text-xl font-semibold mb-2">웹 호스팅</h3>
<p class="text-gray-400 text-sm">
SSD 기반 고속 스토리지와 최신 서버 환경으로 빠른 웹사이트 운영
</p>
</div>
</div>
</div>
</section>
<!-- Domain Section -->
<section id="domain" class="py-20 bg-gradient-to-b from-orange-900/10 to-gray-950">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<div class="inline-block px-4 py-2 bg-orange-500/10 border border-orange-500/20 rounded-full text-orange-400 text-sm mb-6">
텔레그램으로 간편하게
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">도메인 서비스</h2>
<p class="text-gray-400">대화만으로 도메인 검색부터 등록, 관리까지 한번에</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
<!-- AI 추천 -->
<div class="bg-gray-900/80 border border-gray-800 rounded-xl p-5 text-center">
<div class="w-10 h-10 bg-orange-500/10 rounded-lg flex items-center justify-center mx-auto mb-3">
<svg class="w-5 h-5 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
</svg>
</div>
<h4 class="font-semibold mb-1">AI 도메인 추천</h4>
<p class="text-gray-500 text-sm">키워드만 말하면 창의적인 도메인을 추천</p>
</div>
<!-- 가용성 확인 -->
<div class="bg-gray-900/80 border border-gray-800 rounded-xl p-5 text-center">
<div class="w-10 h-10 bg-orange-500/10 rounded-lg flex items-center justify-center mx-auto mb-3">
<svg class="w-5 h-5 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
<h4 class="font-semibold mb-1">실시간 가용성 확인</h4>
<p class="text-gray-500 text-sm">등록 가능 여부와 가격을 즉시 확인</p>
</div>
<!-- WHOIS -->
<div class="bg-gray-900/80 border border-gray-800 rounded-xl p-5 text-center">
<div class="w-10 h-10 bg-orange-500/10 rounded-lg flex items-center justify-center mx-auto mb-3">
<svg class="w-5 h-5 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
</svg>
</div>
<h4 class="font-semibold mb-1">WHOIS 조회</h4>
<p class="text-gray-500 text-sm">도메인 소유자 및 만료일 정보 확인</p>
</div>
<!-- 네임서버 -->
<div class="bg-gray-900/80 border border-gray-800 rounded-xl p-5 text-center">
<div class="w-10 h-10 bg-orange-500/10 rounded-lg flex items-center justify-center mx-auto mb-3">
<svg class="w-5 h-5 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
</div>
<h4 class="font-semibold mb-1">네임서버 관리</h4>
<p class="text-gray-500 text-sm">DNS 설정을 대화로 간편하게 변경</p>
</div>
</div>
<!-- 가격 및 CTA -->
<div class="bg-gray-900 border border-orange-500/20 rounded-2xl p-8 flex flex-col md:flex-row items-center justify-between gap-6">
<div>
<div class="flex items-baseline gap-2 mb-2">
<span class="text-3xl font-bold text-orange-400">5,000원~</span>
<span class="text-gray-400">/년</span>
</div>
<p class="text-gray-400">.com, .net, .io, .kr 등 500개 이상의 TLD 지원</p>
</div>
<a href="https://t.me/AnvilForgeBot" target="_blank" class="bg-orange-600 hover:bg-orange-700 px-6 py-3 rounded-xl font-medium transition flex items-center gap-2">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.562 8.161c-.18 1.897-.962 6.502-1.359 8.627-.168.9-.5 1.201-.82 1.23-.697.064-1.226-.461-1.901-.903-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.139-5.062 3.345-.479.329-.913.489-1.302.481-.428-.009-1.252-.242-1.865-.442-.751-.244-1.349-.374-1.297-.789.027-.216.324-.437.893-.663 3.498-1.524 5.831-2.529 6.998-3.015 3.333-1.386 4.025-1.627 4.477-1.635.099-.002.321.023.465.141.121.099.154.232.17.325.015.093.034.305.019.471z"/>
</svg>
도메인 등록하기
</a>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="py-20 bg-gray-900/50">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">왜 Anvil인가?</h2>
<p class="text-gray-400">차별화된 기술력과 서비스로 신뢰를 드립니다</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="text-center">
<div class="w-16 h-16 bg-indigo-500/10 rounded-2xl flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<h3 class="text-xl font-semibold mb-2">초고속 네트워크</h3>
<p class="text-gray-400">10Gbps 업링크와 글로벌 백본으로 어디서든 빠른 응답 속도</p>
</div>
<div class="text-center">
<div class="w-16 h-16 bg-indigo-500/10 rounded-2xl flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
</svg>
</div>
<h3 class="text-xl font-semibold mb-2">강력한 보안</h3>
<p class="text-gray-400">다중 레이어 보안과 실시간 모니터링으로 안전하게 보호</p>
</div>
<div class="text-center">
<div class="w-16 h-16 bg-indigo-500/10 rounded-2xl flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"/>
</svg>
</div>
<h3 class="text-xl font-semibold mb-2">24시간 지원</h3>
<p class="text-gray-400">전문 엔지니어가 연중무휴로 기술 지원을 제공합니다</p>
</div>
</div>
</div>
</section>
<!-- Pricing Section -->
<section id="pricing" class="py-20">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">요금제</h2>
<p class="text-gray-400">필요에 맞는 플랜을 선택하세요</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Starter -->
<div class="bg-gray-900 border border-gray-800 rounded-2xl p-8">
<h3 class="text-xl font-semibold mb-2">Starter</h3>
<p class="text-gray-400 text-sm mb-6">개인 프로젝트에 적합</p>
<div class="mb-6">
<span class="text-4xl font-bold">₩9,900</span>
<span class="text-gray-400">/월</span>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center text-sm text-gray-300">
<svg class="w-5 h-5 text-green-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
SSD 10GB
</li>
<li class="flex items-center text-sm text-gray-300">
<svg class="w-5 h-5 text-green-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
트래픽 100GB
</li>
<li class="flex items-center text-sm text-gray-300">
<svg class="w-5 h-5 text-green-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
기본 DDoS 방어
</li>
</ul>
<a href="#contact" class="block text-center border border-gray-700 hover:border-indigo-500 py-3 rounded-xl transition">
선택하기
</a>
</div>
<!-- Pro -->
<div class="bg-gradient-to-b from-indigo-900/50 to-gray-900 border border-indigo-500/50 rounded-2xl p-8 relative">
<div class="absolute -top-3 left-1/2 -translate-x-1/2 bg-indigo-600 text-xs font-medium px-3 py-1 rounded-full">
인기
</div>
<h3 class="text-xl font-semibold mb-2">Pro</h3>
<p class="text-gray-400 text-sm mb-6">성장하는 비즈니스에 적합</p>
<div class="mb-6">
<span class="text-4xl font-bold">₩29,900</span>
<span class="text-gray-400">/월</span>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center text-sm text-gray-300">
<svg class="w-5 h-5 text-green-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
SSD 50GB
</li>
<li class="flex items-center text-sm text-gray-300">
<svg class="w-5 h-5 text-green-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
트래픽 무제한
</li>
<li class="flex items-center text-sm text-gray-300">
<svg class="w-5 h-5 text-green-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
고급 DDoS 방어
</li>
<li class="flex items-center text-sm text-gray-300">
<svg class="w-5 h-5 text-green-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
무료 SSL 인증서
</li>
</ul>
<a href="#contact" class="block text-center bg-indigo-600 hover:bg-indigo-700 py-3 rounded-xl transition">
선택하기
</a>
</div>
<!-- Enterprise -->
<div class="bg-gray-900 border border-gray-800 rounded-2xl p-8">
<h3 class="text-xl font-semibold mb-2">Enterprise</h3>
<p class="text-gray-400 text-sm mb-6">대규모 서비스에 적합</p>
<div class="mb-6">
<span class="text-4xl font-bold">맞춤</span>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center text-sm text-gray-300">
<svg class="w-5 h-5 text-green-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
커스텀 스펙
</li>
<li class="flex items-center text-sm text-gray-300">
<svg class="w-5 h-5 text-green-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
전용 서버
</li>
<li class="flex items-center text-sm text-gray-300">
<svg class="w-5 h-5 text-green-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
엔터프라이즈 DDoS 방어
</li>
<li class="flex items-center text-sm text-gray-300">
<svg class="w-5 h-5 text-green-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
전담 매니저
</li>
</ul>
<a href="#contact" class="block text-center border border-gray-700 hover:border-indigo-500 py-3 rounded-xl transition">
문의하기
</a>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-20 bg-gray-900/50">
<div class="max-w-3xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">시작할 준비가 되셨나요?</h2>
<p class="text-gray-400 mb-10">지금 바로 문의하시면 전문 상담원이 안내해 드립니다</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="https://t.me/AnvilForgeBot" target="_blank" class="inline-flex items-center justify-center gap-2 bg-indigo-600 hover:bg-indigo-700 px-8 py-4 rounded-xl font-medium transition">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.562 8.161c-.18 1.897-.962 6.502-1.359 8.627-.168.9-.5 1.201-.82 1.23-.697.064-1.226-.461-1.901-.903-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.139-5.062 3.345-.479.329-.913.489-1.302.481-.428-.009-1.252-.242-1.865-.442-.751-.244-1.349-.374-1.297-.789.027-.216.324-.437.893-.663 3.498-1.524 5.831-2.529 6.998-3.015 3.333-1.386 4.025-1.627 4.477-1.635.099-.002.321.023.465.141.121.099.154.232.17.325.015.093.034.305.019.471z"/>
</svg>
텔레그램 문의
</a>
<a href="mailto:support@anvil.it.com" class="inline-flex items-center justify-center gap-2 border border-gray-700 hover:border-gray-500 px-8 py-4 rounded-xl font-medium transition">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
이메일 문의
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-gray-800 py-12">
<div class="max-w-6xl mx-auto px-6">
<div class="grid md:grid-cols-3 gap-8 mb-8">
<!-- Company Info -->
<div>
<div class="flex items-center gap-2 mb-4">
<span class="text-xl">🔨</span>
<span class="font-bold" style="background: linear-gradient(180deg, #e5e7eb 0%, #9ca3af 40%, #6b7280 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">Anvil</span>
</div>
<p class="text-gray-400 text-sm">
안정적인 인프라, 합리적인 가격.<br>
당신의 서비스를 위한 완벽한 호스팅.
</p>
</div>
<!-- Contact -->
<div>
<h4 class="font-semibold mb-4">문의</h4>
<div class="text-gray-400 text-sm space-y-2">
<p>이메일: info@anvil.it.com</p>
<p>텔레그램: @AnvilForgeBot</p>
</div>
</div>
<!-- Links -->
<div>
<h4 class="font-semibold mb-4">바로가기</h4>
<div class="text-gray-400 text-sm space-y-2">
<a href="#services" class="block hover:text-white transition">서비스</a>
<a href="#domain" class="block hover:text-white transition">도메인</a>
<a href="#pricing" class="block hover:text-white transition">가격</a>
</div>
</div>
</div>
<!-- Business Info -->
<div class="border-t border-gray-800 pt-8">
<div class="text-gray-500 text-xs space-y-1 mb-4">
<p>LIBEHAIM Inc. | Taro Tanaka</p>
<p>#202 K-Flat, 3-1-13 Higashioi, Shinagawa-ku, Tokyo 140-0011, Japan</p>
</div>
<div class="flex flex-col md:flex-row justify-between items-center gap-4">
<div class="text-gray-500 text-xs">
© 2026 LIBEHAIM Inc. All rights reserved.
</div>
<div class="flex gap-6">
<a href="#" class="text-gray-500 hover:text-white text-xs transition">이용약관</a>
<a href="#" class="text-gray-500 hover:text-white text-xs transition">개인정보처리방침</a>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink