File size: 38,262 Bytes
ac41aa5 64a1f64 ac41aa5 64a1f64 |
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 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>未来智能 - AI创新平台</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.floating {
animation: float 6s ease-in-out infinite;
}
.gradient-text {
background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.card-hover:hover {
transform: translateY(-10px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.typewriter {
overflow: hidden;
border-right: .15em solid #3b82f6;
white-space: nowrap;
margin: 0 auto;
letter-spacing: .15em;
animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #3b82f6; }
}
</style>
</head>
<body class="bg-gray-50 font-sans">
<!-- 导航栏 -->
<nav class="bg-white shadow-lg sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<i class="fas fa-robot text-3xl text-indigo-600 mr-2"></i>
<span class="text-xl font-bold text-gray-900">未来<span class="gradient-text">智能</span></span>
</div>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#home" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">首页</a>
<a href="#features" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">功能</a>
<a href="#solutions" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">解决方案</a>
<a href="#pricing" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">定价</a>
<a href="#contact" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">联系我们</a>
</div>
<div class="flex items-center">
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
免费试用
</button>
<button class="md:hidden ml-4 inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-indigo-600 hover:bg-gray-100 focus:outline-none">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- 英雄区域 -->
<section id="home" class="relative overflow-hidden">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
<div>
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 leading-tight mb-6">
用<span class="gradient-text">人工智能</span><br>改变您的业务
</h1>
<p class="text-lg text-gray-600 mb-8">
我们提供最先进的AI解决方案，帮助企业自动化流程、提升效率并创造新的商业机会。
</p>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-md text-lg font-medium transition duration-300 transform hover:scale-105">
开始免费试用
</button>
<button class="border border-indigo-600 text-indigo-600 hover:bg-indigo-50 px-6 py-3 rounded-md text-lg font-medium transition duration-300 transform hover:scale-105">
观看演示 <i class="fas fa-play-circle ml-2"></i>
</button>
</div>
</div>
<div class="relative">
<div class="floating">
<img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="AI Technology" class="rounded-xl shadow-2xl border-8 border-white transform rotate-3">
</div>
<div class="absolute -bottom-8 -left-8 bg-indigo-100 rounded-xl w-32 h-32 -z-10"></div>
<div class="absolute -top-8 -right-8 bg-pink-100 rounded-xl w-32 h-32 -z-10"></div>
</div>
</div>
</div>
<div class="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-r from-indigo-50 to-transparent -z-10"></div>
</section>
<!-- 合作伙伴 -->
<section class="bg-gray-100 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<p class="text-center text-gray-500 mb-8">信任我们的全球领先企业</p>
<div class="grid grid-cols-2 md:grid-cols-5 gap-8 items-center justify-center">
<div class="flex justify-center">
<i class="fab fa-google text-4xl text-gray-700 opacity-70 hover:opacity-100 transition duration-300"></i>
</div>
<div class="flex justify-center">
<i class="fab fa-microsoft text-4xl text-gray-700 opacity-70 hover:opacity-100 transition duration-300"></i>
</div>
<div class="flex justify-center">
<i class="fab fa-amazon text-4xl text-gray-700 opacity-70 hover:opacity-100 transition duration-300"></i>
</div>
<div class="flex justify-center">
<i class="fab fa-apple text-4xl text-gray-700 opacity-70 hover:opacity-100 transition duration-300"></i>
</div>
<div class="flex justify-center">
<i class="fab fa-spotify text-4xl text-gray-700 opacity-70 hover:opacity-100 transition duration-300"></i>
</div>
</div>
</div>
</section>
<!-- 功能特性 -->
<section id="features" 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">强大的<span class="gradient-text">AI功能</span></h2>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">
我们的平台集成了多种先进的AI技术，为您提供全方位的智能解决方案
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- 功能卡片1 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-500 card-hover">
<div class="p-6">
<div class="flex items-center mb-4">
<div class="bg-indigo-100 p-3 rounded-full mr-4">
<i class="fas fa-brain text-indigo-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-900">机器学习</h3>
</div>
<p class="text-gray-600 mb-4">
利用先进的机器学习算法，从您的数据中提取有价值的见解，预测未来趋势并自动优化业务流程。
</p>
<a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium inline-flex items-center">
了解更多 <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- 功能卡片2 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-500 card-hover">
<div class="p-6">
<div class="flex items-center mb-4">
<div class="bg-pink-100 p-3 rounded-full mr-4">
<i class="fas fa-comments text-pink-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-900">自然语言处理</h3>
</div>
<p class="text-gray-600 mb-4">
我们的NLP技术可以理解、解释和生成人类语言，实现智能客服、文档分析和多语言翻译等功能。
</p>
<a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium inline-flex items-center">
了解更多 <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- 功能卡片3 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-500 card-hover">
<div class="p-6">
<div class="flex items-center mb-4">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-eye text-blue-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-900">计算机视觉</h3>
</div>
<p class="text-gray-600 mb-4">
通过图像和视频分析技术，实现人脸识别、物体检测、场景理解等视觉智能应用。
</p>
<a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium inline-flex items-center">
了解更多 <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- 功能卡片4 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-500 card-hover">
<div class="p-6">
<div class="flex items-center mb-4">
<div class="bg-purple-100 p-3 rounded-full mr-4">
<i class="fas fa-chart-line text-purple-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-900">预测分析</h3>
</div>
<p class="text-gray-600 mb-4">
基于历史数据和实时信息，预测未来市场趋势、客户行为和业务风险，帮助您做出更明智的决策。
</p>
<a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium inline-flex items-center">
了解更多 <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- 功能卡片5 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-500 card-hover">
<div class="p-6">
<div class="flex items-center mb-4">
<div class="bg-green-100 p-3 rounded-full mr-4">
<i class="fas fa-robot text-green-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-900">自动化流程</h3>
</div>
<p class="text-gray-600 mb-4">
自动化重复性任务和工作流程，提高效率，减少人为错误，让您的团队专注于更有价值的工作。
</p>
<a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium inline-flex items-center">
了解更多 <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- 功能卡片6 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-500 card-hover">
<div class="p-6">
<div class="flex items-center mb-4">
<div class="bg-yellow-100 p-3 rounded-full mr-4">
<i class="fas fa-shield-alt text-yellow-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-900">安全合规</h3>
</div>
<p class="text-gray-600 mb-4">
我们的AI系统符合最高安全标准，确保数据隐私和合规性，让您安心使用。
</p>
<a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium inline-flex items-center">
了解更多 <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- 解决方案 -->
<section id="solutions" 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">行业<span class="gradient-text">解决方案</span></h2>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">
我们为不同行业提供定制化的AI解决方案，满足您的特定需求
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- 解决方案1 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-500 card-hover">
<img src="https://images.unsplash.com/photo-1579621970563-ebec7560ff3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="金融科技" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold text-gray-900 mb-3">金融科技</h3>
<p class="text-gray-600 mb-4">
利用AI进行风险评估、欺诈检测、信用评分和算法交易，提高金融服务的效率和安全性。
</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded">欺诈检测</span>
<span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded">算法交易</span>
<span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded">信用评分</span>
</div>
<button class="text-indigo-600 hover:text-indigo-800 font-medium inline-flex items-center">
查看案例 <i class="fas fa-external-link-alt ml-2"></i>
</button>
</div>
</div>
<!-- 解决方案2 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-500 card-hover">
<img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="医疗健康" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold text-gray-900 mb-3">医疗健康</h3>
<p class="text-gray-600 mb-4">
AI辅助诊断、药物研发、个性化治疗和医疗影像分析，提高医疗服务的准确性和可及性。
</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="bg-pink-100 text-pink-800 text-xs font-medium px-2.5 py-0.5 rounded">医学影像</span>
<span class="bg-pink-100 text-pink-800 text-xs font-medium px-2.5 py-0.5 rounded">药物研发</span>
<span class="bg-pink-100 text-pink-800 text-xs font-medium px-2.5 py-0.5 rounded">个性化治疗</span>
</div>
<button class="text-indigo-600 hover:text-indigo-800 font-medium inline-flex items-center">
查看案例 <i class="fas fa-external-link-alt ml-2"></i>
</button>
</div>
</div>
<!-- 解决方案3 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-500 card-hover">
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="零售电商" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold text-gray-900 mb-3">零售电商</h3>
<p class="text-gray-600 mb-4">
个性化推荐、需求预测、库存优化和智能客服，提升客户体验和运营效率。
</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">个性化推荐</span>
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">需求预测</span>
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">智能客服</span>
</div>
<button class="text-indigo-600 hover:text-indigo-800 font-medium inline-flex items-center">
查看案例 <i class="fas fa-external-link-alt ml-2"></i>
</button>
</div>
</div>
<!-- 解决方案4 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-500 card-hover">
<img src="https://images.unsplash.com/photo-1485827404703-89b55fcc595e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="智能制造" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold text-gray-900 mb-3">智能制造</h3>
<p class="text-gray-600 mb-4">
预测性维护、质量控制、供应链优化和生产流程自动化，提高制造效率和产品质量。
</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded">预测性维护</span>
<span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded">质量控制</span>
<span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded">供应链优化</span>
</div>
<button class="text-indigo-600 hover:text-indigo-800 font-medium inline-flex items-center">
查看案例 <i class="fas fa-external-link-alt ml-2"></i>
</button>
</div>
</div>
</div>
<div class="text-center mt-12">
<button class="border border-indigo-600 text-indigo-600 hover:bg-indigo-50 px-6 py-3 rounded-md text-lg font-medium transition duration-300">
查看更多行业解决方案 <i class="fas fa-chevron-down ml-2"></i>
</button>
</div>
</div>
</section>
<!-- 统计数据 -->
<section class="py-16 bg-indigo-600 text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
<div>
<div class="text-4xl md:text-5xl font-bold mb-2">500+</div>
<div class="text-lg opacity-90">企业客户</div>
</div>
<div>
<div class="text-4xl md:text-5xl font-bold mb-2">95%</div>
<div class="text-lg opacity-90">客户满意度</div>
</div>
<div>
<div class="text-4xl md:text-5xl font-bold mb-2">24/7</div>
<div class="text-lg opacity-90">技术支持</div>
</div>
<div>
<div class="text-4xl md:text-5xl font-bold mb-2">3x</div>
<div class="text-lg opacity-90">平均效率提升</div>
</div>
</div>
</div>
</section>
<!-- 定价 -->
<section id="pricing" 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">简单透明的<span class="gradient-text">定价</span></h2>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">
选择适合您业务需求的定价方案，无需隐藏费用
</p>
</div>
<div class="flex justify-center mb-8">
<div class="inline-flex rounded-md shadow-sm" role="group">
<button type="button" class="px-6 py-3 text-sm font-medium text-white bg-indigo-600 rounded-l-lg">
月度
</button>
<button type="button" class="px-6 py-3 text-sm font-medium text-gray-900 bg-white hover:bg-gray-100 border-t border-b border-gray-200">
年度 (节省20%)
</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<!-- 基础版 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200 transition duration-500 card-hover">
<div class="p-6 border-b border-gray-200">
<h3 class="text-xl font-bold text-gray-900 mb-1">基础版</h3>
<p class="text-gray-600 mb-4">适合小型企业和初创公司</p>
<div class="flex items-baseline mb-4">
<span class="text-4xl font-bold text-gray-900">¥999</span>
<span class="text-gray-500 ml-1">/月</span>
</div>
<button class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-2 px-4 rounded-md transition duration-300">
开始使用
</button>
</div>
<div class="p-6">
<ul class="space-y-3">
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>每月10,000次API调用</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>基础机器学习模型</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>电子邮件支持</span>
</li>
<li class="flex items-center text-gray-400">
<i class="fas fa-times text-gray-300 mr-2"></i>
<span>高级分析功能</span>
</li>
<li class="flex items-center text-gray-400">
<i class="fas fa-times text-gray-300 mr-2"></i>
<span>定制模型训练</span>
</li>
</ul>
</div>
</div>
<!-- 专业版 -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden border-2 border-indigo-600 transform scale-105 z-10 transition duration-500 card-hover">
<div class="bg-indigo-600 text-white text-center py-2">
<span class="text-sm font-medium">最受欢迎</span>
</div>
<div class="p-6 border-b border-gray-200">
<h3 class="text-xl font-bold text-gray-900 mb-1">专业版</h3>
<p class="text-gray-600 mb-4">适合中型企业和成长型公司</p>
<div class="flex items-baseline mb-4">
<span class="text-4xl font-bold text-gray-900">¥2,999</span>
<span class="text-gray-500 ml-1">/月</span>
</div>
<button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-md transition duration-300 transform hover:scale-105">
开始使用
</button>
</div>
<div class="p-6">
<ul class="space-y-3">
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>每月50,000次API调用</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>高级机器学习模型</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>优先支持</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>高级分析功能</span>
</li>
<li class="flex items-center text-gray-400">
<i class="fas fa-times text-gray-300 mr-2"></i>
<span>定制模型训练</span>
</li>
</ul>
</div>
</div>
<!-- 企业版 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200 transition duration-500 card-hover">
<div class="p-6 border-b border-gray-200">
<h3 class="text-xl font-bold text-gray-900 mb-1">企业版</h3>
<p class="text-gray-600 mb-4">适合大型企业和定制需求</p>
<div class="flex items-baseline mb-4">
<span class="text-4xl font-bold text-gray-900">定制</span>
</div>
<button class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-2 px-4 rounded-md transition duration-300">
联系我们
</button>
</div>
<div class="p-6">
<ul class="space-y-3">
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>无限API调用</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>定制机器学习模型</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>24/7专属支持</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>高级分析功能</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>定制模型训练</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- 客户评价 -->
<section 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">客户<span class="gradient-text">评价</span></h2>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">
听听我们的客户是如何评价我们的AI解决方案的
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- 评价1 -->
<div class="bg-white p-6 rounded-xl shadow-md">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/43.jpg" alt="客户评价" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold text-gray-900">张女士</h4>
<p class="text-gray-600 text-sm">某电商平台CTO</p>
</div>
</div>
<div class="flex mb-2">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
</div>
<p class="text-gray-600">
"使用未来智能的推荐系统后，我们的转化率提高了35%，客户满意度也显著提升。他们的技术支持团队非常专业，响应迅速。"
</p>
</div>
<!-- 评价2 -->
<div class="bg-white p-6 rounded-xl shadow-md">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="客户评价" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold text-gray-900">王先生</h4>
<p class="text-gray-600 text-sm">某金融机构数据总监</p>
</div>
</div>
<div class="flex mb-2">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
</div>
<p class="text-gray-600">
"他们的欺诈检测系统帮助我们减少了60%的欺诈交易，同时降低了误报率。集成过程非常顺利，文档齐全。"
</p>
</div>
<!-- 评价3 -->
<div class="bg-white p-6 rounded-xl shadow-md">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="客户评价" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold text-gray-900">李女士</h4>
<p class="text-gray-600 text-sm">某制造企业CIO</p>
</div>
</div>
<div class="flex mb-2">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star-half-alt text-yellow-400"></i>
</div>
<p class="text-gray-600">
"预测性维护解决方案帮助我们减少了30%的设备停机时间，每年节省了数百万元的维护成本。非常值得投资。"
</p>
</div>
</div>
</div>
</section>
<!-- CTA区域 -->
<section class="py-20 bg-gradient-to-r from-indigo-600 to-purple-600 text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6">准备好用AI改变您的业务了吗？</h2>
<p class="text-xl opacity-90 mb-8 max-w-3xl mx-auto">
立即开始免费试用，体验人工智能如何为您的业务带来变革。
</p>
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
<button class="bg-white text-indigo-600 hover:bg-gray-100 px-8 py-4 rounded-md text-lg font-bold transition duration-300 transform hover:scale-105">
开始免费试用
</button>
<button class="border-2 border-white text-white hover:bg-white hover:bg-opacity-10 px-8 py-4 rounded-md text-lg font-bold transition duration-300 transform hover:scale-105">
预约演示 <i class="fas fa-calendar-alt ml-2"></i>
</button>
</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 grid-cols-1 md:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">联系我们</h2>
<p class="text-lg text-gray-600 mb-8">
无论您有任何问题或需求，我们的团队都随时准备为您提供帮助。请填写右侧表单，我们会尽快与您联系。
</p>
<div class="space-y-6">
<div class="flex items-start">
<div class="bg-indigo-100 p-3 rounded-full mr-4">
<i class="fas fa-map-marker-alt text-indigo-600"></i>
</div>
<div>
<h4 class="font-bold text-gray-900 mb-1">办公地址</h4>
<p class="text-gray-600">北京市海淀区中关村南大街5号未来科技大厦18层</p>
</div>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=donk245/caigong" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |