Spaces:
Running
Running
File size: 15,936 Bytes
08645d0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DeepShape - AI 口腔修复体设计专家</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'primary': '#2563eb', // 科技蓝
'secondary': '#10b981' // 活力绿
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body { font-family: 'Inter', sans-serif; }
.gradient-bg { background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); }
.product-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
.feature-icon { width: 64px; height: 64px; background: linear-gradient(135deg, #3b82f6, #60a5fa); }
.vanta-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
</style>
</head>
<body class="bg-white text-gray-800">
<!-- 导航栏 -->
<nav class="fixed w-full bg-white/90 backdrop-blur-md z-50 shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<div class="flex items-center">
<span class="text-2xl font-bold text-primary">DeepShape</span>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#products" class="text-gray-600 hover:text-primary transition">产品</a>
<a href="#technology" class="text-gray-600 hover:text-primary transition">技术优势</a>
<a href="#cases" class="text-gray-600 hover:text-primary transition">应用场景</a>
<a href="#partners" class="text-gray-600 hover:text-primary transition">合作</a>
<a href="#contact" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition">联系我们</a>
</div>
<div class="md:hidden">
<button id="menu-btn" class="text-gray-600">
<i data-feather="menu"></i>
</button>
</div>
</div>
</div>
<!-- 移动端菜单 -->
<div id="mobile-menu" class="hidden md:hidden bg-white border-t">
<div class="px-2 pt-2 pb-3 space-y-1">
<a href="#products" class="block px-3 py-2 text-gray-600 hover:text-primary">产品</a>
<a href="#technology" class="block px-3 py-2 text-gray-600 hover:text-primary">技术优势</a>
<a href="#cases" class="block px-3 py-2 text-gray-600 hover:text-primary">应用场景</a>
<a href="#partners" class="block px-3 py-2 text-gray-600 hover:text-primary">合作</a>
<a href="#contact" class="block px-3 py-2 bg-primary text-white rounded mx-3 text-center">联系我们</a>
</div>
</div>
</nav>
<!-- 头部横幅 -->
<header class="relative gradient-bg pt-24 pb-20 overflow-hidden">
<div id="vanta-bg" class="vanta-bg"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="text-center">
<h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6">AI 驱动口腔修复设计新纪元</h1>
<p class="text-xl md:text-2xl text-gray-600 mb-8 max-w-3xl mx-auto">DeepShape 深形智能，专注于人工智能技术在口腔修复体设计领域的创新应用，为牙科医生与技工所提供精准、高效、可靠的智能设计解决方案。</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#products" class="bg-primary text-white px-8 py-3 rounded-lg font-medium hover:bg-blue-600 transition inline-flex items-center justify-center">
探索产品 <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
<a href="#contact" class="border border-primary text-primary px-8 py-3 rounded-lg font-medium hover:bg-blue-50 transition inline-flex items-center justify-center">
预约演示 <i data-feather="calendar" class="ml-2 w-4 h-4"></i>
</a>
</div>
</div>
</div>
</header>
<!-- 产品功能介绍区 -->
<section id="products" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">核心产品</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">两款强大的 AI 工具，重塑口腔修复体设计的工作流程</p>
</div>
<div class="grid md:grid-cols-2 gap-12">
<!-- 产品 1 -->
<div class="product-card bg-gradient-to-br from-blue-50 to-indigo-50 rounded-2xl p-8">
<div class="flex items-center mb-6">
<div class="feature-icon rounded-xl flex items-center justify-center mr-4">
<i data-feather="edit-3" class="text-white w-8 h-8"></i>
</div>
<h3 class="text-2xl font-bold text-gray-900">AI 口腔修复体设计工具</h3>
</div>
<p class="text-gray-600 mb-6">基于深度学习算法，自动生成高精度、个性化的口腔修复体3D模型。大幅缩短设计时间，提升设计质量与一致性。</p>
<ul class="space-y-3 mb-6">
<li class="flex items-center text-gray-700"><i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i> 智能识别牙体预备形态</li>
<li class="flex items-center text-gray-700"><i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i> 自动生成符合生物力学的最优形态</li>
<li class="flex items-center text-gray-700"><i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i> 支持全冠、桥体、贴面等多种修复类型</li>
<li class="flex items-center text-gray-700"><i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i> 与主流CAD软件无缝集成</li>
</ul>
<a href="#" class="inline-flex items-center text-primary font-medium hover:text-blue-600">
了解更多 <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
</a>
</div>
<!-- 产品 2 -->
<div class="product-card bg-gradient-to-br from-green-50 to-emerald-50 rounded-2xl p-8">
<div class="flex items-center mb-6">
<div class="feature-icon rounded-xl flex items-center justify-center mr-4" style="background: linear-gradient(135deg, #10b981, #34d399);">
<i data-feather="bar-chart-2" class="text-white w-8 h-8"></i>
</div>
<h3 class="text-2xl font-bold text-gray-900">AI 修复体设计分析工具</h3>
</div>
<p class="text-gray-600 mb-6">对设计完成的修复体进行全方位的智能分析评估，预测其长期临床表现，为医生提供数据驱动的决策支持。</p>
<ul class="space-y-3 mb-6">
<li class="flex items-center text-gray-700"><i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i> 咬合接触点分析与优化建议</li>
<li class="flex items-center text-gray-700"><i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i> 边缘密合度自动检测与评分</li>
<li class="flex items-center text-gray-700"><i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i> 应力分布模拟与薄弱点预警</li>
<li class="flex items-center text-gray-700"><i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i> 美学效果可视化评估</li>
</ul>
<a href="#" class="inline-flex items-center text-primary font-medium hover:text-blue-600">
了解更多 <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
</a>
</div>
</div>
</div>
</section>
<!-- 技术优势展示 -->
<section id="technology" class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">技术优势</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">融合前沿 AI 技术与口腔医学专业知识</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="text-center p-6">
<div class="bg-primary/10 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-feather="cpu" class="text-primary w-10 h-10"></i>
</div>
<h3 class="text-xl font-semibold mb-2">强大算法引擎</h3>
<p class="text-gray-600">基于数百万临床数据训练的深度学习模型，确保设计的精准性与可靠性。</p>
</div>
<div class="text-center p-6">
<div class="bg-primary/10 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-feather="zap" class="text-primary w-10 h-10"></i>
</div>
<h3 class="text-xl font-semibold mb-2">极速处理</h3>
<p class="text-gray-600">复杂修复体设计任务从数小时缩短至分钟级，显著提升工作效率。</p>
</div>
<div class="text-center p-6">
<div class="bg-primary/10 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-feather="shield" class="text-primary w-10 h-10"></i>
</div>
<h3 class="text-xl font-semibold mb-2">安全合规</h3>
<p class="text-gray-600">严格遵循医疗数据安全规范，通过多项国际标准认证。</p>
</div>
</div>
</div>
</section>
<!-- 用户案例或应用场景 -->
<section id="cases" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">应用场景</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">助力各类口腔医疗机构提升诊疗水平与运营效率</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-gray-50 rounded-xl p-6">
<img src="http://static.photos/medical/320x240/1" alt="大型口腔医院" class="rounded-lg mb-4 w-full h-40 object-cover">
<h3 class="text-lg font-semibold mb-2">大型口腔医院</h3>
<p class="text-gray-600 text-sm">处理高病例量，标准化设计流程，保证不同医生间设计质量的一致性。</p>
</div>
<div class="bg-gray-50 rounded-xl p-6">
<img src="http://static.photos/workspace/320x240/2" alt="私立诊所" class="rounded-lg mb-4 w-full h-40 object-cover">
<h3 class="text-lg font-semibold mb-2">私立诊所</h3>
<p class="text-gray-600 text-sm">无需雇佣专职技工，降低运营成本，为患者提供高品质的修复体。</p>
</div>
<div class="bg-gray-50 rounded-xl p-6">
<img src="http://static.photos/industry/320x240/3" alt="义齿加工所" class="rounded-lg mb-4 w-full h-40 object-cover">
<h3 class="text-lg font-semibold mb-2">义齿加工所</h3>
<p class="text-gray-600 text-sm">应对技工人才短缺，提升产能与设计精度，承接更多复杂订单。</p>
</div>
</div>
</div>
</section>
<!-- 技术支持与合作信息 -->
<section id="partners" class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">技术合作</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">与行业领导者共同推动口腔数字化发展</p>
</div>
<div class="flex flex-wrap justify-center items-center gap-12 mb-12 opacity-60">
<!-- 合作伙伴Logo占位 -->
<div class="bg-white p-4 rounded-lg shadow-sm">合作伙伴A</div>
<div class="bg-white p-4 rounded-lg shadow-sm">合作伙伴B</div>
<div class="bg-white p-4 rounded-lg shadow-sm">合作伙伴C</div>
<div class="bg-white p-4 rounded-lg shadow-sm">合作伙伴D</div>
</div>
<div class="text-center">
<p class="text-gray-600 mb-6">我们提供全面的技术支持，包括 API 接口、定制化开发与专业技术培训。</p>
<a href="#contact" class="bg-primary text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-600 transition inline-flex items-center">
成为合作伙伴 <i data-feather="users" class="ml-2 w-4 h-4"></i>
</a>
</div>
</div>
</section>
<!-- 联系与咨询入口 -->
<section id="contact" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">开启智能口腔设计之旅</h2>
<p class="text-xl text-gray-600 mb-8">我们的专家团队随时准备为您提供产品演示、技术咨询与定制化解决方案。</p>
<div class="space-y-4">
<div class="flex items-center">
<i data-feather="mail" class="text-primary mr-3"></i>
<span>contact@deepshape.ai</span>
</div>
<div class="flex items-center">
<i data-feather="phone" class="text-primary mr-3"></i>
<span>400-888-XXXX</span>
</div>
<div class="flex items-center">
<i data-feather="map-pin" class="text-primary mr-3"></i>
<span>上海市浦东新区张江科学城</span>
</div>
</div>
</div>
<div class="bg-gray-50 rounded-xl p-8">
<h3
</body>
</html> |