130 lines
6.9 KiB
PHP
130 lines
6.9 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title><?= esc($title) ?></title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;700;800&family=Noto+Sans+KR:wght@400;700;900&display=swap"
|
|
rel="stylesheet">
|
|
<style>
|
|
body {
|
|
font-family: 'Noto Sans KR', sans-serif;
|
|
}
|
|
|
|
.bg-grid {
|
|
background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
|
|
background-size: 40px 40px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-[#101922] text-white selection:bg-blue-500/30">
|
|
|
|
<!-- Navbar -->
|
|
<nav class="fixed w-full z-50 bg-[#101922]/80 backdrop-blur-md border-b border-white/5">
|
|
<div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="bg-[#2b8cee] p-2 rounded-lg">
|
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4">
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
<span class="text-xl font-black uppercase tracking-tighter">Daemon-IDC</span>
|
|
</div>
|
|
<div class="hidden md:flex gap-10 text-sm font-bold text-slate-400">
|
|
<a href="#" class="hover:text-white transition-colors">서비스</a>
|
|
<a href="#" class="hover:text-white transition-colors">요금제</a>
|
|
<a href="#" class="hover:text-white transition-colors">고객지원</a>
|
|
<button class="bg-[#2b8cee] text-white px-5 py-2 rounded-lg -mt-1">로그인</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<header class="relative min-h-screen flex items-center pt-20 overflow-hidden">
|
|
<div class="absolute inset-0 z-0">
|
|
<div class="absolute inset-0 bg-gradient-to-r from-[#101922] via-[#101922]/90 to-transparent z-10"></div>
|
|
<!-- 핫링크 테스트를 위한 컨트롤러 경로 이미지 예시 (가상) -->
|
|
<img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc51?auto=format&fit=crop&q=80&w=2000"
|
|
alt="IDC Background" class="w-full h-full object-cover opacity-30">
|
|
</div>
|
|
<div class="relative z-20 max-w-7xl mx-auto px-6 w-full">
|
|
<div class="max-w-2xl space-y-8">
|
|
<div
|
|
class="inline-block px-3 py-1 bg-[#2b8cee]/10 border border-[#2b8cee]/30 text-[#2b8cee] text-xs font-bold rounded-full uppercase">
|
|
CodeIgniter 4.6.4 Powered</div>
|
|
<h1 class="text-6xl md:text-7xl font-black leading-tight tracking-tighter">일본 비즈니스의<br><span
|
|
class="text-[#2b8cee]">견고한 뿌리</span></h1>
|
|
<p class="text-xl text-slate-400 font-medium leading-relaxed">PHP 8.3 기반의 초고속 백엔드와 일본 현지 데이터센터의 결합. 가장
|
|
신뢰받는 인프라를 지금 바로 경험하십시오.</p>
|
|
<div class="flex gap-4">
|
|
<button
|
|
class="bg-[#2b8cee] px-8 py-4 rounded-xl font-black shadow-lg shadow-[#2b8cee]/30 hover:scale-105 transition-transform">서비스
|
|
상담하기</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Services Grid -->
|
|
<section class="py-32 bg-grid">
|
|
<div class="max-w-7xl mx-auto px-6">
|
|
<h2 class="text-3xl font-black mb-16 text-center">전문적인 인프라 솔루션</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<?php foreach ($services as $s): ?>
|
|
<div
|
|
class="p-8 bg-white/5 border border-white/10 rounded-2xl hover:border-[#2b8cee]/50 transition-colors group">
|
|
<div
|
|
class="w-12 h-12 bg-[#2b8cee]/10 rounded-xl mb-6 flex items-center justify-center text-[#2b8cee]">
|
|
<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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z">
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-3"><?= esc($s['title']) ?></h3>
|
|
<p class="text-slate-500 text-sm"><?= esc($s['desc']) ?></p>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pricing -->
|
|
<section class="py-32 bg-[#0b1117]">
|
|
<div class="max-w-7xl mx-auto px-6 text-center">
|
|
<h2 class="text-3xl font-black mb-16">투명한 요금제</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-left">
|
|
<?php foreach ($pricing as $p): ?>
|
|
<div
|
|
class="p-8 rounded-2xl bg-[#101922] border <?= $p['pop'] ? 'border-[#2b8cee] ring-1 ring-[#2b8cee]' : 'border-white/5' ?> relative overflow-hidden">
|
|
<?php if ($p['pop']): ?>
|
|
<div
|
|
class="absolute top-0 right-0 bg-[#2b8cee] text-white text-[10px] px-3 py-1 font-bold uppercase">
|
|
Popular</div><?php endif; ?>
|
|
<h4 class="text-slate-400 font-bold mb-4"><?= esc($p['name']) ?></h4>
|
|
<div class="flex items-baseline gap-1 mb-8">
|
|
<span class="text-4xl font-black"><?= esc($p['price']) ?></span>
|
|
<span class="text-slate-500 font-bold"><?= esc($p['unit']) ?></span>
|
|
</div>
|
|
<button
|
|
class="w-full py-3 rounded-lg font-bold <?= $p['pop'] ? 'bg-[#2b8cee] text-white' : 'bg-slate-800 text-slate-300' ?> hover:opacity-90 transition-opacity">선택하기</button>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer
|
|
class="py-20 border-t border-white/5 text-center text-slate-600 font-bold text-xs uppercase tracking-widest">
|
|
© 2024 DAEMON-IDC. Built with CodeIgniter 4.6.4 & PHP 8.3.
|
|
</footer>
|
|
|
|
</body>
|
|
|
|
</html>
|