chpark
f152633c90
Build & Deploy Homepage / build-and-deploy (push) Successful in 11s
- Aurora 블러 백그라운드 + 커서 스포트라이트 - 거대 타이포그래피 (Instrument Serif 믹스) + 단어 로테이터 - 3D 틸트 카드 + 마그네틱 버튼 + 히어로 디바이스 패럴랙스 - Bento 그리드 6-cell 기능 (각 카드마다 인터랙티브 미니 비주얼) - 타임라인 How it works - 탭 전환 Core features 쇼케이스 (SVG 일러스트) - 파티클 네트워크 캔버스 (AI 섹션) - 무한 스크롤 testimonials 마키 - 다크모드 토글 - Grain 오버레이 + 반응형 개선
2288 lines
102 KiB
HTML
2288 lines
102 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko" data-theme="light">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>invyone — AI 에이전트가 만드는 엔터프라이즈</title>
|
||
<meta name="description" content="드래그앤드롭으로 화면을 설계하고, AI 에이전트가 데이터 연계와 비즈니스 로직을 자동으로 완성하는 차세대 노코드 엔터프라이즈 플랫폼.">
|
||
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%236366f1'/><stop offset='.5' stop-color='%23a855f7'/><stop offset='1' stop-color='%23ec4899'/></linearGradient></defs><path d='M-28,-20 C-28,-32 -16,-38 -6,-32 C4,-26 2,-14 10,-14 C18,-14 20,-24 30,-20 C40,-16 34,-4 30,4 C26,12 18,14 10,14 C2,14 4,26 -6,32 C-16,38 -28,32 -28,20 C-28,12 -20,10 -20,0 C-20,-10 -28,-12 -28,-20Z' transform='translate(20,20) scale(.58)' fill='url(%23g)'/></svg>">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;600&family=Noto+Sans+KR:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||
<style>
|
||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
:root {
|
||
--primary: #6366f1;
|
||
--primary-dark: #4f46e5;
|
||
--primary-light: #a855f7;
|
||
--accent: #ec4899;
|
||
--accent-orange: #f97316;
|
||
--cyan: #06b6d4;
|
||
--bg: #ffffff;
|
||
--bg-alt: #fafaff;
|
||
--bg-elevated: #f5f3ff;
|
||
--bg-dark: #06060f;
|
||
--bg-dark-elevated: #0e0e1c;
|
||
--text: #0a0a1a;
|
||
--text-soft: #4b5563;
|
||
--text-light: #6b7280;
|
||
--text-muted: #9ca3af;
|
||
--border: #e9e8f1;
|
||
--border-soft: #f1f0f8;
|
||
--stroke: rgba(10, 10, 26, 0.08);
|
||
--gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 40%, #ec4899 70%, #f97316 100%);
|
||
--gradient-vibrant: linear-gradient(120deg, #818cf8 0%, #c084fc 30%, #f472b6 60%, #fb923c 100%);
|
||
--radius: 14px;
|
||
--radius-lg: 22px;
|
||
--radius-xl: 32px;
|
||
--max-width: 1320px;
|
||
--ease: cubic-bezier(0.16, 1, 0.3, 1);
|
||
--ease-out: cubic-bezier(0.19, 1, 0.22, 1);
|
||
--shadow-sm: 0 1px 2px rgba(10, 10, 26, 0.04), 0 1px 3px rgba(10, 10, 26, 0.06);
|
||
--shadow: 0 10px 40px -8px rgba(99, 102, 241, 0.12);
|
||
--shadow-lg: 0 30px 100px -20px rgba(99, 102, 241, 0.25);
|
||
--shadow-xl: 0 50px 150px -30px rgba(168, 85, 247, 0.4);
|
||
}
|
||
|
||
[data-theme="dark"] {
|
||
--bg: #06060f;
|
||
--bg-alt: #0a0a17;
|
||
--bg-elevated: #12121f;
|
||
--text: #f5f5fa;
|
||
--text-soft: #c4c5d0;
|
||
--text-light: #8b8e9a;
|
||
--text-muted: #5b5e6d;
|
||
--border: rgba(255, 255, 255, 0.08);
|
||
--border-soft: rgba(255, 255, 255, 0.04);
|
||
--stroke: rgba(255, 255, 255, 0.1);
|
||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
|
||
--shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.5);
|
||
--shadow-lg: 0 40px 120px -20px rgba(168, 85, 247, 0.35);
|
||
}
|
||
|
||
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
|
||
|
||
body {
|
||
font-family: 'Inter', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
line-height: 1.6;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
overflow-x: hidden;
|
||
transition: background 0.4s, color 0.4s;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
::selection { background: #a855f7; color: #fff; }
|
||
a { color: inherit; text-decoration: none; }
|
||
img, svg { display: block; max-width: 100%; }
|
||
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
|
||
|
||
.serif { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-style: italic; letter-spacing: -0.02em; }
|
||
.mono { font-family: 'JetBrains Mono', monospace; }
|
||
|
||
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 32px; position: relative; }
|
||
|
||
/* ===== Cursor spotlight ===== */
|
||
.spotlight {
|
||
position: fixed; width: 600px; height: 600px;
|
||
pointer-events: none; z-index: 1;
|
||
background: radial-gradient(circle, rgba(168,85,247,0.12) 0%, rgba(99,102,241,0.06) 30%, transparent 60%);
|
||
border-radius: 50%;
|
||
transform: translate(-50%, -50%);
|
||
opacity: 0;
|
||
transition: opacity 0.4s;
|
||
mix-blend-mode: multiply;
|
||
}
|
||
[data-theme="dark"] .spotlight { mix-blend-mode: screen; opacity: 0.8; }
|
||
@media (hover: hover) and (min-width: 768px) {
|
||
body:not(.is-touch) .spotlight { opacity: 1; }
|
||
}
|
||
|
||
/* ===== Aurora background ===== */
|
||
.aurora {
|
||
position: fixed; inset: 0; z-index: 0;
|
||
overflow: hidden; pointer-events: none;
|
||
}
|
||
.aurora::before, .aurora::after {
|
||
content: ''; position: absolute; border-radius: 50%;
|
||
filter: blur(80px); opacity: 0.4;
|
||
}
|
||
.aurora::before {
|
||
width: 70vw; height: 70vw;
|
||
top: -30vw; left: -20vw;
|
||
background: radial-gradient(circle, #818cf8 0%, #c084fc 50%, transparent 70%);
|
||
animation: aurora-1 28s ease-in-out infinite;
|
||
}
|
||
.aurora::after {
|
||
width: 60vw; height: 60vw;
|
||
bottom: -20vw; right: -20vw;
|
||
background: radial-gradient(circle, #f472b6 0%, #fb923c 50%, transparent 70%);
|
||
animation: aurora-2 32s ease-in-out infinite;
|
||
opacity: 0.3;
|
||
}
|
||
@keyframes aurora-1 {
|
||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||
50% { transform: translate(5vw, 10vh) scale(1.15); }
|
||
}
|
||
@keyframes aurora-2 {
|
||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||
50% { transform: translate(-10vw, -5vh) scale(0.9); }
|
||
}
|
||
[data-theme="dark"] .aurora::before { opacity: 0.25; }
|
||
[data-theme="dark"] .aurora::after { opacity: 0.2; }
|
||
|
||
/* ===== Grain overlay ===== */
|
||
.grain {
|
||
position: fixed; inset: 0; z-index: 2;
|
||
pointer-events: none; opacity: 0.04;
|
||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||
mix-blend-mode: multiply;
|
||
}
|
||
[data-theme="dark"] .grain { opacity: 0.08; mix-blend-mode: overlay; }
|
||
|
||
/* ===== Buttons ===== */
|
||
.btn {
|
||
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
||
padding: 14px 26px; border-radius: 999px;
|
||
font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
|
||
transition: all 0.35s var(--ease);
|
||
position: relative; overflow: hidden;
|
||
will-change: transform;
|
||
white-space: nowrap;
|
||
}
|
||
.btn-primary {
|
||
background: var(--gradient);
|
||
color: #fff;
|
||
background-size: 200% 200%;
|
||
box-shadow: 0 8px 24px -6px rgba(99, 102, 241, 0.5), inset 0 0 0 1px rgba(255,255,255,0.15);
|
||
animation: grad-shift 6s ease infinite;
|
||
}
|
||
.btn-primary:hover {
|
||
box-shadow: 0 20px 48px -8px rgba(168, 85, 247, 0.6), inset 0 0 0 1px rgba(255,255,255,0.25);
|
||
transform: translateY(-1px);
|
||
}
|
||
.btn-secondary {
|
||
background: var(--bg-elevated);
|
||
color: var(--text);
|
||
border: 1px solid var(--border);
|
||
backdrop-filter: blur(12px);
|
||
}
|
||
.btn-secondary:hover {
|
||
border-color: var(--primary);
|
||
background: var(--bg);
|
||
color: var(--primary);
|
||
transform: translateY(-1px);
|
||
}
|
||
[data-theme="dark"] .btn-secondary { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
|
||
[data-theme="dark"] .btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); color: #fff; }
|
||
.btn-ghost {
|
||
background: transparent; color: inherit;
|
||
border: 1px solid rgba(255,255,255,0.2);
|
||
}
|
||
.btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3); }
|
||
.btn-white { background: #fff; color: #1a1a2e; box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
|
||
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,0.2); }
|
||
.btn-lg { padding: 16px 32px; font-size: 16px; }
|
||
.btn-xl { padding: 20px 42px; font-size: 17px; }
|
||
.btn .arrow { transition: transform 0.35s var(--ease); display: inline-block; }
|
||
.btn:hover .arrow { transform: translateX(4px); }
|
||
|
||
@keyframes grad-shift {
|
||
0%, 100% { background-position: 0% 50%; }
|
||
50% { background-position: 100% 50%; }
|
||
}
|
||
|
||
/* ===== Header ===== */
|
||
.header {
|
||
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
||
transition: all 0.35s var(--ease);
|
||
padding: 16px 0;
|
||
}
|
||
.header-inner {
|
||
max-width: var(--max-width); margin: 0 auto; padding: 0 32px;
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
height: 58px;
|
||
background: color-mix(in srgb, var(--bg) 60%, transparent);
|
||
border: 1px solid var(--border);
|
||
border-radius: 999px;
|
||
padding-left: 22px; padding-right: 8px;
|
||
backdrop-filter: saturate(180%) blur(20px);
|
||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||
box-shadow: 0 4px 20px rgba(10, 10, 26, 0.04);
|
||
transition: all 0.35s var(--ease);
|
||
}
|
||
.header.scrolled .header-inner {
|
||
background: color-mix(in srgb, var(--bg) 85%, transparent);
|
||
box-shadow: 0 8px 32px rgba(10, 10, 26, 0.08);
|
||
}
|
||
[data-theme="dark"] .header-inner { background: rgba(10, 10, 23, 0.6); }
|
||
[data-theme="dark"] .header.scrolled .header-inner { background: rgba(10, 10, 23, 0.85); }
|
||
|
||
.logo {
|
||
display: flex; align-items: center; gap: 10px;
|
||
font-size: 20px; font-weight: 800; letter-spacing: -0.03em;
|
||
}
|
||
.logo svg { width: 32px; height: 32px; }
|
||
.nav { display: flex; align-items: center; gap: 2px; }
|
||
.nav a {
|
||
padding: 8px 14px; border-radius: 999px;
|
||
font-size: 14px; font-weight: 500;
|
||
color: var(--text-soft);
|
||
transition: all 0.2s;
|
||
position: relative;
|
||
}
|
||
.nav a:hover { color: var(--text); background: var(--bg-elevated); }
|
||
[data-theme="dark"] .nav a:hover { background: rgba(255,255,255,0.06); }
|
||
|
||
.header-right { display: flex; align-items: center; gap: 8px; }
|
||
.theme-toggle {
|
||
width: 40px; height: 40px; border-radius: 50%;
|
||
display: flex; align-items: center; justify-content: center;
|
||
color: var(--text-soft);
|
||
transition: all 0.3s var(--ease);
|
||
}
|
||
.theme-toggle:hover { background: var(--bg-elevated); color: var(--text); transform: rotate(15deg); }
|
||
[data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,0.06); }
|
||
.theme-toggle svg { width: 20px; height: 20px; }
|
||
.theme-toggle .sun { display: none; }
|
||
[data-theme="dark"] .theme-toggle .sun { display: block; }
|
||
[data-theme="dark"] .theme-toggle .moon { display: none; }
|
||
.btn-nav {
|
||
padding: 10px 20px; border-radius: 999px;
|
||
font-size: 14px; font-weight: 600;
|
||
background: var(--text); color: var(--bg);
|
||
transition: all 0.3s var(--ease);
|
||
}
|
||
.btn-nav:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(10,10,26,0.2); }
|
||
.mobile-menu-btn { display: none; background: var(--bg-elevated); border-radius: 999px; padding: 10px; }
|
||
|
||
/* ===== Hero ===== */
|
||
.hero {
|
||
position: relative; z-index: 5;
|
||
padding: 180px 0 120px;
|
||
overflow: hidden;
|
||
}
|
||
.hero-grid-bg {
|
||
position: absolute; inset: 0; z-index: -1;
|
||
background-image:
|
||
linear-gradient(var(--stroke) 1px, transparent 1px),
|
||
linear-gradient(90deg, var(--stroke) 1px, transparent 1px);
|
||
background-size: 64px 64px;
|
||
mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 0%, transparent 80%);
|
||
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 0%, transparent 80%);
|
||
}
|
||
.hero-inner {
|
||
position: relative; z-index: 2;
|
||
max-width: 1100px; margin: 0 auto; padding: 0 32px;
|
||
text-align: center;
|
||
}
|
||
.hero-badge {
|
||
display: inline-flex; align-items: center; gap: 10px;
|
||
padding: 7px 8px 7px 14px;
|
||
background: color-mix(in srgb, var(--bg) 80%, transparent);
|
||
border: 1px solid var(--border);
|
||
border-radius: 999px;
|
||
font-size: 13px; font-weight: 500;
|
||
color: var(--text-soft);
|
||
margin-bottom: 32px;
|
||
backdrop-filter: blur(12px);
|
||
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.06);
|
||
}
|
||
.hero-badge-tag {
|
||
background: var(--gradient);
|
||
color: #fff;
|
||
padding: 3px 10px;
|
||
border-radius: 999px;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
.hero-badge-arrow { margin-left: 2px; transition: transform 0.3s; }
|
||
.hero-badge:hover .hero-badge-arrow { transform: translateX(3px); }
|
||
|
||
.hero h1 {
|
||
font-size: clamp(48px, 8.5vw, 120px);
|
||
font-weight: 900;
|
||
line-height: 0.95;
|
||
letter-spacing: -0.045em;
|
||
margin-bottom: 28px;
|
||
}
|
||
.hero h1 .line { display: block; }
|
||
.hero h1 .rotator {
|
||
position: relative;
|
||
display: inline-block;
|
||
vertical-align: baseline;
|
||
}
|
||
.rotator-word {
|
||
display: inline-block;
|
||
background: var(--gradient);
|
||
background-size: 200% 200%;
|
||
-webkit-background-clip: text; background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
animation: grad-shift 6s ease infinite, word-up 6s ease-in-out infinite;
|
||
}
|
||
.rotator-word::after {
|
||
content: '';
|
||
display: inline-block; width: 6px; height: 0.85em;
|
||
background: var(--primary);
|
||
margin-left: 8px;
|
||
vertical-align: text-bottom;
|
||
animation: blink 1s step-end infinite;
|
||
}
|
||
@keyframes blink { 50% { opacity: 0; } }
|
||
|
||
.hero-desc {
|
||
font-size: clamp(17px, 1.4vw, 20px);
|
||
color: var(--text-light);
|
||
max-width: 640px;
|
||
margin: 0 auto 44px;
|
||
line-height: 1.6;
|
||
}
|
||
.hero-ctas {
|
||
display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
|
||
}
|
||
.hero-meta {
|
||
display: flex; justify-content: center; gap: 32px; margin-top: 32px;
|
||
font-size: 13px; color: var(--text-muted); flex-wrap: wrap;
|
||
}
|
||
.hero-meta-item { display: flex; align-items: center; gap: 6px; }
|
||
.hero-meta-item::before {
|
||
content: ''; display: block; width: 4px; height: 4px; border-radius: 50%;
|
||
background: var(--primary); opacity: 0.4;
|
||
}
|
||
|
||
/* ===== Hero device mockup ===== */
|
||
.hero-device-wrap {
|
||
margin-top: 80px;
|
||
perspective: 2000px;
|
||
position: relative;
|
||
}
|
||
.hero-device-wrap::before {
|
||
content: ''; position: absolute; inset: 0;
|
||
background: radial-gradient(ellipse 60% 70% at 50% 90%, rgba(168, 85, 247, 0.3), transparent 70%);
|
||
pointer-events: none; z-index: 0;
|
||
}
|
||
.hero-device {
|
||
max-width: 1080px; margin: 0 auto;
|
||
border-radius: 18px;
|
||
background: var(--bg-elevated);
|
||
border: 1px solid var(--border);
|
||
box-shadow: 0 60px 120px -40px rgba(99, 102, 241, 0.4), 0 30px 60px -20px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
|
||
overflow: hidden;
|
||
position: relative;
|
||
z-index: 1;
|
||
transform: rotateX(8deg);
|
||
transition: transform 0.8s var(--ease);
|
||
}
|
||
[data-theme="dark"] .hero-device { background: #141422; }
|
||
|
||
.device-chrome {
|
||
display: flex; align-items: center; gap: 8px;
|
||
padding: 14px 18px;
|
||
border-bottom: 1px solid var(--border);
|
||
background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
|
||
}
|
||
.device-dot { width: 12px; height: 12px; border-radius: 50%; }
|
||
.device-dot:nth-child(1) { background: #ff5f57; }
|
||
.device-dot:nth-child(2) { background: #febd2e; }
|
||
.device-dot:nth-child(3) { background: #28c840; }
|
||
.device-url {
|
||
margin: 0 auto;
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 12px; color: var(--text-muted);
|
||
background: var(--bg); padding: 6px 16px; border-radius: 999px;
|
||
border: 1px solid var(--border);
|
||
display: flex; align-items: center; gap: 8px;
|
||
}
|
||
.device-url::before { content: ''; width: 10px; height: 10px; border-radius: 2px; background: var(--gradient); }
|
||
[data-theme="dark"] .device-url { background: #0c0c18; }
|
||
|
||
.device-body {
|
||
display: grid; grid-template-columns: 200px 1fr; gap: 0;
|
||
min-height: 520px;
|
||
background: var(--bg);
|
||
}
|
||
[data-theme="dark"] .device-body { background: #0c0c18; }
|
||
.device-side {
|
||
padding: 24px 16px;
|
||
border-right: 1px solid var(--border);
|
||
background: var(--bg-alt);
|
||
}
|
||
[data-theme="dark"] .device-side { background: #09091a; }
|
||
.device-side-logo {
|
||
display: flex; align-items: center; gap: 8px;
|
||
font-size: 14px; font-weight: 800; letter-spacing: -0.02em;
|
||
padding: 0 10px 20px;
|
||
border-bottom: 1px solid var(--border); margin-bottom: 16px;
|
||
}
|
||
.device-side-logo::before { content: ''; width: 20px; height: 20px; border-radius: 5px; background: var(--gradient); }
|
||
.device-side-item {
|
||
display: flex; align-items: center; gap: 10px;
|
||
padding: 10px 12px; margin-bottom: 2px;
|
||
border-radius: 8px; font-size: 13px; font-weight: 500;
|
||
color: var(--text-light);
|
||
transition: all 0.2s;
|
||
}
|
||
.device-side-item:hover { background: var(--bg-elevated); color: var(--text); }
|
||
.device-side-item.active {
|
||
background: color-mix(in srgb, var(--primary) 10%, transparent);
|
||
color: var(--primary); font-weight: 700;
|
||
}
|
||
[data-theme="dark"] .device-side-item.active { background: rgba(99, 102, 241, 0.15); }
|
||
.device-side-icon { width: 16px; height: 16px; border-radius: 4px; background: currentColor; opacity: 0.3; }
|
||
.device-side-item.active .device-side-icon { opacity: 1; background: var(--gradient); }
|
||
|
||
.device-main { padding: 28px; overflow: hidden; }
|
||
.device-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
|
||
.device-head h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
|
||
.device-head-pill {
|
||
font-size: 11px; font-weight: 700;
|
||
background: color-mix(in srgb, var(--primary) 12%, transparent);
|
||
color: var(--primary); padding: 4px 10px; border-radius: 999px;
|
||
display: flex; align-items: center; gap: 6px;
|
||
}
|
||
.device-head-pill::before {
|
||
content: ''; width: 6px; height: 6px; border-radius: 50%; background: #22c55e;
|
||
animation: pulse 1.5s ease-in-out infinite;
|
||
}
|
||
@keyframes pulse { 50% { opacity: 0.4; } }
|
||
|
||
.device-kpis {
|
||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px;
|
||
}
|
||
.device-kpi {
|
||
padding: 16px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px;
|
||
}
|
||
[data-theme="dark"] .device-kpi { background: #10101f; }
|
||
.device-kpi-label { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
|
||
.device-kpi-value { font-size: 24px; font-weight: 800; margin-top: 4px; letter-spacing: -0.03em; }
|
||
.device-kpi-trend { font-size: 11px; color: #22c55e; margin-top: 2px; font-weight: 600; }
|
||
.device-kpi-bar { height: 4px; background: var(--border); border-radius: 2px; margin-top: 10px; overflow: hidden; }
|
||
.device-kpi-bar::after {
|
||
content: ''; display: block; height: 100%; width: var(--v, 70%);
|
||
background: var(--gradient); border-radius: 2px;
|
||
animation: fill 1.5s var(--ease);
|
||
}
|
||
@keyframes fill { from { width: 0; } }
|
||
|
||
.device-chart {
|
||
padding: 20px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px;
|
||
min-height: 200px;
|
||
}
|
||
[data-theme="dark"] .device-chart { background: #10101f; }
|
||
.device-chart-head { display: flex; justify-content: space-between; margin-bottom: 12px; }
|
||
.device-chart-title { font-size: 13px; font-weight: 700; }
|
||
.device-chart-legend { display: flex; gap: 12px; font-size: 11px; color: var(--text-light); }
|
||
.device-chart-legend span { display: flex; align-items: center; gap: 4px; }
|
||
.device-chart-legend span::before { content: ''; width: 8px; height: 8px; border-radius: 2px; }
|
||
.device-chart-legend span:nth-child(1)::before { background: #6366f1; }
|
||
.device-chart-legend span:nth-child(2)::before { background: #ec4899; }
|
||
|
||
/* ===== Floating hero chips ===== */
|
||
.float-chip {
|
||
position: absolute;
|
||
background: var(--bg); border: 1px solid var(--border);
|
||
padding: 14px 18px; border-radius: 14px;
|
||
display: flex; align-items: center; gap: 12px;
|
||
box-shadow: 0 20px 60px -15px rgba(99,102,241,0.3);
|
||
animation: float-y 5s ease-in-out infinite;
|
||
z-index: 3;
|
||
backdrop-filter: blur(12px);
|
||
}
|
||
[data-theme="dark"] .float-chip { background: rgba(20,20,34,0.95); }
|
||
.float-chip .chip-dot {
|
||
width: 36px; height: 36px; border-radius: 10px;
|
||
background: var(--gradient); display: flex; align-items: center; justify-content: center;
|
||
font-size: 18px;
|
||
box-shadow: 0 4px 12px rgba(99,102,241,0.4);
|
||
}
|
||
.float-chip .chip-text strong { display: block; font-size: 13px; font-weight: 700; }
|
||
.float-chip .chip-text small { font-size: 11px; color: var(--text-muted); }
|
||
.chip-a { top: 15%; left: -20px; animation-delay: 0s; }
|
||
.chip-b { bottom: 25%; right: -30px; animation-delay: -1.5s; }
|
||
.chip-c { top: 55%; left: -50px; animation-delay: -3s; }
|
||
@keyframes float-y {
|
||
0%, 100% { transform: translateY(0); }
|
||
50% { transform: translateY(-12px); }
|
||
}
|
||
|
||
/* ===== Sections ===== */
|
||
section { position: relative; z-index: 5; }
|
||
.section { padding: 140px 0; }
|
||
.section-head { text-align: center; margin-bottom: 72px; position: relative; }
|
||
.eyebrow {
|
||
display: inline-block;
|
||
font-size: 12px; font-weight: 700; letter-spacing: 0.15em;
|
||
text-transform: uppercase;
|
||
background: var(--gradient);
|
||
-webkit-background-clip: text; background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
margin-bottom: 16px;
|
||
}
|
||
.section-title {
|
||
font-size: clamp(36px, 5.5vw, 72px);
|
||
font-weight: 900; line-height: 1.05;
|
||
letter-spacing: -0.04em;
|
||
margin-bottom: 24px;
|
||
}
|
||
.section-title .accent {
|
||
background: var(--gradient); background-size: 200% 200%;
|
||
-webkit-background-clip: text; background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
animation: grad-shift 8s ease infinite;
|
||
}
|
||
.section-desc {
|
||
font-size: clamp(16px, 1.2vw, 19px); color: var(--text-light);
|
||
max-width: 640px; margin: 0 auto; line-height: 1.65;
|
||
}
|
||
|
||
/* ===== Logo marquee ===== */
|
||
.marquee-section { padding: 60px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
|
||
.marquee-label {
|
||
text-align: center; font-size: 13px; color: var(--text-muted);
|
||
margin-bottom: 32px; font-weight: 500;
|
||
}
|
||
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
|
||
.marquee-track {
|
||
display: flex; gap: 72px;
|
||
animation: scroll-x 32s linear infinite;
|
||
width: max-content;
|
||
}
|
||
.marquee-logo {
|
||
font-size: 28px; font-weight: 800; letter-spacing: -0.04em;
|
||
color: var(--text); opacity: 0.35;
|
||
display: flex; align-items: center; gap: 8px;
|
||
transition: opacity 0.3s;
|
||
}
|
||
.marquee-logo:hover { opacity: 1; }
|
||
.marquee-logo::before {
|
||
content: ''; width: 8px; height: 8px; border-radius: 50%;
|
||
background: var(--gradient);
|
||
}
|
||
@keyframes scroll-x {
|
||
from { transform: translateX(0); }
|
||
to { transform: translateX(-50%); }
|
||
}
|
||
|
||
/* ===== Stats bar ===== */
|
||
.stats { padding: 80px 0; }
|
||
.stats-grid {
|
||
display: grid; grid-template-columns: repeat(4, 1fr);
|
||
gap: 48px;
|
||
text-align: center;
|
||
}
|
||
.stat-item { position: relative; }
|
||
.stat-item + .stat-item::before {
|
||
content: ''; position: absolute; top: 20%; bottom: 20%; left: -24px;
|
||
width: 1px; background: var(--border);
|
||
}
|
||
.stat-num {
|
||
font-size: clamp(48px, 6vw, 72px);
|
||
font-weight: 900; letter-spacing: -0.04em;
|
||
background: var(--gradient);
|
||
-webkit-background-clip: text; background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
font-family: 'Instrument Serif', Georgia, serif;
|
||
font-style: italic;
|
||
font-weight: 400;
|
||
}
|
||
.stat-num span { font-size: 0.5em; font-family: 'Inter', sans-serif; font-style: normal; font-weight: 800; margin-left: 2px; vertical-align: top; }
|
||
.stat-desc { font-size: 13px; color: var(--text-light); margin-top: 8px; font-weight: 500; }
|
||
|
||
/* ===== Bento grid ===== */
|
||
.bento {
|
||
display: grid;
|
||
grid-template-columns: repeat(6, 1fr);
|
||
grid-auto-rows: 200px;
|
||
gap: 16px;
|
||
}
|
||
.bento-cell {
|
||
position: relative;
|
||
background: var(--bg-elevated);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-lg);
|
||
padding: 28px;
|
||
overflow: hidden;
|
||
transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s;
|
||
cursor: default;
|
||
}
|
||
[data-theme="dark"] .bento-cell { background: #101020; }
|
||
.bento-cell:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: var(--shadow-lg);
|
||
border-color: transparent;
|
||
}
|
||
.bento-cell::after {
|
||
content: ''; position: absolute; inset: -1px;
|
||
border-radius: var(--radius-lg);
|
||
padding: 1px;
|
||
background: var(--gradient);
|
||
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
||
-webkit-mask-composite: xor; mask-composite: exclude;
|
||
opacity: 0; transition: opacity 0.5s;
|
||
pointer-events: none;
|
||
}
|
||
.bento-cell:hover::after { opacity: 1; }
|
||
.bento-cell .badge {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
|
||
color: var(--primary); margin-bottom: 14px;
|
||
}
|
||
.bento-cell h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }
|
||
.bento-cell p { font-size: 14px; color: var(--text-light); line-height: 1.6; }
|
||
|
||
.b-1 { grid-column: span 3; grid-row: span 2; }
|
||
.b-2 { grid-column: span 3; grid-row: span 1; }
|
||
.b-3 { grid-column: span 2; grid-row: span 2; }
|
||
.b-4 { grid-column: span 2; grid-row: span 1; }
|
||
.b-5 { grid-column: span 2; grid-row: span 1; }
|
||
.b-6 { grid-column: span 4; grid-row: span 1; }
|
||
|
||
/* Bento visual elements */
|
||
.bento-visual {
|
||
position: absolute; right: 0; bottom: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* Visual 1 - Canvas with floating blocks */
|
||
.v1 {
|
||
position: absolute; inset: 80px 20px 20px 20px;
|
||
background: var(--bg-alt);
|
||
border: 1px dashed var(--border);
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
}
|
||
[data-theme="dark"] .v1 { background: #0a0a18; }
|
||
.v1::before {
|
||
content: ''; position: absolute; inset: 0;
|
||
background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
|
||
background-size: 20px 20px;
|
||
}
|
||
.v1-card {
|
||
position: absolute;
|
||
background: var(--bg);
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
padding: 8px 12px;
|
||
font-size: 11px; font-weight: 600;
|
||
box-shadow: var(--shadow-sm);
|
||
transition: all 0.4s var(--ease);
|
||
}
|
||
[data-theme="dark"] .v1-card { background: #12122a; }
|
||
.v1-card::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--primary); margin-right: 6px; vertical-align: middle; }
|
||
.v1-c1 { top: 14%; left: 10%; animation: wiggle 5s ease-in-out infinite; }
|
||
.v1-c2 { top: 40%; right: 12%; animation: wiggle 5s ease-in-out infinite; animation-delay: -1s; }
|
||
.v1-c3 { bottom: 18%; left: 22%; animation: wiggle 5s ease-in-out infinite; animation-delay: -2.5s; }
|
||
.v1-c2::before { background: var(--accent); }
|
||
.v1-c3::before { background: var(--accent-orange); }
|
||
.bento-cell:hover .v1-c1 { transform: translate(10px, -4px); }
|
||
.bento-cell:hover .v1-c2 { transform: translate(-8px, 6px); }
|
||
.bento-cell:hover .v1-c3 { transform: translate(6px, -8px); }
|
||
@keyframes wiggle {
|
||
0%, 100% { transform: translate(0,0); }
|
||
50% { transform: translate(3px, -3px); }
|
||
}
|
||
|
||
/* Visual 2 - AI prompt bubble */
|
||
.v2 {
|
||
position: absolute; right: 24px; bottom: 24px;
|
||
width: 55%;
|
||
background: var(--bg);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 14px;
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 11px;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
[data-theme="dark"] .v2 { background: #12122a; }
|
||
.v2-prompt { color: var(--text-light); margin-bottom: 6px; }
|
||
.v2-prompt::before { content: '> '; color: var(--primary); font-weight: 700; }
|
||
.v2-resp {
|
||
color: var(--text); font-family: 'Inter', sans-serif;
|
||
font-size: 11px; font-weight: 500;
|
||
padding: 8px 12px;
|
||
background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(236,72,153,0.1));
|
||
border-radius: 8px; margin-top: 6px;
|
||
}
|
||
.v2-resp::before { content: '✦ '; color: var(--primary); font-weight: 800; }
|
||
|
||
/* Visual 3 - Circular network */
|
||
.v3 {
|
||
position: absolute; right: 20px; bottom: 20px;
|
||
width: 160px; height: 160px;
|
||
}
|
||
.v3 circle { fill: none; }
|
||
.v3 .node { fill: var(--primary); animation: pulse 2s infinite; }
|
||
.v3 .node:nth-child(2) { animation-delay: -0.5s; }
|
||
.v3 .node:nth-child(3) { animation-delay: -1s; }
|
||
.v3 .node:nth-child(4) { animation-delay: -1.5s; }
|
||
.v3 .link { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 3; }
|
||
|
||
/* Visual 4 - Stacked bars */
|
||
.v4 {
|
||
position: absolute; right: 20px; bottom: 20px; left: 50%;
|
||
display: flex; align-items: flex-end; gap: 6px; height: 70%;
|
||
}
|
||
.v4-bar {
|
||
flex: 1; border-radius: 4px 4px 0 0;
|
||
background: var(--gradient);
|
||
transition: transform 0.4s var(--ease);
|
||
}
|
||
.v4-bar:nth-child(1) { height: 30%; opacity: 0.4; }
|
||
.v4-bar:nth-child(2) { height: 55%; opacity: 0.55; }
|
||
.v4-bar:nth-child(3) { height: 40%; opacity: 0.7; }
|
||
.v4-bar:nth-child(4) { height: 80%; opacity: 0.85; }
|
||
.v4-bar:nth-child(5) { height: 65%; }
|
||
.bento-cell:hover .v4-bar { transform: scaleY(1.1); }
|
||
|
||
/* Visual 5 - Flow arrows */
|
||
.v5 {
|
||
position: absolute; right: 20px; bottom: 20px;
|
||
display: flex; align-items: center; gap: 8px;
|
||
}
|
||
.v5-node {
|
||
width: 36px; height: 36px; border-radius: 10px;
|
||
background: var(--bg); border: 1px solid var(--border);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 14px; box-shadow: var(--shadow-sm);
|
||
}
|
||
[data-theme="dark"] .v5-node { background: #12122a; }
|
||
.v5-arr { color: var(--primary); font-weight: 800; animation: slide-x 1.5s ease-in-out infinite; }
|
||
@keyframes slide-x { 50% { transform: translateX(3px); } }
|
||
|
||
/* Visual 6 - Spread card row */
|
||
.v6 {
|
||
position: absolute; right: 30px; bottom: 20px;
|
||
display: flex; gap: 8px;
|
||
}
|
||
.v6-card {
|
||
width: 70px; height: 48px; border-radius: 8px;
|
||
background: var(--bg); border: 1px solid var(--border);
|
||
padding: 8px; display: flex; flex-direction: column; gap: 4px;
|
||
}
|
||
[data-theme="dark"] .v6-card { background: #12122a; }
|
||
.v6-card::before { content: ''; height: 4px; border-radius: 2px; background: var(--gradient); width: 60%; }
|
||
.v6-card::after { content: ''; height: 3px; border-radius: 2px; background: var(--border); width: 80%; }
|
||
|
||
/* ===== How it works - timeline ===== */
|
||
.timeline {
|
||
position: relative;
|
||
padding: 40px 0;
|
||
}
|
||
.timeline::before {
|
||
content: '';
|
||
position: absolute; left: 50%; top: 0; bottom: 0;
|
||
width: 2px; background: linear-gradient(to bottom, transparent, var(--border) 10%, var(--border) 90%, transparent);
|
||
transform: translateX(-50%);
|
||
}
|
||
.tl-item {
|
||
position: relative;
|
||
display: grid; grid-template-columns: 1fr 80px 1fr;
|
||
align-items: center;
|
||
margin-bottom: 64px;
|
||
}
|
||
.tl-item:nth-child(even) .tl-body { grid-column: 3; }
|
||
.tl-item:nth-child(even) .tl-spacer { grid-column: 1; }
|
||
.tl-dot {
|
||
position: relative;
|
||
width: 80px; height: 80px;
|
||
margin: 0 auto;
|
||
border-radius: 50%;
|
||
background: var(--bg);
|
||
border: 1px solid var(--border);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-family: 'Instrument Serif', Georgia, serif;
|
||
font-style: italic;
|
||
font-size: 28px;
|
||
color: var(--primary);
|
||
box-shadow: 0 4px 16px rgba(99,102,241,0.15);
|
||
}
|
||
.tl-dot::before {
|
||
content: ''; position: absolute; inset: -6px;
|
||
border-radius: 50%;
|
||
background: var(--gradient);
|
||
z-index: -1;
|
||
opacity: 0; transition: opacity 0.5s;
|
||
}
|
||
.tl-item:hover .tl-dot::before { opacity: 1; }
|
||
.tl-item:hover .tl-dot { color: #fff; background: var(--primary); }
|
||
.tl-body {
|
||
background: var(--bg-elevated);
|
||
border: 1px solid var(--border);
|
||
padding: 28px 32px;
|
||
border-radius: var(--radius-lg);
|
||
transition: all 0.4s;
|
||
}
|
||
[data-theme="dark"] .tl-body { background: #101020; }
|
||
.tl-item:hover .tl-body { transform: scale(1.02); box-shadow: var(--shadow); }
|
||
.tl-body h3 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 10px; }
|
||
.tl-body p { font-size: 15px; color: var(--text-light); line-height: 1.7; }
|
||
.tl-tag {
|
||
display: inline-block; font-family: 'JetBrains Mono', monospace;
|
||
font-size: 11px; color: var(--primary); font-weight: 700;
|
||
padding: 4px 10px; background: color-mix(in srgb, var(--primary) 10%, transparent);
|
||
border-radius: 6px; margin-bottom: 10px;
|
||
}
|
||
|
||
/* ===== Showcase tabs ===== */
|
||
.showcase-tabs {
|
||
display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;
|
||
margin-bottom: 48px;
|
||
}
|
||
.sc-tab {
|
||
padding: 12px 22px; border-radius: 999px;
|
||
background: var(--bg-elevated); border: 1px solid var(--border);
|
||
font-size: 14px; font-weight: 600; color: var(--text-soft);
|
||
transition: all 0.35s var(--ease);
|
||
cursor: pointer;
|
||
}
|
||
[data-theme="dark"] .sc-tab { background: rgba(255,255,255,0.04); }
|
||
.sc-tab:hover { border-color: var(--primary); color: var(--primary); }
|
||
.sc-tab.active {
|
||
background: var(--text); color: var(--bg); border-color: var(--text);
|
||
}
|
||
.sc-panel {
|
||
display: none;
|
||
background: var(--bg-elevated);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-xl);
|
||
padding: 48px;
|
||
overflow: hidden;
|
||
animation: fade-up 0.6s var(--ease);
|
||
}
|
||
[data-theme="dark"] .sc-panel { background: #101020; }
|
||
.sc-panel.active { display: grid; }
|
||
.sc-panel {
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 48px; align-items: center;
|
||
}
|
||
.sc-content h3 {
|
||
font-size: clamp(28px, 3vw, 42px);
|
||
font-weight: 900; letter-spacing: -0.03em;
|
||
margin-bottom: 18px; line-height: 1.1;
|
||
}
|
||
.sc-content p { font-size: 16px; color: var(--text-light); line-height: 1.7; margin-bottom: 24px; }
|
||
.sc-features { display: flex; flex-direction: column; gap: 14px; }
|
||
.sc-feat {
|
||
display: flex; align-items: flex-start; gap: 12px;
|
||
padding: 14px 18px;
|
||
background: var(--bg); border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
transition: all 0.3s;
|
||
}
|
||
[data-theme="dark"] .sc-feat { background: rgba(255,255,255,0.03); }
|
||
.sc-feat:hover { border-color: var(--primary); transform: translateX(4px); }
|
||
.sc-feat-icon {
|
||
width: 32px; height: 32px; border-radius: 8px;
|
||
background: var(--gradient); color: #fff;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 15px; font-weight: 800; flex-shrink: 0;
|
||
}
|
||
.sc-feat-text strong { display: block; font-size: 14px; font-weight: 700; margin-bottom: 2px; }
|
||
.sc-feat-text span { font-size: 13px; color: var(--text-light); }
|
||
.sc-visual {
|
||
position: relative;
|
||
background: var(--bg);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-lg);
|
||
padding: 32px;
|
||
aspect-ratio: 1.1;
|
||
overflow: hidden;
|
||
box-shadow: 0 20px 40px -10px rgba(99,102,241,0.12);
|
||
}
|
||
[data-theme="dark"] .sc-visual { background: #0a0a18; }
|
||
.sc-visual::before {
|
||
content: ''; position: absolute; inset: 0;
|
||
background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 70%);
|
||
}
|
||
|
||
/* ===== AI section (dark) ===== */
|
||
.ai-section {
|
||
position: relative;
|
||
background: radial-gradient(ellipse at top, #1e1b4b 0%, #06060f 60%);
|
||
color: #fff;
|
||
overflow: hidden;
|
||
padding: 160px 0;
|
||
border-radius: 48px 48px 0 0;
|
||
margin: 80px 16px 0;
|
||
}
|
||
.ai-section .section-title, .ai-section .section-desc { color: #fff; }
|
||
.ai-section .section-desc { color: rgba(255,255,255,0.6); }
|
||
.ai-section .eyebrow { color: #c4b5fd; background: none; -webkit-text-fill-color: #c4b5fd; }
|
||
.ai-canvas {
|
||
position: absolute; inset: 0;
|
||
z-index: 0; pointer-events: none;
|
||
}
|
||
.ai-inner {
|
||
position: relative; z-index: 1;
|
||
display: grid; grid-template-columns: 1fr 1fr;
|
||
gap: 72px; align-items: center;
|
||
}
|
||
.ai-features { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 40px; }
|
||
.ai-feat {
|
||
background: rgba(255,255,255,0.04);
|
||
border: 1px solid rgba(255,255,255,0.08);
|
||
border-radius: 16px; padding: 22px;
|
||
backdrop-filter: blur(10px);
|
||
transition: all 0.4s var(--ease);
|
||
}
|
||
.ai-feat:hover {
|
||
background: rgba(255,255,255,0.07);
|
||
transform: translateY(-3px);
|
||
border-color: rgba(168,85,247,0.4);
|
||
}
|
||
.ai-feat-ico {
|
||
width: 42px; height: 42px; border-radius: 11px;
|
||
background: linear-gradient(135deg, rgba(168,85,247,0.25), rgba(236,72,153,0.25));
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 20px; margin-bottom: 14px;
|
||
}
|
||
.ai-feat h4 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
|
||
.ai-feat p { font-size: 13px; color: rgba(255,255,255,0.55); }
|
||
|
||
.ai-diagram {
|
||
position: relative;
|
||
aspect-ratio: 1; max-width: 480px; margin: 0 auto; width: 100%;
|
||
}
|
||
.ai-core {
|
||
position: absolute; top: 50%; left: 50%;
|
||
transform: translate(-50%,-50%);
|
||
width: 140px; height: 140px; border-radius: 50%;
|
||
background: var(--gradient); background-size: 200% 200%;
|
||
animation: grad-shift 5s ease infinite;
|
||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||
font-size: 13px; font-weight: 800; letter-spacing: -0.02em;
|
||
color: #fff;
|
||
box-shadow: 0 0 80px rgba(168,85,247,0.6), inset 0 0 40px rgba(255,255,255,0.2);
|
||
z-index: 3;
|
||
}
|
||
.ai-core::before {
|
||
content: ''; position: absolute; inset: -10px;
|
||
border-radius: 50%;
|
||
background: conic-gradient(from 0deg, transparent, #a855f7, transparent 30%);
|
||
animation: spin 3s linear infinite;
|
||
z-index: -1;
|
||
}
|
||
@keyframes spin { to { transform: rotate(360deg); } }
|
||
.ai-orb {
|
||
position: absolute; top: 50%; left: 50%;
|
||
transform: translate(-50%,-50%);
|
||
border: 1px dashed rgba(255,255,255,0.12);
|
||
border-radius: 50%;
|
||
animation: spin 40s linear infinite;
|
||
}
|
||
.ai-orb.o1 { width: 280px; height: 280px; }
|
||
.ai-orb.o2 { width: 400px; height: 400px; animation-duration: 60s; animation-direction: reverse; }
|
||
.ai-node {
|
||
position: absolute;
|
||
width: 80px; height: 80px; border-radius: 18px;
|
||
background: rgba(255,255,255,0.08);
|
||
border: 1px solid rgba(255,255,255,0.15);
|
||
display: flex; flex-direction: column;
|
||
align-items: center; justify-content: center; gap: 4px;
|
||
font-size: 11px; font-weight: 700; color: #fff;
|
||
backdrop-filter: blur(20px);
|
||
transition: all 0.4s var(--ease);
|
||
z-index: 2;
|
||
}
|
||
.ai-node:hover {
|
||
background: var(--gradient);
|
||
border-color: transparent;
|
||
transform: scale(1.12);
|
||
box-shadow: 0 20px 40px rgba(168,85,247,0.5);
|
||
}
|
||
.ai-node-ico { font-size: 22px; }
|
||
.ai-node.n1 { top: 0%; left: 50%; transform: translate(-50%, -50%); }
|
||
.ai-node.n2 { top: 50%; right: 0%; transform: translate(50%, -50%); }
|
||
.ai-node.n3 { bottom: 0%; left: 50%; transform: translate(-50%, 50%); }
|
||
.ai-node.n4 { top: 50%; left: 0%; transform: translate(-50%, -50%); }
|
||
.ai-node.n5 { top: 16%; right: 14%; }
|
||
.ai-node.n6 { bottom: 16%; left: 14%; }
|
||
|
||
/* ===== Use cases ===== */
|
||
.usecases-grid {
|
||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
|
||
}
|
||
.uc {
|
||
position: relative;
|
||
padding: 36px 30px;
|
||
background: var(--bg-elevated);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-lg);
|
||
overflow: hidden;
|
||
transition: all 0.45s var(--ease);
|
||
cursor: pointer;
|
||
}
|
||
[data-theme="dark"] .uc { background: #101020; }
|
||
.uc::before {
|
||
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
|
||
background: var(--gradient);
|
||
transform: scaleX(0); transform-origin: left;
|
||
transition: transform 0.6s var(--ease);
|
||
}
|
||
.uc:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
|
||
.uc:hover::before { transform: scaleX(1); }
|
||
.uc-ico {
|
||
width: 52px; height: 52px; border-radius: 14px;
|
||
background: var(--bg); border: 1px solid var(--border);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 26px; margin-bottom: 20px;
|
||
transition: all 0.4s;
|
||
}
|
||
[data-theme="dark"] .uc-ico { background: #1a1a2e; }
|
||
.uc:hover .uc-ico {
|
||
background: var(--gradient);
|
||
border-color: transparent;
|
||
transform: rotate(-8deg) scale(1.08);
|
||
}
|
||
.uc:hover .uc-ico span { filter: brightness(10) contrast(1); }
|
||
.uc h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
|
||
.uc p { font-size: 14px; color: var(--text-light); line-height: 1.6; }
|
||
.uc-arrow {
|
||
display: inline-flex; align-items: center; gap: 4px;
|
||
margin-top: 18px; font-size: 13px; font-weight: 700; color: var(--primary);
|
||
opacity: 0; transform: translateX(-6px);
|
||
transition: all 0.4s;
|
||
}
|
||
.uc:hover .uc-arrow { opacity: 1; transform: translateX(0); }
|
||
|
||
/* ===== Architecture ===== */
|
||
.arch-wrap {
|
||
background: var(--bg-elevated);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-xl);
|
||
padding: 48px;
|
||
max-width: 960px; margin: 0 auto;
|
||
position: relative; overflow: hidden;
|
||
}
|
||
[data-theme="dark"] .arch-wrap { background: #101020; }
|
||
.arch-wrap::before {
|
||
content: ''; position: absolute; inset: 0;
|
||
background: radial-gradient(ellipse at top, color-mix(in srgb, var(--primary) 8%, transparent), transparent 70%);
|
||
pointer-events: none;
|
||
}
|
||
.arch-layer {
|
||
position: relative;
|
||
display: flex; align-items: center; gap: 28px;
|
||
padding: 22px 28px;
|
||
background: var(--bg); border-radius: var(--radius);
|
||
margin-bottom: 12px;
|
||
border-left: 3px solid var(--primary);
|
||
transition: all 0.4s var(--ease);
|
||
}
|
||
[data-theme="dark"] .arch-layer { background: #0a0a18; }
|
||
.arch-layer:hover { transform: translateX(6px); }
|
||
.arch-layer:nth-child(1) { border-left-color: #6366f1; }
|
||
.arch-layer:nth-child(2) { border-left-color: #a855f7; }
|
||
.arch-layer:nth-child(3) { border-left-color: #ec4899; }
|
||
.arch-layer:nth-child(4) { border-left-color: #f97316; }
|
||
.arch-label {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 11px; font-weight: 700;
|
||
text-transform: uppercase; letter-spacing: 0.1em;
|
||
color: var(--text-muted); min-width: 100px;
|
||
}
|
||
.arch-items { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
|
||
.arch-chip {
|
||
padding: 7px 14px; border-radius: 8px;
|
||
background: var(--bg-elevated); border: 1px solid var(--border);
|
||
font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
|
||
transition: all 0.2s;
|
||
}
|
||
[data-theme="dark"] .arch-chip { background: rgba(255,255,255,0.03); }
|
||
.arch-chip:hover { border-color: var(--primary); color: var(--primary); }
|
||
.arch-chip.hl {
|
||
background: var(--gradient); color: #fff; border-color: transparent;
|
||
box-shadow: 0 4px 14px rgba(99,102,241,0.3);
|
||
}
|
||
.arch-chip.hl:hover { color: #fff; transform: translateY(-1px); }
|
||
|
||
/* ===== Testimonials ===== */
|
||
.t-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
|
||
.t-track { display: flex; gap: 24px; animation: scroll-x 40s linear infinite; width: max-content; }
|
||
.t-card {
|
||
width: 400px; flex-shrink: 0;
|
||
background: var(--bg-elevated); border: 1px solid var(--border);
|
||
border-radius: 22px; padding: 32px;
|
||
transition: all 0.4s;
|
||
}
|
||
[data-theme="dark"] .t-card { background: #101020; }
|
||
.t-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
|
||
.t-stars { color: #fbbf24; font-size: 14px; letter-spacing: 3px; margin-bottom: 16px; }
|
||
.t-card blockquote {
|
||
font-size: 15px; line-height: 1.7; font-weight: 500;
|
||
margin-bottom: 22px;
|
||
font-family: 'Instrument Serif', Georgia, serif;
|
||
font-style: italic; font-size: 20px; letter-spacing: -0.01em;
|
||
}
|
||
.t-author { display: flex; align-items: center; gap: 12px; }
|
||
.t-avatar {
|
||
width: 44px; height: 44px; border-radius: 50%;
|
||
background: var(--gradient); color: #fff;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-weight: 800; font-size: 17px;
|
||
box-shadow: 0 4px 12px rgba(99,102,241,0.3);
|
||
}
|
||
.t-info strong { display: block; font-size: 14px; font-weight: 700; }
|
||
.t-info span { font-size: 12px; color: var(--text-muted); }
|
||
|
||
/* ===== FAQ ===== */
|
||
.faq-wrap { max-width: 760px; margin: 0 auto; }
|
||
.faq {
|
||
border-bottom: 1px solid var(--border);
|
||
transition: all 0.3s;
|
||
}
|
||
.faq[open] { border-color: var(--primary); }
|
||
.faq summary {
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
padding: 28px 8px;
|
||
font-size: 18px; font-weight: 700; letter-spacing: -0.02em;
|
||
cursor: pointer; list-style: none;
|
||
transition: color 0.2s;
|
||
}
|
||
.faq summary::-webkit-details-marker { display: none; }
|
||
.faq summary:hover { color: var(--primary); }
|
||
.faq-plus {
|
||
width: 32px; height: 32px; border-radius: 50%;
|
||
background: var(--bg-elevated); border: 1px solid var(--border);
|
||
display: flex; align-items: center; justify-content: center;
|
||
flex-shrink: 0; font-size: 16px; font-weight: 700;
|
||
transition: all 0.4s var(--ease);
|
||
}
|
||
[data-theme="dark"] .faq-plus { background: rgba(255,255,255,0.04); }
|
||
.faq[open] .faq-plus { background: var(--gradient); color: #fff; border-color: transparent; transform: rotate(135deg); }
|
||
.faq-body { padding: 0 8px 28px; font-size: 15px; color: var(--text-light); line-height: 1.8; }
|
||
|
||
/* ===== CTA ===== */
|
||
.cta {
|
||
margin: 120px 16px 0;
|
||
padding: 100px 40px;
|
||
background: var(--gradient);
|
||
background-size: 200% 200%;
|
||
animation: grad-shift 12s ease infinite;
|
||
border-radius: 48px;
|
||
text-align: center;
|
||
position: relative; overflow: hidden;
|
||
color: #fff;
|
||
}
|
||
.cta::before, .cta::after {
|
||
content: ''; position: absolute;
|
||
border-radius: 50%;
|
||
background: rgba(255,255,255,0.08);
|
||
pointer-events: none;
|
||
}
|
||
.cta::before { width: 500px; height: 500px; top: -200px; right: -100px; }
|
||
.cta::after { width: 400px; height: 400px; bottom: -200px; left: -50px; }
|
||
.cta h2 {
|
||
font-size: clamp(40px, 6vw, 84px);
|
||
font-weight: 900;
|
||
letter-spacing: -0.045em;
|
||
line-height: 1.0;
|
||
margin-bottom: 20px;
|
||
position: relative;
|
||
}
|
||
.cta h2 em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; }
|
||
.cta p {
|
||
font-size: clamp(16px, 1.3vw, 19px);
|
||
color: rgba(255,255,255,0.9);
|
||
max-width: 560px; margin: 0 auto 40px;
|
||
position: relative;
|
||
}
|
||
.cta-buttons {
|
||
display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
|
||
position: relative;
|
||
}
|
||
|
||
/* ===== Footer ===== */
|
||
.footer {
|
||
padding: 100px 0 40px;
|
||
background: var(--bg);
|
||
border-top: 1px solid var(--border);
|
||
margin-top: 80px;
|
||
}
|
||
.footer-grid {
|
||
display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
|
||
gap: 48px;
|
||
padding-bottom: 60px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.footer-brand { max-width: 320px; }
|
||
.footer-brand p {
|
||
font-size: 14px; color: var(--text-light);
|
||
margin-top: 18px; line-height: 1.7;
|
||
}
|
||
.footer-news { margin-top: 28px; }
|
||
.footer-news label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
|
||
.footer-news-form { display: flex; gap: 6px; }
|
||
.footer-news-form input {
|
||
flex: 1; padding: 10px 16px;
|
||
background: var(--bg-elevated);
|
||
border: 1px solid var(--border);
|
||
border-radius: 999px;
|
||
font-size: 13px; color: var(--text);
|
||
outline: none; font-family: inherit;
|
||
}
|
||
[data-theme="dark"] .footer-news-form input { background: rgba(255,255,255,0.04); }
|
||
.footer-news-form input::placeholder { color: var(--text-muted); }
|
||
.footer-news-form button {
|
||
padding: 10px 18px; border-radius: 999px;
|
||
background: var(--text); color: var(--bg);
|
||
font-size: 13px; font-weight: 700;
|
||
transition: transform 0.3s;
|
||
}
|
||
.footer-news-form button:hover { transform: translateY(-1px); }
|
||
.footer h4 {
|
||
font-size: 12px; font-weight: 700;
|
||
text-transform: uppercase; letter-spacing: 0.1em;
|
||
color: var(--text); margin-bottom: 22px;
|
||
}
|
||
.footer ul { list-style: none; }
|
||
.footer ul li { margin-bottom: 12px; }
|
||
.footer ul a {
|
||
font-size: 14px; color: var(--text-light);
|
||
transition: color 0.2s;
|
||
}
|
||
.footer ul a:hover { color: var(--primary); }
|
||
.footer-bottom {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding-top: 32px;
|
||
font-size: 13px; color: var(--text-muted);
|
||
gap: 20px;
|
||
}
|
||
.footer-social { display: flex; gap: 10px; }
|
||
.footer-social a {
|
||
width: 38px; height: 38px; border-radius: 50%;
|
||
background: var(--bg-elevated); border: 1px solid var(--border);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 14px; font-weight: 700; color: var(--text-soft);
|
||
transition: all 0.3s;
|
||
}
|
||
[data-theme="dark"] .footer-social a { background: rgba(255,255,255,0.04); }
|
||
.footer-social a:hover {
|
||
background: var(--gradient); color: #fff; border-color: transparent;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
/* ===== Reveal ===== */
|
||
.reveal {
|
||
opacity: 0; transform: translateY(40px);
|
||
transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
|
||
}
|
||
.reveal.in { opacity: 1; transform: translateY(0); }
|
||
.reveal.d1 { transition-delay: 0.1s; }
|
||
.reveal.d2 { transition-delay: 0.2s; }
|
||
.reveal.d3 { transition-delay: 0.3s; }
|
||
|
||
@keyframes fade-up {
|
||
from { opacity: 0; transform: translateY(20px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
@keyframes word-up { /* placeholder, rotator uses JS */ }
|
||
|
||
/* ===== Responsive ===== */
|
||
@media (max-width: 1024px) {
|
||
.hero { padding: 140px 0 80px; }
|
||
.hero h1 { font-size: clamp(44px, 10vw, 80px); }
|
||
.bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
|
||
.b-1, .b-2, .b-3, .b-4, .b-5, .b-6 { grid-column: span 2; grid-row: auto; min-height: 260px; }
|
||
.ai-inner { grid-template-columns: 1fr; gap: 64px; }
|
||
.footer-grid { grid-template-columns: 1fr 1fr; }
|
||
.footer-brand { grid-column: span 2; max-width: none; }
|
||
.usecases-grid { grid-template-columns: repeat(2,1fr); }
|
||
.stats-grid { grid-template-columns: repeat(2,1fr); gap: 32px; }
|
||
.stat-item + .stat-item::before { display: none; }
|
||
.timeline::before { left: 40px; }
|
||
.tl-item { grid-template-columns: 80px 1fr !important; }
|
||
.tl-item .tl-dot { margin: 0; grid-column: 1; }
|
||
.tl-item .tl-body { grid-column: 2; }
|
||
.tl-item .tl-spacer { display: none; }
|
||
.sc-panel.active { grid-template-columns: 1fr; }
|
||
.device-body { grid-template-columns: 1fr; }
|
||
.device-side { display: none; }
|
||
}
|
||
@media (max-width: 768px) {
|
||
.header-inner { padding: 0 12px 0 18px; height: 54px; }
|
||
.nav { display: none; }
|
||
.btn-nav { padding: 8px 16px; font-size: 13px; }
|
||
.theme-toggle { width: 36px; height: 36px; }
|
||
.hero { padding: 120px 0 60px; }
|
||
.hero h1 { font-size: clamp(40px, 11vw, 60px); }
|
||
.section { padding: 80px 0; }
|
||
.usecases-grid { grid-template-columns: 1fr; }
|
||
.stats-grid { grid-template-columns: 1fr; gap: 40px; }
|
||
.footer-grid { grid-template-columns: 1fr; }
|
||
.footer-brand { grid-column: auto; }
|
||
.footer-bottom { flex-direction: column; text-align: center; gap: 16px; }
|
||
.float-chip { display: none; }
|
||
.ai-section { border-radius: 24px 24px 0 0; margin: 40px 8px 0; padding: 100px 0; }
|
||
.cta { margin: 80px 8px 0; padding: 60px 20px; border-radius: 28px; }
|
||
.cta h2 { font-size: clamp(36px, 9vw, 56px); }
|
||
.arch-wrap { padding: 28px 20px; }
|
||
.arch-layer { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; }
|
||
.arch-label { min-width: auto; }
|
||
.hero-device-wrap { margin-top: 50px; }
|
||
.hero-device { transform: none; }
|
||
.showcase-tabs { gap: 6px; }
|
||
.sc-tab { padding: 10px 16px; font-size: 13px; }
|
||
.sc-panel { padding: 28px 20px; }
|
||
.t-card { width: 320px; padding: 24px; }
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*, *::before, *::after {
|
||
animation-duration: 0.01s !important;
|
||
transition-duration: 0.01s !important;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="aurora"></div>
|
||
<div class="spotlight" id="spotlight"></div>
|
||
<div class="grain"></div>
|
||
|
||
<!-- ============= HEADER ============= -->
|
||
<header class="header" id="header">
|
||
<div class="header-inner">
|
||
<a href="#" class="logo">
|
||
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
|
||
<defs><linearGradient id="lg" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#6366f1"/><stop offset="40%" stop-color="#a855f7"/><stop offset="70%" stop-color="#ec4899"/><stop offset="100%" stop-color="#f97316"/></linearGradient></defs>
|
||
<g transform="translate(20,20) scale(0.58)"><path d="M-28,-20 C-28,-32 -16,-38 -6,-32 C4,-26 2,-14 10,-14 C18,-14 20,-24 30,-20 C40,-16 34,-4 30,4 C26,12 18,14 10,14 C2,14 4,26 -6,32 C-16,38 -28,32 -28,20 C-28,12 -20,10 -20,0 C-20,-10 -28,-12 -28,-20Z" fill="url(#lg)"/><circle cx="-8" cy="0" r="5" fill="#fff"/><circle cx="14" cy="-2" r="3.5" fill="#fff" opacity="0.7"/></g>
|
||
</svg>
|
||
invyone
|
||
</a>
|
||
|
||
<nav class="nav">
|
||
<a href="#features">Features</a>
|
||
<a href="#showcase">Solutions</a>
|
||
<a href="#ai">AI Agent</a>
|
||
<a href="#usecases">Use cases</a>
|
||
<a href="#faq">FAQ</a>
|
||
</nav>
|
||
|
||
<div class="header-right">
|
||
<button class="theme-toggle" id="themeToggle" aria-label="theme">
|
||
<svg class="moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
|
||
<svg class="sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><line x1="12" y1="2" x2="12" y2="5"/><line x1="12" y1="19" x2="12" y2="22"/><line x1="4.22" y1="4.22" x2="6.34" y2="6.34"/><line x1="17.66" y1="17.66" x2="19.78" y2="19.78"/><line x1="2" y1="12" x2="5" y2="12"/><line x1="19" y1="12" x2="22" y2="12"/><line x1="4.22" y1="19.78" x2="6.34" y2="17.66"/><line x1="17.66" y1="6.34" x2="19.78" y2="4.22"/></svg>
|
||
</button>
|
||
<a href="https://solution.invyone.com/login" class="btn-nav">솔루션 둘러보기 →</a>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ============= HERO ============= -->
|
||
<section class="hero">
|
||
<div class="hero-grid-bg"></div>
|
||
<div class="hero-inner">
|
||
<a href="#ai" class="hero-badge reveal">
|
||
<span class="hero-badge-tag">NEW</span>
|
||
로컬 LLM 기반 AI 에이전트 v2.0 출시
|
||
<span class="hero-badge-arrow">→</span>
|
||
</a>
|
||
|
||
<h1 class="reveal d1">
|
||
<span class="line">AI가 <span class="serif">설계</span>하는</span>
|
||
<span class="line">엔터프라이즈를,</span>
|
||
<span class="line rotator">
|
||
<span class="rotator-word" id="rotatorWord">코딩 없이</span>
|
||
</span>
|
||
</h1>
|
||
|
||
<p class="hero-desc reveal d2">
|
||
드래그앤드롭으로 화면을 설계하고, AI 에이전트가 데이터를 연계하며,
|
||
복잡한 비즈니스 로직까지 자동으로 완성하는 차세대 노코드 플랫폼.
|
||
</p>
|
||
|
||
<div class="hero-ctas reveal d3">
|
||
<a href="https://solution.invyone.com/login" class="btn btn-primary btn-lg magnetic">솔루션 둘러보기 <span class="arrow">→</span></a>
|
||
<a href="#features" class="btn btn-secondary btn-lg">기능 살펴보기</a>
|
||
</div>
|
||
|
||
<div class="hero-meta reveal d3">
|
||
<div class="hero-meta-item">설치 불필요</div>
|
||
<div class="hero-meta-item">신용카드 불필요</div>
|
||
<div class="hero-meta-item">14일 무료 체험</div>
|
||
<div class="hero-meta-item">99.9% 가동률</div>
|
||
</div>
|
||
|
||
<div class="hero-device-wrap reveal d3" id="heroDevice">
|
||
<div class="hero-device" id="heroDeviceInner">
|
||
<div class="device-chrome">
|
||
<div class="device-dot"></div><div class="device-dot"></div><div class="device-dot"></div>
|
||
<div class="device-url">solution.invyone.com/dashboard</div>
|
||
</div>
|
||
<div class="device-body">
|
||
<aside class="device-side">
|
||
<div class="device-side-logo">invyone</div>
|
||
<div class="device-side-item active"><span class="device-side-icon"></span>대시보드</div>
|
||
<div class="device-side-item"><span class="device-side-icon"></span>화면설계</div>
|
||
<div class="device-side-item"><span class="device-side-icon"></span>외부연계</div>
|
||
<div class="device-side-item"><span class="device-side-icon"></span>AI 에이전트</div>
|
||
<div class="device-side-item"><span class="device-side-icon"></span>워크플로우</div>
|
||
<div class="device-side-item"><span class="device-side-icon"></span>레포트</div>
|
||
</aside>
|
||
<main class="device-main">
|
||
<div class="device-head">
|
||
<h3>실시간 운영 현황</h3>
|
||
<div class="device-head-pill">Live</div>
|
||
</div>
|
||
<div class="device-kpis">
|
||
<div class="device-kpi">
|
||
<div class="device-kpi-label">Active Users</div>
|
||
<div class="device-kpi-value">12,438</div>
|
||
<div class="device-kpi-trend">↑ 18.2% vs. last week</div>
|
||
<div class="device-kpi-bar" style="--v:75%;"></div>
|
||
</div>
|
||
<div class="device-kpi">
|
||
<div class="device-kpi-label">Workflows</div>
|
||
<div class="device-kpi-value">997</div>
|
||
<div class="device-kpi-trend">↑ 3 new today</div>
|
||
<div class="device-kpi-bar" style="--v:60%;"></div>
|
||
</div>
|
||
<div class="device-kpi">
|
||
<div class="device-kpi-label">AI Tasks</div>
|
||
<div class="device-kpi-value">2.1k</div>
|
||
<div class="device-kpi-trend">↑ 28% efficiency</div>
|
||
<div class="device-kpi-bar" style="--v:90%;"></div>
|
||
</div>
|
||
</div>
|
||
<div class="device-chart">
|
||
<div class="device-chart-head">
|
||
<div class="device-chart-title">월별 처리량 추이</div>
|
||
<div class="device-chart-legend"><span>AI 자동</span><span>수동</span></div>
|
||
</div>
|
||
<svg viewBox="0 0 600 120" preserveAspectRatio="none" style="width:100%;height:120px;">
|
||
<defs>
|
||
<linearGradient id="cg" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0" stop-color="#6366f1" stop-opacity="0.4"/>
|
||
<stop offset="1" stop-color="#6366f1" stop-opacity="0"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<path d="M0,90 C60,70 120,80 180,55 C240,30 300,40 360,25 C420,10 480,18 540,8 C570,3 600,6 600,6 L600,120 L0,120 Z" fill="url(#cg)"/>
|
||
<path d="M0,90 C60,70 120,80 180,55 C240,30 300,40 360,25 C420,10 480,18 540,8 C570,3 600,6 600,6" fill="none" stroke="#6366f1" stroke-width="2.5" stroke-linecap="round"/>
|
||
<path d="M0,100 C60,90 120,95 180,82 C240,75 300,80 360,70 C420,65 480,60 540,55 C570,52 600,48 600,48" fill="none" stroke="#ec4899" stroke-width="2" stroke-dasharray="5 5" stroke-linecap="round"/>
|
||
<circle cx="600" cy="6" r="4" fill="#6366f1"/>
|
||
<circle cx="600" cy="48" r="3" fill="#ec4899"/>
|
||
</svg>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="float-chip chip-a">
|
||
<div class="chip-dot">🤖</div>
|
||
<div class="chip-text"><strong>AI 분석 완료</strong><small>3.2초 전</small></div>
|
||
</div>
|
||
<div class="float-chip chip-b">
|
||
<div class="chip-dot" style="background:linear-gradient(135deg,#22c55e,#10b981);">↑</div>
|
||
<div class="chip-text"><strong>+28% 효율</strong><small>이번 주</small></div>
|
||
</div>
|
||
<div class="float-chip chip-c">
|
||
<div class="chip-dot" style="background:linear-gradient(135deg,#f97316,#fb923c);">✦</div>
|
||
<div class="chip-text"><strong>자동 배포</strong><small>방금 전</small></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============= LOGOS MARQUEE ============= -->
|
||
<section class="marquee-section">
|
||
<p class="marquee-label">다양한 산업 분야의 기업들이 invyone과 함께합니다</p>
|
||
<div class="marquee">
|
||
<div class="marquee-track">
|
||
<div class="marquee-logo">Manufacturing</div>
|
||
<div class="marquee-logo">Logistics</div>
|
||
<div class="marquee-logo">Finance</div>
|
||
<div class="marquee-logo">Healthcare</div>
|
||
<div class="marquee-logo">Retail</div>
|
||
<div class="marquee-logo">IT Services</div>
|
||
<div class="marquee-logo">Construction</div>
|
||
<div class="marquee-logo">Education</div>
|
||
<div class="marquee-logo">Manufacturing</div>
|
||
<div class="marquee-logo">Logistics</div>
|
||
<div class="marquee-logo">Finance</div>
|
||
<div class="marquee-logo">Healthcare</div>
|
||
<div class="marquee-logo">Retail</div>
|
||
<div class="marquee-logo">IT Services</div>
|
||
<div class="marquee-logo">Construction</div>
|
||
<div class="marquee-logo">Education</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============= STATS ============= -->
|
||
<section class="stats">
|
||
<div class="container">
|
||
<div class="stats-grid">
|
||
<div class="stat-item reveal"><div class="stat-num" data-count="997"><span>+</span></div><div class="stat-desc">운영 중인 업무 화면</div></div>
|
||
<div class="stat-item reveal d1"><div class="stat-num" data-count="85"><span>%</span></div><div class="stat-desc">개발 기간 단축</div></div>
|
||
<div class="stat-item reveal d2"><div class="stat-num" data-count="24"><span>/7</span></div><div class="stat-desc">AI 에이전트 자동화</div></div>
|
||
<div class="stat-item reveal d3"><div class="stat-num" data-count="100"><span>%</span></div><div class="stat-desc">로컬 데이터 보호</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============= BENTO FEATURES ============= -->
|
||
<section class="section" id="features">
|
||
<div class="container">
|
||
<div class="section-head">
|
||
<div class="eyebrow reveal">Why invyone</div>
|
||
<h2 class="section-title reveal d1">기업이 필요로 하는 <br><span class="accent">모든 것을 한 곳에서</span>.</h2>
|
||
<p class="section-desc reveal d2">개발자 없이도 업무 화면 설계부터 외부 연계, AI 자동화, 보고서까지. 6개의 핵심 기능이 하나의 플랫폼에서 작동합니다.</p>
|
||
</div>
|
||
|
||
<div class="bento">
|
||
<div class="bento-cell b-1 reveal tilt">
|
||
<div class="badge">● Drag & Drop</div>
|
||
<h3>노코드 화면 설계</h3>
|
||
<p>드래그앤드롭으로 실제 업무 화면을 만들고, 실시간 프리뷰로 바로 확인합니다.</p>
|
||
<div class="v1">
|
||
<div class="v1-card v1-c1">입력폼</div>
|
||
<div class="v1-card v1-c2">테이블</div>
|
||
<div class="v1-card v1-c3">버튼</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bento-cell b-2 reveal d1 tilt">
|
||
<div class="badge">✦ AI Agent</div>
|
||
<h3>자연어로 화면·로직 자동 생성</h3>
|
||
<p>"제품 관리 화면 만들어줘" 한 마디에 UI·API·DB 스키마까지 완성됩니다.</p>
|
||
<div class="v2">
|
||
<div class="v2-prompt">제품 관리 시스템 만들어줘</div>
|
||
<div class="v2-resp">테이블 · 검색 · CRUD 폼 생성 완료</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bento-cell b-3 reveal d2 tilt">
|
||
<div class="badge">⚡ Integration</div>
|
||
<h3>외부 시스템 연계</h3>
|
||
<p>REST API, 외부 DB, 웹 크롤링을 설정만으로 연결.</p>
|
||
<svg class="v3" viewBox="0 0 160 160">
|
||
<circle class="link" cx="80" cy="80" r="60"/>
|
||
<circle class="link" cx="80" cy="80" r="35"/>
|
||
<circle class="node" cx="80" cy="20" r="6"/>
|
||
<circle class="node" cx="140" cy="80" r="6"/>
|
||
<circle class="node" cx="80" cy="140" r="6"/>
|
||
<circle class="node" cx="20" cy="80" r="6"/>
|
||
<circle cx="80" cy="80" r="12" fill="url(#lg)"/>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="bento-cell b-4 reveal tilt">
|
||
<div class="badge">📊 Analytics</div>
|
||
<h3>실시간 대시보드</h3>
|
||
<p>드래그앤드롭으로 만드는 나만의 대시보드.</p>
|
||
<div class="v4">
|
||
<div class="v4-bar"></div><div class="v4-bar"></div><div class="v4-bar"></div><div class="v4-bar"></div><div class="v4-bar"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bento-cell b-5 reveal d1 tilt">
|
||
<div class="badge">⇌ Workflow</div>
|
||
<h3>비주얼 워크플로우</h3>
|
||
<p>복잡한 승인·분기 로직을 시각적으로.</p>
|
||
<div class="v5">
|
||
<div class="v5-node">🚀</div>
|
||
<div class="v5-arr">→</div>
|
||
<div class="v5-node">⚙️</div>
|
||
<div class="v5-arr">→</div>
|
||
<div class="v5-node">✅</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bento-cell b-6 reveal d2 tilt">
|
||
<div class="badge">🔒 Security</div>
|
||
<h3>로컬 LLM · 기업 데이터 외부 유출 제로</h3>
|
||
<p>모든 AI 추론이 고객사 내부에서 수행됩니다. OpenAI 연동은 선택, 감사 로그는 기본.</p>
|
||
<div class="v6">
|
||
<div class="v6-card"></div><div class="v6-card"></div><div class="v6-card"></div><div class="v6-card"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============= TIMELINE: HOW IT WORKS ============= -->
|
||
<section class="section" style="padding-top: 40px;">
|
||
<div class="container">
|
||
<div class="section-head">
|
||
<div class="eyebrow reveal">How it works</div>
|
||
<h2 class="section-title reveal d1"><span class="accent">3단계</span>로 완성되는<br>엔터프라이즈 시스템</h2>
|
||
<p class="section-desc reveal d2">기획부터 운영까지, 개발자가 없어도 몇 시간이면 끝납니다.</p>
|
||
</div>
|
||
|
||
<div class="timeline">
|
||
<div class="tl-item reveal">
|
||
<div class="tl-body">
|
||
<span class="tl-tag">STEP 01</span>
|
||
<h3>드래그앤드롭 설계</h3>
|
||
<p>UI 컴포넌트를 배치하고 데이터 소스를 연결합니다. 실시간 프리뷰로 바로 확인하며, 반응형 레이아웃은 자동으로 대응됩니다.</p>
|
||
</div>
|
||
<div class="tl-dot serif">01</div>
|
||
<div class="tl-spacer"></div>
|
||
</div>
|
||
<div class="tl-item reveal d1">
|
||
<div class="tl-spacer"></div>
|
||
<div class="tl-dot serif">02</div>
|
||
<div class="tl-body">
|
||
<span class="tl-tag">STEP 02</span>
|
||
<h3>AI 에이전트가 로직 완성</h3>
|
||
<p>"승인 프로세스 추가해줘" 같은 자연어 명령만으로 비즈니스 로직, 워크플로우, 검증 규칙이 자동으로 구성됩니다.</p>
|
||
</div>
|
||
</div>
|
||
<div class="tl-item reveal d2">
|
||
<div class="tl-body">
|
||
<span class="tl-tag">STEP 03</span>
|
||
<h3>원클릭 배포·운영</h3>
|
||
<p>Kubernetes 기반 인프라에 실시간 롤링 배포. 무중단으로 업데이트하며, 사용량과 성능을 한 화면에서 모니터링합니다.</p>
|
||
</div>
|
||
<div class="tl-dot serif">03</div>
|
||
<div class="tl-spacer"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============= SHOWCASE TABS ============= -->
|
||
<section class="section" id="showcase">
|
||
<div class="container">
|
||
<div class="section-head">
|
||
<div class="eyebrow reveal">Core features</div>
|
||
<h2 class="section-title reveal d1"><span class="accent">핵심 기능</span>을<br>직접 살펴보세요.</h2>
|
||
<p class="section-desc reveal d2">네 가지 축이 하나로 연결되어 엔터프라이즈급 시스템을 구성합니다.</p>
|
||
</div>
|
||
|
||
<div class="showcase-tabs reveal d3">
|
||
<button class="sc-tab active" data-tab="design">화면 설계</button>
|
||
<button class="sc-tab" data-tab="integration">외부 연계</button>
|
||
<button class="sc-tab" data-tab="logic">비즈니스 로직</button>
|
||
<button class="sc-tab" data-tab="report">대시보드 & 레포트</button>
|
||
</div>
|
||
|
||
<div class="sc-panel active" data-panel="design">
|
||
<div class="sc-content">
|
||
<h3>사용자 친화적<br>화면 설계</h3>
|
||
<p>테이블, 입력폼, 버튼, 팝업 등 다양한 UI 컴포넌트를 드래그앤드롭으로 배치하고, 실시간 미리보기로 즉시 결과를 확인합니다.</p>
|
||
<div class="sc-features">
|
||
<div class="sc-feat"><div class="sc-feat-icon">◆</div><div class="sc-feat-text"><strong>25+ UI 컴포넌트</strong><span>테이블, 차트, 폼, 위젯 기본 제공</span></div></div>
|
||
<div class="sc-feat"><div class="sc-feat-icon">◆</div><div class="sc-feat-text"><strong>실시간 프리뷰</strong><span>저장 없이 즉각 확인</span></div></div>
|
||
<div class="sc-feat"><div class="sc-feat-icon">◆</div><div class="sc-feat-text"><strong>반응형 자동</strong><span>PC·태블릿·모바일 동시 대응</span></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="sc-visual">
|
||
<svg viewBox="0 0 400 360" width="100%" height="100%">
|
||
<rect x="20" y="20" width="360" height="60" rx="12" fill="#6366f1" opacity="0.08"/>
|
||
<rect x="36" y="40" width="120" height="10" rx="5" fill="#6366f1"/>
|
||
<rect x="36" y="56" width="80" height="6" rx="3" fill="#6366f1" opacity="0.4"/>
|
||
<rect x="20" y="100" width="172" height="120" rx="12" fill="#a855f7" opacity="0.1"/>
|
||
<rect x="36" y="116" width="100" height="8" rx="4" fill="#a855f7"/>
|
||
<rect x="36" y="134" width="140" height="4" rx="2" fill="#a855f7" opacity="0.3"/>
|
||
<rect x="36" y="144" width="120" height="4" rx="2" fill="#a855f7" opacity="0.3"/>
|
||
<circle cx="60" cy="190" r="20" fill="#a855f7" opacity="0.5"/>
|
||
<rect x="208" y="100" width="172" height="120" rx="12" fill="#ec4899" opacity="0.1"/>
|
||
<polyline points="224,200 244,180 264,190 284,160 304,170 324,150 344,140 364,120" stroke="#ec4899" stroke-width="2.5" fill="none"/>
|
||
<rect x="20" y="240" width="360" height="100" rx="12" fill="#f97316" opacity="0.1"/>
|
||
<rect x="36" y="256" width="96" height="72" rx="8" fill="#f97316" opacity="0.3"/>
|
||
<rect x="148" y="256" width="96" height="72" rx="8" fill="#f97316" opacity="0.5"/>
|
||
<rect x="260" y="256" width="104" height="72" rx="8" fill="#f97316" opacity="0.7"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sc-panel" data-panel="integration">
|
||
<div class="sc-content">
|
||
<h3>자유로운<br>외부 데이터 연계</h3>
|
||
<p>REST API, GraphQL, 외부 데이터베이스, 웹 크롤링 — 다양한 외부 시스템과의 연계를 설정 화면에서 간편하게 구성합니다. 별도의 미들웨어가 필요 없습니다.</p>
|
||
<div class="sc-features">
|
||
<div class="sc-feat"><div class="sc-feat-icon">◆</div><div class="sc-feat-text"><strong>REST / GraphQL</strong><span>인증·헤더·페이징 자동 처리</span></div></div>
|
||
<div class="sc-feat"><div class="sc-feat-icon">◆</div><div class="sc-feat-text"><strong>외부 DB 직접 연결</strong><span>PostgreSQL, MySQL, Oracle, MSSQL</span></div></div>
|
||
<div class="sc-feat"><div class="sc-feat-icon">◆</div><div class="sc-feat-text"><strong>웹 크롤링 스케줄러</strong><span>크론 기반 정기 수집</span></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="sc-visual">
|
||
<svg viewBox="0 0 400 360" width="100%" height="100%">
|
||
<defs><linearGradient id="sg2" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#6366f1"/><stop offset="1" stop-color="#ec4899"/></linearGradient></defs>
|
||
<circle cx="200" cy="180" r="50" fill="url(#sg2)"/>
|
||
<text x="200" y="185" text-anchor="middle" fill="#fff" font-size="13" font-weight="800">invyone</text>
|
||
<g stroke="#a855f7" stroke-width="1.5" stroke-dasharray="4 4" fill="none">
|
||
<path d="M60,80 Q130,120 155,150"/>
|
||
<path d="M340,80 Q270,120 245,150"/>
|
||
<path d="M60,280 Q130,240 155,210"/>
|
||
<path d="M340,280 Q270,240 245,210"/>
|
||
</g>
|
||
<g>
|
||
<rect x="20" y="60" width="80" height="40" rx="8" fill="#fff" stroke="#6366f1" stroke-width="2"/>
|
||
<text x="60" y="85" text-anchor="middle" font-size="11" font-weight="700" fill="#6366f1">REST API</text>
|
||
</g>
|
||
<g>
|
||
<rect x="300" y="60" width="80" height="40" rx="8" fill="#fff" stroke="#a855f7" stroke-width="2"/>
|
||
<text x="340" y="85" text-anchor="middle" font-size="11" font-weight="700" fill="#a855f7">GraphQL</text>
|
||
</g>
|
||
<g>
|
||
<rect x="20" y="260" width="80" height="40" rx="8" fill="#fff" stroke="#ec4899" stroke-width="2"/>
|
||
<text x="60" y="285" text-anchor="middle" font-size="11" font-weight="700" fill="#ec4899">외부 DB</text>
|
||
</g>
|
||
<g>
|
||
<rect x="300" y="260" width="80" height="40" rx="8" fill="#fff" stroke="#f97316" stroke-width="2"/>
|
||
<text x="340" y="285" text-anchor="middle" font-size="11" font-weight="700" fill="#f97316">크롤러</text>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sc-panel" data-panel="logic">
|
||
<div class="sc-content">
|
||
<h3>비주얼 워크플로우<br>& 비즈니스 로직</h3>
|
||
<p>복잡한 업무 규칙과 비즈니스 로직을 시각적 제어 흐름으로 설계합니다. 조건 분기, 데이터 가공, 승인 프로세스를 코드 없이 구성합니다.</p>
|
||
<div class="sc-features">
|
||
<div class="sc-feat"><div class="sc-feat-icon">◆</div><div class="sc-feat-text"><strong>조건 분기</strong><span>if/else, 루프, 스위치 시각화</span></div></div>
|
||
<div class="sc-feat"><div class="sc-feat-icon">◆</div><div class="sc-feat-text"><strong>승인 프로세스</strong><span>단계별 결재자·반려 흐름</span></div></div>
|
||
<div class="sc-feat"><div class="sc-feat-icon">◆</div><div class="sc-feat-text"><strong>버전 관리</strong><span>롤백 가능한 워크플로우 히스토리</span></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="sc-visual">
|
||
<svg viewBox="0 0 400 360" width="100%" height="100%">
|
||
<g fill="none" stroke="#a855f7" stroke-width="2">
|
||
<path d="M200,60 L200,110"/>
|
||
<path d="M200,170 L100,230"/>
|
||
<path d="M200,170 L300,230"/>
|
||
<path d="M100,290 L200,330"/>
|
||
<path d="M300,290 L200,330"/>
|
||
</g>
|
||
<g>
|
||
<rect x="150" y="20" width="100" height="40" rx="10" fill="#6366f1"/>
|
||
<text x="200" y="45" text-anchor="middle" fill="#fff" font-size="12" font-weight="700">START</text>
|
||
</g>
|
||
<g>
|
||
<polygon points="200,110 260,140 200,170 140,140" fill="#a855f7"/>
|
||
<text x="200" y="144" text-anchor="middle" fill="#fff" font-size="11" font-weight="700">조건?</text>
|
||
</g>
|
||
<g>
|
||
<rect x="50" y="230" width="100" height="60" rx="10" fill="#ec4899" opacity="0.9"/>
|
||
<text x="100" y="256" text-anchor="middle" fill="#fff" font-size="11" font-weight="700">승인</text>
|
||
<text x="100" y="272" text-anchor="middle" fill="#fff" font-size="10">알림 발송</text>
|
||
</g>
|
||
<g>
|
||
<rect x="250" y="230" width="100" height="60" rx="10" fill="#f97316" opacity="0.9"/>
|
||
<text x="300" y="256" text-anchor="middle" fill="#fff" font-size="11" font-weight="700">반려</text>
|
||
<text x="300" y="272" text-anchor="middle" fill="#fff" font-size="10">사유 기록</text>
|
||
</g>
|
||
<g>
|
||
<rect x="150" y="320" width="100" height="30" rx="10" fill="#10b981"/>
|
||
<text x="200" y="340" text-anchor="middle" fill="#fff" font-size="11" font-weight="700">END</text>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sc-panel" data-panel="report">
|
||
<div class="sc-content">
|
||
<h3>대시보드 &<br>자동 레포트</h3>
|
||
<p>드래그앤드롭으로 차트와 위젯을 배치해 대시보드를 구성하고, PDF/Excel 형식의 정형 보고서를 스케줄에 맞춰 자동 생성·발송합니다.</p>
|
||
<div class="sc-features">
|
||
<div class="sc-feat"><div class="sc-feat-icon">◆</div><div class="sc-feat-text"><strong>실시간 시각화</strong><span>20+ 차트 타입, KPI 위젯</span></div></div>
|
||
<div class="sc-feat"><div class="sc-feat-icon">◆</div><div class="sc-feat-text"><strong>PDF / Excel 자동 출력</strong><span>템플릿 기반 정형 보고서</span></div></div>
|
||
<div class="sc-feat"><div class="sc-feat-icon">◆</div><div class="sc-feat-text"><strong>스케줄링</strong><span>매일·매주·매월 자동 발송</span></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="sc-visual">
|
||
<svg viewBox="0 0 400 360" width="100%" height="100%">
|
||
<rect x="20" y="20" width="360" height="100" rx="12" fill="#6366f1" opacity="0.08"/>
|
||
<rect x="40" y="40" width="80" height="60" rx="8" fill="#6366f1" opacity="0.3"/>
|
||
<text x="80" y="65" text-anchor="middle" font-size="10" font-weight="700" fill="#6366f1">매출</text>
|
||
<text x="80" y="82" text-anchor="middle" font-size="16" font-weight="800" fill="#6366f1">128M</text>
|
||
<rect x="140" y="40" width="80" height="60" rx="8" fill="#a855f7" opacity="0.3"/>
|
||
<text x="180" y="65" text-anchor="middle" font-size="10" font-weight="700" fill="#a855f7">주문</text>
|
||
<text x="180" y="82" text-anchor="middle" font-size="16" font-weight="800" fill="#a855f7">3,420</text>
|
||
<rect x="240" y="40" width="120" height="60" rx="8" fill="#ec4899" opacity="0.3"/>
|
||
<text x="300" y="65" text-anchor="middle" font-size="10" font-weight="700" fill="#ec4899">활성 사용자</text>
|
||
<text x="300" y="82" text-anchor="middle" font-size="16" font-weight="800" fill="#ec4899">12,438</text>
|
||
<rect x="20" y="140" width="220" height="200" rx="12" fill="#a855f7" opacity="0.05"/>
|
||
<g stroke="#a855f7" stroke-width="2" fill="none">
|
||
<polyline points="40,300 70,260 100,280 130,230 160,250 190,200 220,210"/>
|
||
</g>
|
||
<g fill="#a855f7">
|
||
<circle cx="40" cy="300" r="3"/><circle cx="70" cy="260" r="3"/><circle cx="100" cy="280" r="3"/><circle cx="130" cy="230" r="3"/><circle cx="160" cy="250" r="3"/><circle cx="190" cy="200" r="3"/><circle cx="220" cy="210" r="3"/>
|
||
</g>
|
||
<rect x="260" y="140" width="120" height="200" rx="12" fill="#f97316" opacity="0.05"/>
|
||
<rect x="280" y="220" width="16" height="100" fill="#f97316" opacity="0.7"/>
|
||
<rect x="304" y="200" width="16" height="120" fill="#f97316" opacity="0.8"/>
|
||
<rect x="328" y="180" width="16" height="140" fill="#f97316" opacity="0.9"/>
|
||
<rect x="352" y="160" width="16" height="160" fill="#f97316"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============= AI SECTION ============= -->
|
||
<section class="ai-section" id="ai">
|
||
<canvas class="ai-canvas" id="aiCanvas"></canvas>
|
||
<div class="container">
|
||
<div class="ai-inner">
|
||
<div class="reveal">
|
||
<div class="eyebrow">AI Agent</div>
|
||
<h2 class="section-title" style="text-align:left; margin-bottom:24px;">AI 에이전트가<br>업무를 <span class="serif accent">스스로 처리</span>합니다.</h2>
|
||
<p class="section-desc" style="text-align:left; margin:0; max-width:480px;">로컬 LLM을 활용하여 기업 데이터의 외부 유출 없이, 자연어 명령만으로 화면 생성, 데이터 분석, 보고서 작성을 자동화합니다.</p>
|
||
<div class="ai-features">
|
||
<div class="ai-feat"><div class="ai-feat-ico">💬</div><h4>자연어 명령</h4><p>대화형 인터페이스로 시스템 조작</p></div>
|
||
<div class="ai-feat"><div class="ai-feat-ico">📊</div><h4>지능형 분석</h4><p>데이터 패턴 자동 인식 및 분석</p></div>
|
||
<div class="ai-feat"><div class="ai-feat-ico">🔒</div><h4>로컬 LLM</h4><p>기업 데이터 외부 유출 제로</p></div>
|
||
<div class="ai-feat"><div class="ai-feat-ico">⚡</div><h4>자동 생성</h4><p>화면·로직·보고서 자동 구성</p></div>
|
||
</div>
|
||
</div>
|
||
<div class="reveal d2">
|
||
<div class="ai-diagram">
|
||
<div class="ai-orb o2"></div>
|
||
<div class="ai-orb o1"></div>
|
||
<div class="ai-core"><span>AI</span><span>Agent</span><span>Core</span></div>
|
||
<div class="ai-node n1"><span class="ai-node-ico">🎨</span>화면설계</div>
|
||
<div class="ai-node n2"><span class="ai-node-ico">📊</span>분석</div>
|
||
<div class="ai-node n3"><span class="ai-node-ico">📄</span>레포트</div>
|
||
<div class="ai-node n4"><span class="ai-node-ico">🔗</span>연계</div>
|
||
<div class="ai-node n5"><span class="ai-node-ico">⚙️</span>로직</div>
|
||
<div class="ai-node n6"><span class="ai-node-ico">💬</span>대화</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============= USE CASES ============= -->
|
||
<section class="section" id="usecases">
|
||
<div class="container">
|
||
<div class="section-head">
|
||
<div class="eyebrow reveal">Use cases</div>
|
||
<h2 class="section-title reveal d1">어떤 업무에도 <span class="accent">유연하게</span> 적용.</h2>
|
||
<p class="section-desc reveal d2">산업과 업무 영역에 관계없이, invyone 하나로 모든 시스템을 구축할 수 있습니다.</p>
|
||
</div>
|
||
|
||
<div class="usecases-grid">
|
||
<a href="https://solution.invyone.com/login" class="uc reveal tilt"><div class="uc-ico"><span>🏭</span></div><h3>제조/생산 관리</h3><p>생산계획·공정·품질·재고까지 제조 전 과정을 하나의 시스템에서.</p><span class="uc-arrow">자세히 보기 →</span></a>
|
||
<a href="https://solution.invyone.com/login" class="uc reveal d1 tilt"><div class="uc-ico"><span>👥</span></div><h3>인사/급여 관리</h3><p>조직·근태·급여·평가를 자동화된 워크플로우로 운영.</p><span class="uc-arrow">자세히 보기 →</span></a>
|
||
<a href="https://solution.invyone.com/login" class="uc reveal d2 tilt"><div class="uc-ico"><span>💰</span></div><h3>회계/재무 관리</h3><p>전표·결산·예산·세무신고 지원을 체계적으로 관리.</p><span class="uc-arrow">자세히 보기 →</span></a>
|
||
<a href="https://solution.invyone.com/login" class="uc reveal tilt"><div class="uc-ico"><span>🛒</span></div><h3>영업/CRM</h3><p>고객·견적·수주·매출분석까지 영업 프로세스 전체를 통합.</p><span class="uc-arrow">자세히 보기 →</span></a>
|
||
<a href="https://solution.invyone.com/login" class="uc reveal d1 tilt"><div class="uc-ico"><span>📦</span></div><h3>물류/재고 관리</h3><p>입출고·재고실사·바코드·물류추적을 실시간으로 운영.</p><span class="uc-arrow">자세히 보기 →</span></a>
|
||
<a href="https://solution.invyone.com/login" class="uc reveal d2 tilt"><div class="uc-ico"><span>📋</span></div><h3>프로젝트 관리</h3><p>일정·업무·진척·이슈 트래킹을 대시보드에서 한눈에.</p><span class="uc-arrow">자세히 보기 →</span></a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============= ARCHITECTURE ============= -->
|
||
<section class="section">
|
||
<div class="container">
|
||
<div class="section-head">
|
||
<div class="eyebrow reveal">Architecture</div>
|
||
<h2 class="section-title reveal d1"><span class="accent">클라우드 네이티브</span><br>시스템 아키텍처</h2>
|
||
<p class="section-desc reveal d2">안정성과 확장성을 동시에 — 실제 운영 환경과 동일한 구조로 빌드됩니다.</p>
|
||
</div>
|
||
|
||
<div class="arch-wrap reveal">
|
||
<div class="arch-layer">
|
||
<div class="arch-label">Frontend</div>
|
||
<div class="arch-items">
|
||
<div class="arch-chip">React (Next.js)</div>
|
||
<div class="arch-chip">반응형 UI</div>
|
||
<div class="arch-chip">드래그앤드롭 엔진</div>
|
||
<div class="arch-chip">WebSocket</div>
|
||
</div>
|
||
</div>
|
||
<div class="arch-layer">
|
||
<div class="arch-label">Backend</div>
|
||
<div class="arch-items">
|
||
<div class="arch-chip">Spring Boot</div>
|
||
<div class="arch-chip">REST API</div>
|
||
<div class="arch-chip">비즈니스 로직 엔진</div>
|
||
<div class="arch-chip hl">AI Agent Engine</div>
|
||
</div>
|
||
</div>
|
||
<div class="arch-layer">
|
||
<div class="arch-label">Data</div>
|
||
<div class="arch-items">
|
||
<div class="arch-chip">PostgreSQL</div>
|
||
<div class="arch-chip">외부 DB 커넥터</div>
|
||
<div class="arch-chip">API Gateway</div>
|
||
<div class="arch-chip">로컬 LLM</div>
|
||
</div>
|
||
</div>
|
||
<div class="arch-layer">
|
||
<div class="arch-label">Infra</div>
|
||
<div class="arch-items">
|
||
<div class="arch-chip hl">Kubernetes (K8s)</div>
|
||
<div class="arch-chip">Docker</div>
|
||
<div class="arch-chip">CI/CD 자동배포</div>
|
||
<div class="arch-chip">SSL/TLS</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============= TESTIMONIALS ============= -->
|
||
<section class="section">
|
||
<div class="container">
|
||
<div class="section-head">
|
||
<div class="eyebrow reveal">Testimonials</div>
|
||
<h2 class="section-title reveal d1">고객들의 <span class="serif accent">이야기</span>.</h2>
|
||
<p class="section-desc reveal d2">invyone으로 업무를 혁신한 기업들의 생생한 목소리입니다.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="t-marquee">
|
||
<div class="t-track">
|
||
<div class="t-card"><div class="t-stars">★★★★★</div><blockquote>"개발팀 없이도 사내 ERP 시스템을 2주 만에 구축했습니다. AI 에이전트 기능이 정말 혁신적이에요."</blockquote><div class="t-author"><div class="t-avatar">K</div><div class="t-info"><strong>김 부장</strong><span>제조업 · IT기획팀</span></div></div></div>
|
||
<div class="t-card"><div class="t-stars">★★★★★</div><blockquote>"노코드라서 처음엔 반신반의했는데, 기존 레거시보다 훨씬 유연하고 빠릅니다."</blockquote><div class="t-author"><div class="t-avatar">P</div><div class="t-info"><strong>박 차장</strong><span>물류업 · 경영지원</span></div></div></div>
|
||
<div class="t-card"><div class="t-stars">★★★★★</div><blockquote>"외부 API 연계가 이렇게 쉬울 줄 몰랐어요. 크롤링·DB 연동까지 설정만으로 끝나요."</blockquote><div class="t-author"><div class="t-avatar">L</div><div class="t-info"><strong>이 과장</strong><span>IT서비스 · 개발팀</span></div></div></div>
|
||
<div class="t-card"><div class="t-stars">★★★★★</div><blockquote>"경영진 보고용 리포트를 월말마다 수동으로 만들었는데, 이제 스케줄로 자동 발송됩니다."</blockquote><div class="t-author"><div class="t-avatar">J</div><div class="t-info"><strong>정 팀장</strong><span>유통업 · 재무팀</span></div></div></div>
|
||
<div class="t-card"><div class="t-stars">★★★★★</div><blockquote>"도입 초기 기술 지원이 탄탄해서 자체 구축 역량 없는 우리 팀에 딱이었습니다."</blockquote><div class="t-author"><div class="t-avatar">C</div><div class="t-info"><strong>최 대리</strong><span>건설업 · 기획팀</span></div></div></div>
|
||
<div class="t-card"><div class="t-stars">★★★★★</div><blockquote>"AI가 만든 화면을 현업이 그대로 수정하고 운영합니다. 진짜 노코드가 뭔지 실감했어요."</blockquote><div class="t-author"><div class="t-avatar">S</div><div class="t-info"><strong>서 부장</strong><span>금융업 · 디지털혁신팀</span></div></div></div>
|
||
<div class="t-card"><div class="t-stars">★★★★★</div><blockquote>"개발팀 없이도 사내 ERP 시스템을 2주 만에 구축했습니다. AI 에이전트 기능이 정말 혁신적이에요."</blockquote><div class="t-author"><div class="t-avatar">K</div><div class="t-info"><strong>김 부장</strong><span>제조업 · IT기획팀</span></div></div></div>
|
||
<div class="t-card"><div class="t-stars">★★★★★</div><blockquote>"노코드라서 처음엔 반신반의했는데, 기존 레거시보다 훨씬 유연하고 빠릅니다."</blockquote><div class="t-author"><div class="t-avatar">P</div><div class="t-info"><strong>박 차장</strong><span>물류업 · 경영지원</span></div></div></div>
|
||
<div class="t-card"><div class="t-stars">★★★★★</div><blockquote>"외부 API 연계가 이렇게 쉬울 줄 몰랐어요. 크롤링·DB 연동까지 설정만으로 끝나요."</blockquote><div class="t-author"><div class="t-avatar">L</div><div class="t-info"><strong>이 과장</strong><span>IT서비스 · 개발팀</span></div></div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============= FAQ ============= -->
|
||
<section class="section" id="faq">
|
||
<div class="container">
|
||
<div class="section-head">
|
||
<div class="eyebrow reveal">FAQ</div>
|
||
<h2 class="section-title reveal d1">자주 묻는 <span class="serif accent">질문</span>.</h2>
|
||
<p class="section-desc reveal d2">invyone을 시작하기 전에 가장 많이 궁금해하시는 내용입니다.</p>
|
||
</div>
|
||
|
||
<div class="faq-wrap">
|
||
<details class="faq reveal" open>
|
||
<summary>개발자 없이도 정말 시스템을 만들 수 있나요? <span class="faq-plus">+</span></summary>
|
||
<div class="faq-body">네. 드래그앤드롭 UI, 시각적 비즈니스 로직 편집기, AI 에이전트가 결합되어 있어 IT 전공자가 아닌 현업 담당자도 실제 운영 시스템을 구축할 수 있습니다. 평균 도입 기간은 2~4주입니다.</div>
|
||
</details>
|
||
<details class="faq reveal">
|
||
<summary>기존에 운영 중인 데이터베이스와 연결할 수 있나요? <span class="faq-plus">+</span></summary>
|
||
<div class="faq-body">PostgreSQL, MySQL, Oracle, MSSQL 등 주요 RDBMS와 REST/GraphQL API, 그리고 웹 크롤링까지 외부 시스템을 별도 미들웨어 없이 바로 연결할 수 있습니다.</div>
|
||
</details>
|
||
<details class="faq reveal">
|
||
<summary>AI 에이전트 사용 시 데이터가 외부로 나가나요? <span class="faq-plus">+</span></summary>
|
||
<div class="faq-body">기본 구성은 로컬 LLM 기반이라 기업 데이터가 외부 인프라로 전송되지 않습니다. OpenAI 등 외부 모델이 필요한 경우에만 선택적으로 연결할 수 있으며, 모든 호출은 감사 로그에 남습니다.</div>
|
||
</details>
|
||
<details class="faq reveal">
|
||
<summary>구축 후 확장이나 유지보수는 어떻게 이뤄지나요? <span class="faq-plus">+</span></summary>
|
||
<div class="faq-body">Kubernetes 기반 인프라 위에 자동 배포되어 무중단 업데이트가 가능합니다. 운영 중인 화면은 언제든 드래그앤드롭으로 재구성할 수 있으며, 전담 기술 지원팀이 1:1 상담을 제공합니다.</div>
|
||
</details>
|
||
<details class="faq reveal">
|
||
<summary>가격은 어떻게 책정되나요? <span class="faq-plus">+</span></summary>
|
||
<div class="faq-body">Starter / Business / Enterprise 3단계 플랜을 제공합니다. 14일 무료 체험 이후 사용자 수와 필요한 기능에 맞춰 선택할 수 있으며, 대기업의 경우 맞춤 견적도 가능합니다.</div>
|
||
</details>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============= CTA ============= -->
|
||
<div class="container">
|
||
<section class="cta reveal">
|
||
<h2>코딩 없이,<br><em>상상을 현실로.</em></h2>
|
||
<p>invyone과 함께 기업의 디지털 전환을 시작하세요.<br>14일 무료 체험으로 모든 기능을 자유롭게 사용해보세요.</p>
|
||
<div class="cta-buttons">
|
||
<a href="https://solution.invyone.com/login" class="btn btn-white btn-xl">솔루션 둘러보기 <span class="arrow">→</span></a>
|
||
<a href="mailto:chpark@wace.me" class="btn btn-ghost btn-xl">문의하기</a>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- ============= FOOTER ============= -->
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="footer-grid">
|
||
<div class="footer-brand">
|
||
<a href="#" class="logo">
|
||
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
|
||
<defs><linearGradient id="flg" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#6366f1"/><stop offset="40%" stop-color="#a855f7"/><stop offset="70%" stop-color="#ec4899"/><stop offset="100%" stop-color="#f97316"/></linearGradient></defs>
|
||
<g transform="translate(20,20) scale(0.58)"><path d="M-28,-20 C-28,-32 -16,-38 -6,-32 C4,-26 2,-14 10,-14 C18,-14 20,-24 30,-20 C40,-16 34,-4 30,4 C26,12 18,14 10,14 C2,14 4,26 -6,32 C-16,38 -28,32 -28,20 C-28,12 -20,10 -20,0 C-20,-10 -28,-12 -28,-20Z" fill="url(#flg)"/><circle cx="-8" cy="0" r="5" fill="#fff"/><circle cx="14" cy="-2" r="3.5" fill="#fff" opacity="0.7"/></g>
|
||
</svg>
|
||
invyone
|
||
</a>
|
||
<p>AI 에이전트 기반 노코드 엔터프라이즈 플랫폼. 코딩 없이 업무 시스템을 설계하고 자동화합니다.</p>
|
||
<div class="footer-news">
|
||
<label>Product Updates</label>
|
||
<form class="footer-news-form" onsubmit="event.preventDefault(); this.querySelector('button').textContent='구독됨 ✓';">
|
||
<input type="email" placeholder="이메일 주소" required>
|
||
<button type="submit">구독</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h4>제품</h4>
|
||
<ul>
|
||
<li><a href="#features">화면 설계</a></li>
|
||
<li><a href="#showcase">외부 연계</a></li>
|
||
<li><a href="#showcase">워크플로우</a></li>
|
||
<li><a href="#showcase">대시보드</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4>AI</h4>
|
||
<ul>
|
||
<li><a href="#ai">AI 에이전트</a></li>
|
||
<li><a href="#ai">자연어 명령</a></li>
|
||
<li><a href="#ai">지능형 분석</a></li>
|
||
<li><a href="#ai">자동 레포트</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4>활용</h4>
|
||
<ul>
|
||
<li><a href="#usecases">제조/생산</a></li>
|
||
<li><a href="#usecases">인사/급여</a></li>
|
||
<li><a href="#usecases">물류/재고</a></li>
|
||
<li><a href="#usecases">영업/CRM</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4>지원</h4>
|
||
<ul>
|
||
<li><a href="mailto:chpark@wace.me">기술 문의</a></li>
|
||
<li><a href="#faq">FAQ</a></li>
|
||
<li><a href="javascript:void(0)">이용약관</a></li>
|
||
<li><a href="javascript:void(0)">개인정보</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<span>© 2026 invyone. All rights reserved.</span>
|
||
<div class="footer-social">
|
||
<a href="javascript:void(0)" title="LinkedIn">in</a>
|
||
<a href="javascript:void(0)" title="YouTube">▶</a>
|
||
<a href="javascript:void(0)" title="GitHub">GH</a>
|
||
<a href="javascript:void(0)" title="X">𝕏</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// ===== Theme toggle =====
|
||
const themeToggle = document.getElementById('themeToggle');
|
||
const setTheme = (t) => { document.documentElement.dataset.theme = t; try { localStorage.setItem('theme', t); } catch(e){} };
|
||
try {
|
||
const saved = localStorage.getItem('theme');
|
||
if (saved) setTheme(saved);
|
||
else if (window.matchMedia('(prefers-color-scheme: dark)').matches) setTheme('dark');
|
||
} catch(e){}
|
||
themeToggle.addEventListener('click', () => {
|
||
const cur = document.documentElement.dataset.theme || 'light';
|
||
setTheme(cur === 'dark' ? 'light' : 'dark');
|
||
});
|
||
|
||
// ===== Cursor spotlight =====
|
||
const spot = document.getElementById('spotlight');
|
||
let isTouch = 'ontouchstart' in window;
|
||
if (isTouch) document.body.classList.add('is-touch');
|
||
if (!isTouch) {
|
||
let mx = 0, my = 0, tx = 0, ty = 0;
|
||
window.addEventListener('mousemove', (e) => { mx = e.clientX; my = e.clientY; });
|
||
const loop = () => {
|
||
tx += (mx - tx) * 0.15;
|
||
ty += (my - ty) * 0.15;
|
||
spot.style.transform = `translate(${tx}px, ${ty}px) translate(-50%, -50%)`;
|
||
requestAnimationFrame(loop);
|
||
};
|
||
loop();
|
||
}
|
||
|
||
// ===== Header scroll =====
|
||
const header = document.getElementById('header');
|
||
const onScroll = () => header.classList.toggle('scrolled', window.scrollY > 30);
|
||
window.addEventListener('scroll', onScroll, { passive: true });
|
||
onScroll();
|
||
|
||
// ===== Reveal on scroll =====
|
||
const io = new IntersectionObserver((entries) => {
|
||
entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); }});
|
||
}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
|
||
document.querySelectorAll('.reveal').forEach(el => io.observe(el));
|
||
|
||
// ===== Counters =====
|
||
const ctrObserver = new IntersectionObserver((entries) => {
|
||
entries.forEach(e => {
|
||
if (!e.isIntersecting) return;
|
||
const el = e.target;
|
||
const num = el.childNodes[0];
|
||
const target = parseInt(el.dataset.count, 10);
|
||
const dur = 1600;
|
||
const t0 = performance.now();
|
||
const tick = (t) => {
|
||
const p = Math.min((t - t0) / dur, 1);
|
||
const eased = 1 - Math.pow(1 - p, 4);
|
||
num.nodeValue = Math.floor(eased * target).toLocaleString();
|
||
if (p < 1) requestAnimationFrame(tick);
|
||
};
|
||
requestAnimationFrame(tick);
|
||
ctrObserver.unobserve(el);
|
||
});
|
||
}, { threshold: 0.4 });
|
||
document.querySelectorAll('[data-count]').forEach(el => {
|
||
if (el.firstChild && el.firstChild.nodeType !== 3) el.insertBefore(document.createTextNode('0'), el.firstChild);
|
||
ctrObserver.observe(el);
|
||
});
|
||
|
||
// ===== Rotator words =====
|
||
const words = ['코딩 없이', 'AI 에이전트로', '1주일 만에', '자연어 한 줄로'];
|
||
const rotEl = document.getElementById('rotatorWord');
|
||
let rotIdx = 0;
|
||
const rotate = () => {
|
||
const next = words[(rotIdx + 1) % words.length];
|
||
rotEl.style.transition = 'opacity 0.3s, transform 0.4s';
|
||
rotEl.style.opacity = '0';
|
||
rotEl.style.transform = 'translateY(-10px)';
|
||
setTimeout(() => {
|
||
rotEl.textContent = next;
|
||
rotEl.style.transform = 'translateY(10px)';
|
||
requestAnimationFrame(() => {
|
||
rotEl.style.opacity = '1';
|
||
rotEl.style.transform = 'translateY(0)';
|
||
});
|
||
rotIdx = (rotIdx + 1) % words.length;
|
||
}, 350);
|
||
};
|
||
setInterval(rotate, 3200);
|
||
|
||
// ===== Magnetic buttons =====
|
||
document.querySelectorAll('.magnetic').forEach(btn => {
|
||
btn.addEventListener('mousemove', (e) => {
|
||
if (isTouch) return;
|
||
const r = btn.getBoundingClientRect();
|
||
const x = e.clientX - r.left - r.width / 2;
|
||
const y = e.clientY - r.top - r.height / 2;
|
||
btn.style.transform = `translate(${x * 0.18}px, ${y * 0.25}px)`;
|
||
});
|
||
btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
|
||
});
|
||
|
||
// ===== 3D tilt =====
|
||
document.querySelectorAll('.tilt').forEach(card => {
|
||
let raf;
|
||
card.addEventListener('mousemove', (e) => {
|
||
if (isTouch) return;
|
||
const r = card.getBoundingClientRect();
|
||
const px = (e.clientX - r.left) / r.width - 0.5;
|
||
const py = (e.clientY - r.top) / r.height - 0.5;
|
||
cancelAnimationFrame(raf);
|
||
raf = requestAnimationFrame(() => {
|
||
card.style.transform = `perspective(1000px) rotateX(${-py * 6}deg) rotateY(${px * 6}deg) translateY(-4px)`;
|
||
});
|
||
});
|
||
card.addEventListener('mouseleave', () => { card.style.transform = ''; });
|
||
});
|
||
|
||
// ===== Hero device parallax =====
|
||
const heroDeviceInner = document.getElementById('heroDeviceInner');
|
||
const heroDevice = document.getElementById('heroDevice');
|
||
if (heroDevice && heroDeviceInner && !isTouch) {
|
||
heroDevice.addEventListener('mousemove', (e) => {
|
||
const r = heroDevice.getBoundingClientRect();
|
||
const px = (e.clientX - r.left) / r.width - 0.5;
|
||
const py = (e.clientY - r.top) / r.height - 0.5;
|
||
heroDeviceInner.style.transform = `rotateX(${8 - py * 10}deg) rotateY(${px * 10}deg)`;
|
||
});
|
||
heroDevice.addEventListener('mouseleave', () => {
|
||
heroDeviceInner.style.transform = 'rotateX(8deg)';
|
||
});
|
||
}
|
||
|
||
// ===== Scroll parallax hero device =====
|
||
window.addEventListener('scroll', () => {
|
||
if (!heroDeviceInner) return;
|
||
const y = Math.min(window.scrollY / 5, 80);
|
||
heroDeviceInner.style.marginTop = `-${y}px`;
|
||
}, { passive: true });
|
||
|
||
// ===== Showcase tabs =====
|
||
document.querySelectorAll('.sc-tab').forEach(tab => {
|
||
tab.addEventListener('click', () => {
|
||
const name = tab.dataset.tab;
|
||
document.querySelectorAll('.sc-tab').forEach(t => t.classList.toggle('active', t === tab));
|
||
document.querySelectorAll('.sc-panel').forEach(p => p.classList.toggle('active', p.dataset.panel === name));
|
||
});
|
||
});
|
||
|
||
// ===== Smooth anchor =====
|
||
document.querySelectorAll('a[href^="#"]').forEach(a => {
|
||
a.addEventListener('click', (e) => {
|
||
const id = a.getAttribute('href');
|
||
if (id.length <= 1) return;
|
||
const t = document.querySelector(id);
|
||
if (t) { e.preventDefault(); t.scrollIntoView({ behavior: 'smooth', block: 'start' }); }
|
||
});
|
||
});
|
||
|
||
// ===== AI canvas particles =====
|
||
(function() {
|
||
const canvas = document.getElementById('aiCanvas');
|
||
if (!canvas) return;
|
||
const ctx = canvas.getContext('2d');
|
||
let w, h, particles = [];
|
||
|
||
const resize = () => {
|
||
const r = canvas.parentElement.getBoundingClientRect();
|
||
canvas.width = w = r.width * devicePixelRatio;
|
||
canvas.height = h = r.height * devicePixelRatio;
|
||
canvas.style.width = r.width + 'px';
|
||
canvas.style.height = r.height + 'px';
|
||
};
|
||
|
||
const reset = () => {
|
||
particles = Array.from({ length: 80 }, () => ({
|
||
x: Math.random() * w,
|
||
y: Math.random() * h,
|
||
vx: (Math.random() - 0.5) * 0.3 * devicePixelRatio,
|
||
vy: (Math.random() - 0.5) * 0.3 * devicePixelRatio,
|
||
r: (Math.random() * 1.8 + 0.6) * devicePixelRatio,
|
||
hue: Math.random() > 0.5 ? 270 : 320
|
||
}));
|
||
};
|
||
|
||
const tick = () => {
|
||
ctx.clearRect(0, 0, w, h);
|
||
// Connections
|
||
ctx.lineWidth = 0.5 * devicePixelRatio;
|
||
for (let i = 0; i < particles.length; i++) {
|
||
for (let j = i + 1; j < particles.length; j++) {
|
||
const dx = particles[i].x - particles[j].x;
|
||
const dy = particles[i].y - particles[j].y;
|
||
const d = Math.sqrt(dx * dx + dy * dy);
|
||
if (d < 150 * devicePixelRatio) {
|
||
ctx.strokeStyle = `rgba(168, 85, 247, ${0.15 * (1 - d / (150 * devicePixelRatio))})`;
|
||
ctx.beginPath();
|
||
ctx.moveTo(particles[i].x, particles[i].y);
|
||
ctx.lineTo(particles[j].x, particles[j].y);
|
||
ctx.stroke();
|
||
}
|
||
}
|
||
}
|
||
// Particles
|
||
particles.forEach(p => {
|
||
p.x += p.vx; p.y += p.vy;
|
||
if (p.x < 0 || p.x > w) p.vx *= -1;
|
||
if (p.y < 0 || p.y > h) p.vy *= -1;
|
||
ctx.fillStyle = `hsla(${p.hue}, 90%, 70%, 0.6)`;
|
||
ctx.beginPath();
|
||
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
});
|
||
requestAnimationFrame(tick);
|
||
};
|
||
|
||
resize();
|
||
reset();
|
||
tick();
|
||
window.addEventListener('resize', () => { resize(); reset(); });
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|