feat(web): redesign logo and update service layout
- Add 3D metallic anvil + blacksmith hammer logo with gradients - Apply metallic gradient to "Anvil" text - Reorder services: Domain → DDoS → Overseas → Hosting - Update domain card: AI 작명 추천 · 3초 등록 · 실시간 가용성 확인 - Remove domain price from service card Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
kappa
114
web/index.html
114
web/index.html
@@ -42,25 +42,56 @@
|
|||||||
<nav class="fixed top-0 w-full bg-gray-950/80 backdrop-blur-md z-50 border-b border-gray-800">
|
<nav class="fixed top-0 w-full bg-gray-950/80 backdrop-blur-md z-50 border-b border-gray-800">
|
||||||
<div class="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
|
<div class="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
|
||||||
<a href="#" class="flex items-center gap-2">
|
<a href="#" class="flex items-center gap-2">
|
||||||
<svg class="w-8 h-8" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg class="w-9 h-9" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<defs>
|
<defs>
|
||||||
<linearGradient id="anvilGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
<!-- 모루 메탈 그라데이션 (위에서 아래로, 밝은→어두운) -->
|
||||||
<stop offset="0%" style="stop-color:#667eea"/>
|
<linearGradient id="anvilMetal" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
<stop offset="100%" style="stop-color:#764ba2"/>
|
<stop offset="0%" style="stop-color:#9ca3af"/>
|
||||||
|
<stop offset="50%" style="stop-color:#6b7280"/>
|
||||||
|
<stop offset="100%" style="stop-color:#4b5563"/>
|
||||||
|
</linearGradient>
|
||||||
|
<!-- 모루 상단 하이라이트 -->
|
||||||
|
<linearGradient id="anvilTop" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#d1d5db"/>
|
||||||
|
<stop offset="100%" style="stop-color:#9ca3af"/>
|
||||||
|
</linearGradient>
|
||||||
|
<!-- 망치 머리 메탈 -->
|
||||||
|
<linearGradient id="hammerMetal" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#d1d5db"/>
|
||||||
|
<stop offset="40%" style="stop-color:#9ca3af"/>
|
||||||
|
<stop offset="100%" style="stop-color:#6b7280"/>
|
||||||
|
</linearGradient>
|
||||||
|
<!-- 손잡이 나무 -->
|
||||||
|
<linearGradient id="woodHandle" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" style="stop-color:#92400e"/>
|
||||||
|
<stop offset="50%" style="stop-color:#b45309"/>
|
||||||
|
<stop offset="100%" style="stop-color:#78350f"/>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
</defs>
|
</defs>
|
||||||
<!-- Anvil shape -->
|
<!-- Anvil base (모루 받침) -->
|
||||||
<path d="M4 22h18v3H4v-3z" fill="url(#anvilGradient)"/>
|
<path d="M4 26 L4 30 L28 30 L28 26 Z" fill="url(#anvilMetal)"/>
|
||||||
<path d="M6 19h14v3H6v-3z" fill="url(#anvilGradient)"/>
|
<!-- Anvil body (모루 몸체) -->
|
||||||
<path d="M2 25h22v3H2v-3z" fill="url(#anvilGradient)"/>
|
<path d="M6 22 L6 26 L26 26 L26 22 Z" fill="url(#anvilMetal)"/>
|
||||||
<!-- Hammer (handle up, head down striking) -->
|
<!-- Anvil top surface (모루 상판 - 하이라이트) -->
|
||||||
<rect x="22" y="2" width="2" height="12" rx="0.5" fill="#9ca3af" transform="rotate(-30 23 8)"/>
|
<path d="M8 20 L8 22 L24 22 L24 20 Z" fill="url(#anvilTop)"/>
|
||||||
<rect x="17" y="12" width="8" height="4" rx="1" fill="url(#anvilGradient)" transform="rotate(-30 21 14)"/>
|
<!-- Anvil top highlight edge -->
|
||||||
<!-- Sparks from impact -->
|
<path d="M8 20 L24 20" stroke="#e5e7eb" stroke-width="0.5"/>
|
||||||
<circle cx="14" cy="16" r="1.2" fill="#f59e0b"/>
|
<!-- Anvil horn (뿔) -->
|
||||||
<path d="M12 14l-1.5-2M16 13l1-2.5M14 12V9" stroke="#f59e0b" stroke-width="1.5" stroke-linecap="round"/>
|
<path d="M26 23 L33 21 L33 23 L26 25 Z" fill="url(#anvilMetal)"/>
|
||||||
|
<path d="M26 23 L33 21" stroke="#d1d5db" stroke-width="0.5"/>
|
||||||
|
<!-- Hammer handle (손잡이) -->
|
||||||
|
<rect x="5" y="3" width="3" height="13" rx="1" fill="url(#woodHandle)" transform="rotate(-50 6.5 9.5)"/>
|
||||||
|
<!-- Hammer head (망치 머리) -->
|
||||||
|
<rect x="11" y="1" width="13" height="6" rx="1" fill="url(#hammerMetal)" transform="rotate(-50 17.5 4)"/>
|
||||||
|
<!-- Hammer head highlight -->
|
||||||
|
<path d="M14 2 L22 -2" stroke="#e5e7eb" stroke-width="0.8" stroke-linecap="round" transform="rotate(-50 17.5 4)"/>
|
||||||
|
<!-- Sparks (불꽃) -->
|
||||||
|
<circle cx="17" cy="17" r="1.5" fill="#f59e0b"/>
|
||||||
|
<circle cx="20" cy="15" r="1" fill="#fbbf24"/>
|
||||||
|
<circle cx="14" cy="15.5" r="1" fill="#fbbf24"/>
|
||||||
|
<path d="M17 14 L17 11 M14 13 L12 10 M20 13 L22 10" stroke="#f59e0b" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
</svg>
|
</svg>
|
||||||
<span class="text-xl font-bold gradient-text">Anvil</span>
|
<span class="text-xl font-bold" style="background: linear-gradient(180deg, #e5e7eb 0%, #9ca3af 40%, #6b7280 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">Anvil</span>
|
||||||
</a>
|
</a>
|
||||||
<div class="hidden md:flex gap-8">
|
<div class="hidden md:flex gap-8">
|
||||||
<a href="#services" class="text-gray-400 hover:text-white transition">서비스</a>
|
<a href="#services" class="text-gray-400 hover:text-white transition">서비스</a>
|
||||||
@@ -153,29 +184,16 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
<!-- Hosting -->
|
<!-- Domain -->
|
||||||
<div class="bg-gray-900 border border-gray-800 rounded-2xl p-6 card-hover">
|
<div class="bg-gray-900 border border-gray-800 rounded-2xl p-6 card-hover">
|
||||||
<div class="w-12 h-12 bg-indigo-500/10 rounded-xl flex items-center justify-center mb-4">
|
<div class="w-12 h-12 bg-orange-500/10 rounded-xl flex items-center justify-center mb-4">
|
||||||
<svg class="w-6 h-6 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg class="w-6 h-6 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="text-xl font-semibold mb-2">웹 호스팅</h3>
|
<h3 class="text-xl font-semibold mb-2">도메인</h3>
|
||||||
<p class="text-gray-400 text-sm">
|
<p class="text-gray-400 text-sm">
|
||||||
SSD 기반 고속 스토리지와 최신 서버 환경으로 빠른 웹사이트 운영
|
AI 작명 추천 · 3초 등록 · 실시간 가용성 확인 · 네임서버 관리
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Overseas Server -->
|
|
||||||
<div class="bg-gray-900 border border-gray-800 rounded-2xl p-6 card-hover">
|
|
||||||
<div class="w-12 h-12 bg-purple-500/10 rounded-xl flex items-center justify-center mb-4">
|
|
||||||
<svg class="w-6 h-6 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-2">해외 서버</h3>
|
|
||||||
<p class="text-gray-400 text-sm">
|
|
||||||
미국, 일본, 유럽 등 전 세계 데이터센터에서 최적의 위치 선택
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -192,20 +210,30 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Domain -->
|
<!-- Overseas Server -->
|
||||||
<div class="bg-gray-900 border border-gray-800 rounded-2xl p-6 card-hover">
|
<div class="bg-gray-900 border border-gray-800 rounded-2xl p-6 card-hover">
|
||||||
<div class="w-12 h-12 bg-orange-500/10 rounded-xl flex items-center justify-center mb-4">
|
<div class="w-12 h-12 bg-purple-500/10 rounded-xl flex items-center justify-center mb-4">
|
||||||
<svg class="w-6 h-6 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg class="w-6 h-6 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="text-xl font-semibold mb-2">도메인</h3>
|
<h3 class="text-xl font-semibold mb-2">해외 서버</h3>
|
||||||
<p class="text-gray-400 text-sm mb-3">
|
<p class="text-gray-400 text-sm">
|
||||||
텔레그램으로 도메인 검색, 등록, 네임서버 관리까지 한번에
|
미국, 일본, 유럽 등 전 세계 데이터센터에서 최적의 위치 선택
|
||||||
</p>
|
</p>
|
||||||
<div class="text-orange-400 text-sm font-medium">
|
</div>
|
||||||
5,000원~/년
|
|
||||||
|
<!-- Hosting -->
|
||||||
|
<div class="bg-gray-900 border border-gray-800 rounded-2xl p-6 card-hover">
|
||||||
|
<div class="w-12 h-12 bg-indigo-500/10 rounded-xl flex items-center justify-center mb-4">
|
||||||
|
<svg class="w-6 h-6 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/>
|
||||||
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-2">웹 호스팅</h3>
|
||||||
|
<p class="text-gray-400 text-sm">
|
||||||
|
SSD 기반 고속 스토리지와 최신 서버 환경으로 빠른 웹사이트 운영
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user