<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Core services</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background-color: white;
color: #1a1a1a;
min-height: 100vh;
padding: 2rem 1.5rem;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
.header {
margin-bottom: 2rem;
}
.title {
font-size: 2rem;
font-weight: bold;
margin-bottom: 0.5rem;
color: #1a1a1a;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
}
@media (min-width: 768px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.grid { grid-template-columns: repeat(4, 1fr); }
}
a.card {
display: block;
text-decoration: none;
position: relative;
background: white;
border-radius: 0.75rem;
padding: 1.25rem;
border: 1px solid #e5e7eb;
transition: all 0.3s ease;
overflow: hidden;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
color: inherit;
}
a.card:hover {
transform: scale(1.05);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
border-color: #d1d5db;
}
.icon-container {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: 0.5rem;
margin-bottom: 1rem;
border: 1px solid #f3f4f6;
transition: transform 0.3s ease;
}
a.card:hover .icon-container { transform: scale(1.1); }
.icon-glow {
position: absolute;
inset: 0;
border-radius: 0.5rem;
opacity: 0.1;
transition: opacity 0.3s ease;
}
a.card:hover .icon-glow { opacity: 0.15; }
.icon {
position: relative;
color: #374151;
width: 1.5rem;
height: 1.5rem;
}
.content {
margin-bottom: 0.75rem;
}
.card-title {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: #1f2937;
transition: color 0.3s ease;
}
a.card:hover .card-title { color: #111827; }
.card-description {
color: #6b7280;
font-size: 0.875rem;
transition: color 0.3s ease;
}
a.card:hover .card-description { color: #4b5563; }
.decorative-1, .decorative-2 {
position: absolute;
border-radius: 50%;
opacity: 0.05;
filter: blur(0.75rem);
transition: opacity 0.3s ease;
}
.decorative-1 {
bottom: -0.75rem;
right: -0.75rem;
width: 4rem;
height: 4rem;
}
.decorative-2 {
top: -0.5rem;
left: -0.5rem;
width: 3rem;
height: 3rem;
}
a.card:hover .decorative-1,
a.card:hover .decorative-2 { opacity: 0.1; }
.card-glow {
position: absolute;
inset: 0;
border-radius: 0.75rem;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
a.card:hover .card-glow { opacity: 0.05; }
.bottom-line {
margin-top: 3rem;
height: 1px;
background: linear-gradient(90deg, transparent, #3176FD, transparent);
opacity: 0.3;
}
.krw .icon-container { background: linear-gradient(135deg, rgba(1, 86, 252, 0.1), rgba(49, 118, 253, 0.1)); }
.krw .icon-glow,
.krw .decorative-1,
.krw .decorative-2,
.krw .card-glow { background: linear-gradient(135deg, #0156FC, #1462FC, #3176FD); }
.merchant .icon-container { background: linear-gradient(135deg, rgba(7, 70, 202, 0.1), rgba(20, 98, 252, 0.1)); }
.merchant .icon-glow,
.merchant .decorative-1,
.merchant .decorative-2,
.merchant .card-glow { background: linear-gradient(135deg, #0746CA, #0156FC, #1462FC); }
.wallet .icon-container { background: linear-gradient(135deg, rgba(12, 54, 152, 0.1), rgba(1, 86, 252, 0.1)); }
.wallet .icon-glow,
.wallet .decorative-1,
.wallet .decorative-2,
.wallet .card-glow { background: linear-gradient(135deg, #0C3698, #0746CA, #0156FC); }
.payout .icon-container { background: linear-gradient(135deg, rgba(18, 38, 102, 0.1), rgba(7, 70, 202, 0.1)); }
.payout .icon-glow,
.payout .decorative-1,
.payout .decorative-2,
.payout .card-glow { background: linear-gradient(135deg, #122666, #0C3698, #0746CA); }
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1 class="title">Core services</h1>
</div>
<div class="grid">
<a href="https://docs.sentbiz.com/docs/payins#/" target="_blank" rel="noopener noreferrer" class="card krw">
<div class="icon-container">
<div class="icon-glow"></div>
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
</div>
<div class="content">
<h3 class="card-title">KRW Collection</h3>
<p class="card-description">Instant Virtual Accounts</p>
</div>
<div class="decorative-1"></div>
<div class="decorative-2"></div>
<div class="card-glow"></div>
</a>
<a href="https://docs.sentbiz.com/v1.01/docs/merchant-onboarding#/" target="_blank" rel="noopener noreferrer" class="card merchant">
<div class="icon-container">
<div class="icon-glow"></div>
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
</svg>
</div>
<div class="content">
<h3 class="card-title">Merchant Onboarding</h3>
<p class="card-description">Streamlined Registration</p>
</div>
<div class="decorative-1"></div>
<div class="decorative-2"></div>
<div class="card-glow"></div>
</a>
<a href="https://docs.sentbiz.com/v1.01/docs/wallets#/" target="_blank" rel="noopener noreferrer" class="card wallet">
<div class="icon-container">
<div class="icon-glow"></div>
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div class="content">
<h3 class="card-title">Multi-Currency Wallet</h3>
<p class="card-description">Real-time FX Engine</p>
</div>
<div class="decorative-1"></div>
<div class="decorative-2"></div>
<div class="card-glow"></div>
</a>
<a href="https://docs.sentbiz.com/v1.01/docs/payouts#/" target="_blank" rel="noopener noreferrer" class="card payout">
<div class="icon-container">
<div class="icon-glow"></div>
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
</svg>
</div>
<div class="content">
<h3 class="card-title">Global Payout</h3>
<p class="card-description">SWIFT & Local Rails</p>
</div>
<div class="decorative-1"></div>
<div class="decorative-2"></div>
<div class="card-glow"></div>
</a>
</div>
<div class="bottom-line"></div>
</div>
</body>
</html>