chpark
79c1d4ac82
Build & Deploy Homepage / build-and-deploy (push) Successful in 9s
- 반응형 랜딩 페이지 (hero, features, how-it-works, solutions, AI agent, use cases, architecture, testimonials, FAQ, CTA) - 모든 체험/로그인 CTA는 https://solution.invyone.com/login 으로 연결 - Dockerfile + nginx 설정으로 정적 파일 서빙 - k8s manifests (namespace/deployment/service NodePort 30082) - Gitea Actions 자동 배포 워크플로우
1712 lines
78 KiB
HTML
1712 lines
78 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>invyone — AI 에이전트 기반 노코드 엔터프라이즈 플랫폼</title>
|
|
<meta name="description" content="드래그앤드롭으로 업무 화면을 설계하고, AI 에이전트가 데이터 연계와 비즈니스 로직을 자동 완성하는 차세대 엔터프라이즈 플랫폼.">
|
|
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%236366f1'/><stop offset='.5' stop-color='%23a855f7'/><stop offset='1' stop-color='%23ec4899'/></linearGradient></defs><path d='M-28,-20 C-28,-32 -16,-38 -6,-32 C4,-26 2,-14 10,-14 C18,-14 20,-24 30,-20 C40,-16 34,-4 30,4 C26,12 18,14 10,14 C2,14 4,26 -6,32 C-16,38 -28,32 -28,20 C-28,12 -20,10 -20,0 C-20,-10 -28,-12 -28,-20Z' transform='translate(20,20) scale(.58)' fill='url(%23g)'/></svg>">
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Noto+Sans+KR:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');
|
|
|
|
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
:root {
|
|
--primary: #6366f1;
|
|
--primary-dark: #4f46e5;
|
|
--primary-light: #a855f7;
|
|
--accent: #ec4899;
|
|
--accent2: #f97316;
|
|
--cyan: #06b6d4;
|
|
--bg: #ffffff;
|
|
--bg-soft: #faf8ff;
|
|
--bg-muted: #f5f3ff;
|
|
--bg-dark: #0b0b1a;
|
|
--text: #1a1a2e;
|
|
--text-light: #64748b;
|
|
--text-muted: #94a3b8;
|
|
--border: #e9e7f5;
|
|
--shadow-sm: 0 1px 3px rgba(15,15,50,0.06);
|
|
--shadow: 0 10px 40px rgba(99,102,241,0.10);
|
|
--shadow-lg: 0 24px 80px rgba(99,102,241,0.18);
|
|
--radius: 16px;
|
|
--radius-lg: 24px;
|
|
--max-width: 1240px;
|
|
--transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
--gradient: linear-gradient(135deg,#6366f1 0%,#a855f7 40%,#ec4899 70%,#f97316 100%);
|
|
--gradient-soft: linear-gradient(135deg,#eef2ff 0%,#faf5ff 50%,#fdf2f8 100%);
|
|
}
|
|
|
|
html { scroll-behavior: smooth; }
|
|
body {
|
|
font-family: 'Inter','Noto Sans KR',-apple-system,BlinkMacSystemFont,sans-serif;
|
|
color: var(--text);
|
|
background: var(--bg);
|
|
line-height: 1.7;
|
|
-webkit-font-smoothing: antialiased;
|
|
overflow-x: hidden;
|
|
}
|
|
a { text-decoration: none; color: inherit; }
|
|
img { max-width: 100%; display: block; }
|
|
button { font-family: inherit; }
|
|
|
|
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 40px; }
|
|
|
|
/* ===== Buttons ===== */
|
|
.btn {
|
|
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
|
padding: 12px 26px; border-radius: 50px; font-size: 15px; font-weight: 600;
|
|
cursor: pointer; border: none; transition: all var(--transition);
|
|
white-space: nowrap;
|
|
}
|
|
.btn-primary {
|
|
background: var(--gradient); color: #fff; background-size: 200% 200%;
|
|
box-shadow: 0 6px 24px rgba(99,102,241,0.35);
|
|
animation: gradShift 6s ease infinite;
|
|
}
|
|
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(168,85,247,0.45); }
|
|
.btn-outline {
|
|
background: transparent; color: var(--text);
|
|
border: 1.5px solid var(--border); backdrop-filter: blur(10px);
|
|
}
|
|
.btn-outline:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
|
|
.btn-ghost { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.2); }
|
|
.btn-ghost:hover { background: rgba(255,255,255,0.15); }
|
|
.btn-white { background: #fff; color: var(--primary); box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
|
|
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,0.22); }
|
|
.btn-lg { padding: 16px 34px; font-size: 16px; }
|
|
.btn .arrow { transition: transform var(--transition); }
|
|
.btn:hover .arrow { transform: translateX(4px); }
|
|
|
|
@keyframes gradShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
|
|
|
|
/* ===== Header ===== */
|
|
.header {
|
|
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
|
|
background: rgba(255,255,255,0.7);
|
|
backdrop-filter: saturate(180%) blur(24px);
|
|
-webkit-backdrop-filter: saturate(180%) blur(24px);
|
|
border-bottom: 1px solid transparent;
|
|
transition: var(--transition);
|
|
}
|
|
.header.scrolled {
|
|
background: rgba(255,255,255,0.92);
|
|
border-bottom-color: var(--border);
|
|
box-shadow: 0 6px 24px rgba(15,15,50,0.04);
|
|
}
|
|
.header-inner {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
height: 68px; padding: 0 40px;
|
|
}
|
|
.header-logo {
|
|
display: flex; align-items: center; gap: 10px;
|
|
font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -0.5px;
|
|
}
|
|
.header-logo svg { width: 34px; height: 34px; }
|
|
.header-nav { display: flex; align-items: center; gap: 4px; }
|
|
.header-nav > a, .header-nav > .nav-dd > a {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
padding: 10px 16px; border-radius: 10px;
|
|
font-size: 15px; font-weight: 500; color: var(--text);
|
|
transition: all 0.2s; cursor: pointer;
|
|
}
|
|
.header-nav > a:hover, .header-nav > .nav-dd > a:hover,
|
|
.header-nav > .nav-dd:hover > a { color: var(--primary); background: var(--bg-muted); }
|
|
.nav-arrow {
|
|
display: inline-block; font-size: 9px; color: var(--text-muted);
|
|
transition: transform 0.25s; margin-left: 2px;
|
|
}
|
|
.nav-dd { position: relative; }
|
|
.nav-dd:hover .nav-arrow { transform: rotate(180deg); color: var(--primary); }
|
|
|
|
.header-right { display: flex; align-items: center; gap: 10px; }
|
|
.btn-login {
|
|
padding: 10px 22px; border-radius: 50px; font-size: 14px; font-weight: 600;
|
|
color: var(--text); background: transparent;
|
|
cursor: pointer; transition: all 0.2s;
|
|
}
|
|
.btn-login:hover { color: var(--primary); }
|
|
.btn-trial {
|
|
padding: 10px 22px; border-radius: 50px; font-size: 14px; font-weight: 600;
|
|
color: #fff; background: var(--gradient); background-size: 200% 200%;
|
|
animation: gradShift 6s ease infinite;
|
|
border: none; cursor: pointer;
|
|
box-shadow: 0 4px 16px rgba(99,102,241,0.3);
|
|
transition: all 0.2s;
|
|
}
|
|
.btn-trial:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(168,85,247,0.4); }
|
|
|
|
.mega-panel {
|
|
position: fixed; top: 68px; left: 0; right: 0;
|
|
background: rgba(255,255,255,0.95);
|
|
backdrop-filter: blur(24px);
|
|
border-top: 1px solid var(--border);
|
|
box-shadow: 0 24px 60px rgba(15,15,50,0.08);
|
|
padding: 40px 0 48px;
|
|
opacity: 0; visibility: hidden; pointer-events: none;
|
|
transform: translateY(-8px);
|
|
transition: opacity 0.2s, visibility 0.2s, transform 0.25s;
|
|
z-index: 999;
|
|
}
|
|
.nav-dd:hover .mega-panel { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
|
|
.mega-inner {
|
|
max-width: var(--max-width); margin: 0 auto; padding: 0 40px;
|
|
display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
|
|
}
|
|
.mega-cat-label {
|
|
display: inline-block;
|
|
font-size: 11px; font-weight: 800; letter-spacing: 2px;
|
|
text-transform: uppercase; color: var(--primary);
|
|
margin-bottom: 16px;
|
|
}
|
|
.mega-link {
|
|
display: flex; align-items: center; gap: 14px;
|
|
padding: 12px 10px; border-radius: 12px;
|
|
color: var(--text); transition: all 0.2s;
|
|
}
|
|
.mega-link:hover { background: var(--bg-muted); transform: translateX(2px); }
|
|
.mega-link-icon {
|
|
width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 16px;
|
|
background: var(--bg-muted);
|
|
transition: all 0.2s;
|
|
}
|
|
.mega-link:hover .mega-link-icon { background: var(--gradient); }
|
|
.mega-link:hover .mega-link-icon span { filter: brightness(0) invert(1); }
|
|
.mega-link-title { font-size: 14px; font-weight: 700; display: block; }
|
|
.mega-link-desc { font-size: 12px; color: var(--text-muted); display: block; margin-top: 2px; }
|
|
|
|
.mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
|
|
.mobile-toggle span { display: block; width: 22px; height: 2px; background: var(--text); margin: 4px 0; transition: var(--transition); border-radius: 2px; }
|
|
|
|
/* ===== Hero ===== */
|
|
.hero {
|
|
position: relative;
|
|
padding: 140px 0 100px;
|
|
overflow: hidden;
|
|
background: var(--bg);
|
|
}
|
|
.hero-bg {
|
|
position: absolute; inset: 0;
|
|
background:
|
|
radial-gradient(ellipse 60% 50% at 20% 20%, rgba(99,102,241,0.12), transparent 60%),
|
|
radial-gradient(ellipse 50% 60% at 80% 10%, rgba(236,72,153,0.10), transparent 60%),
|
|
radial-gradient(ellipse 40% 40% at 50% 90%, rgba(249,115,22,0.08), transparent 60%),
|
|
linear-gradient(180deg,#faf8ff 0%,#ffffff 100%);
|
|
z-index: 0;
|
|
}
|
|
.hero-grid {
|
|
position: absolute; inset: 0;
|
|
background-image:
|
|
linear-gradient(rgba(99,102,241,0.06) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(99,102,241,0.06) 1px, transparent 1px);
|
|
background-size: 48px 48px;
|
|
mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 85%);
|
|
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 85%);
|
|
z-index: 0;
|
|
}
|
|
.blob {
|
|
position: absolute; border-radius: 50%;
|
|
filter: blur(60px); opacity: 0.55;
|
|
z-index: 0; pointer-events: none;
|
|
animation: float 14s ease-in-out infinite;
|
|
}
|
|
.blob.b1 { width: 420px; height: 420px; top: -80px; left: -100px; background: radial-gradient(circle,#818cf8,transparent 60%); }
|
|
.blob.b2 { width: 520px; height: 520px; top: 20%; right: -160px; background: radial-gradient(circle,#f0abfc,transparent 60%); animation-delay: -4s; }
|
|
.blob.b3 { width: 380px; height: 380px; bottom: -80px; left: 30%; background: radial-gradient(circle,#fdba74,transparent 60%); animation-delay: -8s; opacity: 0.35; }
|
|
@keyframes float {
|
|
0%,100% { transform: translate(0,0) scale(1); }
|
|
33% { transform: translate(30px,-20px) scale(1.05); }
|
|
66% { transform: translate(-20px,30px) scale(0.95); }
|
|
}
|
|
|
|
.hero-inner {
|
|
position: relative; z-index: 1;
|
|
max-width: var(--max-width); margin: 0 auto; padding: 0 40px;
|
|
display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px;
|
|
align-items: center;
|
|
}
|
|
.hero-badge {
|
|
display: inline-flex; align-items: center; gap: 10px;
|
|
background: rgba(255,255,255,0.8);
|
|
border: 1px solid rgba(168,85,247,0.2);
|
|
padding: 8px 18px; border-radius: 50px;
|
|
font-size: 13px; font-weight: 600; color: var(--primary);
|
|
margin-bottom: 24px;
|
|
backdrop-filter: blur(10px);
|
|
box-shadow: 0 4px 16px rgba(99,102,241,0.08);
|
|
}
|
|
.hero-badge-dot {
|
|
width: 8px; height: 8px; border-radius: 50%;
|
|
background: var(--primary);
|
|
box-shadow: 0 0 0 0 rgba(99,102,241,0.6);
|
|
animation: pulseDot 2s infinite;
|
|
}
|
|
@keyframes pulseDot {
|
|
0% { box-shadow: 0 0 0 0 rgba(99,102,241,0.6); }
|
|
70% { box-shadow: 0 0 0 10px rgba(99,102,241,0); }
|
|
100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
|
|
}
|
|
.hero h1 {
|
|
font-size: clamp(40px, 5.2vw, 62px); font-weight: 800; line-height: 1.1;
|
|
letter-spacing: -2px; margin-bottom: 24px;
|
|
}
|
|
.gradient-text {
|
|
background: var(--gradient); background-size: 200% 200%;
|
|
-webkit-background-clip: text; background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
animation: gradShift 6s ease infinite;
|
|
}
|
|
.hero-desc {
|
|
font-size: 19px; color: var(--text-light); line-height: 1.75;
|
|
margin-bottom: 36px; max-width: 540px;
|
|
}
|
|
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
|
|
.hero-meta {
|
|
display: flex; gap: 24px; align-items: center;
|
|
margin-top: 24px; font-size: 13px; color: var(--text-muted);
|
|
flex-wrap: wrap;
|
|
}
|
|
.hero-meta-item { display: flex; align-items: center; gap: 6px; }
|
|
.hero-meta-check { color: #22c55e; }
|
|
|
|
.hero-visual { position: relative; }
|
|
.hero-mockup {
|
|
position: relative; width: 100%; max-width: 580px; margin: 0 auto;
|
|
background: #fff;
|
|
border-radius: 18px;
|
|
box-shadow: 0 40px 100px -20px rgba(79,70,229,0.35), 0 0 0 1px rgba(0,0,0,0.04);
|
|
overflow: hidden;
|
|
transform: perspective(1200px) rotateX(4deg) rotateY(-8deg);
|
|
transition: transform 0.5s;
|
|
}
|
|
.hero-mockup:hover { transform: perspective(1200px) rotateX(0) rotateY(0); }
|
|
.mockup-chrome {
|
|
display: flex; align-items: center; gap: 8px;
|
|
padding: 12px 16px;
|
|
background: linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.mockup-dot { width: 11px; height: 11px; border-radius: 50%; }
|
|
.mockup-dot:nth-child(1) { background: #ff5f57; }
|
|
.mockup-dot:nth-child(2) { background: #febd2e; }
|
|
.mockup-dot:nth-child(3) { background: #28c840; }
|
|
.mockup-url {
|
|
margin-left: 14px; padding: 4px 12px;
|
|
background: #fff; border-radius: 6px;
|
|
font-size: 11px; color: var(--text-muted);
|
|
font-family: 'JetBrains Mono', monospace;
|
|
display: flex; align-items: center; gap: 6px;
|
|
flex: 1; max-width: 280px;
|
|
}
|
|
.mockup-url::before { content: '🔒'; font-size: 10px; }
|
|
.mockup-body { padding: 18px; background: #fafbff; min-height: 360px; display: flex; gap: 14px; }
|
|
.mockup-sidebar {
|
|
width: 160px; background: #fff; border-radius: 10px;
|
|
padding: 12px 10px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
|
}
|
|
.mockup-sb-logo {
|
|
display: flex; align-items: center; gap: 6px;
|
|
padding: 4px 8px 12px;
|
|
border-bottom: 1px solid #f1f5f9; margin-bottom: 8px;
|
|
font-size: 11px; font-weight: 800; color: var(--text);
|
|
}
|
|
.mockup-sb-logo::before {
|
|
content: ''; width: 14px; height: 14px; border-radius: 4px;
|
|
background: var(--gradient);
|
|
}
|
|
.mockup-sb-item {
|
|
display: flex; align-items: center; gap: 8px;
|
|
padding: 7px 8px; border-radius: 6px; margin-bottom: 2px;
|
|
font-size: 11px; color: var(--text-light); font-weight: 500;
|
|
transition: all 0.2s;
|
|
}
|
|
.mockup-sb-item.active { background: var(--bg-muted); color: var(--primary); font-weight: 700; }
|
|
.mockup-sb-icon {
|
|
width: 16px; height: 16px; border-radius: 4px;
|
|
background: var(--border); flex-shrink: 0;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 9px;
|
|
}
|
|
.mockup-sb-item.active .mockup-sb-icon { background: var(--gradient); color: #fff; }
|
|
.mockup-content { flex: 1; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
|
|
.mockup-topbar {
|
|
display: flex; align-items: center; gap: 10px;
|
|
padding: 10px 14px; background: #fff; border-radius: 10px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
|
}
|
|
.mockup-title { font-size: 12px; font-weight: 800; flex: 1; }
|
|
.mockup-pill {
|
|
padding: 3px 10px; border-radius: 50px;
|
|
background: linear-gradient(135deg,rgba(99,102,241,0.12),rgba(168,85,247,0.12));
|
|
color: var(--primary); font-size: 10px; font-weight: 700;
|
|
display: flex; align-items: center; gap: 4px;
|
|
}
|
|
.mockup-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); }
|
|
.mockup-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
|
|
.mockup-stat {
|
|
background: #fff; border-radius: 10px; padding: 12px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
|
}
|
|
.mockup-stat-label { font-size: 9px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
|
|
.mockup-stat-value { font-size: 18px; font-weight: 800; margin-top: 4px; letter-spacing: -0.5px; }
|
|
.mockup-stat-chart { height: 3px; border-radius: 2px; margin-top: 8px; background: var(--border); overflow: hidden; }
|
|
.mockup-stat-chart::after {
|
|
content: ''; display: block; height: 100%;
|
|
background: var(--gradient); width: 70%;
|
|
animation: fillBar 2s ease-out;
|
|
}
|
|
@keyframes fillBar { from { width: 0; } }
|
|
.mockup-chart {
|
|
flex: 1; background: #fff; border-radius: 10px; padding: 14px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
|
display: flex; flex-direction: column; gap: 10px;
|
|
min-height: 140px;
|
|
}
|
|
.mockup-chart-header { display: flex; justify-content: space-between; align-items: center; }
|
|
.mockup-chart-title { font-size: 11px; font-weight: 700; }
|
|
.mockup-chart-legend { display: flex; gap: 8px; }
|
|
.mockup-legend-item { font-size: 9px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
|
|
.mockup-legend-dot { width: 8px; height: 8px; border-radius: 50%; }
|
|
.mockup-chart-svg { flex: 1; width: 100%; }
|
|
|
|
.floating-chip {
|
|
position: absolute;
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
padding: 12px 16px;
|
|
box-shadow: 0 12px 40px rgba(99,102,241,0.2), 0 0 0 1px rgba(99,102,241,0.06);
|
|
display: flex; align-items: center; gap: 10px;
|
|
font-size: 12px; font-weight: 600;
|
|
animation: floatChip 4s ease-in-out infinite;
|
|
}
|
|
.floating-chip .chip-icon {
|
|
width: 28px; height: 28px; border-radius: 8px;
|
|
background: var(--gradient); color: #fff;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 14px;
|
|
}
|
|
.chip-sub { font-size: 10px; color: var(--text-muted); font-weight: 500; display: block; }
|
|
.chip-1 { top: 10%; left: -30px; animation-delay: 0s; }
|
|
.chip-2 { bottom: 18%; right: -40px; animation-delay: -1.5s; }
|
|
.chip-3 { top: 52%; left: -50px; animation-delay: -3s; }
|
|
@keyframes floatChip {
|
|
0%,100% { transform: translateY(0); }
|
|
50% { transform: translateY(-10px); }
|
|
}
|
|
|
|
/* ===== Logos marquee ===== */
|
|
.marquee-section {
|
|
padding: 48px 0;
|
|
background: #fff;
|
|
border-top: 1px solid var(--border);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.marquee-label {
|
|
text-align: center; font-size: 13px; font-weight: 600;
|
|
color: var(--text-muted); letter-spacing: 2px; text-transform: uppercase;
|
|
margin-bottom: 28px;
|
|
}
|
|
.marquee {
|
|
overflow: hidden;
|
|
mask-image: linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
|
|
-webkit-mask-image: linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
|
|
}
|
|
.marquee-track {
|
|
display: flex; gap: 64px;
|
|
animation: marqueeScroll 28s linear infinite;
|
|
width: max-content;
|
|
}
|
|
.marquee-logo {
|
|
display: flex; align-items: center; gap: 10px;
|
|
font-size: 22px; font-weight: 800; color: var(--text-light);
|
|
opacity: 0.55; letter-spacing: -0.5px;
|
|
transition: opacity 0.3s;
|
|
}
|
|
.marquee-logo:hover { opacity: 1; color: var(--primary); }
|
|
.marquee-logo .dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; opacity: 0.3; }
|
|
@keyframes marqueeScroll {
|
|
from { transform: translateX(0); }
|
|
to { transform: translateX(-50%); }
|
|
}
|
|
|
|
/* ===== Stats ===== */
|
|
.stats-section { padding: 80px 0 40px; background: #fff; }
|
|
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
|
|
.stat-card {
|
|
background: var(--gradient-soft);
|
|
border: 1px solid rgba(168,85,247,0.08);
|
|
border-radius: var(--radius-lg);
|
|
padding: 32px 28px;
|
|
text-align: left;
|
|
transition: all var(--transition);
|
|
position: relative; overflow: hidden;
|
|
}
|
|
.stat-card::before {
|
|
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
|
|
background: var(--gradient);
|
|
}
|
|
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
|
|
.stat-number {
|
|
font-size: 48px; font-weight: 800;
|
|
background: var(--gradient); -webkit-background-clip: text; background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
letter-spacing: -1.5px; line-height: 1;
|
|
}
|
|
.stat-suffix { font-size: 24px; font-weight: 700; color: var(--primary); margin-left: 2px; }
|
|
.stat-label { font-size: 14px; color: var(--text-light); margin-top: 12px; font-weight: 500; line-height: 1.5; }
|
|
|
|
/* ===== Section headers ===== */
|
|
.section-head { text-align: center; margin-bottom: 60px; }
|
|
.section-badge {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
padding: 6px 16px; border-radius: 50px;
|
|
background: var(--bg-muted); border: 1px solid rgba(168,85,247,0.15);
|
|
font-size: 12px; font-weight: 700; color: var(--primary);
|
|
letter-spacing: 2px; text-transform: uppercase;
|
|
margin-bottom: 20px;
|
|
}
|
|
.section-title {
|
|
font-size: clamp(32px, 4vw, 48px); font-weight: 800; line-height: 1.2;
|
|
letter-spacing: -1.5px; margin-bottom: 20px;
|
|
}
|
|
.section-title .highlight {
|
|
background: var(--gradient); background-size: 200% 200%;
|
|
-webkit-background-clip: text; background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
animation: gradShift 8s ease infinite;
|
|
}
|
|
.section-desc { font-size: 18px; color: var(--text-light); max-width: 680px; margin: 0 auto; line-height: 1.75; }
|
|
|
|
/* ===== Feature cards ===== */
|
|
.features-intro { padding: 100px 0 40px; background: #fff; }
|
|
.feature-cards { padding: 0 0 100px; background: #fff; }
|
|
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
|
|
.feat-card {
|
|
position: relative;
|
|
background: #fff;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
padding: 36px 32px;
|
|
transition: all var(--transition);
|
|
overflow: hidden;
|
|
}
|
|
.feat-card::before {
|
|
content: ''; position: absolute; inset: 0;
|
|
background: linear-gradient(135deg, rgba(99,102,241,0.04), rgba(236,72,153,0.04));
|
|
opacity: 0; transition: opacity var(--transition);
|
|
pointer-events: none;
|
|
}
|
|
.feat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
|
|
.feat-card:hover::before { opacity: 1; }
|
|
.feat-icon {
|
|
position: relative; z-index: 1;
|
|
width: 60px; height: 60px; border-radius: 18px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 28px; margin-bottom: 22px;
|
|
background: var(--gradient); color: #fff;
|
|
box-shadow: 0 10px 30px rgba(99,102,241,0.25);
|
|
}
|
|
.feat-icon.cyan { background: linear-gradient(135deg,var(--cyan),#818cf8); box-shadow: 0 10px 30px rgba(6,182,212,0.25); }
|
|
.feat-icon.orange { background: linear-gradient(135deg,var(--accent2),var(--accent)); box-shadow: 0 10px 30px rgba(249,115,22,0.25); }
|
|
.feat-card h3 { position: relative; z-index: 1; font-size: 22px; font-weight: 700; margin-bottom: 12px; letter-spacing: -0.5px; }
|
|
.feat-card p { position: relative; z-index: 1; font-size: 15px; color: var(--text-light); line-height: 1.75; margin-bottom: 16px; }
|
|
.feat-list { position: relative; z-index: 1; list-style: none; }
|
|
.feat-list li { font-size: 13px; color: var(--text); padding: 4px 0 4px 22px; position: relative; font-weight: 500; }
|
|
.feat-list li::before {
|
|
content: '✓'; position: absolute; left: 0; top: 4px;
|
|
width: 16px; height: 16px; border-radius: 50%;
|
|
background: var(--gradient); color: #fff;
|
|
font-size: 10px; font-weight: 800;
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
|
|
/* ===== How it works ===== */
|
|
.how-section { padding: 100px 0; background: var(--bg-muted); position: relative; overflow: hidden; }
|
|
.how-section::before {
|
|
content: ''; position: absolute; inset: 0;
|
|
background: radial-gradient(ellipse at top, rgba(168,85,247,0.08), transparent 60%);
|
|
pointer-events: none;
|
|
}
|
|
.how-steps {
|
|
position: relative; z-index: 1;
|
|
display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
|
|
margin-top: 60px;
|
|
}
|
|
.how-steps::after {
|
|
content: ''; position: absolute;
|
|
top: 80px; left: 16%; right: 16%; height: 2px;
|
|
background-image: linear-gradient(90deg,var(--primary) 0%,var(--accent) 50%,var(--accent2) 100%);
|
|
background-size: 12px 2px; background-repeat: repeat-x;
|
|
z-index: -1;
|
|
}
|
|
.step-card {
|
|
background: #fff; border-radius: var(--radius-lg);
|
|
padding: 36px 28px; text-align: center;
|
|
transition: all var(--transition);
|
|
position: relative;
|
|
}
|
|
.step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
|
|
.step-num {
|
|
width: 56px; height: 56px; border-radius: 50%;
|
|
background: #fff; color: var(--primary);
|
|
border: 2px solid var(--primary);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 20px; font-weight: 800;
|
|
margin: 0 auto 20px;
|
|
position: relative; z-index: 1;
|
|
transition: all var(--transition);
|
|
}
|
|
.step-card:hover .step-num { background: var(--gradient); color: #fff; border-color: transparent; transform: scale(1.1); }
|
|
.step-card h4 { font-size: 19px; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.3px; }
|
|
.step-card p { font-size: 14px; color: var(--text-light); line-height: 1.7; }
|
|
|
|
/* ===== Solutions ===== */
|
|
.solutions { padding: 100px 0; background: #fff; }
|
|
.solutions-grid {
|
|
display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px;
|
|
margin-top: 60px;
|
|
}
|
|
.sol-card {
|
|
position: relative;
|
|
background: #fff;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
padding: 44px 40px;
|
|
transition: all var(--transition);
|
|
overflow: hidden;
|
|
}
|
|
.sol-card::before {
|
|
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
|
|
background: var(--gradient);
|
|
transform: scaleX(0); transform-origin: left;
|
|
transition: transform 0.4s;
|
|
}
|
|
.sol-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
|
|
.sol-card:hover::before { transform: scaleX(1); }
|
|
.sol-num {
|
|
display: inline-flex; align-items: center; gap: 10px;
|
|
font-size: 12px; font-weight: 800; color: var(--primary);
|
|
letter-spacing: 2px; margin-bottom: 18px;
|
|
}
|
|
.sol-num-badge {
|
|
width: 32px; height: 32px; border-radius: 8px;
|
|
background: var(--gradient);
|
|
color: #fff; display: flex; align-items: center; justify-content: center;
|
|
font-size: 14px; font-weight: 800;
|
|
}
|
|
.sol-card h3 { font-size: 24px; font-weight: 800; margin-bottom: 12px; line-height: 1.3; letter-spacing: -0.5px; }
|
|
.sol-card p { font-size: 15px; color: var(--text-light); line-height: 1.8; margin-bottom: 24px; }
|
|
.sol-tags { display: flex; flex-wrap: wrap; gap: 8px; }
|
|
.sol-tag {
|
|
padding: 6px 14px; border-radius: 50px; font-size: 12px; font-weight: 600;
|
|
background: var(--bg-muted); color: var(--primary);
|
|
border: 1px solid rgba(168,85,247,0.1);
|
|
}
|
|
|
|
/* ===== AI section ===== */
|
|
.ai-section {
|
|
padding: 120px 0;
|
|
background: radial-gradient(ellipse at top,#1e1b4b 0%,#0b0b1a 60%);
|
|
color: #fff;
|
|
position: relative; overflow: hidden;
|
|
}
|
|
.ai-section::before {
|
|
content: ''; position: absolute; inset: 0;
|
|
background-image:
|
|
radial-gradient(circle at 20% 30%, rgba(168,85,247,0.15), transparent 40%),
|
|
radial-gradient(circle at 80% 70%, rgba(236,72,153,0.12), transparent 40%);
|
|
}
|
|
.ai-section::after {
|
|
content: ''; position: absolute; inset: 0;
|
|
background-image:
|
|
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
|
|
background-size: 48px 48px;
|
|
mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000, transparent 80%);
|
|
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000, transparent 80%);
|
|
}
|
|
.ai-inner {
|
|
position: relative; z-index: 1;
|
|
display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
|
|
align-items: center;
|
|
}
|
|
.ai-content .section-badge {
|
|
color: #c4b5fd; background: rgba(168,85,247,0.12);
|
|
border-color: rgba(168,85,247,0.3);
|
|
}
|
|
.ai-content .section-title { color: #fff; }
|
|
.ai-content .section-desc { color: rgba(255,255,255,0.65); margin: 0; }
|
|
.ai-features {
|
|
display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
|
|
margin-top: 36px;
|
|
}
|
|
.ai-feat {
|
|
background: rgba(255,255,255,0.04);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
border-radius: var(--radius);
|
|
padding: 20px;
|
|
backdrop-filter: blur(10px);
|
|
transition: all var(--transition);
|
|
}
|
|
.ai-feat:hover {
|
|
background: rgba(255,255,255,0.07);
|
|
border-color: rgba(168,85,247,0.4);
|
|
transform: translateY(-2px);
|
|
}
|
|
.ai-feat-icon {
|
|
width: 40px; height: 40px; border-radius: 10px;
|
|
background: linear-gradient(135deg, rgba(168,85,247,0.2), rgba(236,72,153,0.2));
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 20px; margin-bottom: 12px;
|
|
}
|
|
.ai-feat h4 { font-size: 15px; font-weight: 700; margin-bottom: 4px; color: #fff; }
|
|
.ai-feat p { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.6; }
|
|
|
|
.ai-visual { display: flex; align-items: center; justify-content: center; }
|
|
.ai-diagram { width: 100%; max-width: 440px; aspect-ratio: 1; position: relative; }
|
|
.ai-center {
|
|
position: absolute; top: 50%; left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 130px; height: 130px;
|
|
background: var(--gradient); background-size: 200% 200%;
|
|
animation: gradShift 5s ease infinite;
|
|
border-radius: 50%;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 13px; font-weight: 800; text-align: center;
|
|
box-shadow: 0 0 80px rgba(168,85,247,0.5), inset 0 0 40px rgba(255,255,255,0.15);
|
|
z-index: 3;
|
|
}
|
|
.ai-center::before {
|
|
content: ''; position: absolute; inset: -8px;
|
|
border-radius: 50%;
|
|
background: conic-gradient(from 0deg,transparent,rgba(168,85,247,0.4),transparent);
|
|
animation: spin 4s linear infinite;
|
|
z-index: -1;
|
|
}
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
.ai-orbit {
|
|
position: absolute; top: 50%; left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border: 1px dashed rgba(255,255,255,0.15);
|
|
border-radius: 50%;
|
|
animation: rotateOrbit 40s linear infinite;
|
|
}
|
|
.ai-orbit.o1 { width: 260px; height: 260px; }
|
|
.ai-orbit.o2 { width: 380px; height: 380px; animation-direction: reverse; animation-duration: 60s; }
|
|
@keyframes rotateOrbit { to { transform: translate(-50%,-50%) rotate(360deg); } }
|
|
.ai-node {
|
|
position: absolute;
|
|
width: 72px; height: 72px;
|
|
background: rgba(255,255,255,0.08);
|
|
border: 1px solid rgba(255,255,255,0.15);
|
|
border-radius: 18px;
|
|
display: flex; flex-direction: column;
|
|
align-items: center; justify-content: center;
|
|
font-size: 11px; font-weight: 700; color: #fff;
|
|
backdrop-filter: blur(16px);
|
|
transition: all var(--transition);
|
|
z-index: 2;
|
|
}
|
|
.ai-node:hover { background: var(--gradient); border-color: transparent; transform: scale(1.08); }
|
|
.ai-node-icon { font-size: 22px; margin-bottom: 2px; }
|
|
.ai-node.n1 { top: -36px; left: 50%; transform: translateX(-50%); }
|
|
.ai-node.n2 { top: 50%; right: -36px; transform: translateY(-50%); }
|
|
.ai-node.n3 { bottom: -36px; left: 50%; transform: translateX(-50%); }
|
|
.ai-node.n4 { top: 50%; left: -36px; transform: translateY(-50%); }
|
|
.ai-node.n5 { top: 10%; right: 10%; }
|
|
.ai-node.n6 { bottom: 10%; left: 10%; }
|
|
|
|
/* ===== Use cases ===== */
|
|
.usecases { padding: 100px 0; background: #fff; }
|
|
.usecase-grid {
|
|
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
|
|
margin-top: 60px;
|
|
}
|
|
.uc-card {
|
|
background: #fff; border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
padding: 32px 28px;
|
|
transition: all var(--transition);
|
|
position: relative; overflow: hidden;
|
|
}
|
|
.uc-card::before {
|
|
content: ''; position: absolute; top: 0; left: -100%; height: 100%; width: 100%;
|
|
background: var(--gradient-soft);
|
|
transition: left 0.5s;
|
|
z-index: 0;
|
|
}
|
|
.uc-card:hover { border-color: transparent; transform: translateY(-4px); box-shadow: var(--shadow); }
|
|
.uc-card:hover::before { left: 0; }
|
|
.uc-card > * { position: relative; z-index: 1; }
|
|
.uc-icon {
|
|
width: 56px; height: 56px; border-radius: 16px;
|
|
background: var(--bg-muted);
|
|
display: flex; align-items: center; justify-content: center;
|
|
margin-bottom: 18px; font-size: 28px;
|
|
transition: all var(--transition);
|
|
}
|
|
.uc-card:hover .uc-icon { background: var(--gradient); transform: rotate(-6deg); }
|
|
.uc-card:hover .uc-icon-emoji { filter: brightness(10); }
|
|
.uc-card h3 { font-size: 18px; font-weight: 800; margin-bottom: 8px; letter-spacing: -0.3px; }
|
|
.uc-card p { font-size: 14px; color: var(--text-light); line-height: 1.7; }
|
|
.uc-link {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
margin-top: 16px; font-size: 13px; font-weight: 700;
|
|
color: var(--primary);
|
|
opacity: 0; transform: translateX(-4px);
|
|
transition: all var(--transition);
|
|
}
|
|
.uc-card:hover .uc-link { opacity: 1; transform: translateX(0); }
|
|
|
|
/* ===== Architecture ===== */
|
|
.architecture { padding: 100px 0; background: var(--bg-muted); }
|
|
.arch-diagram {
|
|
margin-top: 60px;
|
|
background: #fff;
|
|
border-radius: var(--radius-lg);
|
|
padding: 40px;
|
|
box-shadow: var(--shadow);
|
|
border: 1px solid var(--border);
|
|
}
|
|
.arch-layers { display: flex; flex-direction: column; gap: 14px; }
|
|
.arch-layer {
|
|
display: flex; align-items: center; gap: 24px;
|
|
padding: 22px 28px;
|
|
background: var(--bg-soft);
|
|
border-radius: var(--radius);
|
|
border-left: 4px solid var(--primary);
|
|
transition: all var(--transition);
|
|
}
|
|
.arch-layer:hover { transform: translateX(6px); box-shadow: var(--shadow-sm); }
|
|
.arch-layer:nth-child(2) { border-left-color: var(--accent2); }
|
|
.arch-layer:nth-child(3) { border-left-color: var(--cyan); }
|
|
.arch-layer:nth-child(4) { border-left-color: var(--accent); }
|
|
.arch-label {
|
|
min-width: 110px; font-size: 12px; font-weight: 800;
|
|
text-transform: uppercase; letter-spacing: 1.5px;
|
|
color: var(--text-muted);
|
|
}
|
|
.arch-items { display: flex; flex-wrap: wrap; gap: 8px; }
|
|
.arch-item {
|
|
padding: 8px 16px; border-radius: 10px;
|
|
background: #fff; border: 1px solid var(--border);
|
|
font-size: 13px; font-weight: 600; color: var(--text);
|
|
transition: all 0.2s;
|
|
}
|
|
.arch-item:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
|
|
.arch-item.hl {
|
|
background: var(--gradient); color: #fff; border-color: transparent;
|
|
font-weight: 700;
|
|
box-shadow: 0 4px 16px rgba(99,102,241,0.3);
|
|
}
|
|
.arch-item.hl:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(99,102,241,0.4); }
|
|
|
|
/* ===== Testimonials ===== */
|
|
.testimonials { padding: 100px 0; background: #fff; }
|
|
.testimonial-grid {
|
|
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
|
|
margin-top: 60px;
|
|
}
|
|
.t-card {
|
|
background: var(--gradient-soft);
|
|
border: 1px solid rgba(168,85,247,0.08);
|
|
border-radius: var(--radius-lg);
|
|
padding: 36px;
|
|
transition: all var(--transition);
|
|
position: relative;
|
|
}
|
|
.t-card::before {
|
|
content: '"'; position: absolute; top: 12px; right: 28px;
|
|
font-size: 80px; line-height: 1; color: rgba(168,85,247,0.15);
|
|
font-family: Georgia, serif; font-weight: 700;
|
|
}
|
|
.t-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
|
|
.t-stars { color: #fbbf24; font-size: 16px; margin-bottom: 18px; letter-spacing: 2px; }
|
|
.t-card blockquote {
|
|
font-size: 15px; color: var(--text); line-height: 1.8;
|
|
margin-bottom: 22px; font-weight: 500;
|
|
}
|
|
.t-author { display: flex; align-items: center; gap: 14px; }
|
|
.t-avatar {
|
|
width: 44px; height: 44px; border-radius: 50%;
|
|
background: var(--gradient);
|
|
display: flex; align-items: center; justify-content: center;
|
|
color: #fff; font-weight: 800; font-size: 16px;
|
|
box-shadow: 0 4px 12px rgba(99,102,241,0.3);
|
|
}
|
|
.t-name { font-size: 14px; font-weight: 800; }
|
|
.t-role { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
|
|
|
|
/* ===== FAQ ===== */
|
|
.faq-section { padding: 100px 0; background: var(--bg-muted); }
|
|
.faq-list { max-width: 840px; margin: 60px auto 0; display: flex; flex-direction: column; gap: 14px; }
|
|
.faq-item {
|
|
background: #fff; border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
transition: all var(--transition);
|
|
}
|
|
.faq-item:hover { border-color: rgba(168,85,247,0.3); }
|
|
.faq-item[open] { border-color: var(--primary); box-shadow: var(--shadow-sm); }
|
|
.faq-item summary {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 22px 26px;
|
|
font-size: 16px; font-weight: 700; color: var(--text);
|
|
cursor: pointer; list-style: none;
|
|
transition: color 0.2s;
|
|
}
|
|
.faq-item summary::-webkit-details-marker { display: none; }
|
|
.faq-item summary:hover { color: var(--primary); }
|
|
.faq-icon {
|
|
width: 28px; height: 28px; border-radius: 50%;
|
|
background: var(--bg-muted); color: var(--primary);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 14px; font-weight: 800;
|
|
transition: all var(--transition); flex-shrink: 0;
|
|
}
|
|
.faq-item[open] .faq-icon { background: var(--gradient); color: #fff; transform: rotate(45deg); }
|
|
.faq-body {
|
|
padding: 0 26px 22px;
|
|
font-size: 15px; color: var(--text-light); line-height: 1.8;
|
|
}
|
|
|
|
/* ===== CTA ===== */
|
|
.cta {
|
|
position: relative;
|
|
padding: 100px 0;
|
|
background: var(--gradient); background-size: 200% 200%;
|
|
animation: gradShift 10s ease infinite;
|
|
text-align: center; overflow: hidden;
|
|
}
|
|
.cta::before, .cta::after {
|
|
content: ''; position: absolute;
|
|
border-radius: 50%; background: rgba(255,255,255,0.08);
|
|
pointer-events: none;
|
|
}
|
|
.cta::before { top: -120px; right: -60px; width: 420px; height: 420px; }
|
|
.cta::after { bottom: -140px; left: -80px; width: 360px; height: 360px; }
|
|
.cta h2 {
|
|
font-size: clamp(32px, 4.5vw, 48px); font-weight: 800;
|
|
color: #fff; margin-bottom: 20px;
|
|
position: relative; letter-spacing: -1px; line-height: 1.2;
|
|
}
|
|
.cta p {
|
|
font-size: 18px; color: rgba(255,255,255,0.9);
|
|
max-width: 560px; margin: 0 auto;
|
|
position: relative; line-height: 1.7;
|
|
}
|
|
.cta-buttons {
|
|
margin-top: 40px; position: relative;
|
|
display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
|
|
}
|
|
|
|
/* ===== Footer ===== */
|
|
.footer {
|
|
background: var(--bg-dark);
|
|
color: rgba(255,255,255,0.55);
|
|
padding: 80px 0 32px;
|
|
position: relative; overflow: hidden;
|
|
}
|
|
.footer::before {
|
|
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
|
|
background: linear-gradient(90deg, transparent, rgba(168,85,247,0.5), transparent);
|
|
}
|
|
.footer-grid {
|
|
display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px;
|
|
padding-bottom: 48px;
|
|
border-bottom: 1px solid rgba(255,255,255,0.08);
|
|
}
|
|
.footer-brand p {
|
|
font-size: 14px; line-height: 1.7; margin-top: 16px; max-width: 320px;
|
|
color: rgba(255,255,255,0.4);
|
|
}
|
|
.footer-logo {
|
|
display: flex; align-items: center; gap: 10px;
|
|
font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.5px;
|
|
}
|
|
.footer-logo svg { width: 34px; height: 34px; }
|
|
.footer-newsletter { margin-top: 24px; }
|
|
.footer-newsletter-label { font-size: 12px; color: rgba(255,255,255,0.5); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
|
|
.footer-newsletter-form { display: flex; gap: 8px; max-width: 360px; }
|
|
.footer-newsletter-form input {
|
|
flex: 1; padding: 10px 14px;
|
|
background: rgba(255,255,255,0.06);
|
|
border: 1px solid rgba(255,255,255,0.12);
|
|
border-radius: 10px;
|
|
color: #fff; font-size: 13px;
|
|
outline: none; transition: border 0.2s;
|
|
}
|
|
.footer-newsletter-form input::placeholder { color: rgba(255,255,255,0.35); }
|
|
.footer-newsletter-form input:focus { border-color: var(--primary-light); }
|
|
.footer-newsletter-form button {
|
|
padding: 10px 18px; border-radius: 10px; border: none;
|
|
background: var(--gradient); color: #fff; font-size: 13px; font-weight: 700;
|
|
cursor: pointer; transition: all 0.2s;
|
|
}
|
|
.footer-newsletter-form button:hover { transform: translateY(-1px); }
|
|
|
|
.footer h4 { font-size: 13px; font-weight: 800; color: #fff; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1.5px; }
|
|
.footer ul { list-style: none; }
|
|
.footer ul li { margin-bottom: 10px; }
|
|
.footer ul a { font-size: 14px; color: rgba(255,255,255,0.5); transition: color var(--transition); }
|
|
.footer ul a:hover { color: var(--primary-light); }
|
|
.footer-bottom {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding-top: 32px; font-size: 13px; gap: 20px;
|
|
}
|
|
.footer-social { display: flex; gap: 12px; }
|
|
.footer-social a {
|
|
width: 38px; height: 38px; border-radius: 50%;
|
|
background: rgba(255,255,255,0.06);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
display: flex; align-items: center; justify-content: center;
|
|
color: rgba(255,255,255,0.55);
|
|
transition: all var(--transition);
|
|
font-size: 14px; font-weight: 700;
|
|
}
|
|
.footer-social a:hover { background: var(--gradient); color: #fff; border-color: transparent; transform: translateY(-2px); }
|
|
|
|
/* ===== Scroll animation ===== */
|
|
.fade-up { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
|
|
.fade-up.visible { opacity: 1; transform: translateY(0); }
|
|
.fade-up.delay-1 { transition-delay: 0.1s; }
|
|
.fade-up.delay-2 { transition-delay: 0.2s; }
|
|
.fade-up.delay-3 { transition-delay: 0.3s; }
|
|
|
|
/* ===== Responsive ===== */
|
|
@media (max-width: 1024px) {
|
|
.hero-inner, .ai-inner { grid-template-columns: 1fr; gap: 48px; }
|
|
.hero-visual { order: -1; }
|
|
.hero-mockup { transform: none; }
|
|
.solutions-grid { grid-template-columns: 1fr; }
|
|
.stats-grid { grid-template-columns: repeat(2,1fr); }
|
|
.footer-grid { grid-template-columns: 1fr 1fr; }
|
|
.footer-brand { grid-column: span 2; }
|
|
.how-steps::after { display: none; }
|
|
}
|
|
@media (max-width: 768px) {
|
|
.header-nav { display: none; }
|
|
.mobile-toggle { display: block; }
|
|
.btn-login { display: none; }
|
|
.hero { padding: 120px 0 60px; }
|
|
.hero h1 { font-size: 40px; letter-spacing: -1px; }
|
|
.stats-grid { grid-template-columns: 1fr; }
|
|
.cards-grid, .testimonial-grid, .usecase-grid, .how-steps { grid-template-columns: 1fr; }
|
|
.ai-features { grid-template-columns: 1fr; }
|
|
.container, .header-inner, .mega-inner, .hero-inner { padding: 0 20px; }
|
|
.footer-grid { grid-template-columns: 1fr; }
|
|
.footer-brand { grid-column: auto; }
|
|
.footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
|
|
.floating-chip { display: none; }
|
|
.arch-layer { flex-direction: column; align-items: flex-start; gap: 12px; }
|
|
.arch-label { min-width: auto; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ==================== HEADER ==================== -->
|
|
<header class="header" id="header">
|
|
<div class="header-inner">
|
|
<a href="#" class="header-logo">
|
|
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
|
|
<defs><linearGradient id="hLG" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#6366f1"/><stop offset="35%" 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(#hLG)"/><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="header-nav">
|
|
<a href="#features">Solutions</a>
|
|
|
|
<div class="nav-dd">
|
|
<a href="javascript:void(0)">Support <span class="nav-arrow">▼</span></a>
|
|
<div class="mega-panel">
|
|
<div class="mega-inner">
|
|
<div>
|
|
<div class="mega-cat-label">Knowledge</div>
|
|
<a href="javascript:void(0)" class="mega-link"><div class="mega-link-icon"><span>📚</span></div><div><span class="mega-link-title">기술 문서</span><span class="mega-link-desc">시스템 아키텍처 및 가이드</span></div></a>
|
|
<a href="javascript:void(0)" class="mega-link"><div class="mega-link-icon"><span>🎓</span></div><div><span class="mega-link-title">교육 / 튜토리얼</span><span class="mega-link-desc">온라인 교육 및 활용 가이드</span></div></a>
|
|
</div>
|
|
<div>
|
|
<div class="mega-cat-label">Need Help?</div>
|
|
<a href="mailto:chpark@wace.me" class="mega-link"><div class="mega-link-icon"><span>💬</span></div><div><span class="mega-link-title">기술 지원</span><span class="mega-link-desc">전문 엔지니어 1:1 상담</span></div></a>
|
|
<a href="mailto:chpark@wace.me" class="mega-link"><div class="mega-link-icon"><span>🤝</span></div><div><span class="mega-link-title">파트너 문의</span><span class="mega-link-desc">파트너십 및 제휴 상담</span></div></a>
|
|
<a href="mailto:chpark@wace.me" class="mega-link"><div class="mega-link-icon"><span>📩</span></div><div><span class="mega-link-title">도입 문의</span><span class="mega-link-desc">솔루션 도입 및 구축 상담</span></div></a>
|
|
</div>
|
|
<div>
|
|
<div class="mega-cat-label">Resources</div>
|
|
<a href="#faq" class="mega-link"><div class="mega-link-icon"><span>📋</span></div><div><span class="mega-link-title">FAQ</span><span class="mega-link-desc">자주 묻는 질문과 답변</span></div></a>
|
|
<a href="javascript:void(0)" class="mega-link"><div class="mega-link-icon"><span>📰</span></div><div><span class="mega-link-title">Blog</span><span class="mega-link-desc">최신 소식 및 활용 팁</span></div></a>
|
|
<a href="javascript:void(0)" class="mega-link"><div class="mega-link-icon"><span>🎬</span></div><div><span class="mega-link-title">Videos</span><span class="mega-link-desc">제품 소개 및 데모 영상</span></div></a>
|
|
</div>
|
|
<div>
|
|
<div class="mega-cat-label">Tools</div>
|
|
<a href="javascript:void(0)" class="mega-link"><div class="mega-link-icon"><span>📥</span></div><div><span class="mega-link-title">Downloads</span><span class="mega-link-desc">설치 파일 및 자료</span></div></a>
|
|
<a href="javascript:void(0)" class="mega-link"><div class="mega-link-icon"><span>📊</span></div><div><span class="mega-link-title">레포트 도구</span><span class="mega-link-desc">보고서 양식 선택 도구</span></div></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-dd">
|
|
<a href="javascript:void(0)">Pricing <span class="nav-arrow">▼</span></a>
|
|
<div class="mega-panel">
|
|
<div class="mega-inner">
|
|
<div>
|
|
<div class="mega-cat-label">Plans</div>
|
|
<a href="javascript:void(0)" class="mega-link"><div class="mega-link-icon"><span>🚀</span></div><div><span class="mega-link-title">Starter</span><span class="mega-link-desc">소규모 팀을 위한 기본 플랜</span></div></a>
|
|
<a href="javascript:void(0)" class="mega-link"><div class="mega-link-icon"><span>🏢</span></div><div><span class="mega-link-title">Business</span><span class="mega-link-desc">성장하는 기업을 위한 확장 플랜</span></div></a>
|
|
<a href="javascript:void(0)" class="mega-link"><div class="mega-link-icon"><span>🏗️</span></div><div><span class="mega-link-title">Enterprise</span><span class="mega-link-desc">대기업 맞춤형 전용 플랜</span></div></a>
|
|
</div>
|
|
<div>
|
|
<div class="mega-cat-label">Compare</div>
|
|
<a href="javascript:void(0)" class="mega-link"><div class="mega-link-icon"><span>⚖️</span></div><div><span class="mega-link-title">요금제 비교</span><span class="mega-link-desc">플랜별 기능 상세 비교</span></div></a>
|
|
<a href="mailto:chpark@wace.me" class="mega-link"><div class="mega-link-icon"><span>💬</span></div><div><span class="mega-link-title">맞춤 견적</span><span class="mega-link-desc">기업 환경에 맞는 견적 상담</span></div></a>
|
|
</div>
|
|
<div></div><div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="mailto:chpark@wace.me">Book a Demo</a>
|
|
</nav>
|
|
|
|
<div class="header-right">
|
|
<a href="https://solution.invyone.com/login" class="btn-login">Log in</a>
|
|
<a href="https://solution.invyone.com/login" class="btn-trial">솔루션 둘러보기 →</a>
|
|
<button class="mobile-toggle" aria-label="menu"><span></span><span></span><span></span></button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ==================== HERO ==================== -->
|
|
<section class="hero">
|
|
<div class="hero-bg"></div>
|
|
<div class="hero-grid"></div>
|
|
<div class="blob b1"></div>
|
|
<div class="blob b2"></div>
|
|
<div class="blob b3"></div>
|
|
|
|
<div class="hero-inner">
|
|
<div class="hero-content fade-up">
|
|
<div class="hero-badge">
|
|
<span class="hero-badge-dot"></span>
|
|
AI-Powered No-Code Enterprise Platform
|
|
</div>
|
|
<h1>AI 에이전트로<br>업무 시스템을<br><span class="gradient-text">코딩 없이 완성</span></h1>
|
|
<p class="hero-desc">
|
|
드래그앤드롭으로 화면을 설계하고, AI 에이전트가 데이터를 연계하며,
|
|
복잡한 비즈니스 로직까지 자동으로 구현하는 차세대 노코드 플랫폼.
|
|
</p>
|
|
<div class="hero-ctas">
|
|
<a href="https://solution.invyone.com/login" class="btn btn-primary btn-lg">솔루션 둘러보기 <span class="arrow">→</span></a>
|
|
<a href="#features" class="btn btn-outline btn-lg">기능 살펴보기</a>
|
|
</div>
|
|
<div class="hero-meta">
|
|
<div class="hero-meta-item"><span class="hero-meta-check">✓</span> 설치 불필요</div>
|
|
<div class="hero-meta-item"><span class="hero-meta-check">✓</span> 신용카드 불필요</div>
|
|
<div class="hero-meta-item"><span class="hero-meta-check">✓</span> 14일 무료 체험</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-visual fade-up delay-2">
|
|
<div class="hero-mockup">
|
|
<div class="mockup-chrome">
|
|
<div class="mockup-dot"></div>
|
|
<div class="mockup-dot"></div>
|
|
<div class="mockup-dot"></div>
|
|
<div class="mockup-url">solution.invyone.com/dashboard</div>
|
|
</div>
|
|
<div class="mockup-body">
|
|
<div class="mockup-sidebar">
|
|
<div class="mockup-sb-logo">invyone</div>
|
|
<div class="mockup-sb-item active"><div class="mockup-sb-icon">📊</div> 대시보드</div>
|
|
<div class="mockup-sb-item"><div class="mockup-sb-icon">🎨</div> 화면설계</div>
|
|
<div class="mockup-sb-item"><div class="mockup-sb-icon">🔗</div> 외부연계</div>
|
|
<div class="mockup-sb-item"><div class="mockup-sb-icon">🤖</div> AI 에이전트</div>
|
|
<div class="mockup-sb-item"><div class="mockup-sb-icon">📄</div> 레포트</div>
|
|
</div>
|
|
<div class="mockup-content">
|
|
<div class="mockup-topbar">
|
|
<div class="mockup-title">실시간 운영 현황</div>
|
|
<div class="mockup-pill">Live</div>
|
|
</div>
|
|
<div class="mockup-stats">
|
|
<div class="mockup-stat">
|
|
<div class="mockup-stat-label">Active Users</div>
|
|
<div class="mockup-stat-value">12,438</div>
|
|
<div class="mockup-stat-chart"></div>
|
|
</div>
|
|
<div class="mockup-stat">
|
|
<div class="mockup-stat-label">Workflows</div>
|
|
<div class="mockup-stat-value">997</div>
|
|
<div class="mockup-stat-chart"></div>
|
|
</div>
|
|
<div class="mockup-stat">
|
|
<div class="mockup-stat-label">AI Tasks</div>
|
|
<div class="mockup-stat-value">2.1k</div>
|
|
<div class="mockup-stat-chart"></div>
|
|
</div>
|
|
</div>
|
|
<div class="mockup-chart">
|
|
<div class="mockup-chart-header">
|
|
<div class="mockup-chart-title">월별 처리량</div>
|
|
<div class="mockup-chart-legend">
|
|
<div class="mockup-legend-item"><div class="mockup-legend-dot" style="background:#6366f1"></div>AI</div>
|
|
<div class="mockup-legend-item"><div class="mockup-legend-dot" style="background:#ec4899"></div>수동</div>
|
|
</div>
|
|
</div>
|
|
<svg class="mockup-chart-svg" viewBox="0 0 280 80" preserveAspectRatio="none">
|
|
<defs>
|
|
<linearGradient id="gradFill" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0" stop-color="#6366f1" stop-opacity="0.3"/>
|
|
<stop offset="1" stop-color="#6366f1" stop-opacity="0"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<path d="M0,60 C30,40 50,50 70,35 C90,20 110,25 140,20 C170,15 200,18 230,10 C260,5 280,8 280,8 L280,80 L0,80 Z" fill="url(#gradFill)"/>
|
|
<path d="M0,60 C30,40 50,50 70,35 C90,20 110,25 140,20 C170,15 200,18 230,10 C260,5 280,8 280,8" fill="none" stroke="#6366f1" stroke-width="1.8"/>
|
|
<path d="M0,68 C30,58 50,62 70,55 C90,50 110,55 140,48 C170,45 200,42 230,38 C260,35 280,32 280,32" fill="none" stroke="#ec4899" stroke-width="1.4" stroke-dasharray="3 3"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="floating-chip chip-1">
|
|
<div class="chip-icon">🤖</div>
|
|
<div>
|
|
<div>AI 분석 완료</div>
|
|
<span class="chip-sub">3.2초 전</span>
|
|
</div>
|
|
</div>
|
|
<div class="floating-chip chip-2">
|
|
<div class="chip-icon">⚡</div>
|
|
<div>
|
|
<div>+28% 효율 향상</div>
|
|
<span class="chip-sub">이번 주</span>
|
|
</div>
|
|
</div>
|
|
<div class="floating-chip chip-3">
|
|
<div class="chip-icon">✨</div>
|
|
<div>
|
|
<div>자동 배포됨</div>
|
|
<span class="chip-sub">방금 전</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ==================== MARQUEE ==================== -->
|
|
<section class="marquee-section">
|
|
<div class="marquee-label">다양한 산업 분야의 기업들이 invyone과 함께합니다</div>
|
|
<div class="marquee">
|
|
<div class="marquee-track">
|
|
<div class="marquee-logo"><span class="dot"></span>Manufacturing</div>
|
|
<div class="marquee-logo"><span class="dot"></span>Logistics</div>
|
|
<div class="marquee-logo"><span class="dot"></span>Finance</div>
|
|
<div class="marquee-logo"><span class="dot"></span>Healthcare</div>
|
|
<div class="marquee-logo"><span class="dot"></span>Retail</div>
|
|
<div class="marquee-logo"><span class="dot"></span>IT Services</div>
|
|
<div class="marquee-logo"><span class="dot"></span>Construction</div>
|
|
<div class="marquee-logo"><span class="dot"></span>Education</div>
|
|
<div class="marquee-logo"><span class="dot"></span>Manufacturing</div>
|
|
<div class="marquee-logo"><span class="dot"></span>Logistics</div>
|
|
<div class="marquee-logo"><span class="dot"></span>Finance</div>
|
|
<div class="marquee-logo"><span class="dot"></span>Healthcare</div>
|
|
<div class="marquee-logo"><span class="dot"></span>Retail</div>
|
|
<div class="marquee-logo"><span class="dot"></span>IT Services</div>
|
|
<div class="marquee-logo"><span class="dot"></span>Construction</div>
|
|
<div class="marquee-logo"><span class="dot"></span>Education</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ==================== STATS ==================== -->
|
|
<section class="stats-section">
|
|
<div class="container">
|
|
<div class="stats-grid">
|
|
<div class="stat-card fade-up">
|
|
<div><span class="stat-number" data-count="997">0</span><span class="stat-suffix">+</span></div>
|
|
<div class="stat-label">운영 중인 업무 화면</div>
|
|
</div>
|
|
<div class="stat-card fade-up delay-1">
|
|
<div><span class="stat-number" data-count="85">0</span><span class="stat-suffix">%</span></div>
|
|
<div class="stat-label">개발 기간 단축</div>
|
|
</div>
|
|
<div class="stat-card fade-up delay-2">
|
|
<div><span class="stat-number" data-count="24">0</span><span class="stat-suffix">/7</span></div>
|
|
<div class="stat-label">AI 에이전트 자동화</div>
|
|
</div>
|
|
<div class="stat-card fade-up delay-3">
|
|
<div><span class="stat-number" data-count="100">0</span><span class="stat-suffix">%</span></div>
|
|
<div class="stat-label">로컬 데이터 보호</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ==================== FEATURES ==================== -->
|
|
<section class="features-intro" id="features">
|
|
<div class="container">
|
|
<div class="section-head">
|
|
<div class="section-badge fade-up">Why Invyone</div>
|
|
<h2 class="section-title fade-up delay-1">기업이 필요로 하는<br><span class="highlight">모든 것</span>을 하나의 플랫폼에서</h2>
|
|
<p class="section-desc fade-up delay-2">개발자 없이도 업무 화면 설계부터 외부 연계, AI 자동화, 보고서까지 완성합니다.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="feature-cards">
|
|
<div class="container">
|
|
<div class="cards-grid">
|
|
<div class="feat-card fade-up">
|
|
<div class="feat-icon">🎨</div>
|
|
<h3>직관적인 노코드 설계</h3>
|
|
<p>드래그앤드롭으로 업무 화면을 자유롭게 구성하고 즉시 배포합니다. 코드 없이 997개 이상의 화면을 관리하세요.</p>
|
|
<ul class="feat-list">
|
|
<li>UI 컴포넌트 라이브러리</li>
|
|
<li>실시간 미리보기</li>
|
|
<li>반응형 자동 대응</li>
|
|
</ul>
|
|
</div>
|
|
<div class="feat-card fade-up delay-1">
|
|
<div class="feat-icon cyan">🤖</div>
|
|
<h3>AI 에이전트 자동화</h3>
|
|
<p>AI 에이전트가 자연어 명령을 이해하고 데이터를 분석하며, 복잡한 비즈니스 로직을 자동으로 처리합니다.</p>
|
|
<ul class="feat-list">
|
|
<li>로컬 LLM 기반 데이터 보호</li>
|
|
<li>자연어 → 화면·로직 자동 생성</li>
|
|
<li>24/7 자동 업무 실행</li>
|
|
</ul>
|
|
</div>
|
|
<div class="feat-card fade-up delay-2">
|
|
<div class="feat-icon orange">🔗</div>
|
|
<h3>자유로운 외부 연계</h3>
|
|
<p>REST API, 웹 크롤링, 외부 DB 등 다양한 데이터 소스를 미들웨어 없이 연결하고 실시간 동기화합니다.</p>
|
|
<ul class="feat-list">
|
|
<li>REST / GraphQL 커넥터</li>
|
|
<li>외부 DB 직접 연결</li>
|
|
<li>웹 크롤링 스케줄러</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ==================== HOW IT WORKS ==================== -->
|
|
<section class="how-section">
|
|
<div class="container">
|
|
<div class="section-head">
|
|
<div class="section-badge fade-up">How It Works</div>
|
|
<h2 class="section-title fade-up delay-1"><span class="highlight">3단계</span>로 완성되는 엔터프라이즈 시스템</h2>
|
|
<p class="section-desc fade-up delay-2">기획에서 배포까지, 개발자가 없어도 몇 시간이면 충분합니다.</p>
|
|
</div>
|
|
|
|
<div class="how-steps">
|
|
<div class="step-card fade-up">
|
|
<div class="step-num">01</div>
|
|
<h4>드래그앤드롭 설계</h4>
|
|
<p>UI 컴포넌트를 배치하고 데이터 소스를 연결하면 업무 화면이 즉시 생성됩니다.</p>
|
|
</div>
|
|
<div class="step-card fade-up delay-1">
|
|
<div class="step-num">02</div>
|
|
<h4>AI가 로직 완성</h4>
|
|
<p>AI 에이전트에게 자연어로 요청하면 비즈니스 로직과 워크플로우를 자동 구성합니다.</p>
|
|
</div>
|
|
<div class="step-card fade-up delay-2">
|
|
<div class="step-num">03</div>
|
|
<h4>원클릭 배포</h4>
|
|
<p>Kubernetes 기반 인프라에 실시간으로 배포되어 바로 운영 환경에서 사용 가능합니다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ==================== SOLUTIONS ==================== -->
|
|
<section class="solutions" id="solutions">
|
|
<div class="container">
|
|
<div class="section-head">
|
|
<div class="section-badge fade-up">Core Features</div>
|
|
<h2 class="section-title fade-up delay-1"><span class="highlight">핵심 기능</span> 소개</h2>
|
|
<p class="section-desc fade-up delay-2">코딩 없이 설계하고, AI가 자동으로 완성하는 올인원 엔터프라이즈 플랫폼.</p>
|
|
</div>
|
|
|
|
<div class="solutions-grid">
|
|
<div class="sol-card fade-up">
|
|
<div class="sol-num"><div class="sol-num-badge">1</div> FEATURE ONE</div>
|
|
<h3>사용자 친화적 화면 설계</h3>
|
|
<p>테이블, 입력폼, 버튼, 팝업 등 다양한 UI 컴포넌트를 드래그앤드롭으로 배치하고, 실시간 미리보기를 통해 즉각적으로 결과를 확인합니다.</p>
|
|
<div class="sol-tags">
|
|
<span class="sol-tag">드래그앤드롭</span>
|
|
<span class="sol-tag">실시간 미리보기</span>
|
|
<span class="sol-tag">UI 컴포넌트</span>
|
|
<span class="sol-tag">반응형</span>
|
|
</div>
|
|
</div>
|
|
<div class="sol-card fade-up delay-1">
|
|
<div class="sol-num"><div class="sol-num-badge">2</div> FEATURE TWO</div>
|
|
<h3>자유로운 외부 데이터 연계</h3>
|
|
<p>REST API, 웹 크롤링, 외부 데이터베이스 등 다양한 외부 시스템과의 연계를 설정 화면에서 간편하게 구성합니다.</p>
|
|
<div class="sol-tags">
|
|
<span class="sol-tag">REST API</span>
|
|
<span class="sol-tag">웹 크롤링</span>
|
|
<span class="sol-tag">외부 DB</span>
|
|
<span class="sol-tag">실시간 동기화</span>
|
|
</div>
|
|
</div>
|
|
<div class="sol-card fade-up delay-2">
|
|
<div class="sol-num"><div class="sol-num-badge">3</div> FEATURE THREE</div>
|
|
<h3>비즈니스 로직 제어관리</h3>
|
|
<p>복잡한 업무 규칙과 비즈니스 로직을 시각적 제어 흐름으로 설계합니다. 조건 분기, 데이터 가공, 승인 프로세스를 코드 없이 구성합니다.</p>
|
|
<div class="sol-tags">
|
|
<span class="sol-tag">비주얼 로직</span>
|
|
<span class="sol-tag">조건 분기</span>
|
|
<span class="sol-tag">워크플로우</span>
|
|
<span class="sol-tag">승인 프로세스</span>
|
|
</div>
|
|
</div>
|
|
<div class="sol-card fade-up delay-3">
|
|
<div class="sol-num"><div class="sol-num-badge">4</div> FEATURE FOUR</div>
|
|
<h3>대시보드 & 레포트</h3>
|
|
<p>드래그앤드롭으로 차트와 그래프를 배치하여 나만의 대시보드를 구성하고, PDF/Excel 형식의 정형 보고서를 자동 생성합니다.</p>
|
|
<div class="sol-tags">
|
|
<span class="sol-tag">실시간 시각화</span>
|
|
<span class="sol-tag">KPI 모니터링</span>
|
|
<span class="sol-tag">PDF/Excel</span>
|
|
<span class="sol-tag">보고서 디자이너</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ==================== AI AGENT ==================== -->
|
|
<section class="ai-section" id="ai">
|
|
<div class="container">
|
|
<div class="ai-inner">
|
|
<div class="ai-content fade-up">
|
|
<div class="section-badge">AI Agent</div>
|
|
<h2 class="section-title">AI 에이전트가<br>업무를 <span class="highlight">자동으로 처리</span></h2>
|
|
<p class="section-desc">로컬 LLM을 활용하여 기업 데이터의 외부 유출 없이, 자연어 명령만으로 화면 생성, 데이터 분석, 보고서 작성을 자동화합니다.</p>
|
|
<div class="ai-features">
|
|
<div class="ai-feat"><div class="ai-feat-icon">💬</div><h4>자연어 명령</h4><p>대화형 인터페이스로 시스템 조작</p></div>
|
|
<div class="ai-feat"><div class="ai-feat-icon">📊</div><h4>지능형 분석</h4><p>데이터 패턴 자동 인식 및 분석</p></div>
|
|
<div class="ai-feat"><div class="ai-feat-icon">🔒</div><h4>로컬 LLM</h4><p>기업 데이터 외부 유출 제로</p></div>
|
|
<div class="ai-feat"><div class="ai-feat-icon">⚡</div><h4>자동 생성</h4><p>화면, 보고서, 로직 자동 구성</p></div>
|
|
</div>
|
|
</div>
|
|
<div class="ai-visual fade-up delay-2">
|
|
<div class="ai-diagram">
|
|
<div class="ai-orbit o2"></div>
|
|
<div class="ai-orbit o1"></div>
|
|
<div class="ai-center">AI<br>Agent<br>Core</div>
|
|
<div class="ai-node n1"><span class="ai-node-icon">🎨</span>화면설계</div>
|
|
<div class="ai-node n2"><span class="ai-node-icon">📊</span>분석</div>
|
|
<div class="ai-node n3"><span class="ai-node-icon">📄</span>레포트</div>
|
|
<div class="ai-node n4"><span class="ai-node-icon">🔗</span>연계</div>
|
|
<div class="ai-node n5"><span class="ai-node-icon">⚙️</span>로직</div>
|
|
<div class="ai-node n6"><span class="ai-node-icon">💬</span>대화</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ==================== USE CASES ==================== -->
|
|
<section class="usecases" id="usecases">
|
|
<div class="container">
|
|
<div class="section-head">
|
|
<div class="section-badge fade-up">Use Cases</div>
|
|
<h2 class="section-title fade-up delay-1">어떤 업무에도 <span class="highlight">유연하게</span> 적용</h2>
|
|
<p class="section-desc fade-up delay-2">산업과 업무 영역에 관계없이, invyone 하나로 모든 시스템을 구축할 수 있습니다.</p>
|
|
</div>
|
|
<div class="usecase-grid">
|
|
<div class="uc-card fade-up">
|
|
<div class="uc-icon"><span class="uc-icon-emoji">🏭</span></div>
|
|
<h3>제조/생산 관리</h3>
|
|
<p>생산계획, 공정관리, 품질검사, 재고관리까지 제조 전 과정을 하나의 시스템에서.</p>
|
|
<a href="https://solution.invyone.com/login" class="uc-link">자세히 보기 →</a>
|
|
</div>
|
|
<div class="uc-card fade-up delay-1">
|
|
<div class="uc-icon"><span class="uc-icon-emoji">👥</span></div>
|
|
<h3>인사/급여 관리</h3>
|
|
<p>조직관리, 근태, 급여계산, 평가관리를 자동화된 워크플로우로 운영.</p>
|
|
<a href="https://solution.invyone.com/login" class="uc-link">자세히 보기 →</a>
|
|
</div>
|
|
<div class="uc-card fade-up delay-2">
|
|
<div class="uc-icon"><span class="uc-icon-emoji">💰</span></div>
|
|
<h3>회계/재무 관리</h3>
|
|
<p>전표처리, 결산, 예산관리, 세무신고 지원을 체계적으로 관리.</p>
|
|
<a href="https://solution.invyone.com/login" class="uc-link">자세히 보기 →</a>
|
|
</div>
|
|
<div class="uc-card fade-up">
|
|
<div class="uc-icon"><span class="uc-icon-emoji">🛒</span></div>
|
|
<h3>영업/CRM</h3>
|
|
<p>고객관리, 견적, 수주, 매출분석까지 영업 프로세스 전체를 통합.</p>
|
|
<a href="https://solution.invyone.com/login" class="uc-link">자세히 보기 →</a>
|
|
</div>
|
|
<div class="uc-card fade-up delay-1">
|
|
<div class="uc-icon"><span class="uc-icon-emoji">📦</span></div>
|
|
<h3>물류/재고 관리</h3>
|
|
<p>입출고, 재고실사, 바코드 관리, 물류 추적을 실시간으로 운영.</p>
|
|
<a href="https://solution.invyone.com/login" class="uc-link">자세히 보기 →</a>
|
|
</div>
|
|
<div class="uc-card fade-up delay-2">
|
|
<div class="uc-icon"><span class="uc-icon-emoji">📋</span></div>
|
|
<h3>프로젝트 관리</h3>
|
|
<p>일정계획, 업무배분, 진척관리, 이슈 트래킹을 대시보드에서 한눈에.</p>
|
|
<a href="https://solution.invyone.com/login" class="uc-link">자세히 보기 →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ==================== ARCHITECTURE ==================== -->
|
|
<section class="architecture" id="architecture">
|
|
<div class="container">
|
|
<div class="section-head">
|
|
<div class="section-badge fade-up">Architecture</div>
|
|
<h2 class="section-title fade-up delay-1">시스템 <span class="highlight">아키텍처</span></h2>
|
|
<p class="section-desc fade-up delay-2">클라우드 네이티브 아키텍처 기반으로 안정적이고 확장 가능한 서비스를 제공합니다.</p>
|
|
</div>
|
|
<div class="arch-diagram fade-up">
|
|
<div class="arch-layers">
|
|
<div class="arch-layer">
|
|
<div class="arch-label">Frontend</div>
|
|
<div class="arch-items">
|
|
<div class="arch-item">React (Next.js)</div>
|
|
<div class="arch-item">반응형 UI</div>
|
|
<div class="arch-item">드래그앤드롭 엔진</div>
|
|
<div class="arch-item">WebSocket</div>
|
|
</div>
|
|
</div>
|
|
<div class="arch-layer">
|
|
<div class="arch-label">Backend</div>
|
|
<div class="arch-items">
|
|
<div class="arch-item">Spring Boot</div>
|
|
<div class="arch-item">REST API</div>
|
|
<div class="arch-item">비즈니스 로직 엔진</div>
|
|
<div class="arch-item hl">AI Agent Engine</div>
|
|
</div>
|
|
</div>
|
|
<div class="arch-layer">
|
|
<div class="arch-label">Data</div>
|
|
<div class="arch-items">
|
|
<div class="arch-item">PostgreSQL</div>
|
|
<div class="arch-item">외부 DB 커넥터</div>
|
|
<div class="arch-item">API Gateway</div>
|
|
<div class="arch-item">로컬 LLM</div>
|
|
</div>
|
|
</div>
|
|
<div class="arch-layer">
|
|
<div class="arch-label">Infra</div>
|
|
<div class="arch-items">
|
|
<div class="arch-item hl">Kubernetes (K8s)</div>
|
|
<div class="arch-item">Docker</div>
|
|
<div class="arch-item">CI/CD 자동배포</div>
|
|
<div class="arch-item">SSL/TLS</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ==================== TESTIMONIALS ==================== -->
|
|
<section class="testimonials">
|
|
<div class="container">
|
|
<div class="section-head">
|
|
<div class="section-badge fade-up">Testimonials</div>
|
|
<h2 class="section-title fade-up delay-1">고객들의 <span class="highlight">이야기</span></h2>
|
|
<p class="section-desc fade-up delay-2">invyone으로 업무를 혁신한 고객들의 생생한 목소리입니다.</p>
|
|
</div>
|
|
<div class="testimonial-grid">
|
|
<div class="t-card fade-up">
|
|
<div class="t-stars">★★★★★</div>
|
|
<blockquote>"개발팀 없이도 사내 ERP 시스템을 2주 만에 구축했습니다. AI 에이전트 기능이 정말 혁신적이에요."</blockquote>
|
|
<div class="t-author">
|
|
<div class="t-avatar">K</div>
|
|
<div><div class="t-name">김 부장</div><div class="t-role">제조업 · IT기획팀</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="t-card fade-up delay-1">
|
|
<div class="t-stars">★★★★★</div>
|
|
<blockquote>"노코드라서 처음엔 반신반의했는데, 기존 레거시 시스템보다 훨씬 유연하고 빠릅니다."</blockquote>
|
|
<div class="t-author">
|
|
<div class="t-avatar">P</div>
|
|
<div><div class="t-name">박 차장</div><div class="t-role">물류업 · 경영지원</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="t-card fade-up delay-2">
|
|
<div class="t-stars">★★★★★</div>
|
|
<blockquote>"외부 API 연계가 이렇게 쉬울 줄 몰랐습니다. 크롤링, DB 연동까지 설정만으로 끝나요."</blockquote>
|
|
<div class="t-author">
|
|
<div class="t-avatar">L</div>
|
|
<div><div class="t-name">이 과장</div><div class="t-role">IT서비스 · 개발팀</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ==================== FAQ ==================== -->
|
|
<section class="faq-section" id="faq">
|
|
<div class="container">
|
|
<div class="section-head">
|
|
<div class="section-badge fade-up">FAQ</div>
|
|
<h2 class="section-title fade-up delay-1">자주 묻는 <span class="highlight">질문</span></h2>
|
|
<p class="section-desc fade-up delay-2">invyone을 시작하기 전, 가장 많이 궁금해하시는 내용입니다.</p>
|
|
</div>
|
|
|
|
<div class="faq-list">
|
|
<details class="faq-item fade-up" open>
|
|
<summary>개발자 없이도 정말 시스템을 만들 수 있나요?<span class="faq-icon">+</span></summary>
|
|
<div class="faq-body">네. 드래그앤드롭 UI, 시각적 비즈니스 로직 편집기, AI 에이전트가 결합되어 있어 IT 전공자가 아닌 현업 담당자도 실제 운영 시스템을 구축할 수 있습니다. 평균 도입 기간은 2~4주입니다.</div>
|
|
</details>
|
|
<details class="faq-item fade-up">
|
|
<summary>기존에 운영 중인 데이터베이스와 연결할 수 있나요?<span class="faq-icon">+</span></summary>
|
|
<div class="faq-body">PostgreSQL, MySQL, Oracle, MSSQL 등 주요 RDBMS와 REST/GraphQL API, 그리고 웹 크롤링까지 외부 시스템을 별도 미들웨어 없이 바로 연결할 수 있습니다.</div>
|
|
</details>
|
|
<details class="faq-item fade-up">
|
|
<summary>AI 에이전트 사용 시 데이터가 외부로 나가나요?<span class="faq-icon">+</span></summary>
|
|
<div class="faq-body">기본 구성은 로컬 LLM 기반이라 기업 데이터가 외부 인프라로 전송되지 않습니다. OpenAI 등 외부 모델이 필요한 경우에만 선택적으로 연결할 수 있으며, 모든 호출은 감사 로그에 남습니다.</div>
|
|
</details>
|
|
<details class="faq-item fade-up">
|
|
<summary>구축 후 확장이나 유지보수는 어떻게 이뤄지나요?<span class="faq-icon">+</span></summary>
|
|
<div class="faq-body">Kubernetes 기반 인프라 위에 자동 배포되어 무중단 업데이트가 가능합니다. 운영 중인 화면은 언제든 드래그앤드롭으로 재구성할 수 있으며, 전담 기술 지원팀이 1:1 상담을 제공합니다.</div>
|
|
</details>
|
|
<details class="faq-item fade-up">
|
|
<summary>가격은 어떻게 책정되나요?<span class="faq-icon">+</span></summary>
|
|
<div class="faq-body">Starter / Business / Enterprise 3단계 플랜을 제공합니다. 14일 무료 체험 이후 사용자 수와 필요한 기능에 맞춰 선택할 수 있으며, 대기업의 경우 맞춤 견적도 가능합니다.</div>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ==================== CTA ==================== -->
|
|
<section class="cta">
|
|
<div class="container">
|
|
<h2>코딩 없이, 상상을 현실로.</h2>
|
|
<p>invyone과 함께 기업의 디지털 전환을 시작하세요.<br>14일 무료 체험으로 모든 기능을 자유롭게 사용해보세요.</p>
|
|
<div class="cta-buttons">
|
|
<a href="https://solution.invyone.com/login" class="btn btn-white btn-lg">솔루션 둘러보기 <span class="arrow">→</span></a>
|
|
<a href="mailto:chpark@wace.me" class="btn btn-ghost btn-lg">문의하기</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ==================== FOOTER ==================== -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer-grid">
|
|
<div class="footer-brand">
|
|
<div class="footer-logo">
|
|
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
|
|
<defs><linearGradient id="fLogoGrad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#6366f1"/><stop offset="35%" 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(#fLogoGrad)"/><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
|
|
</div>
|
|
<p>AI 에이전트 기반 노코드 엔터프라이즈 플랫폼. 코딩 없이 업무 시스템을 설계하고 자동화합니다.</p>
|
|
<div class="footer-newsletter">
|
|
<div class="footer-newsletter-label">Product Updates</div>
|
|
<form class="footer-newsletter-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="#solutions">외부 연계</a></li>
|
|
<li><a href="#solutions">제어관리</a></li>
|
|
<li><a href="#solutions">대시보드</a></li>
|
|
<li><a href="#solutions">레포트</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4>AI 기능</h4>
|
|
<ul>
|
|
<li><a href="#ai">AI 에이전트</a></li>
|
|
<li><a href="#ai">자연어 명령</a></li>
|
|
<li><a href="#ai">지능형 분석</a></li>
|
|
<li><a href="#ai">자동 보고서</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4>활용사례</h4>
|
|
<ul>
|
|
<li><a href="#usecases">제조/생산</a></li>
|
|
<li><a href="#usecases">인사/급여</a></li>
|
|
<li><a href="#usecases">물류/재고</a></li>
|
|
<li><a href="#usecases">영업/CRM</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4>지원</h4>
|
|
<ul>
|
|
<li><a href="mailto:chpark@wace.me">기술문의</a></li>
|
|
<li><a href="#faq">FAQ</a></li>
|
|
<li><a href="javascript:void(0)">이용약관</a></li>
|
|
<li><a href="javascript:void(0)">개인정보처리방침</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<span>© 2026 invyone — All rights reserved.</span>
|
|
<div class="footer-social">
|
|
<a href="javascript:void(0)" title="LinkedIn">in</a>
|
|
<a href="javascript:void(0)" title="YouTube">▶</a>
|
|
<a href="javascript:void(0)" title="GitHub">GH</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => { if (entry.isIntersecting) entry.target.classList.add('visible'); });
|
|
}, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
|
|
document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
|
|
|
|
const header = document.getElementById('header');
|
|
window.addEventListener('scroll', () => { header.classList.toggle('scrolled', window.scrollY > 40); });
|
|
|
|
const counterObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (!entry.isIntersecting) return;
|
|
const el = entry.target;
|
|
const target = parseInt(el.dataset.count, 10);
|
|
const duration = 1400;
|
|
const start = performance.now();
|
|
const step = (now) => {
|
|
const p = Math.min((now - start) / duration, 1);
|
|
const eased = 1 - Math.pow(1 - p, 3);
|
|
el.textContent = Math.floor(eased * target).toLocaleString();
|
|
if (p < 1) requestAnimationFrame(step);
|
|
};
|
|
requestAnimationFrame(step);
|
|
counterObserver.unobserve(el);
|
|
});
|
|
}, { threshold: 0.5 });
|
|
document.querySelectorAll('[data-count]').forEach(el => counterObserver.observe(el));
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(a => {
|
|
a.addEventListener('click', (e) => {
|
|
const id = a.getAttribute('href');
|
|
if (id.length <= 1) return;
|
|
const target = document.querySelector(id);
|
|
if (target) { e.preventDefault(); target.scrollIntoView({ behavior: 'smooth', block: 'start' }); }
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|