kaffa/anvil-hosting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply Modern Glassmorphism design upgrade

Browse Source 
- Add glassmorphism utilities (glass-card, glass-panel, gradient-text)
- Upgrade Hero section with animated blobs and gradient effects
- Enhance Features, Pricing, Domain sections with glass styling
- Add n8n workflow screenshot (cropped diagram only)
- Redesign Telegram chat UI to match actual Telegram dark theme
- Add scroll animations and glow effects
- Improve Footer with brand logo and gradient accents

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
kappa
2026-01-20 22:36:01 +09:00
parent ead8292653
commit 22650fb5bd
4 changed files with 532 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/n8n-workflow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB

385
index.html
View File

@@ -68,19 +68,21 @@
</nav>
<!-- Hero Section -->
<section class="relative pt-32 pb-20 overflow-hidden grid-bg">
<!-- Glow Effect -->
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-brand-500/10 rounded-full blur-[120px] -z-10"></div>
<section class="relative pt-32 pb-20 overflow-hidden grid-bg gradient-bg noise-bg">
<!-- Animated Blobs -->
<div class="blob blob-1 w-[600px] h-[600px] bg-brand-500/20 top-[-200px] left-[-100px] -z-10"></div>
<div class="blob blob-2 w-[500px] h-[500px] bg-purple-500/15 top-[100px] right-[-150px] -z-10"></div>
<div class="blob blob-3 w-[400px] h-[400px] bg-brand-400/10 bottom-[-100px] left-[30%] -z-10"></div>
<div class="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-16 items-center">
<div class="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-16 items-center relative z-10">
<!-- Left: Text -->
<div>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-800 border border-slate-700 text-xs font-mono text-brand-400 mb-6">
<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-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
System Operational: v2.4.0 Live
</div>
<h1 class="text-5xl md:text-6xl font-bold leading-tight mb-6">
<span class="text-brand-400">Incus/LXD</span> 기반<br>
<span class="gradient-text-animated">Incus/LXD</span> 기반<br>
초경량 컨테이너 호스팅
</h1>
<p class="text-lg text-slate-400 mb-8 leading-relaxed">
@@ -90,7 +92,7 @@
<div class="flex flex-col sm:flex-row gap-4">
<div class="relative">
<button @click="openLauncher()" :aria-expanded="launcherOpen" aria-haspopup="dialog" aria-label="서버 런처 열기" class="relative w-full sm:w-auto px-8 py-4 bg-white/95 text-dark-900 font-bold rounded-lg flex items-center justify-center gap-3 transition-all hover:ring-4 hover:ring-brand-500/30 hover:shadow-[0_0_20px_rgba(56,189,248,0.4)] active:scale-95 group">
<button @click="openLauncher()" :aria-expanded="launcherOpen" aria-haspopup="dialog" aria-label="서버 런처 열기" class="btn-glow relative w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-white to-slate-100 text-dark-900 font-bold rounded-xl flex items-center justify-center gap-3 transition-all active:scale-95 group">
<span class="text-xl">🚀</span>
<span>인스턴스 즉시 배포</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"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
@@ -121,80 +123,92 @@
</div>
</div>
<!-- Right: Telegram Chat Demo (CSS Animation) -->
<!-- Right: Telegram Chat Demo -->
<div class="relative max-w-md mx-auto w-full">
<!-- Phone Frame -->
<div class="bg-slate-900 rounded-[2.5rem] border-[8px] border-slate-800 shadow-2xl overflow-hidden h-[500px] relative">
<!-- Chat Header -->
<div class="bg-slate-800 p-4 flex items-center gap-3 border-b border-slate-700 z-10 relative">
<div class="w-8 h-8 rounded-full bg-brand-500 flex items-center justify-center text-white text-xs">🔨</div>
<div>
<div class="font-bold text-sm">Anvil Forge Bot</div>
<div class="text-xs text-brand-400">bot</div>
<!-- Telegram Window -->
<div class="rounded-2xl shadow-2xl overflow-hidden relative border border-slate-700">
<!-- 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"><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"><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-4 font-sans text-sm h-full bg-slate-900/50">
<div class="p-4 space-y-3 text-[14px] bg-[#0e1621] min-h-[420px]" style="background-image: url('data:image/svg+xml,%3Csvg width=&quot;60&quot; height=&quot;60&quot; viewBox=&quot;0 0 60 60&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;%3E%3Cg fill=&quot;none&quot; fill-rule=&quot;evenodd&quot;%3E%3Cg fill=&quot;%23ffffff&quot; fill-opacity=&quot;0.02&quot;%3E%3Cpath d=&quot;M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z&quot;/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');">
<!-- User Message -->
<div class="flex justify-end chat-bubble delay-1">
<div class="bg-brand-600 text-white px-4 py-2 rounded-2xl rounded-tr-sm max-w-[80%] leading-relaxed">
<div class="bg-[#2b5278] text-white px-3 py-2 rounded-xl rounded-tr-sm max-w-[85%] leading-relaxed shadow-sm">
도쿄 리전에 데비안 12로 프로 등급 서버 하나 만들어줘
<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-2">
<div class="bg-slate-700 text-slate-200 px-4 py-2 rounded-2xl rounded-tl-sm max-w-[85%]">
🤖 <b>AI가 요청을 분석했습니다.</b><br>
<br>
다음 구성으로 서버를 준비할까요?<br>
<br>
• <b>위치:</b> 🇯🇵 도쿄 (Tokyo)<br>
• <b>OS:</b> Debian 12 (Bookworm)<br>
• <b>사양:</b> Pro (2 vCPU / 4GB)<br>
<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>
🤖 AI가 요청을 분석했습니다.<br><br>
다음 구성으로 서버를 준비할까요?<br><br>
📍 <span class="text-white/90">위치:</span> 🇯🇵 도쿄<br>
💿 <span class="text-white/90">OS:</span> Debian 12<br>
⚡ <span class="text-white/90">사양:</span> Pro (2 vCPU / 4GB)
<div class="text-[10px] text-slate-500 text-right mt-1">오후 3:42</div>
</div>
</div>
<!-- User Message -->
<div class="flex justify-end chat-bubble delay-3">
<div class="bg-brand-600 text-white px-4 py-2 rounded-2xl rounded-tr-sm max-w-[80%]">
<div class="bg-[#2b5278] text-white px-3 py-2 rounded-xl rounded-tr-sm max-w-[80%] shadow-sm">
응 바로 생성해줘
<div class="text-[10px] text-blue-200/60 text-right mt-1">오후 3:42 ✓✓</div>
</div>
</div>
<!-- Bot Response (Success) -->
<div class="flex justify-start chat-bubble delay-4">
<div class="bg-slate-700 text-slate-200 px-4 py-2 rounded-2xl rounded-tl-sm max-w-[90%] border-l-4 border-green-500">
✅ <b>서버 생성이 완료되었습니다!</b><br>
<br>
<b>IP:</b> 45.12.89.121<br>
<b>Root PW:</b> (보안 전송됨)<br>
<br>
<i>지금 바로 SSH 접속이 가능합니다.</i>
<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-green-400 font-medium">서버 생성 완료!</span><br><br>
🌐 <span class="text-white/90">IP:</span> <code class="bg-black/30 px-1 rounded text-[13px]">45.12.89.121</code><br>
🔑 <span class="text-white/90">Root PW:</span> <span class="text-slate-400">(보안 전송됨)</span><br><br>
<span class="text-slate-400 text-[13px]">지금 바로 SSH 접속이 가능합니다.</span>
<div class="text-[10px] text-slate-500 text-right mt-1">오후 3:43</div>
</div>
</div>
</div>
</div>
<!-- Decoration Behind Phone -->
<div class="absolute -right-12 -bottom-12 w-64 h-64 bg-brand-500/20 rounded-full blur-3xl -z-10 animate-pulse"></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>
<!-- Technical Features -->
<section id="features" class="py-24 bg-dark-800">
<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 font-bold mb-4">엔지니어를 위한 기술 스택</h2>
<p class="text-slate-400">단순한 호스팅을 넘어, 제어가 가능한 인프라를 제공합니다.</p>
<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-8">
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Tech Card 1 -->
<div class="glass-panel p-8 rounded-xl hover:bg-slate-800/80 transition group border-t-2 border-brand-500">
<div class="text-brand-400 font-mono mb-4 text-xl group-hover:translate-x-2 transition-transform">&lt;Incus/LXD&gt;</div>
<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">&lt;Incus/LXD&gt;</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도 완벽하게 지원합니다.
@@ -202,8 +216,11 @@
</div>
<!-- Tech Card 2 -->
<div class="glass-panel p-8 rounded-xl hover:bg-slate-800/80 transition group border-t-2 border-purple-500">
<div class="text-purple-400 font-mono mb-4 text-xl group-hover:translate-x-2 transition-transform">&lt;Automation&gt;</div>
<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">&lt;Automation&gt;</div>
<h3 class="text-xl font-bold mb-3">API & Webhooks</h3>
<p class="text-slate-400 text-sm leading-relaxed">
n8n, Ansible, Terraform으로 인프라를 코드로 관리하세요. 서버 생성, 삭제, 리소스 조정을 자동화된 워크플로우로 제어할 수 있습니다.
@@ -211,8 +228,11 @@
</div>
<!-- Tech Card 3 -->
<div class="glass-panel p-8 rounded-xl hover:bg-slate-800/80 transition group border-t-2 border-green-500">
<div class="text-green-400 font-mono mb-4 text-xl group-hover:translate-x-2 transition-transform">&lt;Security&gt;</div>
<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">&lt;Security&gt;</div>
<h3 class="text-xl font-bold mb-3">Isolated & Safe</h3>
<p class="text-slate-400 text-sm leading-relaxed">
CrowdSec이 기본 통합된 방화벽과 네임스페이스 격리 기술로 이웃한 컨테이너의 영향 없이 안전하게 데이터를 보호합니다.
@@ -220,8 +240,11 @@
</div>
<!-- Tech Card 4 (DDoS) -->
<div class="glass-panel p-8 rounded-xl hover:bg-slate-800/80 transition group border-t-2 border-red-500">
<div class="text-red-400 font-mono mb-4 text-xl group-hover:translate-x-2 transition-transform">&lt;Anti-DDoS&gt;</div>
<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">&lt;Anti-DDoS&gt;</div>
<h3 class="text-xl font-bold mb-3">1Tbps+ Mitigation</h3>
<p class="text-slate-400 text-sm leading-relaxed">
L3/L4는 물론 복잡한 L7 애플리케이션 공격까지 완벽 방어합니다. 전 세계 엣지 노드에서 공격을 즉시 정화하여 무중단 서비스를 보장합니다.
@@ -232,15 +255,20 @@
</section>
<!-- Automation Section -->
<section id="automation" class="py-24 bg-dark-900 border-t border-slate-800">
<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-3 py-1 rounded-full bg-purple-500/10 border border-purple-500/20 text-xs font-mono text-purple-400 mb-6">
<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>
Infrastructure as Code
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-6">
반복적인 작업은<br>
<span class="text-purple-400">자동화에 맡기세요</span>
<span class="gradient-text">자동화에 맡기세요</span>
</h2>
<p class="text-slate-400 mb-8 leading-relaxed text-lg">
웹 콘솔에 접속할 필요도 없습니다. <span class="text-white font-mono">Terraform</span>으로 인프라를 정의하고, <span class="text-white font-mono">Ansible</span>로 설정을 배포하세요. Anvil은 개발자 친화적인 API를 제공합니다.
@@ -276,44 +304,18 @@
</div>
<!-- n8n Window -->
<div id="panel-n8n" class="bg-[#1e1e1e] rounded-xl overflow-hidden shadow-2xl border border-slate-700 h-[320px] relative p-6 select-none">
<!-- Background Grid -->
<div class="absolute inset-0 opacity-20" style="background-image: radial-gradient(#666 1px, transparent 1px); background-size: 20px 20px;"></div>
<!-- Nodes -->
<div class="relative z-10 h-full flex items-center justify-between px-2">
<!-- Node 1: Webhook -->
<div class="flex flex-col items-center gap-2 group cursor-pointer">
<div class="w-16 h-16 rounded-xl bg-slate-800 border-2 border-slate-600 flex items-center justify-center shadow-lg group-hover:border-purple-500 transition relative">
<span class="text-2xl">⚡</span>
<div class="absolute -right-6 top-1/2 w-6 h-0.5 bg-slate-600"></div>
<div id="panel-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>
<span class="text-xs font-bold text-slate-300 bg-slate-900/80 px-2 py-0.5 rounded">Webhook</span>
<!-- Screenshot Image (Cropped diagram) -->
<div class="relative overflow-hidden rounded-b-xl">
<img src="images/n8n-workflow.png" alt="n8n 워크플로우 자동화 예시" class="w-full h-auto block transition-transform duration-500 group-hover:scale-[1.02]" loading="lazy">
</div>
<!-- Node 2: Anvil API -->
<div class="flex flex-col items-center gap-2 group cursor-pointer">
<div class="w-16 h-16 rounded-xl bg-slate-800 border-2 border-brand-500 flex items-center justify-center shadow-lg shadow-brand-500/20 relative">
<span class="font-bold text-brand-400">API</span>
<div class="absolute -right-6 top-1/2 w-6 h-0.5 bg-slate-600"></div>
</div>
<span class="text-xs font-bold text-brand-400 bg-slate-900/80 px-2 py-0.5 rounded">Restart Server</span>
</div>
<!-- Node 3: Telegram -->
<div class="flex flex-col items-center gap-2 group cursor-pointer">
<div class="w-16 h-16 rounded-xl bg-slate-800 border-2 border-blue-400 flex items-center justify-center shadow-lg relative">
<svg class="w-8 h-8 text-blue-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 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>
</div>
<span class="text-xs font-bold text-blue-400 bg-slate-900/80 px-2 py-0.5 rounded">Notify User</span>
</div>
</div>
<!-- Connection Lines (Animated) -->
<svg class="absolute inset-0 w-full h-full pointer-events-none z-0">
<path d="M100 160 H 250" stroke="#475569" stroke-width="2" stroke-dasharray="5,5" class="animate-pulse"/>
<path d="M350 160 H 500" stroke="#475569" stroke-width="2" stroke-dasharray="5,5" class="animate-pulse"/>
</svg>
</div>
<!-- Terraform Window (Hidden by default) -->
@@ -345,10 +347,13 @@
</section>
<!-- Infrastructure Details -->
<section class="py-24 border-t border-slate-800">
<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 font-bold mb-6">High-Spec Infrastructure</h3>
<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">
@@ -379,13 +384,14 @@
</li>
</ul>
</div>
<div class="glass-panel rounded-2xl p-1 border border-slate-700">
<div class="glass-card rounded-2xl p-1 terminal-glow">
<!-- Terminal UI Mockup -->
<div class="bg-dark-900 rounded-xl h-full p-4 font-mono text-xs md:text-sm text-slate-300 overflow-hidden">
<div class="flex gap-2 mb-4">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
<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">
@@ -409,34 +415,47 @@
</section>
<!-- Domain Section -->
<section id="domain" class="py-24 border-t border-slate-800 bg-dark-900/50">
<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-3 py-1 rounded-full bg-brand-500/10 border border-brand-500/20 text-xs font-mono text-brand-400 mb-6">
<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="text-brand-400">도메인 등록과 관리</span></h2>
<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-6">
<div class="glass-panel p-4 rounded-lg">
<div class="text-brand-400 font-bold mb-1">AI 추천</div>
<p class="text-xs text-slate-500">키워드 분석 기반 도메인 작명</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>
<div class="glass-panel p-4 rounded-lg">
<div class="text-brand-400 font-bold mb-1">실시간 조회</div>
<p class="text-xs text-slate-500">전 세계 TLD 실시간 가용 확인</p>
<p class="text-sm text-slate-400">키워드 분석 기반 도메인 작명</p>
</div>
<div class="glass-panel p-4 rounded-lg">
<div class="text-brand-400 font-bold mb-1">간편 DNS</div>
<p class="text-xs text-slate-500">대화형 A/CNAME/MX 레코드 설정</p>
<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>
<div class="glass-panel p-4 rounded-lg">
<div class="text-brand-400 font-bold mb-1">Whois 보안</div>
<p class="text-xs text-slate-500">개인정보 보호 설정 기본 제공</p>
<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>
@@ -481,23 +500,33 @@
</section>
<!-- Pricing -->
<section id="pricing" class="py-24 bg-dark-800">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4">합리적인 요금제</h2>
<p class="text-slate-400">전 세계 4개 리전에서 제공되는 최적의 인프라 요금 (월간 기준, VAT 포함)</p>
<section id="pricing" class="py-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-16 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>
<!-- Pricing Tabs -->
<div x-data="pricingTable()" class="glass-panel p-8 rounded-2xl border border-slate-700 mb-12">
<div x-data="pricingTable()" class="glass-card-static p-8 rounded-3xl mb-12 animate-on-scroll">
<!-- Tab Buttons -->
<div class="flex justify-center mb-8">
<div class="bg-slate-900/80 p-1 rounded-xl inline-flex border border-slate-700">
<button @click="region = 'global'" :class="region === 'global' ? 'bg-brand-600 text-white shadow-lg' : 'text-slate-400 hover:text-white'" class="px-6 py-2 rounded-lg text-sm font-bold transition-all flex items-center gap-2">
<div class="glass-panel p-1.5 rounded-2xl inline-flex gap-1">
<button @click="region = 'global'" :class="region === 'global' ? 'bg-gradient-to-r from-brand-600 to-brand-500 text-white shadow-lg shadow-brand-500/30' : 'text-slate-400 hover:text-white hover:bg-white/5'" class="px-6 py-3 rounded-xl text-sm font-bold transition-all flex items-center gap-2">
<span>🌏 Global</span>
<span class="text-[10px] font-normal opacity-80">(Tokyo/SG/HK)</span>
</button>
<button @click="region = 'seoul'" :class="region === 'seoul' ? 'bg-brand-600 text-white shadow-lg' : 'text-slate-400 hover:text-white'" class="px-6 py-2 rounded-lg text-sm font-bold transition-all flex items-center gap-2">
<button @click="region = 'seoul'" :class="region === 'seoul' ? 'bg-gradient-to-r from-brand-600 to-brand-500 text-white shadow-lg shadow-brand-500/30' : 'text-slate-400 hover:text-white hover:bg-white/5'" class="px-6 py-3 rounded-xl text-sm font-bold transition-all flex items-center gap-2">
<span>🇰🇷 Seoul</span>
<span class="text-[10px] font-normal opacity-80">(Premium)</span>
</button>
@@ -559,53 +588,56 @@
</div>
<!-- Feature Highlight -->
<div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
<div class="glass-panel p-6 rounded-xl flex items-start gap-4">
<div class="text-2xl mt-1">🌍</div>
<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>
<h4 class="font-bold text-white mb-1">글로벌 4개 리전 운영</h4>
<h4 class="font-bold text-white mb-2">글로벌 4개 리전 운영</h4>
<p class="text-sm text-slate-400 leading-relaxed">도쿄(JP-East), 오사카(JP-West), 싱가포르(SG-Core), 홍콩(HK-Hub)에서 즉시 서버를 생성할 수 있습니다.</p>
</div>
</div>
<div class="glass-panel p-6 rounded-xl flex items-start gap-4 border-brand-500/30">
<div class="text-2xl mt-1">🛡️</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>
<h4 class="font-bold text-white mb-1">프리미엄 DDoS 방어</h4>
<h4 class="font-bold text-white mb-2">프리미엄 DDoS 방어</h4>
<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-panel p-8 rounded-2xl border border-slate-600 relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-r from-slate-800 to-slate-900 z-0"></div>
<div class="absolute right-0 top-0 h-full w-1/2 bg-[url('images/server-tech.jpg')] bg-cover bg-center opacity-10 mix-blend-overlay"></div>
<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-3 py-1 rounded bg-red-500/10 border border-red-500/20 text-xs font-bold text-red-400 mb-4">
<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 font-bold text-white mb-2">Bare Metal Dedicated</h3>
<p class="text-slate-400 max-w-xl">
<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 gap-6 mt-6 text-sm font-mono text-slate-300">
<span class="flex items-center gap-2"><span class="text-brand-400">✓</span> Full IPMI Access</span>
<span class="flex items-center gap-2"><span class="text-brand-400">✓</span> Custom Hardware</span>
<span class="flex items-center gap-2"><span class="text-brand-400">✓</span> 40Gbps Private Network</span>
<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> 40Gbps Private Network</span>
</div>
</div>
<div class="flex flex-col items-end gap-2">
<div class="text-right">
<span class="text-sm text-slate-500">Live Inventory Pricing</span>
<div class="text-4xl font-bold text-white">₩169,000<span class="text-lg text-slate-500 font-normal">~</span></div>
<p class="text-[10px] text-brand-400 mt-1">🇸🇬 싱가포르 최저가 재고 보유 중</p>
<p class="text-[10px] text-slate-500">※ 서울/도쿄 리전 재고 및 가격은 봇으로 확인하세요.</p>
<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-500 mt-1">※ 서울/도쿄 리전 재고 및 가격은 봇으로 확인하세요.</p>
</div>
<a href="https://t.me/AnvilForgeBot" target="_blank" class="px-8 py-3 bg-brand-600 text-white font-bold rounded hover:bg-brand-500 transition shadow-lg shadow-brand-500/20 flex items-center gap-2">
<a href="https://t.me/AnvilForgeBot" target="_blank" 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"><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>
@@ -616,21 +648,41 @@
</section>
<!-- Footer -->
<footer class="py-12 border-t border-slate-800 text-sm text-slate-500">
<div class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-4">
<div>
<span class="font-bold text-slate-300">Anvil Hosting</span> | Global Cloud Infrastructure
<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>
<div class="flex gap-6">
<a href="https://t.me/AnvilForgeBot?start=terms" target="_blank" rel="noopener noreferrer" class="text-slate-400 hover:text-white transition">이용약관</a>
<a href="https://t.me/AnvilForgeBot?start=privacy" target="_blank" rel="noopener noreferrer" class="text-slate-400 hover:text-white transition">개인정보처리방침</a>
<a href="https://t.me/AnvilForgeBot?start=sla" target="_blank" rel="noopener noreferrer" class="text-slate-400 hover:text-white transition">SLA</a>
<p class="text-sm text-slate-500">Global Cloud Infrastructure</p>
</div>
<div class="text-right">
<div>© 2026 LIBEHAIM Inc. | Taro Tanaka</div>
<!-- Links -->
<div class="flex flex-wrap justify-center gap-8">
<a href="https://t.me/AnvilForgeBot?start=terms" target="_blank" rel="noopener noreferrer" class="text-slate-400 hover:text-brand-400 transition underline-animation">이용약관</a>
<a href="https://t.me/AnvilForgeBot?start=privacy" target="_blank" rel="noopener noreferrer" class="text-slate-400 hover:text-brand-400 transition underline-animation">개인정보처리방침</a>
<a href="https://t.me/AnvilForgeBot?start=sla" target="_blank" rel="noopener noreferrer" 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-600 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-600">Powered by <span class="text-brand-400">Cloud Infrastructure</span> across 4 global regions</p>
</div>
</div>
</footer>
<!-- Server Launcher Modal -->
@@ -822,5 +874,30 @@
</div>
<!-- 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>

296
src/input.css
View File

@@ -15,11 +15,43 @@
--color-dark-700: #334155;
--animate-float: float 6s ease-in-out infinite;
--animate-glow: glow 2s ease-in-out infinite alternate;
--animate-shimmer: shimmer 2s linear infinite;
--animate-fade-up: fade-up 0.6s ease-out forwards;
--animate-scale-in: scale-in 0.3s ease-out forwards;
--animate-blob: blob 7s infinite;
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
@keyframes glow {
from { opacity: 0.5; }
to { opacity: 1; }
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
@keyframes fade-up {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes scale-in {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
@keyframes blob {
0% { transform: translate(0px, 0px) scale(1); }
33% { transform: translate(30px, -50px) scale(1.1); }
66% { transform: translate(-20px, 20px) scale(0.9); }
100% { transform: translate(0px, 0px) scale(1); }
}
}
/* Base styles */
@@ -28,16 +60,196 @@ body {
color: #e2e8f0;
}
/* Enhanced Glass Panels */
.glass-panel {
background: rgba(30, 41, 59, 0.4);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.glass-card {
background: linear-gradient(135deg, rgba(30, 41, 59, 0.6) 0%, rgba(30, 41, 59, 0.3) 100%);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-card:hover {
background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(30, 41, 59, 0.5) 100%);
border-color: rgba(255, 255, 255, 0.15);
transform: translateY(-4px);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.3),
0 0 40px rgba(56, 189, 248, 0.1);
}
.glass-card-static {
background: linear-gradient(135deg, rgba(30, 41, 59, 0.6) 0%, rgba(30, 41, 59, 0.3) 100%);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
/* Gradient Text */
.gradient-text {
background: linear-gradient(135deg, #38bdf8 0%, #a855f7 50%, #38bdf8 100%);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.gradient-text-animated {
background: linear-gradient(90deg, #38bdf8, #a855f7, #38bdf8);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: shimmer 3s linear infinite;
}
/* Glow Effects */
.glow-brand {
box-shadow: 0 0 40px rgba(56, 189, 248, 0.3);
}
.glow-purple {
box-shadow: 0 0 40px rgba(168, 85, 247, 0.3);
}
.glow-border {
position: relative;
}
.glow-border::before {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
background: linear-gradient(135deg, rgba(56, 189, 248, 0.5), rgba(168, 85, 247, 0.5));
z-index: -1;
opacity: 0;
transition: opacity 0.4s ease;
}
.glow-border:hover::before {
opacity: 1;
}
/* Background Effects */
.grid-bg {
background-image: linear-gradient(rgba(56, 189, 248, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(56, 189, 248, 0.05) 1px, transparent 1px);
background-size: 30px 30px;
background-image: linear-gradient(rgba(56, 189, 248, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(56, 189, 248, 0.03) 1px, transparent 1px);
background-size: 40px 40px;
}
.gradient-bg {
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(56, 189, 248, 0.15), transparent),
radial-gradient(ellipse 60% 40% at 80% 50%, rgba(168, 85, 247, 0.1), transparent);
}
.noise-bg {
position: relative;
}
.noise-bg::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
opacity: 0.02;
pointer-events: none;
}
/* Animated Blobs */
.blob {
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: 0.5;
animation: blob 7s infinite;
}
.blob-1 {
animation-delay: 0s;
}
.blob-2 {
animation-delay: 2s;
}
.blob-3 {
animation-delay: 4s;
}
/* Button Effects */
.btn-glow {
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.btn-glow::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.btn-glow:hover::before {
transform: translateX(100%);
}
.btn-glow:hover {
box-shadow: 0 0 30px rgba(56, 189, 248, 0.5);
}
/* Feature Cards with Accent */
.feature-card {
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: var(--accent-color, #38bdf8);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.feature-card:hover::before {
transform: scaleX(1);
}
.feature-card[data-accent="brand"] { --accent-color: #38bdf8; }
.feature-card[data-accent="purple"] { --accent-color: #a855f7; }
.feature-card[data-accent="green"] { --accent-color: #22c55e; }
.feature-card[data-accent="red"] { --accent-color: #ef4444; }
/* Pricing Card Highlight */
.pricing-featured {
position: relative;
background: linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, rgba(168, 85, 247, 0.05) 100%);
}
.pricing-featured::before {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(56, 189, 248, 0.5), rgba(168, 85, 247, 0.3));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
/* Chat Animation */
@@ -58,3 +270,81 @@ body {
.delay-2 { animation-delay: 1.5s; }
.delay-3 { animation-delay: 2.5s; }
.delay-4 { animation-delay: 3.5s; }
/* Scroll Animations */
.animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.animate-on-scroll.visible {
opacity: 1;
transform: translateY(0);
}
/* Terminal Glow */
.terminal-glow {
box-shadow:
0 0 0 1px rgba(56, 189, 248, 0.1),
0 20px 50px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* Icon Glow on Hover */
.icon-glow {
transition: all 0.3s ease;
}
.icon-glow:hover {
filter: drop-shadow(0 0 10px currentColor);
}
/* Smooth underline animation */
.underline-animation {
position: relative;
}
.underline-animation::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, #38bdf8, #a855f7);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s ease;
}
.underline-animation:hover::after {
transform: scaleX(1);
transform-origin: left;
}
/* Stagger animation delays */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: rgba(30, 41, 59, 0.5);
}
::-webkit-scrollbar-thumb {
background: rgba(56, 189, 248, 0.3);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(56, 189, 248, 0.5);
}

2
style.css
View File

File diff suppressed because one or more lines are too long