tenai / index.html
aiqtech's picture
Create index.html
3b0cb17 verified
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TenAI PMAI Pro - κΈ°μ—… μžμ‚°κ΄€λ¦¬ AI ν”Œλž«νΌ</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary: #2563eb;
--primary-dark: #1d4ed8;
--primary-light: #3b82f6;
--secondary: #7c3aed;
--success: #059669;
--success-light: #10b981;
--bg-light: #f8fafc;
--bg-white: #ffffff;
--bg-gray: #f1f5f9;
--text-dark: #1e293b;
--text-gray: #64748b;
--text-light: #94a3b8;
--border: #e2e8f0;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Noto Sans KR', sans-serif;
background: var(--bg-light);
color: var(--text-dark);
line-height: 1.6;
}
.hero {
min-height: 100vh;
background: linear-gradient(135deg, var(--bg-white) 0%, var(--bg-light) 50%, var(--bg-gray) 100%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 60px 20px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(37,99,235,0.05) 0%, transparent 70%);
animation: float 15s ease-in-out infinite;
}
.hero::after {
content: '';
position: absolute;
bottom: -50%;
left: -50%;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(16,185,129,0.05) 0%, transparent 70%);
animation: float 20s ease-in-out infinite reverse;
}
@keyframes float {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(30px, 30px); }
}
.hero-content { position: relative; z-index: 1; max-width: 900px; }
.logo {
font-size: 4.5rem;
margin-bottom: 25px;
filter: drop-shadow(0 4px 20px rgba(37,99,235,0.2));
}
.hero h1 {
font-size: 3.5rem;
font-weight: 800;
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 15px;
}
.hero .subtitle {
font-size: 1.4rem;
color: var(--text-dark);
margin-bottom: 8px;
font-weight: 600;
}
.hero .tagline {
font-size: 1.05rem;
color: var(--text-gray);
margin-bottom: 35px;
}
.badges {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 45px;
}
.badge {
padding: 12px 28px;
border-radius: 30px;
font-size: 0.95rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.badge-primary {
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: white;
}
.badge-success {
background: linear-gradient(135deg, var(--success), var(--success-light));
color: white;
}
.badge-secondary {
background: linear-gradient(135deg, var(--secondary), #8b5cf6);
color: white;
}
.badge:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); }
.cta-buttons { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.btn {
padding: 18px 42px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 700;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
cursor: pointer;
border: none;
}
.btn-primary {
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: white;
box-shadow: 0 8px 30px rgba(37,99,235,0.35);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 12px 40px rgba(37,99,235,0.45);
}
.btn-outline {
background: var(--bg-white);
color: var(--text-dark);
border: 2px solid var(--border);
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.btn-outline:hover {
background: var(--bg-gray);
border-color: var(--primary);
color: var(--primary);
}
.features { padding: 100px 20px; background: var(--bg-white); }
.container { max-width: 1200px; margin: 0 auto; }
.section-title { text-align: center; margin-bottom: 60px; }
.section-title h2 {
font-size: 2.5rem;
font-weight: 800;
color: var(--text-dark);
margin-bottom: 15px;
}
.section-title p { color: var(--text-gray); font-size: 1.15rem; }
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
}
.feature-card {
background: var(--bg-white);
border-radius: 24px;
padding: 40px 30px;
border: 1px solid var(--border);
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.feature-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 50px rgba(0,0,0,0.12);
border-color: var(--primary-light);
}
.feature-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
margin-bottom: 25px;
box-shadow: 0 8px 25px rgba(37,99,235,0.25);
}
.feature-card h3 { font-size: 1.35rem; margin-bottom: 15px; color: var(--text-dark); font-weight: 700; }
.feature-card p { color: var(--text-gray); line-height: 1.7; }
.soma-section { padding: 100px 20px; background: linear-gradient(135deg, var(--bg-light), var(--bg-gray)); }
.soma-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 20px;
margin-top: 50px;
}
.soma-agent {
background: var(--bg-white);
border-radius: 20px;
padding: 30px 20px;
text-align: center;
border: 1px solid var(--border);
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.soma-agent:hover {
border-color: var(--primary);
transform: scale(1.05);
box-shadow: 0 15px 40px rgba(37,99,235,0.15);
}
.soma-agent .icon { font-size: 2.8rem; margin-bottom: 18px; }
.soma-agent h4 { font-size: 1rem; color: var(--text-dark); margin-bottom: 8px; font-weight: 700; }
.soma-agent p { font-size: 0.85rem; color: var(--text-gray); }
.stats-section { padding: 80px 20px; background: var(--bg-white); }
.stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.stat-item {
text-align: center;
padding: 35px 20px;
background: linear-gradient(135deg, var(--bg-light), var(--bg-white));
border-radius: 20px;
border: 1px solid var(--border);
}
.stat-item .number {
font-size: 3rem;
font-weight: 800;
background: linear-gradient(135deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 10px;
}
.stat-item .label { color: var(--text-gray); font-weight: 500; }
footer {
background: var(--bg-white);
padding: 60px 20px 30px;
border-top: 1px solid var(--border);
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 40px;
margin-bottom: 40px;
}
.footer-section h4 { color: var(--primary); margin-bottom: 20px; font-size: 1.1rem; font-weight: 700; }
.footer-section p, .footer-section a {
color: var(--text-gray);
text-decoration: none;
display: block;
margin-bottom: 12px;
transition: color 0.3s;
}
.footer-section a:hover { color: var(--primary); }
.footer-bottom {
text-align: center;
padding-top: 30px;
border-top: 1px solid var(--border);
color: var(--text-light);
}
@media (max-width: 768px) {
.hero h1 { font-size: 2.5rem; }
.stats { grid-template-columns: repeat(2, 1fr); }
}
</style>
</head>
<body>
<section class="hero">
<div class="hero-content">
<div class="logo">🏒</div>
<h1>TenAI PMAI Pro</h1>
<p class="subtitle">κΈ°μ—… μžμ‚°κ΄€λ¦¬(PMAI)둜 μ‹œμž‘ν•˜λŠ” AX SaaS ν”Œλž«νΌ</p>
<p class="tagline">"ν•˜λ“œμ›¨μ–΄ μ—†λŠ” 건물 운영체제(OS), TenAI"</p>
<div class="badges">
<span class="badge badge-primary"><i class="fas fa-bolt"></i> Zero Hardware</span>
<span class="badge badge-success"><i class="fas fa-eye"></i> Fireworks Vision AI</span>
<span class="badge badge-secondary"><i class="fas fa-robot"></i> SOMA Multi-Agent</span>
</div>
<div class="cta-buttons">
<a href="#" class="btn btn-primary" onclick="window.location.reload()">
<i class="fas fa-play"></i> 데λͺ¨ μ‹œμž‘ν•˜κΈ°
</a>
<a href="#features" class="btn btn-outline">
<i class="fas fa-info-circle"></i> μžμ„Ένžˆ 보기
</a>
</div>
</div>
</section>
<section class="features" id="features">
<div class="container">
<div class="section-title">
<h2>πŸ’‘ 핡심 κΈ°λŠ₯</h2>
<p>TenAI PMAI Proκ°€ μ œκ³΅ν•˜λŠ” ν˜μ‹ μ μΈ μžμ‚°κ΄€λ¦¬ μ†”λ£¨μ…˜</p>
</div>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">πŸ–ΌοΈ</div>
<h3>Fireworks Vision AI</h3>
<p>Qwen3-VL-235B λͺ¨λΈλ‘œ κ³„μ•½μ„œ 사진, μŠ€μΊ” λ¬Έμ„œ, 도면 이미지λ₯Ό μ •ν™•ν•˜κ²Œ OCR μ²˜λ¦¬ν•©λ‹ˆλ‹€.</p>
</div>
<div class="feature-card">
<div class="feature-icon">πŸ“„</div>
<h3>λ¬Έμ„œ 뢄석</h3>
<p>μž„λŒ€μ°¨κ³„μ•½μ„œ, μœ μ§€λ³΄μˆ˜λ¬Έμ„œ, 건물도면 λ“± λΉ„μ •ν˜• λ¬Έμ„œλ₯Ό AIκ°€ μžλ™μœΌλ‘œ λΆ„μ„ν•˜μ—¬ 핡심 정보λ₯Ό μΆ”μΆœν•©λ‹ˆλ‹€.</p>
</div>
<div class="feature-card">
<div class="feature-icon">πŸ’°</div>
<h3>λΉ„μš© μ΅œμ ν™” 뢄석</h3>
<p>μš΄μ˜λΉ„μš© ꡬ쑰λ₯Ό λΆ„μ„ν•˜κ³  λˆ„μˆ˜ 포인트λ₯Ό μ‹λ³„ν•˜μ—¬ ROI 기반의 λΉ„μš© 절감 μ „λž΅μ„ μ œμ•ˆν•©λ‹ˆλ‹€.</p>
</div>
<div class="feature-card">
<div class="feature-icon">πŸ—ΊοΈ</div>
<h3>μƒκΆŒ/μž…μ§€ 뢄석</h3>
<p>μ„œμšΈμ‹œ μ£Όμš” μ§€μ—­μ˜ μƒκΆŒ νŠΉμ„±, μœ λ™μΈκ΅¬, μž„λŒ€λ£Œ μ‹œμ„Έλ₯Ό λΆ„μ„ν•˜μ—¬ 졜적의 투자 μ „λž΅μ„ μ œμ‹œν•©λ‹ˆλ‹€.</p>
</div>
<div class="feature-card">
<div class="feature-icon">πŸ€–</div>
<h3>SOMA λ©€ν‹° μ—μ΄μ „νŠΈ</h3>
<p>6λͺ…μ˜ AI μ „λ¬Έκ°€(λ¬Έμ„œλΆ„μ„, 재무, 법λ₯ , μ‹œμ„€, μƒκΆŒ, 코디넀이터)κ°€ ν˜‘μ—…ν•˜μ—¬ μ’…ν•© 뢄석을 μ œκ³΅ν•©λ‹ˆλ‹€.</p>
</div>
<div class="feature-card">
<div class="feature-icon">πŸ’¬</div>
<h3>24μ‹œκ°„ AI 상담</h3>
<p>μžμ‚°κ΄€λ¦¬, μž„λŒ€κ΄€λ¦¬, μ‹œμ„€κ΄€λ¦¬μ— λŒ€ν•œ λͺ¨λ“  μ§ˆλ¬Έμ— μ‹€μ‹œκ°„μœΌλ‘œ 전문적인 닡변을 μ œκ³΅ν•©λ‹ˆλ‹€.</p>
</div>
</div>
</div>
</section>
<section class="soma-section">
<div class="container">
<div class="section-title">
<h2>πŸ€– SOMA λ©€ν‹° μ—μ΄μ „νŠΈ μ‹œμŠ€ν…œ</h2>
<p>Specialized Orchestrated Multi-Agent - 6λͺ…μ˜ AI μ „λ¬Έκ°€ ν˜‘μ—…</p>
</div>
<div class="soma-grid">
<div class="soma-agent">
<div class="icon">πŸ“‹</div>
<h4>λ¬Έμ„œ 뢄석가</h4>
<p>κ³„μ•½μ„œ/λ¬Έμ„œ μ „λ¬Έ</p>
</div>
<div class="soma-agent">
<div class="icon">πŸ’°</div>
<h4>재무 μ „λ¬Έκ°€</h4>
<p>λΉ„μš©/수읡 뢄석</p>
</div>
<div class="soma-agent">
<div class="icon">βš–οΈ</div>
<h4>법λ₯  μžλ¬Έκ°€</h4>
<p>법적 리슀크 κ²€ν† </p>
</div>
<div class="soma-agent">
<div class="icon">πŸ”§</div>
<h4>μ‹œμ„€ κ΄€λ¦¬μž</h4>
<p>운영/μ‹œμ„€ μ „λ¬Έ</p>
</div>
<div class="soma-agent">
<div class="icon">πŸ“Š</div>
<h4>μƒκΆŒ 뢄석가</h4>
<p>μž…μ§€/μƒκΆŒ μ „λ¬Έ</p>
</div>
<div class="soma-agent">
<div class="icon">🎯</div>
<h4>코디넀이터</h4>
<p>μ’…ν•© 뢄석 총괄</p>
</div>
</div>
</div>
</section>
<section class="stats-section">
<div class="container">
<div class="stats">
<div class="stat-item">
<div class="number">12+</div>
<div class="label">μ„œμšΈμ‹œ μ£Όμš” μƒκΆŒ</div>
</div>
<div class="stat-item">
<div class="number">6</div>
<div class="label">AI 뢄석 μ—μ΄μ „νŠΈ</div>
</div>
<div class="stat-item">
<div class="number">24/7</div>
<div class="label">μ‹€μ‹œκ°„ AI 상담</div>
</div>
<div class="stat-item">
<div class="number">100%</div>
<div class="label">Zero Hardware</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h4>🏒 TenAI</h4>
<p>κΈ°μ—… μžμ‚°κ΄€λ¦¬(PMAI)둜 μ‹œμž‘ν•˜λŠ” AX SaaS</p>
<p>"ν•˜λ“œμ›¨μ–΄ μ—†λŠ” 건물 운영체제(OS)"</p>
</div>
<div class="footer-section">
<h4>Product</h4>
<a href="#">PMAI Pro</a>
<a href="#">SOMA μ—μ΄μ „νŠΈ</a>
<a href="#">μƒκΆŒ 뢄석</a>
<a href="#">Vision AI OCR</a>
</div>
<div class="footer-section">
<h4>Technology</h4>
<a href="#">Fireworks Vision AI</a>
<a href="#">Ten-AX Engine</a>
<a href="#">SOMA Framework</a>
</div>
<div class="footer-section">
<h4>Contact</h4>
<p>πŸ“§ ten@tenspace.co.kr</p>
<p>πŸ“± 010-2710-6246</p>
<p>πŸ‘€ CEO: μ •μ›ν›ˆ</p>
</div>
</div>
<div class="footer-bottom">
<p>Β© 2025 TenAI. All rights reserved. Powered by Fireworks Vision AI + Ten-AX Engine</p>
</div>
</div>
</footer>
</body>
</html>