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

Improve hero section UX

Browse Source 
- Add rolling text animation for key features (4 phrases, 4s interval)
- Reduce hero section top padding (pt-32 → pt-24)
- Reduce Telegram chat window height (420px → 320px)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
kappa
2026-01-21 06:37:39 +09:00
parent 0b63590406
commit d64798f10b
1 changed files with 18 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
index.html
View File

@@ -91,7 +91,7 @@
<main id="main-content">
<!-- Hero Section -->
<section class="relative pt-32 pb-20 overflow-hidden grid-bg gradient-bg noise-bg">
<section class="relative pt-24 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>
@@ -104,9 +104,22 @@
<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="gradient-text-animated">Incus/LXD</span> 기반<br>
초경량 컨테이너 호스팅
<h1 class="text-5xl md:text-6xl font-bold leading-tight mb-6"
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="gradient-text-animated" x-text="phrases[current].highlight"></span><br>
<span x-text="phrases[current].text"></span>
</span>
</h1>
<p class="text-lg text-slate-400 mb-8 leading-relaxed">
VM의 오버헤드는 버리세요. OS 수준의 완벽한 격리와 네이티브 성능을 제공합니다.
@@ -164,7 +177,7 @@
</div>
<!-- Chat Messages -->
<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');">
<div class="p-4 space-y-3 text-[14px] bg-[#0e1621] min-h-[320px]" 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-[#2b5278] text-white px-3 py-2 rounded-xl rounded-tr-sm max-w-[85%] leading-relaxed shadow-sm">