From d64798f10bf35a5f7add918b1af0fb9ae2684b06 Mon Sep 17 00:00:00 2001
From: kappa <kappa@inouter.com>
Date: Wed, 21 Jan 2026 06:37:39 +0900
Subject: [PATCH] Improve hero section UX
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 index.html | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 2773cd9..e723aeb 100644
--- a/index.html
+++ b/index.html
@@ -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">