kaffa/telegram-bot-workers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
15da2032a3b601e5db64c5d0f3b25902f73795c6
telegram-bot-workers/web/index.html
kappa 15da2032a3 feat: 웹페이지 텔레그램 봇 강조 + 도메인 가격 표시 
- 히어로 섹션에 텔레그램 봇 하이라이트 박스 추가
- "대화만으로 모든 것이 가능합니다" 강조
- 도메인 카드에 5,000원~/년 가격 표시

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-18 15:28:44 +09:00

400 lines
21 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="text-xl font-bold gradient-text">Anvil Hosting</a>
<div class="hidden md:flex gap-8">
<a href="#services" 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">
<!-- 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>
<!-- 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>
<!-- 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>
<!-- 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 mb-3">
텔레그램으로 도메인 검색, 등록, 네임서버 관리까지 한번에
</p>
<div class="text-orange-400 text-sm font-medium">
5,000원~/년
</div>
</div>
</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-10">
<div class="max-w-6xl mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between items-center gap-4">
<div class="text-gray-400 text-sm">
© 2026 Anvil Hosting. All rights reserved.
</div>
<div class="flex gap-6">
<a href="#" class="text-gray-400 hover:text-white text-sm transition">이용약관</a>
<a href="#" class="text-gray-400 hover:text-white text-sm transition">개인정보처리방침</a>
</div>
</div>
</div>
</footer>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink