chpark
2773 lines
113 KiB
HTML
2773 lines
113 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, viewport-fit=cover">
|
||
<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: #fafafa;
|
||
--bg-base: #ffffff;
|
||
--bg-alt: #f5f3ff;
|
||
--bg-elevated: #ffffff;
|
||
--bg-card: #ffffff;
|
||
--text: #050510;
|
||
--text-soft: #3f3f55;
|
||
--text-light: #6b7280;
|
||
--text-muted: #9ca3af;
|
||
--border: #e5e5ef;
|
||
--border-soft: #f0f0f7;
|
||
--stroke: rgba(5, 5, 16, 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%);
|
||
--gradient-holo: linear-gradient(120deg, #60a5fa, #c084fc, #f472b6, #fb923c, #fbbf24, #34d399, #60a5fa);
|
||
--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);
|
||
--ease-in: cubic-bezier(0.7, 0, 0.84, 0);
|
||
--shadow-sm: 0 1px 2px rgba(5, 5, 16, 0.04), 0 1px 3px rgba(5, 5, 16, 0.06);
|
||
--shadow: 0 10px 40px -8px rgba(99, 102, 241, 0.15);
|
||
--shadow-lg: 0 30px 100px -20px rgba(99, 102, 241, 0.3);
|
||
--shadow-xl: 0 50px 150px -30px rgba(168, 85, 247, 0.4);
|
||
}
|
||
|
||
[data-theme="dark"] {
|
||
--bg: #050510;
|
||
--bg-base: #0a0a18;
|
||
--bg-alt: #10101f;
|
||
--bg-elevated: #14142a;
|
||
--bg-card: #12122a;
|
||
--text: #fafafe;
|
||
--text-soft: #c6c7d3;
|
||
--text-light: #8b8e9c;
|
||
--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.6);
|
||
--shadow-lg: 0 40px 120px -20px rgba(168, 85, 247, 0.4);
|
||
}
|
||
|
||
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;
|
||
}
|
||
|
||
body.preloading { overflow: hidden; }
|
||
|
||
::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; }
|
||
|
||
/* ============= PRELOADER ============= */
|
||
.preloader {
|
||
position: fixed; inset: 0; z-index: 9999;
|
||
background: #05050f;
|
||
display: flex; align-items: center; justify-content: center;
|
||
pointer-events: none;
|
||
transition: opacity 0.8s var(--ease), transform 1s var(--ease);
|
||
}
|
||
.preloader.out { opacity: 0; transform: translateY(-100%); }
|
||
.preloader-logo {
|
||
font-family: 'Instrument Serif', Georgia, serif;
|
||
font-size: 72px; font-style: italic;
|
||
color: #fff; letter-spacing: -0.04em;
|
||
position: relative; z-index: 2;
|
||
}
|
||
.preloader-logo span {
|
||
display: inline-block;
|
||
background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899, #f97316);
|
||
background-size: 300% 100%;
|
||
-webkit-background-clip: text; background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
animation: grad-sweep 1.5s ease infinite;
|
||
}
|
||
@keyframes grad-sweep {
|
||
0% { background-position: 100% 50%; }
|
||
100% { background-position: 0% 50%; }
|
||
}
|
||
.preloader-progress {
|
||
position: absolute; bottom: 40px; left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 240px; height: 2px;
|
||
background: rgba(255,255,255,0.08);
|
||
border-radius: 2px; overflow: hidden;
|
||
}
|
||
.preloader-progress::after {
|
||
content: ''; display: block; height: 100%;
|
||
background: linear-gradient(90deg, #6366f1, #ec4899);
|
||
animation: prel-fill 1.5s var(--ease) forwards;
|
||
}
|
||
@keyframes prel-fill {
|
||
from { width: 0; }
|
||
to { width: 100%; }
|
||
}
|
||
|
||
/* ============= CUSTOM CURSOR ============= */
|
||
.cursor-dot, .cursor-ring {
|
||
position: fixed; top: 0; left: 0;
|
||
pointer-events: none; z-index: 10000;
|
||
border-radius: 50%;
|
||
transform: translate(-50%, -50%);
|
||
will-change: transform;
|
||
mix-blend-mode: difference;
|
||
}
|
||
.cursor-dot { width: 6px; height: 6px; background: #fff; transition: transform 0.15s var(--ease); }
|
||
.cursor-ring {
|
||
width: 36px; height: 36px;
|
||
border: 1.5px solid rgba(255,255,255,0.5);
|
||
transition: width 0.3s var(--ease), height 0.3s var(--ease), border-color 0.3s;
|
||
}
|
||
body.hovering .cursor-ring { width: 56px; height: 56px; border-color: rgba(255,255,255,0.9); }
|
||
body.clicking .cursor-ring { width: 24px; height: 24px; }
|
||
body.is-touch .cursor-dot, body.is-touch .cursor-ring { display: none; }
|
||
@media (hover: none) { .cursor-dot, .cursor-ring { display: none; } }
|
||
|
||
/* ============= AURORA BACKGROUND ============= */
|
||
.aurora {
|
||
position: fixed; inset: 0; z-index: 0;
|
||
overflow: hidden; pointer-events: none;
|
||
}
|
||
.aurora-blob {
|
||
position: absolute; border-radius: 50%;
|
||
filter: blur(100px); opacity: 0.4;
|
||
will-change: transform;
|
||
}
|
||
.aurora-1 {
|
||
width: 80vw; height: 80vw;
|
||
top: -35vw; left: -25vw;
|
||
background: radial-gradient(circle, #818cf8 0%, #c084fc 50%, transparent 70%);
|
||
animation: aurora-a 30s ease-in-out infinite;
|
||
}
|
||
.aurora-2 {
|
||
width: 70vw; height: 70vw;
|
||
bottom: -25vw; right: -25vw;
|
||
background: radial-gradient(circle, #f472b6 0%, #fb923c 50%, transparent 70%);
|
||
animation: aurora-b 35s ease-in-out infinite;
|
||
opacity: 0.3;
|
||
}
|
||
.aurora-3 {
|
||
width: 50vw; height: 50vw;
|
||
top: 40%; right: 10%;
|
||
background: radial-gradient(circle, #34d399 0%, #60a5fa 50%, transparent 70%);
|
||
animation: aurora-c 25s ease-in-out infinite;
|
||
opacity: 0.18;
|
||
}
|
||
@keyframes aurora-a {
|
||
0%, 100% { transform: translate(0,0) scale(1) rotate(0deg); }
|
||
33% { transform: translate(5vw, 8vh) scale(1.15) rotate(60deg); }
|
||
66% { transform: translate(-3vw, -4vh) scale(0.9) rotate(120deg); }
|
||
}
|
||
@keyframes aurora-b {
|
||
0%, 100% { transform: translate(0,0) scale(1) rotate(0deg); }
|
||
50% { transform: translate(-8vw, -5vh) scale(1.1) rotate(-90deg); }
|
||
}
|
||
@keyframes aurora-c {
|
||
0%, 100% { transform: translate(0,0) scale(1); }
|
||
50% { transform: translate(4vw, -6vh) scale(0.8); }
|
||
}
|
||
[data-theme="dark"] .aurora-1 { opacity: 0.25; }
|
||
[data-theme="dark"] .aurora-2 { opacity: 0.2; }
|
||
[data-theme="dark"] .aurora-3 { opacity: 0.12; }
|
||
|
||
/* 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.95'/%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; }
|
||
|
||
/* Scroll progress bar */
|
||
.scroll-progress {
|
||
position: fixed; top: 0; left: 0;
|
||
height: 3px;
|
||
background: var(--gradient);
|
||
z-index: 9998;
|
||
width: 0;
|
||
will-change: width;
|
||
transition: width 0.05s linear;
|
||
box-shadow: 0 0 12px rgba(168, 85, 247, 0.5);
|
||
}
|
||
|
||
/* ============= 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;
|
||
isolation: isolate;
|
||
}
|
||
.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.2);
|
||
animation: grad-shift 6s ease infinite;
|
||
}
|
||
.btn-primary::before {
|
||
content: '';
|
||
position: absolute; inset: -2px;
|
||
border-radius: inherit;
|
||
background: var(--gradient-holo);
|
||
background-size: 400% 400%;
|
||
opacity: 0; z-index: -1;
|
||
animation: holo 4s linear infinite;
|
||
filter: blur(12px);
|
||
transition: opacity 0.35s;
|
||
}
|
||
.btn-primary:hover {
|
||
box-shadow: 0 20px 48px -8px rgba(168, 85, 247, 0.7), inset 0 0 0 1px rgba(255,255,255,0.3);
|
||
transform: translateY(-2px);
|
||
}
|
||
.btn-primary:hover::before { opacity: 0.8; }
|
||
.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-alt);
|
||
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); color: #fff; }
|
||
.btn-ghost {
|
||
background: rgba(255,255,255,0.08); color: #fff;
|
||
border: 1px solid rgba(255,255,255,0.2);
|
||
backdrop-filter: blur(12px);
|
||
}
|
||
.btn-ghost:hover { background: rgba(255,255,255,0.18); }
|
||
.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.25); }
|
||
.btn-lg { padding: 16px 32px; font-size: 16px; }
|
||
.btn-xl { padding: 20px 44px; font-size: 17px; }
|
||
.btn .arrow { transition: transform 0.35s var(--ease); display: inline-block; }
|
||
.btn:hover .arrow { transform: translateX(4px); }
|
||
|
||
@keyframes grad-shift { 50% { background-position: 100% 50%; } }
|
||
@keyframes holo {
|
||
0% { background-position: 0% 50%; }
|
||
100% { background-position: 400% 50%; }
|
||
}
|
||
|
||
/* ============= HEADER ============= */
|
||
.header {
|
||
position: fixed; top: 16px; left: 0; right: 0; z-index: 100;
|
||
transition: top 0.35s var(--ease);
|
||
padding: 0;
|
||
}
|
||
.header-inner {
|
||
max-width: calc(var(--max-width) - 40px); margin: 0 auto;
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
height: 58px;
|
||
background: color-mix(in srgb, var(--bg-base) 55%, 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 24px rgba(5, 5, 16, 0.04);
|
||
transition: all 0.35s var(--ease);
|
||
}
|
||
.header.scrolled .header-inner {
|
||
background: color-mix(in srgb, var(--bg-base) 85%, transparent);
|
||
box-shadow: 0 8px 40px rgba(5, 5, 16, 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.88); }
|
||
|
||
.logo {
|
||
display: flex; align-items: center; gap: 10px;
|
||
font-size: 20px; font-weight: 800; letter-spacing: -0.03em;
|
||
}
|
||
.logo svg { width: 32px; height: 32px; }
|
||
.logo:hover svg { animation: logo-spin 0.8s var(--ease); }
|
||
@keyframes logo-spin {
|
||
from { transform: rotate(0); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
.nav { display: flex; align-items: center; gap: 2px; position: relative; }
|
||
.nav a {
|
||
padding: 8px 16px; border-radius: 999px;
|
||
font-size: 14px; font-weight: 500;
|
||
color: var(--text-soft);
|
||
transition: color 0.25s;
|
||
position: relative;
|
||
}
|
||
.nav a:hover { color: var(--text); }
|
||
.nav-indicator {
|
||
position: absolute;
|
||
top: 0; left: 0;
|
||
height: 100%;
|
||
background: var(--bg-alt);
|
||
border-radius: 999px;
|
||
transition: all 0.4s var(--ease);
|
||
opacity: 0;
|
||
z-index: -1;
|
||
}
|
||
[data-theme="dark"] .nav-indicator { background: rgba(255,255,255,0.08); }
|
||
.nav:hover .nav-indicator { opacity: 1; }
|
||
|
||
.header-right { display: flex; align-items: center; gap: 6px; }
|
||
.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-alt); color: var(--text); }
|
||
[data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,0.08); }
|
||
.theme-toggle svg { width: 18px; height: 18px; transition: transform 0.5s var(--ease); }
|
||
.theme-toggle:hover svg { transform: rotate(180deg); }
|
||
.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-base);
|
||
transition: all 0.3s var(--ease);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.btn-nav::after {
|
||
content: ''; position: absolute; inset: 0;
|
||
background: var(--gradient);
|
||
opacity: 0;
|
||
transition: opacity 0.3s;
|
||
}
|
||
.btn-nav span { position: relative; z-index: 1; }
|
||
.btn-nav:hover::after { opacity: 1; }
|
||
.btn-nav:hover { transform: translateY(-1px); }
|
||
|
||
/* ============= HERO ============= */
|
||
.hero {
|
||
position: relative; z-index: 5;
|
||
padding: 180px 0 80px;
|
||
overflow: hidden;
|
||
min-height: 100vh;
|
||
display: flex; flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
.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 85% 75% at 50% 45%, #000 0%, transparent 80%);
|
||
-webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 0%, transparent 80%);
|
||
}
|
||
|
||
/* Floating ui fragments in hero */
|
||
.hero-ornaments {
|
||
position: absolute; inset: 0;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
.ornament {
|
||
position: absolute;
|
||
background: var(--bg-base);
|
||
border: 1px solid var(--border);
|
||
border-radius: 14px;
|
||
padding: 12px 18px;
|
||
box-shadow: 0 20px 50px -10px rgba(99, 102, 241, 0.25);
|
||
backdrop-filter: blur(8px);
|
||
animation: drift 12s ease-in-out infinite;
|
||
font-size: 12px;
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-weight: 500;
|
||
color: var(--text-soft);
|
||
display: flex; align-items: center; gap: 10px;
|
||
}
|
||
[data-theme="dark"] .ornament { background: rgba(18,18,42,0.7); }
|
||
.ornament-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gradient); flex-shrink: 0; animation: pulse-dot 2s infinite; }
|
||
.ornament.o1 { top: 22%; left: 4%; animation-delay: 0s; }
|
||
.ornament.o1 .ornament-dot { background: #22c55e; }
|
||
.ornament.o2 { top: 34%; right: 5%; animation-delay: -3s; }
|
||
.ornament.o2 .ornament-dot { background: #6366f1; }
|
||
.ornament.o3 { top: 68%; left: 7%; animation-delay: -6s; }
|
||
.ornament.o3 .ornament-dot { background: #ec4899; }
|
||
.ornament.o4 { top: 75%; right: 6%; animation-delay: -9s; }
|
||
.ornament.o4 .ornament-dot { background: #f97316; }
|
||
@keyframes drift {
|
||
0%, 100% { transform: translate(0,0) rotate(-3deg); }
|
||
50% { transform: translate(10px, -12px) rotate(3deg); }
|
||
}
|
||
@keyframes pulse-dot {
|
||
50% { box-shadow: 0 0 0 6px rgba(99,102,241,0); transform: scale(1.3); }
|
||
}
|
||
|
||
.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-base) 75%, transparent);
|
||
border: 1px solid var(--border);
|
||
border-radius: 999px;
|
||
font-size: 13px; font-weight: 500;
|
||
color: var(--text-soft);
|
||
margin-bottom: 36px;
|
||
backdrop-filter: blur(12px);
|
||
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.06);
|
||
transition: all 0.3s;
|
||
}
|
||
.hero-badge:hover { border-color: var(--primary); transform: translateY(-1px); }
|
||
.hero-badge-tag {
|
||
background: var(--gradient);
|
||
color: #fff;
|
||
padding: 3px 10px;
|
||
border-radius: 999px;
|
||
font-size: 10.5px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
.hero-badge-arrow { margin-left: 2px; transition: transform 0.3s; }
|
||
.hero-badge:hover .hero-badge-arrow { transform: translateX(3px); }
|
||
|
||
.hero h1 {
|
||
font-size: clamp(52px, 9vw, 132px);
|
||
font-weight: 900;
|
||
line-height: 0.95;
|
||
letter-spacing: -0.05em;
|
||
margin-bottom: 32px;
|
||
font-feature-settings: "ss01", "cv11";
|
||
}
|
||
.hero h1 .line { display: block; overflow: hidden; }
|
||
.hero h1 .char {
|
||
display: inline-block;
|
||
opacity: 0;
|
||
transform: translateY(110%) rotate(6deg);
|
||
will-change: transform, opacity;
|
||
}
|
||
.hero h1 .char.in {
|
||
animation: char-up 1s var(--ease) forwards;
|
||
}
|
||
@keyframes char-up {
|
||
to { opacity: 1; transform: translateY(0) rotate(0); }
|
||
}
|
||
.hero h1 .serif-em {
|
||
font-family: 'Instrument Serif', Georgia, serif;
|
||
font-weight: 400; font-style: italic;
|
||
letter-spacing: -0.03em;
|
||
}
|
||
.hero h1 .accent {
|
||
position: relative;
|
||
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;
|
||
}
|
||
|
||
.hero-desc {
|
||
font-size: clamp(17px, 1.5vw, 21px);
|
||
color: var(--text-light);
|
||
max-width: 600px;
|
||
margin: 0 auto 48px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.hero-ctas {
|
||
display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.hero-meta {
|
||
display: flex; justify-content: center; gap: 0; flex-wrap: wrap;
|
||
font-size: 13px; color: var(--text-muted);
|
||
}
|
||
.hero-meta-item {
|
||
padding: 0 20px;
|
||
display: flex; align-items: center; gap: 8px;
|
||
position: relative;
|
||
}
|
||
.hero-meta-item + .hero-meta-item::before {
|
||
content: ''; position: absolute; left: 0; top: 50%;
|
||
width: 1px; height: 14px;
|
||
background: var(--border);
|
||
transform: translateY(-50%);
|
||
}
|
||
.hero-meta-item svg { width: 14px; height: 14px; color: #22c55e; }
|
||
|
||
/* ============= HERO DEVICE STACK ============= */
|
||
.hero-stack {
|
||
position: relative;
|
||
margin-top: 100px;
|
||
max-width: 1100px;
|
||
margin-left: auto; margin-right: auto;
|
||
perspective: 2500px;
|
||
padding: 0 32px;
|
||
}
|
||
.hero-stack-glow {
|
||
position: absolute; inset: -40px;
|
||
background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(168, 85, 247, 0.35), transparent 70%);
|
||
pointer-events: none;
|
||
filter: blur(40px);
|
||
}
|
||
.stack-device {
|
||
position: relative;
|
||
background: var(--bg-elevated);
|
||
border: 1px solid var(--border);
|
||
border-radius: 16px;
|
||
box-shadow: 0 60px 120px -40px rgba(99, 102, 241, 0.4), 0 30px 60px -20px rgba(0, 0, 0, 0.12);
|
||
overflow: hidden;
|
||
transform-style: preserve-3d;
|
||
transition: transform 0.8s var(--ease);
|
||
transform: rotateX(8deg) rotateY(0deg);
|
||
}
|
||
[data-theme="dark"] .stack-device { background: #14142a; }
|
||
|
||
.stack-layer-2, .stack-layer-3 {
|
||
position: absolute;
|
||
border-radius: 14px;
|
||
background: var(--bg-elevated);
|
||
border: 1px solid var(--border);
|
||
box-shadow: 0 20px 50px -10px rgba(99, 102, 241, 0.25);
|
||
overflow: hidden;
|
||
width: 280px; height: 200px;
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
[data-theme="dark"] .stack-layer-2, [data-theme="dark"] .stack-layer-3 { background: rgba(20, 20, 42, 0.9); }
|
||
.stack-layer-2 {
|
||
top: 30%; left: -60px;
|
||
transform: rotate(-6deg) translateZ(40px);
|
||
animation: float-2 7s ease-in-out infinite;
|
||
z-index: 2;
|
||
}
|
||
.stack-layer-3 {
|
||
top: 55%; right: -50px;
|
||
transform: rotate(4deg) translateZ(60px);
|
||
animation: float-3 9s ease-in-out infinite;
|
||
z-index: 2;
|
||
}
|
||
@keyframes float-2 {
|
||
0%, 100% { transform: rotate(-6deg) translate(0,0) translateZ(40px); }
|
||
50% { transform: rotate(-5deg) translate(5px, -10px) translateZ(40px); }
|
||
}
|
||
@keyframes float-3 {
|
||
0%, 100% { transform: rotate(4deg) translate(0,0) translateZ(60px); }
|
||
50% { transform: rotate(5deg) translate(-4px, -8px) translateZ(60px); }
|
||
}
|
||
|
||
.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: #0a0a18; }
|
||
|
||
.device-body {
|
||
display: grid; grid-template-columns: 200px 1fr; gap: 0;
|
||
min-height: 520px;
|
||
background: var(--bg-base);
|
||
}
|
||
[data-theme="dark"] .device-body { background: #0a0a18; }
|
||
.device-side {
|
||
padding: 24px 16px;
|
||
border-right: 1px solid var(--border);
|
||
background: var(--bg-alt);
|
||
}
|
||
[data-theme="dark"] .device-side { background: #0a0a17; }
|
||
.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; }
|
||
|
||
/* Mini devices content */
|
||
.mini-content { padding: 16px; font-size: 11px; }
|
||
.mini-title { font-weight: 800; font-size: 14px; margin-bottom: 8px; letter-spacing: -0.02em; }
|
||
.mini-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-family: 'JetBrains Mono', monospace; color: var(--text-light); }
|
||
.mini-row::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
|
||
.mini-bubble {
|
||
background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(236,72,153,0.1));
|
||
padding: 8px 12px; border-radius: 10px; margin-top: 8px;
|
||
font-size: 11px; color: var(--text);
|
||
}
|
||
.mini-bubble::before { content: '✦ '; color: var(--primary); font-weight: 800; }
|
||
|
||
/* ============= 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: 12px; color: var(--text-muted);
|
||
margin-bottom: 32px; font-weight: 500; letter-spacing: 0.15em;
|
||
text-transform: uppercase;
|
||
}
|
||
.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-track.reverse { animation-direction: reverse; }
|
||
.marquee:hover .marquee-track { animation-play-state: paused; }
|
||
.marquee-logo {
|
||
font-size: 28px; font-weight: 800; letter-spacing: -0.04em;
|
||
color: var(--text); opacity: 0.35;
|
||
display: flex; align-items: center; gap: 10px;
|
||
transition: opacity 0.3s, transform 0.3s;
|
||
}
|
||
.marquee-logo:hover { opacity: 1; transform: scale(1.05); }
|
||
.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 ============= */
|
||
.stats { padding: 100px 0 80px; }
|
||
.stats-grid {
|
||
display: grid; grid-template-columns: repeat(4, 1fr);
|
||
gap: 56px;
|
||
text-align: center;
|
||
}
|
||
.stat-item { position: relative; }
|
||
.stat-item + .stat-item::before {
|
||
content: ''; position: absolute; top: 20%; bottom: 20%; left: -28px;
|
||
width: 1px; background: var(--border);
|
||
}
|
||
.stat-num {
|
||
font-size: clamp(56px, 7vw, 88px);
|
||
font-weight: 900; letter-spacing: -0.05em;
|
||
background: var(--gradient);
|
||
background-size: 200% 200%;
|
||
animation: grad-shift 8s ease infinite;
|
||
-webkit-background-clip: text; background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
font-family: 'Instrument Serif', Georgia, serif;
|
||
font-style: italic;
|
||
font-weight: 400;
|
||
line-height: 1;
|
||
}
|
||
.stat-num sup { font-size: 0.45em; font-family: 'Inter', sans-serif; font-style: normal; font-weight: 800; margin-left: 2px; vertical-align: top; top: 0.2em; }
|
||
.stat-desc { font-size: 13px; color: var(--text-light); margin-top: 10px; font-weight: 500; letter-spacing: 0.02em; }
|
||
.stat-trend {
|
||
display: inline-flex; align-items: center; gap: 4px;
|
||
font-size: 11px; font-weight: 700; color: #22c55e;
|
||
margin-top: 6px;
|
||
padding: 3px 10px;
|
||
background: rgba(34, 197, 94, 0.1);
|
||
border-radius: 999px;
|
||
}
|
||
|
||
/* ============= SECTIONS ============= */
|
||
section { position: relative; z-index: 5; }
|
||
.section { padding: 140px 0; }
|
||
.section-head { text-align: center; margin-bottom: 72px; position: relative; }
|
||
.eyebrow {
|
||
display: inline-flex; align-items: center; gap: 10px;
|
||
padding: 6px 14px 6px 12px;
|
||
background: var(--bg-elevated);
|
||
border: 1px solid var(--border);
|
||
border-radius: 999px;
|
||
font-size: 12px; font-weight: 600; letter-spacing: 0.05em;
|
||
color: var(--text-soft);
|
||
text-transform: uppercase;
|
||
margin-bottom: 24px;
|
||
}
|
||
[data-theme="dark"] .eyebrow { background: rgba(255,255,255,0.03); }
|
||
.eyebrow::before {
|
||
content: ''; width: 6px; height: 6px; border-radius: 50%;
|
||
background: var(--gradient);
|
||
box-shadow: 0 0 8px rgba(168, 85, 247, 0.5);
|
||
}
|
||
.section-title {
|
||
font-size: clamp(38px, 5.8vw, 80px);
|
||
font-weight: 900; line-height: 1.0;
|
||
letter-spacing: -0.045em;
|
||
margin-bottom: 28px;
|
||
}
|
||
.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;
|
||
}
|
||
|
||
/* ============= HORIZONTAL PIN FEATURES ============= */
|
||
.pin-wrap {
|
||
height: 400vh;
|
||
position: relative;
|
||
}
|
||
.pin-container {
|
||
position: sticky; top: 0;
|
||
height: 100vh;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
display: flex; align-items: center;
|
||
}
|
||
.pin-track {
|
||
display: flex; gap: 24px;
|
||
padding: 0 10vw;
|
||
will-change: transform;
|
||
}
|
||
.pin-panel {
|
||
flex-shrink: 0;
|
||
width: 80vw; max-width: 1100px;
|
||
height: 70vh; max-height: 680px;
|
||
border-radius: var(--radius-xl);
|
||
padding: 48px;
|
||
display: grid; grid-template-columns: 1fr 1fr;
|
||
gap: 40px; align-items: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
border: 1px solid var(--border);
|
||
background: var(--bg-elevated);
|
||
}
|
||
[data-theme="dark"] .pin-panel { background: #101020; }
|
||
.pin-panel::before {
|
||
content: ''; position: absolute; inset: 0;
|
||
background: var(--pp-grad, transparent);
|
||
opacity: 0.08;
|
||
pointer-events: none;
|
||
}
|
||
.pin-panel-content { position: relative; z-index: 1; }
|
||
.pin-panel-num {
|
||
font-family: 'Instrument Serif', Georgia, serif;
|
||
font-style: italic;
|
||
font-size: 18px;
|
||
color: var(--text-muted);
|
||
margin-bottom: 20px;
|
||
display: block;
|
||
}
|
||
.pin-panel h3 {
|
||
font-size: clamp(32px, 3.5vw, 52px);
|
||
font-weight: 900; letter-spacing: -0.03em;
|
||
margin-bottom: 20px; line-height: 1.05;
|
||
}
|
||
.pin-panel .pp-accent {
|
||
background: var(--pp-grad, var(--gradient));
|
||
-webkit-background-clip: text; background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
.pin-panel p { font-size: 17px; color: var(--text-light); line-height: 1.7; margin-bottom: 32px; }
|
||
.pin-panel-features { display: flex; flex-direction: column; gap: 12px; }
|
||
.pp-feat {
|
||
display: flex; align-items: center; gap: 12px;
|
||
padding: 14px 18px;
|
||
background: var(--bg-base); border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
font-size: 14px; font-weight: 600;
|
||
transition: all 0.3s;
|
||
}
|
||
[data-theme="dark"] .pp-feat { background: rgba(255,255,255,0.03); }
|
||
.pp-feat:hover { transform: translateX(4px); border-color: var(--primary); }
|
||
.pp-feat-ico {
|
||
width: 28px; height: 28px; border-radius: 8px;
|
||
background: var(--pp-grad, var(--gradient)); color: #fff;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 13px; font-weight: 800; flex-shrink: 0;
|
||
}
|
||
.pin-panel-visual {
|
||
position: relative;
|
||
background: var(--bg-base);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-lg);
|
||
padding: 28px;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
box-shadow: 0 20px 40px -10px rgba(0,0,0,0.08);
|
||
}
|
||
[data-theme="dark"] .pin-panel-visual { background: #0a0a18; }
|
||
|
||
/* Pin panel visuals */
|
||
.pv-builder {
|
||
height: 100%;
|
||
display: flex; flex-direction: column; gap: 12px;
|
||
position: relative;
|
||
}
|
||
.pv-builder-toolbar {
|
||
display: flex; gap: 6px;
|
||
padding: 8px; background: var(--bg-alt); border-radius: 10px;
|
||
}
|
||
.pv-tool {
|
||
width: 32px; height: 32px; border-radius: 6px;
|
||
background: var(--bg-base); border: 1px solid var(--border);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 14px;
|
||
transition: all 0.2s;
|
||
}
|
||
.pv-tool:hover { border-color: var(--primary); transform: translateY(-2px); }
|
||
.pv-tool.active { background: var(--gradient); color: #fff; border-color: transparent; }
|
||
.pv-canvas {
|
||
flex: 1; background: var(--bg-alt);
|
||
border-radius: 12px; padding: 20px;
|
||
position: relative;
|
||
background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
|
||
background-size: 18px 18px;
|
||
}
|
||
.pv-block {
|
||
position: absolute;
|
||
background: var(--bg-base); border: 1px solid var(--border);
|
||
border-radius: 10px; padding: 10px 14px;
|
||
font-size: 12px; font-weight: 700;
|
||
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
|
||
cursor: grab;
|
||
transition: transform 0.3s;
|
||
}
|
||
.pv-block:hover { transform: scale(1.05); box-shadow: 0 8px 20px rgba(99, 102, 241, 0.2); }
|
||
.pv-block-a { top: 14%; left: 10%; }
|
||
.pv-block-a::before { content: '📝 '; }
|
||
.pv-block-b { top: 12%; right: 12%; }
|
||
.pv-block-b::before { content: '📊 '; }
|
||
.pv-block-c { bottom: 18%; left: 18%; }
|
||
.pv-block-c::before { content: '🎯 '; }
|
||
.pv-block-d { bottom: 20%; right: 20%; }
|
||
.pv-block-d::before { content: '✨ '; }
|
||
.pv-cursor {
|
||
position: absolute; top: 50%; left: 45%;
|
||
font-size: 20px;
|
||
animation: builder-cursor 4s ease-in-out infinite;
|
||
pointer-events: none;
|
||
}
|
||
@keyframes builder-cursor {
|
||
0%, 100% { transform: translate(0,0) rotate(-15deg); }
|
||
25% { transform: translate(-40px, -30px) rotate(-15deg); }
|
||
50% { transform: translate(30px, -50px) rotate(-15deg); }
|
||
75% { transform: translate(50px, 20px) rotate(-15deg); }
|
||
}
|
||
|
||
/* AI chat demo visual */
|
||
.pv-chat { height: 100%; display: flex; flex-direction: column; }
|
||
.pv-chat-msg {
|
||
max-width: 80%; padding: 12px 16px;
|
||
border-radius: 14px;
|
||
font-size: 13px; line-height: 1.5;
|
||
margin-bottom: 10px;
|
||
opacity: 0; animation: msg-in 0.5s var(--ease) forwards;
|
||
}
|
||
.pv-chat-msg.user {
|
||
align-self: flex-end;
|
||
background: var(--gradient);
|
||
color: #fff;
|
||
border-bottom-right-radius: 4px;
|
||
animation-delay: 0.4s;
|
||
}
|
||
.pv-chat-msg.ai {
|
||
align-self: flex-start;
|
||
background: var(--bg-alt);
|
||
border: 1px solid var(--border);
|
||
border-bottom-left-radius: 4px;
|
||
animation-delay: 0.8s;
|
||
}
|
||
.pv-chat-msg.thinking {
|
||
animation-delay: 1.2s;
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 11px; color: var(--text-muted);
|
||
background: none; border: none;
|
||
padding: 4px 16px;
|
||
}
|
||
.pv-chat-msg.thinking::before { content: '◌ '; animation: spin-dot 1s linear infinite; display: inline-block; }
|
||
@keyframes spin-dot { to { transform: rotate(360deg); } }
|
||
.pv-chat-msg.result {
|
||
align-self: flex-start;
|
||
background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(236,72,153,0.1));
|
||
border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
|
||
animation-delay: 1.6s;
|
||
}
|
||
.pv-chat-msg.result strong { display: block; margin-bottom: 8px; font-size: 13px; }
|
||
.pv-chat-msg.result ul { list-style: none; margin-top: 4px; }
|
||
.pv-chat-msg.result li {
|
||
font-size: 11px; padding-left: 16px; position: relative; color: var(--text-soft);
|
||
}
|
||
.pv-chat-msg.result li::before { content: '✓'; position: absolute; left: 0; color: #22c55e; font-weight: 800; }
|
||
@keyframes msg-in {
|
||
from { opacity: 0; transform: translateY(10px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
.pin-panel:hover .pv-chat-msg { animation: msg-in 0.5s var(--ease) forwards; }
|
||
|
||
/* Integration nodes visual */
|
||
.pv-nodes { height: 100%; position: relative; }
|
||
.pv-node-svg { width: 100%; height: 100%; }
|
||
.pv-node-center {
|
||
position: absolute; top: 50%; left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 80px; height: 80px; border-radius: 50%;
|
||
background: var(--gradient);
|
||
display: flex; align-items: center; justify-content: center;
|
||
color: #fff; font-weight: 800; font-size: 14px;
|
||
box-shadow: 0 0 60px rgba(168, 85, 247, 0.5);
|
||
}
|
||
.pv-node-out {
|
||
position: absolute;
|
||
background: var(--bg-base); border: 1.5px solid var(--border);
|
||
padding: 8px 14px; border-radius: 10px;
|
||
font-size: 11px; font-weight: 700;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
|
||
}
|
||
.pvn-1 { top: 8%; left: 10%; border-color: #6366f1; color: #6366f1; }
|
||
.pvn-2 { top: 10%; right: 12%; border-color: #a855f7; color: #a855f7; }
|
||
.pvn-3 { bottom: 10%; left: 14%; border-color: #ec4899; color: #ec4899; }
|
||
.pvn-4 { bottom: 8%; right: 10%; border-color: #f97316; color: #f97316; }
|
||
|
||
/* Dashboard visual */
|
||
.pv-dash { height: 100%; display: flex; flex-direction: column; gap: 10px; }
|
||
.pv-dash-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
|
||
.pv-stat-card {
|
||
background: var(--bg-alt); padding: 14px; border-radius: 10px;
|
||
border: 1px solid var(--border);
|
||
}
|
||
.pv-stat-card strong { font-size: 22px; display: block; letter-spacing: -0.03em; }
|
||
.pv-stat-card small { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
|
||
.pv-stat-card .t { font-size: 10px; color: #22c55e; display: block; margin-top: 4px; font-weight: 700; }
|
||
.pv-big-chart {
|
||
flex: 1; background: var(--bg-alt);
|
||
border: 1px solid var(--border);
|
||
border-radius: 10px; padding: 16px;
|
||
min-height: 160px; position: relative;
|
||
}
|
||
|
||
/* ============= TIMELINE ============= */
|
||
.timeline-wrap {
|
||
position: relative;
|
||
padding: 40px 0;
|
||
}
|
||
.timeline-line {
|
||
position: absolute; left: 50%; top: 0; bottom: 0;
|
||
width: 2px; background: var(--border);
|
||
transform: translateX(-50%);
|
||
overflow: hidden;
|
||
}
|
||
.timeline-fill {
|
||
position: absolute; top: 0; left: 0; width: 100%;
|
||
background: var(--gradient);
|
||
height: 0%;
|
||
transition: height 0.3s ease-out;
|
||
box-shadow: 0 0 12px rgba(168, 85, 247, 0.5);
|
||
}
|
||
.tl-item {
|
||
position: relative;
|
||
display: grid; grid-template-columns: 1fr 80px 1fr;
|
||
align-items: center;
|
||
margin-bottom: 72px;
|
||
}
|
||
.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-base);
|
||
border: 2px solid var(--border);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-family: 'Instrument Serif', Georgia, serif;
|
||
font-style: italic;
|
||
font-size: 30px;
|
||
color: var(--text-soft);
|
||
box-shadow: 0 4px 16px rgba(99,102,241,0.1);
|
||
transition: all 0.5s var(--ease);
|
||
z-index: 2;
|
||
}
|
||
.tl-item.active .tl-dot {
|
||
background: var(--gradient);
|
||
color: #fff;
|
||
border-color: transparent;
|
||
transform: scale(1.15);
|
||
box-shadow: 0 20px 40px rgba(168, 85, 247, 0.4);
|
||
}
|
||
.tl-body {
|
||
background: var(--bg-elevated);
|
||
border: 1px solid var(--border);
|
||
padding: 32px 36px;
|
||
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); border-color: transparent; }
|
||
.tl-body h3 { font-size: 26px; 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: 12px;
|
||
}
|
||
|
||
/* ============= AI SECTION ============= */
|
||
.ai-section {
|
||
position: relative;
|
||
background: radial-gradient(ellipse at top, #1e1b4b 0%, #050510 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: #e9d5ff; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); }
|
||
.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.08);
|
||
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); line-height: 1.6; }
|
||
|
||
.ai-diagram {
|
||
position: relative;
|
||
aspect-ratio: 1; max-width: 500px; margin: 0 auto; width: 100%;
|
||
}
|
||
.ai-core {
|
||
position: absolute; top: 50%; left: 50%;
|
||
transform: translate(-50%,-50%);
|
||
width: 150px; height: 150px; 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 100px rgba(168,85,247,0.7), inset 0 0 50px 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: 290px; height: 290px; }
|
||
.ai-orb.o2 { width: 420px; height: 420px; animation-duration: 60s; animation-direction: reverse; }
|
||
.ai-node {
|
||
position: absolute;
|
||
width: 84px; height: 84px; border-radius: 20px;
|
||
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.15);
|
||
box-shadow: 0 20px 40px rgba(168,85,247,0.6);
|
||
}
|
||
.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: 2px;
|
||
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-base); 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.1);
|
||
}
|
||
.uc:hover .uc-ico span { filter: brightness(10); }
|
||
.uc h3 { font-size: 19px; 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: 1000px; 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) 10%, transparent), transparent 70%);
|
||
pointer-events: none;
|
||
}
|
||
.arch-layer {
|
||
position: relative;
|
||
display: flex; align-items: center; gap: 28px;
|
||
padding: 22px 28px;
|
||
background: var(--bg-base); 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: 8px 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 3D DECK ============= */
|
||
.t-deck-section {
|
||
position: relative;
|
||
padding: 140px 0;
|
||
overflow: hidden;
|
||
}
|
||
.t-deck {
|
||
position: relative;
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
height: 400px;
|
||
perspective: 1600px;
|
||
}
|
||
.t-slide {
|
||
position: absolute; inset: 0;
|
||
padding: 44px 42px;
|
||
background: var(--bg-elevated);
|
||
border: 1px solid var(--border);
|
||
border-radius: 24px;
|
||
backdrop-filter: blur(20px);
|
||
box-shadow: var(--shadow-lg);
|
||
transition: transform 0.7s var(--ease), opacity 0.5s;
|
||
display: flex; flex-direction: column; justify-content: space-between;
|
||
transform-style: preserve-3d;
|
||
}
|
||
[data-theme="dark"] .t-slide { background: #101020; }
|
||
.t-slide blockquote {
|
||
font-family: 'Instrument Serif', Georgia, serif;
|
||
font-size: clamp(24px, 2.5vw, 32px); font-style: italic;
|
||
line-height: 1.4;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
.t-slide-author { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
|
||
.t-avatar {
|
||
width: 48px; height: 48px; border-radius: 50%;
|
||
background: var(--gradient);
|
||
display: flex; align-items: center; justify-content: center;
|
||
color: #fff; font-weight: 800; font-size: 17px;
|
||
box-shadow: 0 8px 20px rgba(99,102,241,0.3);
|
||
flex-shrink: 0;
|
||
}
|
||
.t-slide-info strong { font-size: 14px; font-weight: 800; display: block; }
|
||
.t-slide-info span { font-size: 12px; color: var(--text-muted); }
|
||
.t-stars { color: #fbbf24; font-size: 13px; letter-spacing: 3px; margin-bottom: 16px; }
|
||
.t-deck-nav {
|
||
display: flex; justify-content: center; gap: 10px; margin-top: 32px;
|
||
}
|
||
.t-dot {
|
||
width: 8px; height: 8px; border-radius: 50%;
|
||
background: var(--border);
|
||
transition: all 0.4s var(--ease);
|
||
cursor: pointer;
|
||
}
|
||
.t-dot.active { width: 32px; background: var(--gradient); border-radius: 4px; }
|
||
|
||
/* ============= FAQ ============= */
|
||
.faq-wrap { max-width: 800px; 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;
|
||
gap: 20px;
|
||
}
|
||
.faq summary::-webkit-details-marker { display: none; }
|
||
.faq summary:hover { color: var(--primary); }
|
||
.faq-plus {
|
||
width: 34px; height: 34px; 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 32px; font-size: 15px; color: var(--text-light); line-height: 1.8; }
|
||
|
||
/* ============= CTA ============= */
|
||
.cta-wrap {
|
||
padding: 120px 16px 0;
|
||
position: relative;
|
||
}
|
||
.cta {
|
||
padding: 120px 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-grid {
|
||
position: absolute; inset: 0;
|
||
background-image:
|
||
linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
|
||
background-size: 48px 48px;
|
||
mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000, transparent 80%);
|
||
-webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000, transparent 80%);
|
||
pointer-events: none;
|
||
}
|
||
.cta h2 {
|
||
font-size: clamp(44px, 7vw, 100px);
|
||
font-weight: 900;
|
||
letter-spacing: -0.05em;
|
||
line-height: 0.95;
|
||
margin-bottom: 24px;
|
||
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, 20px);
|
||
color: rgba(255,255,255,0.9);
|
||
max-width: 560px; margin: 0 auto 48px;
|
||
position: relative;
|
||
}
|
||
.cta-buttons {
|
||
display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
|
||
position: relative;
|
||
}
|
||
|
||
.confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 9000; }
|
||
|
||
/* ============= FOOTER ============= */
|
||
.footer {
|
||
padding: 100px 0 40px;
|
||
background: var(--bg);
|
||
border-top: 1px solid var(--border);
|
||
margin-top: 100px;
|
||
}
|
||
.footer-mega {
|
||
font-family: 'Instrument Serif', Georgia, serif;
|
||
font-style: italic;
|
||
font-size: clamp(80px, 14vw, 220px);
|
||
line-height: 0.9;
|
||
letter-spacing: -0.06em;
|
||
background: var(--gradient);
|
||
background-size: 200% 200%;
|
||
animation: grad-shift 10s ease infinite;
|
||
-webkit-background-clip: text; background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
text-align: center;
|
||
margin-bottom: 80px;
|
||
position: relative;
|
||
}
|
||
|
||
.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-base);
|
||
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: 40px; height: 40px; 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; }
|
||
|
||
/* ============= RESPONSIVE ============= */
|
||
@media (max-width: 1024px) {
|
||
.hero h1 { font-size: clamp(44px, 11vw, 80px); }
|
||
.hero-stack { perspective: 1500px; }
|
||
.stack-layer-2, .stack-layer-3 { display: none; }
|
||
.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: 40px; }
|
||
.stat-item + .stat-item::before { display: none; }
|
||
.timeline-line { 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; }
|
||
.pin-wrap { height: auto; }
|
||
.pin-container { position: static; height: auto; padding: 40px 0; }
|
||
.pin-track { flex-direction: column; padding: 0 20px; gap: 20px; transform: none !important; }
|
||
.pin-panel { width: auto; height: auto; grid-template-columns: 1fr; min-height: 520px; }
|
||
.device-body { grid-template-columns: 1fr; }
|
||
.device-side { display: none; }
|
||
.ornament { display: none; }
|
||
}
|
||
@media (max-width: 768px) {
|
||
.header { top: 8px; }
|
||
.header-inner { padding: 0 12px 0 18px; height: 52px; }
|
||
.nav { display: none; }
|
||
.btn-nav { padding: 8px 16px; font-size: 13px; }
|
||
.theme-toggle { width: 34px; height: 34px; }
|
||
.hero { padding: 120px 0 60px; min-height: auto; }
|
||
.hero h1 { font-size: clamp(40px, 12vw, 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; }
|
||
.ai-section { border-radius: 24px 24px 0 0; margin: 40px 8px 0; padding: 80px 0; }
|
||
.cta { margin: 0 4px; padding: 60px 20px; border-radius: 28px; }
|
||
.cta-wrap { padding: 80px 8px 0; }
|
||
.cta h2 { font-size: clamp(36px, 11vw, 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-stack { margin-top: 60px; }
|
||
.stack-device { transform: none; }
|
||
.pin-panel { padding: 28px; }
|
||
.t-slide { padding: 28px; }
|
||
.t-slide blockquote { font-size: 20px; }
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*, *::before, *::after {
|
||
animation-duration: 0.01s !important;
|
||
transition-duration: 0.01s !important;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="preloading">
|
||
|
||
<!-- Preloader -->
|
||
<div class="preloader" id="preloader">
|
||
<div class="preloader-logo"><span>invyone</span></div>
|
||
<div class="preloader-progress"></div>
|
||
</div>
|
||
|
||
<!-- Custom cursor -->
|
||
<div class="cursor-dot" id="cursorDot"></div>
|
||
<div class="cursor-ring" id="cursorRing"></div>
|
||
|
||
<!-- Scroll progress -->
|
||
<div class="scroll-progress" id="scrollProgress"></div>
|
||
|
||
<!-- Background layers -->
|
||
<div class="aurora">
|
||
<div class="aurora-blob aurora-1"></div>
|
||
<div class="aurora-blob aurora-2"></div>
|
||
<div class="aurora-blob aurora-3"></div>
|
||
</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" id="nav">
|
||
<div class="nav-indicator" id="navIndicator"></div>
|
||
<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"><span>솔루션 둘러보기 →</span></a>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ============= HERO ============= -->
|
||
<section class="hero">
|
||
<div class="hero-grid-bg"></div>
|
||
|
||
<div class="hero-ornaments">
|
||
<div class="ornament o1"><span class="ornament-dot"></span>/healthz → 200 OK</div>
|
||
<div class="ornament o2"><span class="ornament-dot"></span>AI 워크플로우 배포</div>
|
||
<div class="ornament o3"><span class="ornament-dot"></span>실시간 동기화 중</div>
|
||
<div class="ornament o4"><span class="ornament-dot"></span>997 / 997 화면 활성</div>
|
||
</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>
|
||
<span class="line" data-text="AI가 설계하는"></span>
|
||
<span class="line" data-text="엔터프라이즈를,"></span>
|
||
<span class="line serif-em"><span class="accent" data-text="코딩 없이 완성합니다"></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"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>설치 불필요</div>
|
||
<div class="hero-meta-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>신용카드 불필요</div>
|
||
<div class="hero-meta-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>14일 무료 체험</div>
|
||
<div class="hero-meta-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>99.9% 가동률</div>
|
||
</div>
|
||
|
||
<div class="hero-stack reveal d3" id="heroStack">
|
||
<div class="hero-stack-glow"></div>
|
||
<div class="stack-device" id="stackDevice">
|
||
<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% this 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>
|
||
|
||
<!-- Floating side panels -->
|
||
<div class="stack-layer-2">
|
||
<div class="device-chrome" style="padding:10px 14px;">
|
||
<div class="device-dot"></div><div class="device-dot"></div><div class="device-dot"></div>
|
||
</div>
|
||
<div class="mini-content">
|
||
<div class="mini-title">🤖 AI 에이전트</div>
|
||
<div class="mini-bubble">"제품 관리 화면 만들어줘"</div>
|
||
<div class="mini-row">UI 컴포넌트 생성 완료</div>
|
||
<div class="mini-row">CRUD API 바인딩</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stack-layer-3">
|
||
<div class="device-chrome" style="padding:10px 14px;">
|
||
<div class="device-dot"></div><div class="device-dot"></div><div class="device-dot"></div>
|
||
</div>
|
||
<div class="mini-content">
|
||
<div class="mini-title">🔗 외부 연계</div>
|
||
<div class="mini-row">REST API 연결됨</div>
|
||
<div class="mini-row">PostgreSQL 동기화</div>
|
||
<div class="mini-row">크롤러 스케줄됨</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============= MARQUEE ============= -->
|
||
<section class="marquee-section">
|
||
<p class="marquee-label">Trusted by industry leaders</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"><span data-count="997">0</span><sup>+</sup></div>
|
||
<div class="stat-desc">운영 중인 업무 화면</div>
|
||
<div class="stat-trend">↑ 매주 신규 배포</div>
|
||
</div>
|
||
<div class="stat-item reveal d1">
|
||
<div class="stat-num"><span data-count="85">0</span><sup>%</sup></div>
|
||
<div class="stat-desc">개발 기간 단축</div>
|
||
<div class="stat-trend">vs. 기존 개발 방식</div>
|
||
</div>
|
||
<div class="stat-item reveal d2">
|
||
<div class="stat-num"><span data-count="24">0</span><sup>/7</sup></div>
|
||
<div class="stat-desc">AI 에이전트 자동화</div>
|
||
<div class="stat-trend">↑ 자율 실행</div>
|
||
</div>
|
||
<div class="stat-item reveal d3">
|
||
<div class="stat-num"><span data-count="100">0</span><sup>%</sup></div>
|
||
<div class="stat-desc">로컬 데이터 보호</div>
|
||
<div class="stat-trend">↑ 외부 유출 제로</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============= HORIZONTAL PIN FEATURES ============= -->
|
||
<section class="section" id="features" style="padding-top:80px; padding-bottom:0;">
|
||
<div class="container">
|
||
<div class="section-head">
|
||
<div class="eyebrow reveal">Core features</div>
|
||
<h2 class="section-title reveal d1">4개의 축이<br><span class="accent">하나로 작동</span>합니다.</h2>
|
||
<p class="section-desc reveal d2">드래그앤드롭 설계, 외부 연계, 비주얼 로직, 그리고 실시간 대시보드. 하나의 플랫폼에서 연결되어 엔터프라이즈 시스템을 완성합니다.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pin-wrap" id="pinWrap">
|
||
<div class="pin-container">
|
||
<div class="pin-track" id="pinTrack">
|
||
|
||
<!-- Panel 1: Design -->
|
||
<div class="pin-panel" style="--pp-grad: linear-gradient(135deg, #6366f1, #a855f7);">
|
||
<div class="pin-panel-content">
|
||
<span class="pin-panel-num">01 / Design</span>
|
||
<h3>노코드로<br><span class="pp-accent">업무 화면 설계</span>.</h3>
|
||
<p>테이블, 입력폼, 버튼, 팝업을 드래그앤드롭으로 배치합니다. 실시간 미리보기로 즉시 결과를 확인하세요.</p>
|
||
<div class="pin-panel-features">
|
||
<div class="pp-feat"><div class="pp-feat-ico">✓</div>25+ UI 컴포넌트 기본 제공</div>
|
||
<div class="pp-feat"><div class="pp-feat-ico">✓</div>실시간 프리뷰, 저장 없이 확인</div>
|
||
<div class="pp-feat"><div class="pp-feat-ico">✓</div>PC·태블릿·모바일 자동 대응</div>
|
||
</div>
|
||
</div>
|
||
<div class="pin-panel-visual">
|
||
<div class="pv-builder">
|
||
<div class="pv-builder-toolbar">
|
||
<div class="pv-tool active">▢</div>
|
||
<div class="pv-tool">▤</div>
|
||
<div class="pv-tool">◉</div>
|
||
<div class="pv-tool">✎</div>
|
||
<div class="pv-tool">⊕</div>
|
||
</div>
|
||
<div class="pv-canvas">
|
||
<div class="pv-block pv-block-a">입력폼</div>
|
||
<div class="pv-block pv-block-b">테이블</div>
|
||
<div class="pv-block pv-block-c">차트</div>
|
||
<div class="pv-block pv-block-d">버튼</div>
|
||
<div class="pv-cursor">▲</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Panel 2: AI -->
|
||
<div class="pin-panel" style="--pp-grad: linear-gradient(135deg, #a855f7, #ec4899);">
|
||
<div class="pin-panel-content">
|
||
<span class="pin-panel-num">02 / AI Agent</span>
|
||
<h3>자연어 한 마디로<br><span class="pp-accent">시스템이 만들어집니다</span>.</h3>
|
||
<p>"제품 관리 화면 만들어줘" 같은 요청만으로 UI·로직·API·DB 스키마까지 자동 생성됩니다.</p>
|
||
<div class="pin-panel-features">
|
||
<div class="pp-feat"><div class="pp-feat-ico">✓</div>로컬 LLM, 데이터 외부 유출 제로</div>
|
||
<div class="pp-feat"><div class="pp-feat-ico">✓</div>자연어 명령 → 완성된 화면</div>
|
||
<div class="pp-feat"><div class="pp-feat-ico">✓</div>감사 로그 자동 기록</div>
|
||
</div>
|
||
</div>
|
||
<div class="pin-panel-visual">
|
||
<div class="pv-chat">
|
||
<div class="pv-chat-msg user">제품 관리 시스템 만들어줘. 재고 추적도 포함해서.</div>
|
||
<div class="pv-chat-msg ai">알겠습니다. 설계 시작합니다.</div>
|
||
<div class="pv-chat-msg thinking">생성 중… (테이블 스키마 · CRUD · 재고 로직)</div>
|
||
<div class="pv-chat-msg result">
|
||
<strong>✦ 완료 (4.2초)</strong>
|
||
<ul>
|
||
<li>제품 테이블·입력폼 자동 생성</li>
|
||
<li>재고 실시간 트리거 연결</li>
|
||
<li>관리자 대시보드 구성</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Panel 3: Integration -->
|
||
<div class="pin-panel" style="--pp-grad: linear-gradient(135deg, #ec4899, #f97316);">
|
||
<div class="pin-panel-content">
|
||
<span class="pin-panel-num">03 / Integration</span>
|
||
<h3>외부 시스템을<br><span class="pp-accent">미들웨어 없이</span> 연결.</h3>
|
||
<p>REST API, GraphQL, 외부 데이터베이스, 웹 크롤링. 설정 화면에서 몇 번의 클릭으로 연결됩니다.</p>
|
||
<div class="pin-panel-features">
|
||
<div class="pp-feat"><div class="pp-feat-ico">✓</div>REST / GraphQL 자동 인증·페이징</div>
|
||
<div class="pp-feat"><div class="pp-feat-ico">✓</div>PostgreSQL, MySQL, Oracle, MSSQL</div>
|
||
<div class="pp-feat"><div class="pp-feat-ico">✓</div>크론 기반 크롤링 스케줄러</div>
|
||
</div>
|
||
</div>
|
||
<div class="pin-panel-visual">
|
||
<div class="pv-nodes">
|
||
<svg class="pv-node-svg" viewBox="0 0 400 400">
|
||
<defs>
|
||
<linearGradient id="lineGrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#6366f1"/><stop offset="1" stop-color="#ec4899"/></linearGradient>
|
||
</defs>
|
||
<g stroke="url(#lineGrad)" stroke-width="1.5" stroke-dasharray="4 4" fill="none" opacity="0.6">
|
||
<path d="M80,80 Q180,140 200,180"/>
|
||
<path d="M320,80 Q220,140 200,180"/>
|
||
<path d="M80,320 Q180,260 200,220"/>
|
||
<path d="M320,320 Q220,260 200,220"/>
|
||
</g>
|
||
<circle cx="80" cy="80" r="3" fill="#6366f1"><animate attributeName="r" values="3;8;3" dur="2s" repeatCount="indefinite"/></circle>
|
||
<circle cx="320" cy="80" r="3" fill="#a855f7"><animate attributeName="r" values="3;8;3" dur="2s" begin="0.5s" repeatCount="indefinite"/></circle>
|
||
<circle cx="80" cy="320" r="3" fill="#ec4899"><animate attributeName="r" values="3;8;3" dur="2s" begin="1s" repeatCount="indefinite"/></circle>
|
||
<circle cx="320" cy="320" r="3" fill="#f97316"><animate attributeName="r" values="3;8;3" dur="2s" begin="1.5s" repeatCount="indefinite"/></circle>
|
||
</svg>
|
||
<div class="pv-node-out pvn-1">REST API</div>
|
||
<div class="pv-node-out pvn-2">GraphQL</div>
|
||
<div class="pv-node-out pvn-3">외부 DB</div>
|
||
<div class="pv-node-out pvn-4">크롤러</div>
|
||
<div class="pv-node-center">invyone</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Panel 4: Dashboard -->
|
||
<div class="pin-panel" style="--pp-grad: linear-gradient(135deg, #f97316, #fbbf24);">
|
||
<div class="pin-panel-content">
|
||
<span class="pin-panel-num">04 / Dashboard</span>
|
||
<h3>실시간 대시보드와<br><span class="pp-accent">자동 레포트</span>.</h3>
|
||
<p>드래그앤드롭으로 나만의 대시보드를 구성하고, PDF·Excel 보고서를 스케줄에 맞춰 자동 발송합니다.</p>
|
||
<div class="pin-panel-features">
|
||
<div class="pp-feat"><div class="pp-feat-ico">✓</div>20+ 차트, KPI 위젯</div>
|
||
<div class="pp-feat"><div class="pp-feat-ico">✓</div>템플릿 기반 PDF/Excel 출력</div>
|
||
<div class="pp-feat"><div class="pp-feat-ico">✓</div>매일·매주·매월 자동 스케줄</div>
|
||
</div>
|
||
</div>
|
||
<div class="pin-panel-visual">
|
||
<div class="pv-dash">
|
||
<div class="pv-dash-row">
|
||
<div class="pv-stat-card"><small>매출</small><strong>₩128M</strong><span class="t">↑ 18.2%</span></div>
|
||
<div class="pv-stat-card"><small>주문</small><strong>3,420</strong><span class="t">↑ 6.1%</span></div>
|
||
<div class="pv-stat-card"><small>활성</small><strong>12,438</strong><span class="t">↑ 22.4%</span></div>
|
||
</div>
|
||
<div class="pv-big-chart">
|
||
<svg viewBox="0 0 400 160" preserveAspectRatio="none" style="width:100%;height:100%;">
|
||
<defs><linearGradient id="dchart" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#f97316" stop-opacity="0.3"/><stop offset="1" stop-color="#f97316" stop-opacity="0"/></linearGradient></defs>
|
||
<path d="M0,120 L40,100 L80,105 L120,80 L160,70 L200,50 L240,55 L280,35 L320,40 L360,25 L400,30 L400,160 L0,160 Z" fill="url(#dchart)"/>
|
||
<polyline points="0,120 40,100 80,105 120,80 160,70 200,50 240,55 280,35 320,40 360,25 400,30" fill="none" stroke="#f97316" stroke-width="2.5"/>
|
||
<g fill="#ec4899"><circle cx="40" cy="100" r="3"/><circle cx="120" cy="80" r="3"/><circle cx="200" cy="50" r="3"/><circle cx="280" cy="35" r="3"/><circle cx="360" cy="25" r="3"/></g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============= TIMELINE ============= -->
|
||
<section class="section">
|
||
<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-wrap" id="timeline">
|
||
<div class="timeline-line">
|
||
<div class="timeline-fill" id="timelineFill"></div>
|
||
</div>
|
||
|
||
<div class="tl-item" data-step="1">
|
||
<div class="tl-body">
|
||
<span class="tl-tag">STEP 01</span>
|
||
<h3>드래그앤드롭 설계</h3>
|
||
<p>UI 컴포넌트를 배치하고 데이터 소스를 연결합니다. 실시간 프리뷰로 바로 확인하며, 반응형 레이아웃은 자동으로 대응됩니다.</p>
|
||
</div>
|
||
<div class="tl-dot">01</div>
|
||
<div class="tl-spacer"></div>
|
||
</div>
|
||
<div class="tl-item" data-step="2">
|
||
<div class="tl-spacer"></div>
|
||
<div class="tl-dot">02</div>
|
||
<div class="tl-body">
|
||
<span class="tl-tag">STEP 02</span>
|
||
<h3>AI 에이전트가 로직 완성</h3>
|
||
<p>"승인 프로세스 추가해줘" 같은 자연어 명령만으로 비즈니스 로직, 워크플로우, 검증 규칙이 자동으로 구성됩니다.</p>
|
||
</div>
|
||
</div>
|
||
<div class="tl-item" data-step="3">
|
||
<div class="tl-body">
|
||
<span class="tl-tag">STEP 03</span>
|
||
<h3>원클릭 배포·운영</h3>
|
||
<p>Kubernetes 기반 인프라에 실시간 롤링 배포. 무중단으로 업데이트하며, 사용량과 성능을 한 화면에서 모니터링합니다.</p>
|
||
</div>
|
||
<div class="tl-dot">03</div>
|
||
<div class="tl-spacer"></div>
|
||
</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;">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"><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"><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"><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"><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"><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"><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 3D DECK ============= -->
|
||
<section class="t-deck-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 class="t-deck reveal" id="tDeck">
|
||
<div class="t-slide">
|
||
<div>
|
||
<div class="t-stars">★★★★★</div>
|
||
<blockquote>"개발팀 없이도 사내 ERP 시스템을 2주 만에 구축했습니다. AI 에이전트 기능이 정말 혁신적이에요."</blockquote>
|
||
</div>
|
||
<div class="t-slide-author">
|
||
<div class="t-avatar">K</div>
|
||
<div class="t-slide-info"><strong>김 부장</strong><span>제조업 · IT기획팀</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="t-slide">
|
||
<div>
|
||
<div class="t-stars">★★★★★</div>
|
||
<blockquote>"노코드라서 처음엔 반신반의했는데, 기존 레거시보다 훨씬 유연하고 빠릅니다. 변경이 즐거워요."</blockquote>
|
||
</div>
|
||
<div class="t-slide-author">
|
||
<div class="t-avatar">P</div>
|
||
<div class="t-slide-info"><strong>박 차장</strong><span>물류업 · 경영지원</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="t-slide">
|
||
<div>
|
||
<div class="t-stars">★★★★★</div>
|
||
<blockquote>"외부 API 연계가 이렇게 쉬울 줄 몰랐어요. 크롤링·DB 연동까지 설정만으로 끝나요."</blockquote>
|
||
</div>
|
||
<div class="t-slide-author">
|
||
<div class="t-avatar">L</div>
|
||
<div class="t-slide-info"><strong>이 과장</strong><span>IT서비스 · 개발팀</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="t-slide">
|
||
<div>
|
||
<div class="t-stars">★★★★★</div>
|
||
<blockquote>"경영진 보고용 리포트를 매월 수동 작성했는데, 이제 스케줄로 자동 발송됩니다. 시간이 2배로 늘어난 느낌."</blockquote>
|
||
</div>
|
||
<div class="t-slide-author">
|
||
<div class="t-avatar">J</div>
|
||
<div class="t-slide-info"><strong>정 팀장</strong><span>유통업 · 재무팀</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="t-slide">
|
||
<div>
|
||
<div class="t-stars">★★★★★</div>
|
||
<blockquote>"AI가 만든 화면을 현업이 그대로 수정하고 운영합니다. 진짜 노코드가 뭔지 실감했어요."</blockquote>
|
||
</div>
|
||
<div class="t-slide-author">
|
||
<div class="t-avatar">S</div>
|
||
<div class="t-slide-info"><strong>서 부장</strong><span>금융업 · 디지털혁신팀</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="t-deck-nav" id="tDeckNav"></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="cta-wrap container">
|
||
<section class="cta reveal">
|
||
<div class="cta-grid"></div>
|
||
<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" id="ctaBtn">솔루션 둘러보기 <span class="arrow">→</span></a>
|
||
<a href="mailto:admin@coa-soft.com" class="btn btn-ghost btn-xl">문의하기</a>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<canvas class="confetti-canvas" id="confettiCanvas"></canvas>
|
||
|
||
<!-- ============= FOOTER ============= -->
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="footer-mega">invyone.</div>
|
||
|
||
<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="#features">외부 연계</a></li>
|
||
<li><a href="#features">워크플로우</a></li>
|
||
<li><a href="#features">대시보드</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:admin@coa-soft.com">기술 문의</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>
|
||
(function() {
|
||
'use strict';
|
||
|
||
// ========== Theme ==========
|
||
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', () => {
|
||
setTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark');
|
||
});
|
||
|
||
// ========== Preloader ==========
|
||
const preloader = document.getElementById('preloader');
|
||
window.addEventListener('load', () => {
|
||
setTimeout(() => {
|
||
preloader.classList.add('out');
|
||
document.body.classList.remove('preloading');
|
||
setTimeout(() => preloader.remove(), 1200);
|
||
startHeroChars();
|
||
}, 800);
|
||
});
|
||
// Fallback if load never fires
|
||
setTimeout(() => {
|
||
if (document.body.classList.contains('preloading')) {
|
||
preloader.classList.add('out');
|
||
document.body.classList.remove('preloading');
|
||
setTimeout(() => preloader.remove(), 1200);
|
||
startHeroChars();
|
||
}
|
||
}, 2500);
|
||
|
||
// ========== Touch detection ==========
|
||
const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
|
||
if (isTouch) document.body.classList.add('is-touch');
|
||
|
||
// ========== Custom cursor ==========
|
||
const dot = document.getElementById('cursorDot');
|
||
const ring = document.getElementById('cursorRing');
|
||
if (!isTouch) {
|
||
let mx = window.innerWidth / 2, my = window.innerHeight / 2;
|
||
let dx = mx, dy = my, rx = mx, ry = my;
|
||
window.addEventListener('mousemove', (e) => { mx = e.clientX; my = e.clientY; });
|
||
window.addEventListener('mousedown', () => document.body.classList.add('clicking'));
|
||
window.addEventListener('mouseup', () => document.body.classList.remove('clicking'));
|
||
const tick = () => {
|
||
dx += (mx - dx) * 0.5;
|
||
dy += (my - dy) * 0.5;
|
||
rx += (mx - rx) * 0.18;
|
||
ry += (my - ry) * 0.18;
|
||
dot.style.transform = `translate(${dx}px, ${dy}px) translate(-50%, -50%)`;
|
||
ring.style.transform = `translate(${rx}px, ${ry}px) translate(-50%, -50%)`;
|
||
requestAnimationFrame(tick);
|
||
};
|
||
tick();
|
||
|
||
// Hover states on interactive elements
|
||
document.querySelectorAll('a, button, .pv-block, .uc, .t-dot, .stat-item, .faq summary').forEach(el => {
|
||
el.addEventListener('mouseenter', () => document.body.classList.add('hovering'));
|
||
el.addEventListener('mouseleave', () => document.body.classList.remove('hovering'));
|
||
});
|
||
}
|
||
|
||
// ========== Scroll progress ==========
|
||
const scrollProgress = document.getElementById('scrollProgress');
|
||
const updateScrollProgress = () => {
|
||
const h = document.documentElement;
|
||
const scrolled = (h.scrollTop / (h.scrollHeight - h.clientHeight)) * 100;
|
||
scrollProgress.style.width = scrolled + '%';
|
||
};
|
||
window.addEventListener('scroll', updateScrollProgress, { passive: true });
|
||
updateScrollProgress();
|
||
|
||
// ========== Header scroll ==========
|
||
const header = document.getElementById('header');
|
||
const onScroll = () => header.classList.toggle('scrolled', window.scrollY > 30);
|
||
window.addEventListener('scroll', onScroll, { passive: true });
|
||
onScroll();
|
||
|
||
// ========== Nav liquid indicator ==========
|
||
const nav = document.getElementById('nav');
|
||
const navIndicator = document.getElementById('navIndicator');
|
||
if (nav && navIndicator) {
|
||
nav.querySelectorAll('a').forEach(a => {
|
||
a.addEventListener('mouseenter', () => {
|
||
const navR = nav.getBoundingClientRect();
|
||
const aR = a.getBoundingClientRect();
|
||
navIndicator.style.width = aR.width + 'px';
|
||
navIndicator.style.transform = `translateX(${aR.left - navR.left}px)`;
|
||
});
|
||
});
|
||
}
|
||
|
||
// ========== Hero char split animation ==========
|
||
function startHeroChars() {
|
||
const lines = document.querySelectorAll('.hero h1 .line');
|
||
const chars = [];
|
||
lines.forEach((line, lineIdx) => {
|
||
const text = line.dataset.text;
|
||
const accent = line.querySelector('[data-text]');
|
||
if (accent) {
|
||
const at = accent.dataset.text;
|
||
accent.innerHTML = '';
|
||
[...at].forEach(c => {
|
||
const s = document.createElement('span');
|
||
s.className = 'char';
|
||
s.textContent = c === ' ' ? '\u00A0' : c;
|
||
accent.appendChild(s);
|
||
chars.push(s);
|
||
});
|
||
} else if (text) {
|
||
line.innerHTML = '';
|
||
[...text].forEach(c => {
|
||
const s = document.createElement('span');
|
||
s.className = 'char';
|
||
s.textContent = c === ' ' ? '\u00A0' : c;
|
||
line.appendChild(s);
|
||
chars.push(s);
|
||
});
|
||
}
|
||
});
|
||
chars.forEach((c, i) => {
|
||
c.style.animationDelay = (i * 0.025) + 's';
|
||
requestAnimationFrame(() => c.classList.add('in'));
|
||
});
|
||
}
|
||
|
||
// ========== 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 (odometer-like) ==========
|
||
const ctrObserver = new IntersectionObserver((entries) => {
|
||
entries.forEach(e => {
|
||
if (!e.isIntersecting) return;
|
||
const el = e.target;
|
||
const target = parseInt(el.dataset.count, 10);
|
||
const dur = 1800;
|
||
const t0 = performance.now();
|
||
const tick = (t) => {
|
||
const p = Math.min((t - t0) / dur, 1);
|
||
const eased = 1 - Math.pow(1 - p, 4);
|
||
el.textContent = Math.floor(eased * target).toLocaleString();
|
||
if (p < 1) requestAnimationFrame(tick);
|
||
};
|
||
requestAnimationFrame(tick);
|
||
ctrObserver.unobserve(el);
|
||
});
|
||
}, { threshold: 0.4 });
|
||
document.querySelectorAll('[data-count]').forEach(el => ctrObserver.observe(el));
|
||
|
||
// ========== 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.2}px, ${y * 0.3}px)`;
|
||
});
|
||
btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
|
||
});
|
||
|
||
// ========== Hero device parallax ==========
|
||
const stackDevice = document.getElementById('stackDevice');
|
||
const heroStack = document.getElementById('heroStack');
|
||
if (stackDevice && heroStack && !isTouch) {
|
||
heroStack.addEventListener('mousemove', (e) => {
|
||
const r = heroStack.getBoundingClientRect();
|
||
const px = (e.clientX - r.left) / r.width - 0.5;
|
||
const py = (e.clientY - r.top) / r.height - 0.5;
|
||
stackDevice.style.transform = `rotateX(${8 - py * 12}deg) rotateY(${px * 12}deg)`;
|
||
});
|
||
heroStack.addEventListener('mouseleave', () => {
|
||
stackDevice.style.transform = 'rotateX(8deg) rotateY(0deg)';
|
||
});
|
||
}
|
||
|
||
// ========== Horizontal pin scroll ==========
|
||
const pinWrap = document.getElementById('pinWrap');
|
||
const pinTrack = document.getElementById('pinTrack');
|
||
if (pinWrap && pinTrack) {
|
||
const updatePin = () => {
|
||
if (window.innerWidth < 1024) { pinTrack.style.transform = ''; return; }
|
||
const r = pinWrap.getBoundingClientRect();
|
||
const total = pinWrap.offsetHeight - window.innerHeight;
|
||
const progress = Math.max(0, Math.min(1, -r.top / total));
|
||
const panels = pinTrack.querySelectorAll('.pin-panel');
|
||
const trackWidth = pinTrack.scrollWidth;
|
||
const maxTranslate = trackWidth - window.innerWidth + 40;
|
||
pinTrack.style.transform = `translateX(-${progress * maxTranslate}px)`;
|
||
};
|
||
window.addEventListener('scroll', updatePin, { passive: true });
|
||
window.addEventListener('resize', updatePin);
|
||
updatePin();
|
||
}
|
||
|
||
// ========== Timeline scroll-linked fill ==========
|
||
const timeline = document.getElementById('timeline');
|
||
const timelineFill = document.getElementById('timelineFill');
|
||
const tlItems = document.querySelectorAll('.tl-item');
|
||
if (timeline && timelineFill) {
|
||
const updateTimeline = () => {
|
||
const r = timeline.getBoundingClientRect();
|
||
const vh = window.innerHeight;
|
||
const start = vh * 0.7;
|
||
const end = vh * 0.2;
|
||
const total = r.height - (start - end);
|
||
const progressed = Math.max(0, Math.min(1, (start - r.top) / total));
|
||
timelineFill.style.height = (progressed * 100) + '%';
|
||
// Activate items
|
||
tlItems.forEach((item) => {
|
||
const ir = item.getBoundingClientRect();
|
||
const mid = ir.top + ir.height / 2;
|
||
item.classList.toggle('active', mid < vh * 0.6);
|
||
});
|
||
};
|
||
window.addEventListener('scroll', updateTimeline, { passive: true });
|
||
updateTimeline();
|
||
}
|
||
|
||
// ========== Testimonial 3D deck ==========
|
||
const tDeck = document.getElementById('tDeck');
|
||
const tDeckNav = document.getElementById('tDeckNav');
|
||
if (tDeck && tDeckNav) {
|
||
const slides = tDeck.querySelectorAll('.t-slide');
|
||
const total = slides.length;
|
||
let active = 0;
|
||
|
||
slides.forEach((_, i) => {
|
||
const d = document.createElement('div');
|
||
d.className = 't-dot';
|
||
if (i === 0) d.classList.add('active');
|
||
d.addEventListener('click', () => setActive(i));
|
||
tDeckNav.appendChild(d);
|
||
});
|
||
const dots = tDeckNav.querySelectorAll('.t-dot');
|
||
|
||
const setActive = (i) => {
|
||
active = (i + total) % total;
|
||
slides.forEach((slide, idx) => {
|
||
let offset = idx - active;
|
||
if (offset > total / 2) offset -= total;
|
||
if (offset < -total / 2) offset += total;
|
||
const abs = Math.abs(offset);
|
||
slide.style.transform = `translateX(${offset * 40}px) translateZ(${-abs * 120}px) rotateY(${offset * -8}deg)`;
|
||
slide.style.opacity = abs > 2 ? '0' : `${1 - abs * 0.3}`;
|
||
slide.style.zIndex = 10 - abs;
|
||
slide.style.pointerEvents = abs === 0 ? 'auto' : 'none';
|
||
});
|
||
dots.forEach((d, idx) => d.classList.toggle('active', idx === active));
|
||
};
|
||
|
||
setActive(0);
|
||
let autoTimer = setInterval(() => setActive(active + 1), 5000);
|
||
tDeck.addEventListener('mouseenter', () => clearInterval(autoTimer));
|
||
tDeck.addEventListener('mouseleave', () => { autoTimer = setInterval(() => setActive(active + 1), 5000); });
|
||
|
||
// Swipe support
|
||
let touchX = null;
|
||
tDeck.addEventListener('touchstart', e => { touchX = e.touches[0].clientX; });
|
||
tDeck.addEventListener('touchend', e => {
|
||
if (touchX == null) return;
|
||
const dx = e.changedTouches[0].clientX - touchX;
|
||
if (Math.abs(dx) > 50) setActive(active + (dx < 0 ? 1 : -1));
|
||
touchX = null;
|
||
});
|
||
}
|
||
|
||
// ========== 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 mouse = { x: -999, y: -999 };
|
||
|
||
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: 90 }, () => ({
|
||
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);
|
||
ctx.lineWidth = 0.5 * devicePixelRatio;
|
||
for (let i = 0; i < particles.length; i++) {
|
||
const p = particles[i];
|
||
// Mouse attraction
|
||
const mdx = mouse.x - p.x;
|
||
const mdy = mouse.y - p.y;
|
||
const md = Math.sqrt(mdx * mdx + mdy * mdy);
|
||
if (md < 160 * devicePixelRatio) {
|
||
p.vx += (mdx / md) * 0.01;
|
||
p.vy += (mdy / md) * 0.01;
|
||
}
|
||
for (let j = i + 1; j < particles.length; j++) {
|
||
const dx = p.x - particles[j].x;
|
||
const dy = p.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(p.x, p.y);
|
||
ctx.lineTo(particles[j].x, particles[j].y);
|
||
ctx.stroke();
|
||
}
|
||
}
|
||
}
|
||
particles.forEach(p => {
|
||
p.x += p.vx; p.y += p.vy;
|
||
p.vx *= 0.99; p.vy *= 0.99;
|
||
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);
|
||
};
|
||
|
||
canvas.addEventListener('mousemove', (e) => {
|
||
const r = canvas.getBoundingClientRect();
|
||
mouse.x = (e.clientX - r.left) * devicePixelRatio;
|
||
mouse.y = (e.clientY - r.top) * devicePixelRatio;
|
||
});
|
||
canvas.addEventListener('mouseleave', () => { mouse.x = mouse.y = -9999; });
|
||
|
||
resize();
|
||
reset();
|
||
tick();
|
||
window.addEventListener('resize', () => { resize(); reset(); });
|
||
})();
|
||
|
||
// ========== Confetti on CTA ==========
|
||
const confettiCanvas = document.getElementById('confettiCanvas');
|
||
const cctx = confettiCanvas.getContext('2d');
|
||
const ctaBtn = document.getElementById('ctaBtn');
|
||
let confetti = [];
|
||
|
||
const resizeConfetti = () => {
|
||
confettiCanvas.width = window.innerWidth;
|
||
confettiCanvas.height = window.innerHeight;
|
||
};
|
||
resizeConfetti();
|
||
window.addEventListener('resize', resizeConfetti);
|
||
|
||
function burstConfetti(x, y) {
|
||
const colors = ['#6366f1', '#a855f7', '#ec4899', '#f97316', '#fbbf24', '#34d399'];
|
||
for (let i = 0; i < 140; i++) {
|
||
confetti.push({
|
||
x, y,
|
||
vx: (Math.random() - 0.5) * 14,
|
||
vy: -Math.random() * 14 - 4,
|
||
w: Math.random() * 8 + 4,
|
||
h: Math.random() * 4 + 3,
|
||
rot: Math.random() * Math.PI,
|
||
vr: (Math.random() - 0.5) * 0.3,
|
||
color: colors[Math.floor(Math.random() * colors.length)],
|
||
life: 1
|
||
});
|
||
}
|
||
}
|
||
|
||
function tickConfetti() {
|
||
cctx.clearRect(0, 0, confettiCanvas.width, confettiCanvas.height);
|
||
confetti = confetti.filter(c => {
|
||
c.vy += 0.35;
|
||
c.vx *= 0.99;
|
||
c.x += c.vx;
|
||
c.y += c.vy;
|
||
c.rot += c.vr;
|
||
c.life -= 0.008;
|
||
if (c.life > 0 && c.y < confettiCanvas.height + 40) {
|
||
cctx.save();
|
||
cctx.translate(c.x, c.y);
|
||
cctx.rotate(c.rot);
|
||
cctx.globalAlpha = c.life;
|
||
cctx.fillStyle = c.color;
|
||
cctx.fillRect(-c.w / 2, -c.h / 2, c.w, c.h);
|
||
cctx.restore();
|
||
return true;
|
||
}
|
||
return false;
|
||
});
|
||
if (confetti.length > 0) requestAnimationFrame(tickConfetti);
|
||
}
|
||
|
||
if (ctaBtn) {
|
||
ctaBtn.addEventListener('mouseenter', (e) => {
|
||
const r = ctaBtn.getBoundingClientRect();
|
||
burstConfetti(r.left + r.width / 2, r.top + r.height / 2);
|
||
if (confetti.length > 0) tickConfetti();
|
||
});
|
||
}
|
||
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|