7f71b5edb0
- Hero 섹션: 서버 만들기 버튼 → AI와 대화하기 버튼으로 변경 - Hero 섹션: 핑 위젯 제거 - 텔레그램 데모: 위자드 흐름(용도→기술스택→규모→추천)을 자연스러운 대화체로 변경 - 위자드 모달 전체 제거 - 네이버 Search Advisor 인증 파일 추가 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1067 lines
64 KiB
HTML
1067 lines
64 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko" class="scroll-smooth">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://cdn.jsdelivr.net https://telegram.org 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; font-src 'self'; img-src 'self' data:; connect-src 'self';">
|
||
<title>Anvil Hosting - 개발자를 위한 컨테이너 클라우드</title>
|
||
|
||
<!-- SEO Meta Tags -->
|
||
<meta name="description" content="Incus/LXD 기반 초경량 컨테이너 호스팅. VM 오버헤드 없이 네이티브 성능을 제공하며, n8n, Ansible 자동화 파이프라인과 즉시 연동됩니다. 도쿄, 서울, 싱가포르, 홍콩 리전 지원.">
|
||
<meta name="keywords" content="컨테이너 호스팅, LXD, Incus, 클라우드 서버, VPS, 도쿄 서버, 서울 서버, 개발자 호스팅, Docker, 자동화">
|
||
<meta name="author" content="Anvil Hosting">
|
||
<meta name="robots" content="index, follow">
|
||
<link rel="canonical" href="https://hosting.anvil.it.com">
|
||
|
||
<!-- Open Graph / Facebook -->
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="https://hosting.anvil.it.com">
|
||
<meta property="og:title" content="Anvil Hosting - 개발자를 위한 컨테이너 클라우드">
|
||
<meta property="og:description" content="Incus/LXD 기반 초경량 컨테이너 호스팅. 네이티브 성능과 자동화 파이프라인을 경험하세요.">
|
||
<meta property="og:image" content="https://hosting.anvil.it.com/og-image.png">
|
||
<meta property="og:locale" content="ko_KR">
|
||
|
||
<!-- Twitter -->
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:url" content="https://hosting.anvil.it.com">
|
||
<meta name="twitter:title" content="Anvil Hosting - 개발자를 위한 컨테이너 클라우드">
|
||
<meta name="twitter:description" content="Incus/LXD 기반 초경량 컨테이너 호스팅. 네이티브 성능과 자동화 파이프라인을 경험하세요.">
|
||
<meta name="twitter:image" content="https://hosting.anvil.it.com/og-image.png">
|
||
|
||
<!-- Favicon -->
|
||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||
|
||
<!-- Telegram Web App SDK -->
|
||
<script src="https://telegram.org/js/telegram-web-app.js"></script>
|
||
|
||
<!-- Tailwind CSS (Production Build) -->
|
||
<link rel="stylesheet" href="style.css">
|
||
|
||
<!-- Fonts -->
|
||
<link rel="stylesheet" href="fonts.css">
|
||
|
||
<!-- Critical CSS for above-the-fold -->
|
||
<style>
|
||
/* Critical CSS for above-the-fold */
|
||
body{background:#0a0f1a;color:#e2e8f0;margin:0}
|
||
.font-sans{font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif}
|
||
nav{position:fixed;width:100%;z-index:50;background:rgba(10,15,26,.8);backdrop-filter:blur(12px)}
|
||
/* Mesh Gradient Background */
|
||
.mesh-bg{
|
||
background:
|
||
linear-gradient(135deg,transparent 0%,transparent 45%,rgba(56,189,248,0.08) 50%,transparent 55%,transparent 100%),
|
||
linear-gradient(45deg,transparent 0%,transparent 45%,rgba(168,85,247,0.06) 50%,transparent 55%,transparent 100%),
|
||
radial-gradient(ellipse at 20% 30%,rgba(56,189,248,0.12) 0%,transparent 50%),
|
||
radial-gradient(ellipse at 80% 70%,rgba(168,85,247,0.08) 0%,transparent 50%),
|
||
linear-gradient(180deg,#0a0f1a 0%,#0f172a 50%,#0a0f1a 100%);
|
||
background-size:300px 300px,300px 300px,100% 100%,100% 100%,100% 100%;
|
||
}
|
||
/* SaaS Hero Styles */
|
||
.hero-grid-bg {
|
||
background-image: linear-gradient(to right, rgba(56,189,248,0.05) 1px, transparent 1px),
|
||
linear-gradient(to bottom, rgba(56,189,248,0.05) 1px, transparent 1px);
|
||
background-size: 4rem 4rem;
|
||
mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 70%, transparent 110%);
|
||
-webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 70%, transparent 110%);
|
||
}
|
||
.hero-title-gradient {
|
||
background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, rgba(255,255,255,0.6) 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
.hero-glow {
|
||
position: relative;
|
||
}
|
||
.hero-glow::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -20%;
|
||
background: radial-gradient(circle at center, rgba(56,189,248,0.3) 0%, transparent 70%);
|
||
filter: blur(40px);
|
||
z-index: -1;
|
||
animation: glow-pulse 4s ease-in-out infinite;
|
||
}
|
||
@keyframes glow-pulse {
|
||
0%, 100% { opacity: 0.5; transform: scale(1); }
|
||
50% { opacity: 0.8; transform: scale(1.05); }
|
||
}
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; transform: translateY(20px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
@keyframes slideDown {
|
||
from { opacity: 0; transform: translateY(-10px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
.animate-fade-in {
|
||
animation: fadeIn 0.8s ease-out forwards;
|
||
}
|
||
.animate-fade-in-delay {
|
||
animation: fadeIn 0.8s ease-out 0.2s forwards;
|
||
opacity: 0;
|
||
}
|
||
.animate-fade-in-delay-2 {
|
||
animation: fadeIn 0.8s ease-out 0.4s forwards;
|
||
opacity: 0;
|
||
}
|
||
.btn-gradient {
|
||
background: linear-gradient(to bottom, #ffffff 0%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.8) 100%);
|
||
transition: all 0.2s ease;
|
||
}
|
||
.btn-gradient:hover {
|
||
transform: scale(1.02);
|
||
box-shadow: 0 20px 40px -10px rgba(56,189,248,0.3);
|
||
}
|
||
.btn-gradient:active {
|
||
transform: scale(0.98);
|
||
}
|
||
</style>
|
||
|
||
<!-- App JavaScript (must load before Alpine.js) -->
|
||
<script type="module" src="js/app.js"></script>
|
||
|
||
<!-- Alpine.js (pinned version with SRI) -->
|
||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.3/dist/cdn.min.js" integrity="sha384-iZD2X8o1Zdq0HR5H/7oa8W30WS4No+zWCKUPD7fHRay9I1Gf+C4F8sVmw7zec1wW" crossorigin="anonymous"></script>
|
||
</head>
|
||
<body x-data="anvilApp()" x-init="init()" @keydown.window="handleKeydown($event)" class="font-sans antialiased selection:bg-brand-500/30 mesh-bg">
|
||
|
||
<!-- Skip Link for Keyboard Users -->
|
||
<a href="#main-content" class="skip-link">메인 콘텐츠로 건너뛰기</a>
|
||
|
||
<!-- Navbar -->
|
||
<nav class="fixed w-full z-50 top-0 border-b border-white/5 bg-dark-900/80 backdrop-blur-md">
|
||
<div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
|
||
<div class="flex items-center gap-8">
|
||
<a href="#" class="flex items-center gap-2 group">
|
||
<div class="w-8 h-8 rounded bg-brand-500 flex items-center justify-center text-white font-bold font-mono text-xl shadow-lg shadow-brand-500/20">A</div>
|
||
<span class="font-bold text-lg tracking-tight">Anvil<span class="text-brand-400">.Hosting</span></span>
|
||
</a>
|
||
<div class="hidden md:flex gap-6 text-sm font-medium text-slate-300">
|
||
<a href="#features" class="hover:text-white transition">기능</a>
|
||
<a href="#pricing" class="hover:text-white transition">요금제</a>
|
||
<a href="#automation" class="hover:text-white transition">자동화</a>
|
||
</div>
|
||
<!-- Telegram User Info -->
|
||
<template x-if="telegram.isAvailable && telegram.user">
|
||
<div class="flex items-center gap-2 px-3 py-1.5 bg-brand-500/10 border border-brand-500/20 rounded-full text-xs text-slate-300">
|
||
<span class="text-brand-400">👤</span>
|
||
<span x-text="`@${telegram.user.username || telegram.user.first_name} (ID: ${telegram.user.id})`"></span>
|
||
</div>
|
||
</template>
|
||
<template x-if="!telegram.isAvailable">
|
||
<div class="flex items-center gap-2 px-3 py-1.5 bg-slate-800/50 border border-slate-700/50 rounded-full text-xs text-slate-400">
|
||
<span>🌐</span>
|
||
<span>웹 브라우저</span>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<a href="https://t.me/AnvilForgeBot" target="_blank" rel="noopener noreferrer" aria-label="Console 시작 - 텔레그램 봇으로 이동" class="px-4 py-2 bg-brand-700 hover:bg-brand-500 text-white text-sm font-bold rounded-lg transition shadow-lg shadow-brand-500/20 flex items-center gap-2">
|
||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.62-.2-1.12-.31-1.15-.63.03-.37.59-.75 1.5-.95 6.07-2.64 10.12-4.38 12.15-5.21 2.91-1.2 3.51-1.4 3.91-1.41.09 0 .28.02.41.09.11.06.23.14.3.24.08.12.12.33.09.57z"/></svg>
|
||
Console 시작
|
||
</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Main Content -->
|
||
<main id="main-content">
|
||
|
||
<!-- Hero Section -->
|
||
<section class="relative pt-32 pb-24 overflow-hidden">
|
||
<!-- Grid Background -->
|
||
<div class="absolute inset-0 hero-grid-bg opacity-60 h-[600px]"></div>
|
||
|
||
<!-- Radial Accent -->
|
||
<div class="absolute left-1/2 top-[80%] h-[500px] w-[90%] -translate-x-1/2 rounded-[100%] bg-gradient-to-t from-brand-500/20 to-transparent blur-3xl"></div>
|
||
|
||
<div class="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-16 items-center relative z-10">
|
||
<!-- Left: Text -->
|
||
<div class="text-center lg:text-left">
|
||
<!-- Badge -->
|
||
<a href="#features" class="group inline-flex items-center gap-2 px-4 py-2 rounded-full border border-slate-700/50 bg-slate-800/50 backdrop-blur-sm text-sm text-slate-300 mb-8 animate-fade-in hover:border-brand-500/50 transition-colors">
|
||
<span class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
|
||
System Operational: v2.4.0 Live
|
||
</span>
|
||
<svg class="w-4 h-4 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
|
||
</a>
|
||
|
||
<!-- Title -->
|
||
<h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold leading-[1.1] tracking-tight mb-6 animate-fade-in-delay"
|
||
x-data="{
|
||
phrases: [
|
||
{ highlight: 'Incus/LXD', text: '기반 초경량 컨테이너 호스팅' },
|
||
{ highlight: '1Tbps+', text: 'DDoS 방어 인프라' },
|
||
{ highlight: 'AI 자동화', text: '텔레그램 봇 연동' },
|
||
{ highlight: '25Gbps', text: '프라이빗 네트워크' }
|
||
],
|
||
current: 0,
|
||
show: true
|
||
}"
|
||
x-init="setInterval(() => { show = false; setTimeout(() => { current = (current + 1) % phrases.length; show = true; }, 300); }, 4000)">
|
||
<span class="inline-block transition-all duration-500" :class="show ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-4'">
|
||
<span class="hero-title-gradient" x-text="phrases[current].highlight"></span><br>
|
||
<span class="text-slate-300" x-text="phrases[current].text"></span>
|
||
</span>
|
||
</h1>
|
||
|
||
<!-- Subtitle -->
|
||
<p class="text-base md:text-lg text-slate-400 mb-10 leading-relaxed max-w-xl mx-auto lg:mx-0 animate-fade-in-delay-2">
|
||
VM의 오버헤드는 버리세요. OS 수준의 완벽한 격리와 네이티브 성능을 제공합니다.
|
||
<span class="text-white font-medium">n8n, Ansible</span> 자동화 파이프라인과 즉시 연동됩니다.
|
||
</p>
|
||
|
||
<!-- CTA -->
|
||
<div class="flex flex-col sm:flex-row gap-4 items-center justify-center lg:justify-start animate-fade-in-delay-2">
|
||
<a href="https://t.me/AnvilForgeBot" target="_blank" rel="noopener noreferrer" class="btn-gradient px-8 py-4 text-dark-900 font-bold rounded-xl flex items-center justify-center gap-3 group">
|
||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.62-.2-1.12-.31-1.15-.63.03-.37.59-.75 1.5-.95 6.07-2.64 10.12-4.38 12.15-5.21 2.91-1.2 3.51-1.4 3.91-1.41.09 0 .28.02.41.09.11.06.23.14.3.24.08.12.12.33.09.57z"/></svg>
|
||
<span>AI와 대화하기</span>
|
||
<svg class="w-4 h-4 text-brand-600 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
|
||
</a>
|
||
<a href="#pricing" class="px-6 py-4 text-slate-300 hover:text-white font-medium rounded-xl flex items-center gap-2 transition border border-slate-700/50 hover:border-slate-600">
|
||
<span>요금제 보기</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right: Telegram Chat Demo -->
|
||
<div class="relative max-w-md mx-auto w-full hero-glow">
|
||
<!-- Telegram Window -->
|
||
<div class="rounded-2xl shadow-2xl overflow-hidden relative border border-slate-700/50 backdrop-blur-sm">
|
||
<!-- Telegram Header -->
|
||
<div class="bg-[#232e3c] px-4 py-3 flex items-center gap-3">
|
||
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center text-white text-lg font-bold">A</div>
|
||
<div class="flex-1">
|
||
<div class="font-semibold text-white text-[15px]">Anvil Forge Bot</div>
|
||
<div class="text-xs text-[#6c7883]">bot</div>
|
||
</div>
|
||
<div class="flex gap-4 text-[#6c7883]">
|
||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
|
||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Chat Messages -->
|
||
<div class="p-4 space-y-3 text-[14px] bg-[#0e1621] min-h-[380px]" style="background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.02"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');">
|
||
<!-- User Message -->
|
||
<div class="flex justify-end chat-bubble delay-1">
|
||
<div class="bg-[#2b5278] text-white px-3 py-2 rounded-xl rounded-tr-sm max-w-[85%] leading-relaxed shadow-sm">
|
||
서버 필요한데 뭘 써야 할지 모르겠어
|
||
<div class="text-[10px] text-blue-200/60 text-right mt-1">오후 3:41 ✓✓</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bot Response -->
|
||
<div class="flex justify-start chat-bubble delay-2">
|
||
<div class="bg-[#182533] text-[#f5f5f5] px-3 py-2 rounded-xl rounded-tl-sm max-w-[85%] shadow-sm">
|
||
<div class="text-[#6ab3f3] font-medium text-[13px] mb-1">Anvil Forge Bot</div>
|
||
반가워요! 🙌 어떤 용도로 사용하실 건가요?<br><br>
|
||
🌐 <span class="text-white/90">웹 서비스</span> - 사이트/앱 운영<br>
|
||
💻 <span class="text-white/90">개발 환경</span> - 코딩/테스트<br>
|
||
📊 <span class="text-white/90">데이터 처리</span> - AI/분석
|
||
<div class="text-[10px] text-slate-400 text-right mt-1">오후 3:41</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- User Message -->
|
||
<div class="flex justify-end chat-bubble delay-3">
|
||
<div class="bg-[#2b5278] text-white px-3 py-2 rounded-xl rounded-tr-sm max-w-[80%] shadow-sm">
|
||
웹 서비스! Next.js랑 PostgreSQL 쓸 거야
|
||
<div class="text-[10px] text-blue-200/60 text-right mt-1">오후 3:42 ✓✓</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bot Response -->
|
||
<div class="flex justify-start chat-bubble delay-4">
|
||
<div class="bg-[#182533] text-[#f5f5f5] px-3 py-2 rounded-xl rounded-tl-sm max-w-[85%] shadow-sm">
|
||
<div class="text-[#6ab3f3] font-medium text-[13px] mb-1">Anvil Forge Bot</div>
|
||
좋은 조합이네요! 👍 예상 트래픽은 어느 정도인가요?
|
||
<div class="text-[10px] text-slate-400 text-right mt-1">오후 3:42</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- User Message -->
|
||
<div class="flex justify-end chat-bubble delay-5">
|
||
<div class="bg-[#2b5278] text-white px-3 py-2 rounded-xl rounded-tr-sm max-w-[80%] shadow-sm">
|
||
하루 1만명 정도?
|
||
<div class="text-[10px] text-blue-200/60 text-right mt-1">오후 3:42 ✓✓</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bot Response (Recommendation) -->
|
||
<div class="flex justify-start chat-bubble delay-6">
|
||
<div class="bg-[#182533] text-[#f5f5f5] px-3 py-2 rounded-xl rounded-tl-sm max-w-[85%] shadow-sm">
|
||
<div class="text-[#6ab3f3] font-medium text-[13px] mb-1">Anvil Forge Bot</div>
|
||
🎯 <span class="text-brand-400 font-medium">Pro 등급</span>을 추천드려요!<br><br>
|
||
⚡ <span class="text-white/90">사양:</span> 2 vCPU / 4GB RAM<br>
|
||
📍 <span class="text-white/90">추천 리전:</span> 🇯🇵 도쿄 (35ms)<br>
|
||
💰 <span class="text-white/90">예상 비용:</span> ₩22,000/월<br><br>
|
||
<span class="text-slate-400 text-[13px]">바로 생성해드릴까요?</span>
|
||
<div class="text-[10px] text-slate-400 text-right mt-1">오후 3:43</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Decoration -->
|
||
<div class="absolute -right-12 -bottom-12 w-64 h-64 bg-brand-500/20 rounded-full blur-3xl -z-10"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Pricing -->
|
||
<section id="pricing" class="pt-12 pb-24 relative overflow-hidden">
|
||
<!-- Background Effects -->
|
||
<div class="absolute inset-0 gradient-bg opacity-50"></div>
|
||
<div class="absolute top-1/4 -right-32 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div>
|
||
<div class="absolute bottom-1/4 -left-32 w-96 h-96 bg-brand-500/10 rounded-full blur-3xl"></div>
|
||
|
||
<div class="max-w-7xl mx-auto px-6 relative z-10">
|
||
<div class="text-center mb-8 animate-on-scroll">
|
||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-panel text-sm text-slate-300 mb-6">
|
||
<span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
|
||
투명한 가격 정책
|
||
</div>
|
||
<h2 class="text-3xl md:text-4xl font-bold mb-4">합리적인 <span class="gradient-text">요금제</span></h2>
|
||
<p class="text-slate-400 text-lg">전 세계 4개 리전에서 제공되는 최적의 인프라 요금</p>
|
||
<p class="text-slate-500 text-sm mt-2">(월간 기준, VAT 포함)</p>
|
||
</div>
|
||
|
||
<!-- Real-time Cloud Pricing -->
|
||
<div x-data="pricingTable()" x-init="init()" class="glass-card-static p-8 rounded-3xl mb-12 animate-on-scroll">
|
||
<!-- Header -->
|
||
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
|
||
<div class="flex items-center gap-3">
|
||
<span class="text-lg font-bold text-white">🔥 Forge Instances</span>
|
||
<span x-show="fromCache" class="text-xs text-slate-500 glass-panel px-2 py-1 rounded">캐시됨</span>
|
||
</div>
|
||
<button @click="forceRefresh()" :disabled="loading" class="p-2 glass-panel rounded-lg hover:bg-slate-700 transition disabled:opacity-50" title="새로고침">
|
||
<svg class="w-5 h-5 text-slate-400" :class="loading && 'animate-spin'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- City Tabs -->
|
||
<div class="flex flex-wrap gap-2 mb-4">
|
||
<template x-for="city in cities" :key="city.id">
|
||
<button
|
||
@click="selectedCity = city.id; onFilterChange()"
|
||
:class="selectedCity === city.id
|
||
? 'bg-brand-500 text-white border-brand-500'
|
||
: 'bg-transparent text-slate-400 border-slate-600 hover:border-slate-500 hover:text-white'"
|
||
class="px-4 py-2 rounded-lg border text-sm font-medium transition-all flex items-center gap-2"
|
||
:title="city.desc || ''">
|
||
<span x-text="city.flag"></span>
|
||
<span x-text="city.name"></span>
|
||
<span x-show="city.desc" class="text-[10px] opacity-60 hidden md:inline" x-text="city.desc"></span>
|
||
<span class="text-xs opacity-70" x-text="'(' + getInstanceCountByCity(city.id) + ')'"></span>
|
||
</button>
|
||
</template>
|
||
</div>
|
||
|
||
<!-- Seoul Subtabs (서울 선택 시 인스턴스 타입 필터) -->
|
||
<div x-show="selectedCity === 'seoul'" x-transition class="mb-4">
|
||
<div class="flex flex-wrap gap-2">
|
||
<template x-for="type in seoulTypes" :key="type.id">
|
||
<button
|
||
@click="selectedSeoulType = type.id; onFilterChange()"
|
||
:class="selectedSeoulType === type.id
|
||
? 'bg-brand-500 text-white border-brand-500'
|
||
: 'bg-transparent text-slate-400 border-slate-600 hover:border-slate-500 hover:text-white'"
|
||
class="px-4 py-2 rounded-lg border text-sm font-medium transition-all flex items-center gap-2">
|
||
<span x-text="type.name"></span>
|
||
<span class="text-xs opacity-70" x-text="'(' + getSeoulTypeCount(type.id) + ')'"></span>
|
||
</button>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Global Subtabs (도쿄/오사카/싱가폴 선택 시 인스턴스 타입 필터) -->
|
||
<div x-show="selectedCity === 'global'" x-transition class="mb-4">
|
||
<div class="flex flex-wrap gap-2">
|
||
<template x-for="type in globalTypes" :key="type.id">
|
||
<button
|
||
@click="selectedGlobalType = type.id; onFilterChange()"
|
||
:class="selectedGlobalType === type.id
|
||
? 'bg-brand-500 text-white border-brand-500'
|
||
: 'bg-transparent text-slate-400 border-slate-600 hover:border-slate-500 hover:text-white'"
|
||
class="px-4 py-2 rounded-lg border text-sm font-medium transition-all flex items-center gap-2">
|
||
<span x-text="type.name"></span>
|
||
<span class="text-xs opacity-70" x-text="'(' + getGlobalTypeCount(type.id) + ')'"></span>
|
||
</button>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- GPU 탭에서 간격 맞추기 -->
|
||
<div x-show="selectedCity.startsWith('gpu-')" class="mb-4"></div>
|
||
|
||
<!-- Selected Instance Type Info -->
|
||
<div x-show="selectedCity === 'seoul'" x-transition class="mb-4 glass-panel rounded-xl p-4 text-sm text-slate-300">
|
||
<span class="text-brand-400 font-bold" x-text="seoulTypes.find(t => t.id === selectedSeoulType)?.name"></span>
|
||
<span class="mx-2 text-slate-600">|</span>
|
||
<span class="whitespace-pre-line" x-text="seoulTypes.find(t => t.id === selectedSeoulType)?.tooltip"></span>
|
||
</div>
|
||
<div x-show="selectedCity === 'global'" x-transition class="mb-4 glass-panel rounded-xl p-4 text-sm text-slate-300">
|
||
<span class="text-brand-400 font-bold" x-text="globalTypes.find(t => t.id === selectedGlobalType)?.name"></span>
|
||
<span class="mx-2 text-slate-600">|</span>
|
||
<span class="whitespace-pre-line" x-text="globalTypes.find(t => t.id === selectedGlobalType)?.tooltip"></span>
|
||
</div>
|
||
|
||
<!-- Status Bar -->
|
||
<div class="flex justify-between items-center mb-4 text-xs text-slate-500">
|
||
<span x-show="!loading && !error">
|
||
<span x-text="filteredInstances.length"></span>개 인스턴스
|
||
<span x-show="selectedCity !== 'all'"> · <span x-text="cities.find(c => c.id === selectedCity)?.name"></span></span>
|
||
<span x-show="selectedCity === 'seoul'"> · <span x-text="seoulTypes.find(t => t.id === selectedSeoulType)?.name"></span></span>
|
||
<span x-show="selectedCity === 'global'"> · <span x-text="globalTypes.find(t => t.id === selectedGlobalType)?.name"></span></span>
|
||
</span>
|
||
<span x-show="loading" class="flex items-center gap-2">
|
||
<svg class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
|
||
</svg>
|
||
불러오는 중...
|
||
</span>
|
||
</div>
|
||
|
||
<!-- Error State -->
|
||
<div x-show="error" class="mb-4 p-4 bg-red-500/10 border border-red-500/30 rounded-lg text-red-400 text-sm">
|
||
<span x-text="error"></span>
|
||
<button @click="refresh()" class="ml-2 underline hover:no-underline">다시 시도</button>
|
||
</div>
|
||
|
||
<!-- Pricing Table -->
|
||
<div x-show="!error" x-transition class="overflow-x-auto">
|
||
<table class="w-full text-left font-sans" aria-label="클라우드 인스턴스 가격 비교표">
|
||
<caption class="sr-only">실시간 클라우드 인스턴스 가격입니다.</caption>
|
||
<thead>
|
||
<tr class="text-slate-500 text-sm border-b border-slate-700">
|
||
<!-- GPU 컬럼 (GPU 탭에서만 표시) -->
|
||
<th x-show="selectedCity.startsWith('gpu-')" class="pb-4 font-medium pl-4 text-left">GPU 모델</th>
|
||
<th class="pb-4 font-medium text-center cursor-pointer hover:text-white transition" :class="!selectedCity.startsWith('gpu-') && 'pl-4'" @click="toggleSort('vcpu')">
|
||
vCPU <span x-show="sortBy === 'vcpu'" class="text-brand-400" x-text="sortOrder === 'asc' ? '↑' : '↓'"></span>
|
||
</th>
|
||
<th class="pb-4 font-medium text-center cursor-pointer hover:text-white transition" @click="toggleSort('memory')">
|
||
RAM <span x-show="sortBy === 'memory'" class="text-brand-400" x-text="sortOrder === 'asc' ? '↑' : '↓'"></span>
|
||
</th>
|
||
<th class="pb-4 font-medium text-center">Storage</th>
|
||
<th class="pb-4 font-medium text-center">Transfer</th>
|
||
<th class="pb-4 font-medium text-right">시간요금</th>
|
||
<th class="pb-4 font-medium text-right pr-4 cursor-pointer hover:text-white transition" @click="toggleSort('price')">
|
||
월요금 <span x-show="sortBy === 'price'" class="text-brand-400" x-text="sortOrder === 'asc' ? '↑' : '↓'"></span>
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="text-slate-300 text-sm">
|
||
<!-- Loading Skeleton -->
|
||
<template x-if="loading && filteredInstances.length === 0">
|
||
<template x-for="i in 5" :key="i">
|
||
<tr class="border-b border-slate-700/50 animate-pulse">
|
||
<td class="py-4 pl-4 text-center"><div class="h-4 bg-slate-700 rounded w-12 mx-auto"></div></td>
|
||
<td class="py-4 text-center"><div class="h-4 bg-slate-700 rounded w-12 mx-auto"></div></td>
|
||
<td class="py-4 text-center"><div class="h-4 bg-slate-700 rounded w-12 mx-auto"></div></td>
|
||
<td class="py-4 text-center"><div class="h-4 bg-slate-700 rounded w-10 mx-auto"></div></td>
|
||
<td class="py-4 text-right"><div class="h-4 bg-slate-700 rounded w-16 ml-auto"></div></td>
|
||
<td class="py-4 pr-4 text-right"><div class="h-4 bg-slate-700 rounded w-20 ml-auto"></div></td>
|
||
</tr>
|
||
</template>
|
||
</template>
|
||
|
||
<!-- Instance Rows -->
|
||
<template x-for="(inst, idx) in filteredInstances" :key="inst.id + '-' + (inst.region?.region_code || idx)">
|
||
<tr @click="selectInstance(inst)" class="border-b border-slate-700/50 hover:bg-slate-800/50 transition cursor-pointer" :class="selectedInstance?.id === inst.id && selectedInstance?.region?.region_code === inst.region?.region_code && 'bg-brand-500/5 border-l-4 border-l-brand-500'">
|
||
<!-- GPU (GPU 탭에서만 표시) -->
|
||
<td x-show="selectedCity.startsWith('gpu-')" class="py-4 pl-4 text-left">
|
||
<div class="flex flex-col gap-0.5">
|
||
<span class="text-green-400 font-bold text-sm" x-text="inst.instance_name || inst.gpu_type"></span>
|
||
<span class="text-[10px] text-slate-500" x-text="inst.gpu_count > 1 ? inst.gpu_count + '× GPU' : ''"></span>
|
||
</div>
|
||
</td>
|
||
<!-- vCPU -->
|
||
<td class="py-4 text-center" :class="!selectedCity.startsWith('gpu-') && 'pl-4'">
|
||
<span class="text-brand-400 font-bold" x-text="inst.vcpu + ' Core' + (inst.vcpu > 1 ? 's' : '')"></span>
|
||
<span x-show="inst.id && inst.id.endsWith('-v6')" class="ml-1 text-[10px] px-1.5 py-0.5 bg-purple-500/20 text-purple-400 rounded font-medium">IPv6 only</span>
|
||
</td>
|
||
<!-- RAM -->
|
||
<td class="py-4 text-center" x-text="formatMemory(inst.memory_mb)"></td>
|
||
<!-- Storage -->
|
||
<td class="py-4 text-center">
|
||
<span x-text="formatStorage(inst.storage_gb)"></span>
|
||
<span x-show="inst.storage_gb && inst.storage_gb <= 1" class="ml-1 text-[10px] px-1.5 py-0.5 bg-amber-500/20 text-amber-400 rounded font-medium">블록 스토리지 전용</span>
|
||
</td>
|
||
<!-- Transfer -->
|
||
<td class="py-4 text-center" x-text="formatTransfer(inst.transfer_tb)"></td>
|
||
<!-- 시간당 요금 (DB에서 가져온 한화 금액) -->
|
||
<td class="py-4 text-right">
|
||
<div class="text-sm text-slate-400" x-text="formatKrwHourly(inst.pricing?.hourly_price_krw)"></div>
|
||
</td>
|
||
<!-- 월 요금 (DB에서 가져온 한화 금액) -->
|
||
<td class="py-4 pr-4 text-right">
|
||
<div class="font-bold text-lg" :class="selectedInstance?.id === inst.id && selectedInstance?.region?.region_code === inst.region?.region_code ? 'text-brand-400' : 'text-white'" x-text="formatKrw(inst.pricing?.monthly_price_krw)"></div>
|
||
</td>
|
||
</tr>
|
||
</template>
|
||
|
||
<!-- Empty State -->
|
||
<template x-if="!loading && filteredInstances.length === 0 && !error">
|
||
<tr>
|
||
<td :colspan="selectedCity.startsWith('gpu-') ? 7 : 6" class="py-12 text-center text-slate-500">
|
||
선택한 조건에 맞는 인스턴스가 없습니다.
|
||
</td>
|
||
</tr>
|
||
</template>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- Footer Note -->
|
||
<div class="mt-6 text-xs text-slate-500">
|
||
<p>* 실시간 API 데이터 기준. 실제 요금은 변동될 수 있습니다.</p>
|
||
</div>
|
||
|
||
<!-- Instance Detail Modal -->
|
||
<div x-show="showInstanceModal"
|
||
x-transition.opacity
|
||
@click.self="closeInstanceModal()"
|
||
@keydown.escape.window="closeInstanceModal()"
|
||
class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/80 backdrop-blur-sm p-4"
|
||
role="dialog" aria-modal="true">
|
||
|
||
<!-- Modal Panel -->
|
||
<div x-show="showInstanceModal"
|
||
x-transition:enter="transition ease-out duration-200"
|
||
x-transition:enter-start="opacity-0 scale-95"
|
||
x-transition:enter-end="opacity-100 scale-100"
|
||
x-transition:leave="transition ease-in duration-150"
|
||
x-transition:leave-start="opacity-100 scale-100"
|
||
x-transition:leave-end="opacity-0 scale-95"
|
||
@click.stop
|
||
class="glass-panel rounded-2xl p-6 max-w-md w-full shadow-2xl">
|
||
|
||
<!-- Header -->
|
||
<div class="flex items-start justify-between mb-6">
|
||
<div>
|
||
<h3 class="text-xl font-bold text-white" x-text="selectedInstanceDetail?.vcpu + ' Cores · ' + formatMemory(selectedInstanceDetail?.memory_mb)"></h3>
|
||
<p class="text-sm text-slate-400 mt-1" x-text="selectedInstanceDetail?.region?.region_name || 'Unknown Region'"></p>
|
||
</div>
|
||
<button @click="closeInstanceModal()"
|
||
class="text-slate-400 hover:text-white transition p-1"
|
||
aria-label="닫기">
|
||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Specs Grid -->
|
||
<div class="grid grid-cols-2 gap-4 mb-6">
|
||
<div class="glass-panel rounded-xl p-4 text-center">
|
||
<div class="text-2xl font-bold text-brand-400" x-text="selectedInstanceDetail?.vcpu"></div>
|
||
<div class="text-xs text-slate-400 mt-1">vCPU</div>
|
||
</div>
|
||
<div class="glass-panel rounded-xl p-4 text-center">
|
||
<div class="text-2xl font-bold text-purple-400" x-text="formatMemory(selectedInstanceDetail?.memory_mb)"></div>
|
||
<div class="text-xs text-slate-400 mt-1">RAM</div>
|
||
</div>
|
||
<div class="glass-panel rounded-xl p-4 text-center">
|
||
<div class="text-2xl font-bold text-green-400" x-text="formatStorage(selectedInstanceDetail?.storage_gb)"></div>
|
||
<div class="text-xs text-slate-400 mt-1">Storage</div>
|
||
</div>
|
||
<div class="glass-panel rounded-xl p-4 text-center">
|
||
<div class="text-2xl font-bold text-amber-400" x-text="formatTransfer(selectedInstanceDetail?.transfer_tb)"></div>
|
||
<div class="text-xs text-slate-400 mt-1">Transfer</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Pricing -->
|
||
<div class="glass-panel rounded-xl p-4 mb-6">
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<div class="text-sm text-slate-400">시간당</div>
|
||
<div class="text-lg font-medium text-white" x-text="formatKrwHourly(selectedInstanceDetail?.pricing?.hourly_price_krw)"></div>
|
||
</div>
|
||
<div class="text-right">
|
||
<div class="text-sm text-slate-400">월</div>
|
||
<div class="text-2xl font-bold text-brand-400" x-text="formatKrw(selectedInstanceDetail?.pricing?.monthly_price_krw)"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Actions -->
|
||
<div class="flex gap-3">
|
||
<button @click="copyInstanceSpec()"
|
||
class="flex-1 px-4 py-3 rounded-xl border border-slate-600 hover:border-slate-500 text-white font-medium transition flex items-center justify-center gap-2">
|
||
<span x-show="!copiedToClipboard">📋 사양 복사</span>
|
||
<span x-show="copiedToClipboard" class="text-green-400">✓ 복사됨</span>
|
||
</button>
|
||
<a :href="getInstanceTelegramLink()" target="_blank"
|
||
class="flex-1 px-4 py-3 rounded-xl bg-[#0088cc] hover:bg-[#0099dd] text-white font-medium transition text-center">
|
||
텔레그램에서 주문
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Feature Highlight -->
|
||
<div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto animate-on-scroll">
|
||
<div class="glass-card p-6 rounded-2xl flex items-start gap-4 group">
|
||
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500/20 to-purple-500/20 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform">🌍</div>
|
||
<div>
|
||
<h3 class="font-bold text-white mb-2">글로벌 4개 리전 운영</h3>
|
||
<p class="text-sm text-slate-400 leading-relaxed">도쿄(JP-East), 오사카(JP-West), 싱가포르(SG-Core), 홍콩(HK-Hub)에서 즉시 서버를 생성할 수 있습니다.</p>
|
||
</div>
|
||
</div>
|
||
<div class="glass-card p-6 rounded-2xl flex items-start gap-4 group border-brand-500/20">
|
||
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-green-500/20 to-brand-500/20 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform">🛡️</div>
|
||
<div>
|
||
<h3 class="font-bold text-white mb-2">프리미엄 DDoS 방어</h3>
|
||
<p class="text-sm text-slate-400 leading-relaxed">모든 리전에 엔터프라이즈급 DDoS 방어 옵션(₩99,000, VAT 포함)을 추가하여 L7 공격까지 완벽하게 방어할 수 있습니다.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bare Metal Section -->
|
||
<div class="mt-16 glass-card p-8 md:p-10 rounded-3xl relative overflow-hidden animate-on-scroll pricing-featured">
|
||
<!-- Background Glow Effects -->
|
||
<div class="absolute inset-0 bg-gradient-to-br from-red-500/5 via-transparent to-purple-500/5 z-0"></div>
|
||
<div class="absolute -top-20 -right-20 w-60 h-60 bg-red-500/10 rounded-full blur-3xl"></div>
|
||
<div class="absolute -bottom-20 -left-20 w-60 h-60 bg-brand-500/10 rounded-full blur-3xl"></div>
|
||
|
||
<div class="relative z-10 flex flex-col md:flex-row items-center justify-between gap-8">
|
||
<div>
|
||
<div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-gradient-to-r from-red-500/20 to-orange-500/20 border border-red-500/30 text-xs font-bold text-red-400 mb-4">
|
||
<span class="w-1.5 h-1.5 rounded-full bg-red-400 animate-pulse"></span>
|
||
EXTREME PERFORMANCE
|
||
</div>
|
||
<h3 class="text-3xl md:text-4xl font-bold text-white mb-3">Bare Metal <span class="gradient-text">Dedicated</span></h3>
|
||
<p class="text-slate-400 max-w-xl leading-relaxed">
|
||
가상화가 없는 100% 물리 서버를 단독으로 사용하세요. <br>
|
||
<span class="text-white font-mono">AMD EPYC 9004</span> 프로세서와 <span class="text-white font-mono">DDR5 ECC RAM</span>의 압도적인 성능을 경험할 수 있습니다.
|
||
</p>
|
||
<div class="flex flex-wrap gap-4 mt-6 text-sm font-mono text-slate-300">
|
||
<span class="flex items-center gap-2 glass-panel px-3 py-1.5 rounded-lg"><span class="text-brand-400">✓</span> Full IPMI Access</span>
|
||
<span class="flex items-center gap-2 glass-panel px-3 py-1.5 rounded-lg"><span class="text-brand-400">✓</span> Custom Hardware</span>
|
||
<span class="flex items-center gap-2 glass-panel px-3 py-1.5 rounded-lg"><span class="text-brand-400">✓</span> 25Gbps Private Network</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex flex-col items-center md:items-end gap-4">
|
||
<div class="text-center md:text-right glass-panel p-6 rounded-2xl">
|
||
<span class="text-sm text-slate-400">Live Inventory Pricing</span>
|
||
<div class="text-4xl md:text-5xl font-bold text-white mt-1">₩169,000<span class="text-lg text-slate-500 font-normal">~</span></div>
|
||
<p class="text-xs text-brand-400 mt-2">🇸🇬 싱가포르 최저가 재고 보유 중</p>
|
||
<p class="text-[10px] text-slate-400 mt-1">※ 서울/도쿄 리전 재고 및 가격은 봇으로 확인하세요.</p>
|
||
</div>
|
||
<a href="https://t.me/AnvilForgeBot" target="_blank" rel="noopener noreferrer" class="btn-glow px-8 py-4 bg-gradient-to-r from-brand-600 to-brand-500 text-white font-bold rounded-xl hover:shadow-lg hover:shadow-brand-500/30 transition-all flex items-center gap-3">
|
||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.62-.2-1.12-.31-1.15-.63.03-.37.59-.75 1.5-.95 6.07-2.64 10.12-4.38 12.15-5.21 2.91-1.2 3.51-1.4 3.91-1.41.09 0 .28.02.41.09.11.06.23.14.3.24.08.12.12.33.09.57z"/></svg>
|
||
실시간 재고/가격 조회 (Bot)
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Technical Features -->
|
||
<section id="features" class="py-24 bg-dark-800 relative overflow-hidden">
|
||
<!-- Background accent -->
|
||
<div class="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-brand-500/50 to-transparent"></div>
|
||
|
||
<div class="max-w-7xl mx-auto px-6">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-3xl md:text-4xl font-bold mb-4">엔지니어를 위한 <span class="gradient-text">기술 스택</span></h2>
|
||
<p class="text-slate-400 text-lg">단순한 호스팅을 넘어, 제어가 가능한 인프라를 제공합니다.</p>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
<!-- Tech Card 1 -->
|
||
<div class="glass-card feature-card p-8 rounded-2xl group" data-accent="brand">
|
||
<div class="w-12 h-12 rounded-xl bg-brand-500/10 flex items-center justify-center mb-5 group-hover:scale-110 transition-transform">
|
||
<span class="text-2xl">⚡</span>
|
||
</div>
|
||
<div class="text-brand-400 font-mono mb-3 text-sm tracking-wide"><Incus/LXD></div>
|
||
<h3 class="text-xl font-bold mb-3">Native Performance</h3>
|
||
<p class="text-slate-400 text-sm leading-relaxed">
|
||
KVM 오버헤드 없이 커널을 직접 공유하는 컨테이너 기술로 베어메탈에 가까운 성능을 냅니다. Docker in Docker도 완벽하게 지원합니다.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Tech Card 2 -->
|
||
<div class="glass-card feature-card p-8 rounded-2xl group" data-accent="purple">
|
||
<div class="w-12 h-12 rounded-xl bg-purple-500/10 flex items-center justify-center mb-5 group-hover:scale-110 transition-transform">
|
||
<span class="text-2xl">🔗</span>
|
||
</div>
|
||
<div class="text-purple-400 font-mono mb-3 text-sm tracking-wide"><Automation></div>
|
||
<h3 class="text-xl font-bold mb-3">AI 자동화</h3>
|
||
<p class="text-slate-400 text-sm leading-relaxed">
|
||
텔레그램 봇에 자연어로 요청하면 AI가 서버 생성부터 설정까지 처리합니다. 복잡한 문제는 엔지니어와 AI가 함께 해결해 드립니다.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Tech Card 3 -->
|
||
<div class="glass-card feature-card p-8 rounded-2xl group" data-accent="green">
|
||
<div class="w-12 h-12 rounded-xl bg-green-500/10 flex items-center justify-center mb-5 group-hover:scale-110 transition-transform">
|
||
<span class="text-2xl">🛡️</span>
|
||
</div>
|
||
<div class="text-green-400 font-mono mb-3 text-sm tracking-wide"><Security></div>
|
||
<h3 class="text-xl font-bold mb-3">Isolated & Safe</h3>
|
||
<p class="text-slate-400 text-sm leading-relaxed">
|
||
VPC/VLAN 프라이빗 네트워크 격리, 무료 Cloud Firewall 상태 기반 방화벽, L3/L4 자동 DDoS 감지 및 차단이 기본 제공됩니다.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Tech Card 4 (DDoS) -->
|
||
<div class="glass-card feature-card p-8 rounded-2xl group" data-accent="red">
|
||
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-5 group-hover:scale-110 transition-transform">
|
||
<span class="text-2xl">🚫</span>
|
||
</div>
|
||
<div class="text-red-400 font-mono mb-3 text-sm tracking-wide"><Anti-DDoS></div>
|
||
<h3 class="text-xl font-bold mb-3">1Tbps+ Mitigation</h3>
|
||
<p class="text-slate-400 text-sm leading-relaxed">
|
||
L3/L4는 물론 복잡한 L7 애플리케이션 공격까지 완벽 방어합니다. 전 세계 엣지 노드에서 공격을 즉시 정화하여 무중단 서비스를 보장합니다.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Automation Section -->
|
||
<section id="automation" class="py-24 bg-dark-900 relative overflow-hidden">
|
||
<!-- Background accent -->
|
||
<div class="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-purple-500/30 to-transparent"></div>
|
||
<div class="absolute bottom-0 right-0 w-[500px] h-[500px] bg-purple-500/5 rounded-full blur-[100px] -z-10"></div>
|
||
|
||
<div class="max-w-7xl mx-auto px-6 flex flex-col lg:flex-row items-center gap-16">
|
||
<div class="lg:w-1/2">
|
||
<div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full glass-card-static text-xs font-mono text-purple-400 mb-6">
|
||
<span class="w-1.5 h-1.5 rounded-full bg-purple-400"></span>
|
||
AI-Powered Automation
|
||
</div>
|
||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||
반복적인 작업은<br>
|
||
<span class="gradient-text">자동화에 맡기세요</span>
|
||
</h2>
|
||
<p class="text-slate-400 mb-8 leading-relaxed text-lg">
|
||
웹 콘솔에 접속할 필요도 없습니다. <span class="text-white font-mono">텔레그램 봇</span>에 자연어로 요청하면 <span class="text-white font-mono">AI</span>가 서버 생성부터 설정까지 모든 작업을 처리합니다.
|
||
</p>
|
||
|
||
<ul class="space-y-4">
|
||
<li class="flex items-center gap-4">
|
||
<div class="w-10 h-10 rounded bg-slate-800 flex items-center justify-center text-purple-400 border border-slate-700">
|
||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
|
||
</div>
|
||
<div>
|
||
<div class="font-bold text-white">텔레그램 봇</div>
|
||
<div class="text-sm text-slate-400">자연어로 서버 생성, 설정, 모니터링 요청</div>
|
||
</div>
|
||
</li>
|
||
<li class="flex items-center gap-4">
|
||
<div class="w-10 h-10 rounded bg-slate-800 flex items-center justify-center text-purple-400 border border-slate-700">
|
||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
|
||
</div>
|
||
<div>
|
||
<div class="font-bold text-white">엔지니어 + AI 협업</div>
|
||
<div class="text-sm text-slate-400">복잡한 문제는 전문 엔지니어가 AI와 함께 해결</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="lg:w-1/2 w-full" x-data="{ tab: 'n8n' }">
|
||
<!-- Tab Buttons -->
|
||
<div class="flex gap-2 mb-4" role="tablist" aria-label="코드 예제 선택">
|
||
<button role="tab"
|
||
aria-selected="true"
|
||
aria-controls="panel-n8n"
|
||
data-tab="n8n"
|
||
id="btn-n8n"
|
||
class="px-4 py-2 rounded-lg bg-purple-600 text-white text-sm font-bold transition">
|
||
n8n Workflow
|
||
</button>
|
||
<button role="tab"
|
||
aria-selected="false"
|
||
aria-controls="panel-tf"
|
||
data-tab="tf"
|
||
id="btn-tf"
|
||
class="px-4 py-2 rounded-lg bg-slate-800 text-slate-400 text-sm font-bold border border-slate-700 hover:text-white transition">
|
||
Terraform
|
||
</button>
|
||
</div>
|
||
|
||
<!-- n8n Window -->
|
||
<div id="panel-n8n" role="tabpanel" aria-labelledby="btn-n8n" class="rounded-2xl overflow-hidden shadow-2xl border border-slate-700 relative group">
|
||
<!-- Window Header -->
|
||
<div class="flex items-center px-4 py-3 bg-[#1a1a2e] border-b border-slate-700/50 gap-2">
|
||
<div class="w-3 h-3 rounded-full bg-[#ff5f56]"></div>
|
||
<div class="w-3 h-3 rounded-full bg-[#ffbd2e]"></div>
|
||
<div class="w-3 h-3 rounded-full bg-[#27c93f]"></div>
|
||
<span class="ml-3 text-slate-400 text-xs font-mono">n8n Workflow Editor</span>
|
||
</div>
|
||
<!-- Screenshot Image (Cropped diagram) -->
|
||
<div class="relative overflow-hidden rounded-b-xl">
|
||
<picture>
|
||
<source srcset="images/n8n-workflow.webp" type="image/webp">
|
||
<img src="images/n8n-workflow.png"
|
||
alt="n8n 워크플로우 자동화 예시: GitHub Actions 트리거 → 텔레그램 봇 알림 → 서버 자동 생성 프로세스"
|
||
class="w-full h-auto block transition-transform duration-500 group-hover:scale-[1.02]"
|
||
width="800"
|
||
height="450"
|
||
loading="lazy"
|
||
decoding="async"
|
||
fetchpriority="low"
|
||
crossorigin="anonymous">
|
||
</picture>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Terraform Window (Hidden by default) -->
|
||
<div id="panel-tf" role="tabpanel" aria-labelledby="btn-tf" class="hidden bg-[#1e1e1e] rounded-xl overflow-hidden shadow-2xl border border-slate-700 h-[320px] font-mono text-sm">
|
||
<div class="flex items-center px-4 py-2 bg-[#252526] border-b border-[#3e3e42] gap-2">
|
||
<div class="w-3 h-3 rounded-full bg-[#ff5f56]"></div>
|
||
<div class="w-3 h-3 rounded-full bg-[#ffbd2e]"></div>
|
||
<div class="w-3 h-3 rounded-full bg-[#27c93f]"></div>
|
||
<span class="ml-2 text-slate-400 text-xs">main.tf</span>
|
||
</div>
|
||
<div class="p-6 text-slate-300 leading-relaxed overflow-x-auto h-full overflow-y-auto custom-scrollbar">
|
||
<div><span class="text-[#569cd6]">resource</span> <span class="text-[#ce9178]">"anvil_instance"</span> <span class="text-[#ce9178]">"web"</span> {</div>
|
||
<div class="pl-4"><span class="text-[#9cdcfe]">name</span> = <span class="text-[#ce9178]">"production-web-01"</span></div>
|
||
<div class="pl-4"><span class="text-[#9cdcfe]">image</span> = <span class="text-[#ce9178]">"debian-12"</span></div>
|
||
<div class="pl-4"><span class="text-[#9cdcfe]">region</span> = <span class="text-[#ce9178]">"jp-east-1"</span></div>
|
||
<div class="pl-4"><span class="text-[#9cdcfe]">plan</span> = <span class="text-[#ce9178]">"pro-v2"</span></div>
|
||
<br>
|
||
<div class="pl-4"><span class="text-[#6a9955]">// 자동 백업 설정</span></div>
|
||
<div class="pl-4"><span class="text-[#9cdcfe]">backup_schedule</span> {</div>
|
||
<div class="pl-8"><span class="text-[#9cdcfe]">enabled</span> = <span class="text-[#569cd6]">true</span></div>
|
||
<div class="pl-8"><span class="text-[#9cdcfe]">retain</span> = <span class="text-[#b5cea8]">7</span></div>
|
||
<div class="pl-4">}</div>
|
||
<div>}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Infrastructure Details -->
|
||
<section class="py-24 relative overflow-hidden">
|
||
<!-- Background accent -->
|
||
<div class="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-slate-700 to-transparent"></div>
|
||
|
||
<div class="max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-12">
|
||
<div>
|
||
<h3 class="text-2xl md:text-3xl font-bold mb-8">High-Spec <span class="gradient-text">Infrastructure</span></h3>
|
||
<ul class="space-y-6">
|
||
<li class="flex gap-4">
|
||
<div class="w-12 h-12 rounded bg-slate-800 flex items-center justify-center flex-shrink-0 border border-slate-700">
|
||
<span class="text-2xl">⚡</span>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-bold text-lg">NVMe Storage</h4>
|
||
<p class="text-slate-400 text-sm">모든 플랜에 Enterprise급 NVMe SSD 제공. IOPS 병목 없는 데이터베이스 성능 보장.</p>
|
||
</div>
|
||
</li>
|
||
<li class="flex gap-4">
|
||
<div class="w-12 h-12 rounded bg-slate-800 flex items-center justify-center flex-shrink-0 border border-slate-700">
|
||
<span class="text-2xl">🌐</span>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-bold text-lg">Premium Network</h4>
|
||
<p class="text-slate-400 text-sm">BGP 최적화 경로. 서울-도쿄 35ms, 서울-홍콩 45ms의 낮은 레이턴시.</p>
|
||
</div>
|
||
</li>
|
||
<li class="flex gap-4">
|
||
<div class="w-12 h-12 rounded bg-slate-800 flex items-center justify-center flex-shrink-0 border border-slate-700">
|
||
<span class="text-2xl">💾</span>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-bold text-lg">ZFS Snapshots</h4>
|
||
<p class="text-slate-400 text-sm">CoW(Copy-on-Write) 기반의 즉각적인 스냅샷과 롤백 지원. 데이터 손실 걱정 끝.</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="glass-card rounded-2xl p-1 terminal-glow">
|
||
<!-- Terminal UI Mockup -->
|
||
<div class="bg-dark-900/90 rounded-xl h-full p-5 font-mono text-xs md:text-sm text-slate-300 overflow-hidden">
|
||
<div class="flex gap-2 mb-4 items-center">
|
||
<div class="w-3 h-3 rounded-full bg-red-500/80"></div>
|
||
<div class="w-3 h-3 rounded-full bg-yellow-500/80"></div>
|
||
<div class="w-3 h-3 rounded-full bg-green-500/80"></div>
|
||
<span class="ml-3 text-slate-500 text-xs">anvil-server ~ bash</span>
|
||
</div>
|
||
<p><span class="text-brand-400">root@anvil:~#</span> neofetch</p>
|
||
<div class="mt-2 text-slate-400">
|
||
.<br>
|
||
/ \<br>
|
||
( )<br>
|
||
\ / <span class="text-white">OS:</span> Debian GNU/Linux 12 (bookworm)<br>
|
||
| <span class="text-white">Kernel:</span> 6.1.0-18-cloud-amd64<br>
|
||
| <span class="text-white">Uptime:</span> 142 days, 4 hours<br>
|
||
| <span class="text-white">Virtualization:</span> lxc (Incus)<br>
|
||
| <span class="text-white">CPU:</span> AMD EPYC 7763 (4) @ 2.45GHz<br>
|
||
| <span class="text-white">Memory:</span> 512MiB / 64GiB<br>
|
||
</div>
|
||
<p class="mt-4"><span class="text-brand-400">root@anvil:~#</span> docker ps</p>
|
||
<p class="text-green-400">CONTAINER ID IMAGE STATUS PORTS</p>
|
||
<p>a1b2c3d4e5f6 nginx Up 24h 0.0.0.0:80->80/tcp</p>
|
||
<p class="mt-4 animate-pulse">_</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Domain Section -->
|
||
<section id="domain" class="py-24 relative overflow-hidden">
|
||
<!-- Background accent -->
|
||
<div class="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-brand-500/30 to-transparent"></div>
|
||
<div class="absolute top-[20%] left-[-10%] w-[400px] h-[400px] bg-brand-500/5 rounded-full blur-[100px] -z-10"></div>
|
||
|
||
<div class="max-w-7xl mx-auto px-6">
|
||
<div class="flex flex-col lg:flex-row items-center gap-16">
|
||
<div class="lg:w-1/2">
|
||
<div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full glass-card-static text-xs font-mono text-brand-400 mb-6">
|
||
<span class="w-1.5 h-1.5 rounded-full bg-brand-400 animate-pulse"></span>
|
||
NEW: AI Domain Generator
|
||
</div>
|
||
<h2 class="text-3xl md:text-4xl font-bold mb-6">대화로 끝내는<br><span class="gradient-text">도메인 등록과 관리</span></h2>
|
||
<p class="text-slate-400 mb-8 leading-relaxed text-lg">
|
||
원하는 아이디어만 말씀하세요. AI가 창의적인 도메인을 추천하고, 텔레그램 대화창에서 3초 만에 등록까지 완료합니다. 복잡한 설정 없이 네임서버까지 즉시 연결됩니다.
|
||
</p>
|
||
|
||
<div class="grid grid-cols-2 gap-4">
|
||
<div class="glass-card p-5 rounded-xl group">
|
||
<div class="text-brand-400 font-bold mb-2 flex items-center gap-2">
|
||
<span class="text-lg">🤖</span> AI 추천
|
||
</div>
|
||
<p class="text-sm text-slate-400">키워드 분석 기반 도메인 작명</p>
|
||
</div>
|
||
<div class="glass-card p-5 rounded-xl group">
|
||
<div class="text-brand-400 font-bold mb-2 flex items-center gap-2">
|
||
<span class="text-lg">🔍</span> 실시간 조회
|
||
</div>
|
||
<p class="text-sm text-slate-400">전 세계 TLD 실시간 가용 확인</p>
|
||
</div>
|
||
<div class="glass-card p-5 rounded-xl group">
|
||
<div class="text-brand-400 font-bold mb-2 flex items-center gap-2">
|
||
<span class="text-lg">⚙️</span> 간편 DNS
|
||
</div>
|
||
<p class="text-sm text-slate-400">대화형 A/CNAME/MX 레코드 설정</p>
|
||
</div>
|
||
<div class="glass-card p-5 rounded-xl group">
|
||
<div class="text-brand-400 font-bold mb-2 flex items-center gap-2">
|
||
<span class="text-lg">🔒</span> Whois 보안
|
||
</div>
|
||
<p class="text-sm text-slate-400">개인정보 보호 설정 기본 제공</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="lg:w-1/2 w-full">
|
||
<div class="glass-panel p-8 rounded-2xl border border-slate-700 relative overflow-hidden">
|
||
<div class="absolute top-0 right-0 p-4 opacity-10">
|
||
<svg class="w-32 h-32 text-brand-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
|
||
</div>
|
||
<h3 class="text-xl font-bold mb-4 flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-brand-500"></span>
|
||
주요 도메인 가격 (연간)
|
||
</h3>
|
||
<div class="space-y-4 font-mono text-sm">
|
||
<div class="flex justify-between items-center p-3 border-b border-white/5">
|
||
<span class="text-white">.com / .net</span>
|
||
<span class="text-brand-400 font-bold">₩20,000 / ₩22,600</span>
|
||
</div>
|
||
<div class="flex justify-between items-center p-3 border-b border-white/5">
|
||
<span class="text-white">.it.com / .dev</span>
|
||
<div class="text-right">
|
||
<span class="text-brand-400 font-bold">₩8,700 / ₩27,800</span>
|
||
<div class="text-[10px] text-slate-400 mt-0.5">(.it.com 갱신 ₩67,900)</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-between items-center p-3 border-b border-white/5">
|
||
<span class="text-white">.io / .ai</span>
|
||
<span class="text-brand-400 font-bold">₩114,800 / ₩139,200</span>
|
||
</div>
|
||
<div class="flex justify-between items-center p-3">
|
||
<span class="text-white">.xyz / .me</span>
|
||
<span class="text-brand-400 font-bold">₩27,800 / ₩31,300</span>
|
||
</div>
|
||
</div>
|
||
<a href="https://t.me/AnvilForgeBot" target="_blank" rel="noopener noreferrer" class="mt-8 w-full py-3 bg-brand-700 hover:bg-brand-500 text-white font-bold rounded-lg transition text-center block">
|
||
🌐 도메인 검색 시작하기
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
<!-- End Main Content -->
|
||
|
||
<!-- Footer -->
|
||
<footer class="py-16 relative overflow-hidden">
|
||
<!-- Background -->
|
||
<div class="absolute inset-0 bg-gradient-to-t from-dark-900 to-transparent"></div>
|
||
<div class="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-brand-500/30 to-transparent"></div>
|
||
|
||
<div class="max-w-7xl mx-auto px-6 relative z-10">
|
||
<div class="flex flex-col md:flex-row justify-between items-center gap-8">
|
||
<!-- Brand -->
|
||
<div class="text-center md:text-left">
|
||
<div class="flex items-center gap-3 mb-2 justify-center md:justify-start">
|
||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-purple-500 flex items-center justify-center text-white font-bold text-lg">A</div>
|
||
<span class="text-xl font-bold text-white">Anvil Hosting</span>
|
||
</div>
|
||
<p class="text-sm text-slate-500">Global Cloud Infrastructure</p>
|
||
</div>
|
||
|
||
<!-- Links -->
|
||
<div class="flex flex-wrap justify-center gap-8">
|
||
<a href="/terms.html" class="text-slate-400 hover:text-brand-400 transition underline-animation">이용약관</a>
|
||
<a href="/privacy.html" class="text-slate-400 hover:text-brand-400 transition underline-animation">개인정보처리방침</a>
|
||
<a href="/sla.html" class="text-slate-400 hover:text-brand-400 transition underline-animation">SLA</a>
|
||
</div>
|
||
|
||
<!-- Company Info -->
|
||
<div class="text-center md:text-right text-sm">
|
||
<div class="text-slate-400">© 2026 LIBEHAIM Inc. | Taro Tanaka</div>
|
||
<div class="text-xs text-slate-500 mt-1">#202 K-Flat, 3-1-13 Higashioi, Shinagawa-ku, Tokyo 140-0011, Japan</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bottom Decoration -->
|
||
<div class="mt-12 pt-8 border-t border-white/5 text-center">
|
||
<p class="text-xs text-slate-500">Powered by <span class="text-brand-400">Cloud Infrastructure</span> across 4 global regions</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Scroll Animation Script -->
|
||
<script>
|
||
// Intersection Observer for scroll animations
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const observerOptions = {
|
||
threshold: 0.1,
|
||
rootMargin: '0px 0px -50px 0px'
|
||
};
|
||
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('visible');
|
||
observer.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, observerOptions);
|
||
|
||
// Observe all animate-on-scroll elements
|
||
document.querySelectorAll('.animate-on-scroll').forEach(el => {
|
||
observer.observe(el);
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html> |