|
|
<!DOCTYPE html> |
|
|
<html lang="zh-CN"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>智能CAD生成 | 文字转CAD的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"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
darkMode: 'class', |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: { |
|
|
50: '#f0f9ff', |
|
|
100: '#e0f2fe', |
|
|
200: '#bae6fd', |
|
|
300: '#7dd3fc', |
|
|
400: '#38bdf8', |
|
|
500: '#0ea5e9', |
|
|
600: '#0284c7', |
|
|
700: '#0369a1', |
|
|
800: '#075985', |
|
|
900: '#0c4a6e', |
|
|
}, |
|
|
dark: { |
|
|
800: '#1e293b', |
|
|
900: '#0f172a', |
|
|
} |
|
|
}, |
|
|
fontFamily: { |
|
|
'sans': ['"Noto Sans SC"', 'sans-serif'], |
|
|
}, |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Noto Sans SC', sans-serif; |
|
|
background-color: #0f172a; |
|
|
color: #e2e8f0; |
|
|
} |
|
|
|
|
|
.gradient-text { |
|
|
background: linear-gradient(90deg, #38bdf8 0%, #7dd3fc 50%, #bae6fd 100%); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.9) 100%); |
|
|
} |
|
|
|
|
|
.feature-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(2, 132, 199, 0.3); |
|
|
} |
|
|
|
|
|
.input-field { |
|
|
background-color: rgba(30, 41, 59, 0.7); |
|
|
border: 1px solid #334155; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.input-field:focus { |
|
|
border-color: #38bdf8; |
|
|
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.3); |
|
|
} |
|
|
|
|
|
.btn-primary { |
|
|
background: linear-gradient(90deg, #0ea5e9 0%, #38bdf8 100%); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.btn-primary:hover { |
|
|
background: linear-gradient(90deg, #0284c7 0%, #0ea5e9 100%); |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 15px rgba(2, 132, 199, 0.4); |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -2px; |
|
|
left: 0; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
background: #38bdf8; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.scroll-down { |
|
|
animation: bounce 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes bounce { |
|
|
0%, 20%, 50%, 80%, 100% { |
|
|
transform: translateY(0); |
|
|
} |
|
|
40% { |
|
|
transform: translateY(-15px); |
|
|
} |
|
|
60% { |
|
|
transform: translateY(-7px); |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="dark bg-dark-900 text-gray-200"> |
|
|
|
|
|
<nav class="fixed w-full bg-dark-900/90 backdrop-blur-md z-50 border-b border-gray-800"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex items-center justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<span class="text-2xl font-bold gradient-text">CAD<span class="text-white">AI</span></span> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<div class="ml-10 flex items-baseline space-x-8"> |
|
|
<a href="#features" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">功能特点</a> |
|
|
<a href="#how-it-works" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">工作原理</a> |
|
|
<a href="#pricing" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">定价方案</a> |
|
|
<a href="#testimonials" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">客户评价</a> |
|
|
<a href="#faq" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">常见问题</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<div class="ml-4 flex items-center md:ml-6"> |
|
|
<a href="#contact" class="px-4 py-2 rounded-md text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 transition duration-300">联系我们</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="-mr-2 flex md:hidden"> |
|
|
<button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"> |
|
|
<span class="sr-only">打开主菜单</span> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden bg-dark-800"> |
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
|
|
<a href="#features" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">功能特点</a> |
|
|
<a href="#how-it-works" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">工作原理</a> |
|
|
<a href="#pricing" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">定价方案</a> |
|
|
<a href="#testimonials" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">客户评价</a> |
|
|
<a href="#faq" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">常见问题</a> |
|
|
<a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-primary-600 hover:bg-primary-700">联系我们</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="hero-gradient pt-32 pb-20 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-12 md:mb-0"> |
|
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6"> |
|
|
<span class="gradient-text">文字描述</span> |
|
|
<br> |
|
|
<span class="text-white">即刻生成专业</span> |
|
|
<span class="gradient-text">CAD图纸</span> |
|
|
</h1> |
|
|
<p class="text-lg md:text-xl text-gray-300 mb-8 max-w-lg"> |
|
|
通过人工智能技术，将您的文字描述自动转换为精确的CAD设计图纸，节省90%的设计时间，让创意快速变为现实。 |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<a href="#demo" class="btn-primary text-white font-semibold py-3 px-8 rounded-lg text-center">免费试用</a> |
|
|
<a href="#how-it-works" class="bg-dark-800 text-white font-semibold py-3 px-8 rounded-lg border border-gray-700 hover:border-primary-500 transition duration-300 text-center">了解更多</a> |
|
|
</div> |
|
|
<div class="mt-8 flex items-center"> |
|
|
<div class="flex -space-x-2"> |
|
|
<img class="inline-block h-10 w-10 rounded-full ring-2 ring-dark-900" src="https://randomuser.me/api/portraits/women/1.jpg" alt=""> |
|
|
<img class="inline-block h-10 w-10 rounded-full ring-2 ring-dark-900" src="https://randomuser.me/api/portraits/men/2.jpg" alt=""> |
|
|
<img class="inline-block h-10 w-10 rounded-full ring-2 ring-dark-900" src="https://randomuser.me/api/portraits/women/3.jpg" alt=""> |
|
|
</div> |
|
|
<p class="ml-4 text-gray-400"> |
|
|
<span class="text-white font-medium">500+</span> 设计师正在使用 |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 relative"> |
|
|
<div class="relative z-10 rounded-xl overflow-hidden border border-gray-800 shadow-2xl"> |
|
|
<div class="bg-dark-800 py-3 px-4 flex items-center"> |
|
|
<div class="flex space-x-2"> |
|
|
<div class="w-3 h-3 rounded-full bg-red-500"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-yellow-500"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500"></div> |
|
|
</div> |
|
|
<div class="flex-1 text-center text-sm text-gray-400">CAD设计预览</div> |
|
|
</div> |
|
|
<img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="CAD设计示例" class="w-full h-auto"> |
|
|
</div> |
|
|
<div class="absolute -bottom-8 -left-8 w-32 h-32 bg-primary-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20"></div> |
|
|
<div class="absolute -top-8 -right-8 w-32 h-32 bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-16 text-center scroll-down"> |
|
|
<a href="#features" class="text-gray-400 hover:text-white"> |
|
|
<i class="fas fa-chevron-down text-2xl"></i> |
|
|
</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-12 bg-dark-800"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<p class="text-center text-gray-400 mb-8">信任我们的行业领导者</p> |
|
|
<div class="grid grid-cols-2 md:grid-cols-5 gap-8 items-center justify-center"> |
|
|
<img src="https://via.placeholder.com/160x60?text=Company+1" alt="Company 1" class="h-8 opacity-70 hover:opacity-100 transition duration-300 mx-auto"> |
|
|
<img src="https://via.placeholder.com/160x60?text=Company+2" alt="Company 2" class="h-10 opacity-70 hover:opacity-100 transition duration-300 mx-auto"> |
|
|
<img src="https://via.placeholder.com/160x60?text=Company+3" alt="Company 3" class="h-12 opacity-70 hover:opacity-100 transition duration-300 mx-auto"> |
|
|
<img src="https://via.placeholder.com/160x60?text=Company+4" alt="Company 4" class="h-10 opacity-70 hover:opacity-100 transition duration-300 mx-auto"> |
|
|
<img src="https://via.placeholder.com/160x60?text=Company+5" alt="Company 5" class="h-8 opacity-70 hover:opacity-100 transition duration-300 mx-auto"> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="features" class="py-20 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<span class="inline-block px-3 py-1 text-sm font-semibold text-primary-500 bg-primary-500/10 rounded-full mb-4">强大功能</span> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">释放AI CAD设计的全部潜力</h2> |
|
|
<p class="text-lg text-gray-400 max-w-3xl mx-auto">我们的AI技术能够理解复杂的设计需求，并生成精确的CAD图纸，满足各种行业标准</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
<div class="feature-card bg-dark-800 rounded-xl p-8 border border-gray-800 hover:border-primary-500 transition duration-300"> |
|
|
<div class="w-14 h-14 flex items-center justify-center bg-primary-500/10 rounded-lg mb-6"> |
|
|
<i class="fas fa-bolt text-2xl text-primary-500"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-3">极速生成</h3> |
|
|
<p class="text-gray-400">只需输入文字描述，几秒钟内即可获得专业级CAD设计，比传统方法快10倍以上</p> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card bg-dark-800 rounded-xl p-8 border border-gray-800 hover:border-primary-500 transition duration-300"> |
|
|
<div class="w-14 h-14 flex items-center justify-center bg-primary-500/10 rounded-lg mb-6"> |
|
|
<i class="fas fa-cogs text-2xl text-primary-500"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-3">智能修正</h3> |
|
|
<p class="text-gray-400">AI自动检测并修正设计中的不合理之处，确保图纸符合工程标准和最佳实践</p> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card bg-dark-800 rounded-xl p-8 border border-gray-800 hover:border-primary-500 transition duration-300"> |
|
|
<div class="w-14 h-14 flex items-center justify-center bg-primary-500/10 rounded-lg mb-6"> |
|
|
<i class="fas fa-file-export text-2xl text-primary-500"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-3">多格式导出</h3> |
|
|
<p class="text-gray-400">支持DWG、DXF、STEP、IGES等多种工业标准格式，无缝对接您的工作流程</p> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card bg-dark-800 rounded-xl p-8 border border-gray-800 hover:border-primary-500 transition duration-300"> |
|
|
<div class="w-14 h-14 flex items-center justify-center bg-primary-500/10 rounded-lg mb-6"> |
|
|
<i class="fas fa-layer-group text-2xl text-primary-500"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-3">智能分层</h3> |
|
|
<p class="text-gray-400">自动按照行业标准对图纸元素进行分层管理，提高后续编辑和生产的效率</p> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card bg-dark-800 rounded-xl p-8 border border-gray-800 hover:border-primary-500 transition duration-300"> |
|
|
<div class="w-14 h-14 flex items-center justify-center bg-primary-500/10 rounded-lg mb-6"> |
|
|
<i class="fas fa-ruler-combined text-2xl text-primary-500"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-3">精确尺寸</h3> |
|
|
<p class="text-gray-400">AI精确理解并应用您指定的尺寸参数，误差控制在0.1mm以内，满足精密制造需求</p> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card bg-dark-800 rounded-xl p-8 border border-gray-800 hover:border-primary-500 transition duration-300"> |
|
|
<div class="w-14 h-14 flex items-center justify-center bg-primary-500/10 rounded-lg mb-6"> |
|
|
<i class="fas fa-users text-2xl text-primary-500"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-3">团队协作</h3> |
|
|
<p class="text-gray-400">实时共享和协作编辑功能，让团队成员可以同时参与设计评审和修改</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="how-it-works" class="py-20 bg-dark-800 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<span class="inline-block px-3 py-1 text-sm font-semibold text-primary-500 bg-primary-500/10 rounded-full mb-4">工作原理</span> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">只需三步，文字变CAD</h2> |
|
|
<p class="text-lg text-gray-400 max-w-3xl mx-auto">我们的AI经过数百万专业图纸训练，能够理解复杂工程术语并生成精确设计</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-12 md:mb-0 md:pr-12"> |
|
|
<div class="space-y-8"> |
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-full bg-primary-500 text-white font-bold text-lg">1</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-xl font-bold text-white mb-2">输入设计描述</h3> |
|
|
<p class="text-gray-400">用自然语言描述您的设计需求，包括尺寸、形状、材料等参数。可以使用专业术语或简单描述。</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-full bg-primary-500 text-white font-bold text-lg">2</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-xl font-bold text-white mb-2">AI生成设计</h3> |
|
|
<p class="text-gray-400">我们的AI引擎分析您的需求，参考行业标准和最佳实践，生成初步CAD设计方案。</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-full bg-primary-500 text-white font-bold text-lg">3</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-xl font-bold text-white mb-2">调整与导出</h3> |
|
|
<p class="text-gray-400">预览生成的设计，进行必要的调整，然后导出为所需格式，直接用于生产或进一步编辑。</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="md:w-1/2 relative"> |
|
|
<div class="bg-dark-900 rounded-xl overflow-hidden border border-gray-700 shadow-xl"> |
|
|
<div class="bg-dark-800 py-3 px-4 flex items-center"> |
|
|
<div class="flex space-x-2"> |
|
|
<div class="w-3 h-3 rounded-full bg-red-500"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-yellow-500"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500"></div> |
|
|
</div> |
|
|
<div class="flex-1 text-center text-sm text-gray-400">CADAI 工作界面</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="bg-dark-700 rounded-lg p-4 mb-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-primary-500 flex items-center justify-center text-white"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<div class="text-sm font-medium text-white">用户输入</div> |
|
|
<div class="mt-1 text-sm text-gray-300 bg-dark-600 p-3 rounded-lg"> |
|
|
"设计一个长300mm、宽200mm、高150mm的铝制外壳，正面有5个直径10mm的圆形散热孔，顶部有一个120mm×80mm的矩形开口，四角有R10的圆角" |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-dark-700 rounded-lg p-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-500 flex items-center justify-center text-white"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<div class="text-sm font-medium text-white">CADAI 响应</div> |
|
|
<div class="mt-1 text-sm text-gray-300 bg-dark-600 p-3 rounded-lg"> |
|
|
"已生成符合要求的3D模型和工程图纸。散热孔按均匀分布排列，顶部开口居中。已应用所有指定尺寸和圆角。是否需要进一步调整或导出为特定格式？" |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<span class="inline-block px-3 py-1 text-sm font-semibold text-primary-500 bg-primary-500/10 rounded-full mb-4">产品演示</span> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">见证AI CAD的魔力</h2> |
|
|
<p class="text-lg text-gray-400 max-w-3xl mx-auto">观看我们的产品如何将简单的文字描述转化为专业级CAD设计</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-dark-800 rounded-xl overflow-hidden border border-gray-700 shadow-xl max-w-4xl mx-auto"> |
|
|
<div class="aspect-w-16 aspect-h-9"> |
|
|
<div class="w-full h-0 pb-[56.25%] relative"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-dark-700 to-dark-900 flex items-center justify-center"> |
|
|
<button class="w-20 h-20 rounded-full bg-primary-500/20 border border-primary-500/50 flex items-center justify-center text-primary-500 hover:bg-primary-500/30 transition duration-300"> |
|
|
<i class="fas fa-play text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6 border-t border-gray-700"> |
|
|
<h3 class="text-xl font-bold text-white mb-2">从文字到CAD的完整工作流程</h3> |
|
|
<p class="text-gray-400">本视频展示了如何从简单的文字描述开始，通过我们的AI平台生成复杂的机械零件CAD图纸，并进行必要的调整和导出。</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="pricing" class="py-20 bg-dark-800 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<span class="inline-block px-3 py-1 text-sm font-semibold text-primary-500 bg-primary-500/10 rounded-full mb-4">定价方案</span> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">灵活选择，满足各种需求</h2> |
|
|
<p class="text-lg text-gray-400 max-w-3xl mx-auto">无论您是独立设计师还是大型团队，我们都有适合您的方案</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto"> |
|
|
<div class="bg-dark-900 rounded-xl p-8 border border-gray-700 hover:border-primary-500 transition duration-300"> |
|
|
<h3 class="text-xl font-bold text-white mb-4">入门版</h3> |
|
|
<div class="mb-6"> |
|
|
<span class="text-4xl font-bold text-white">¥99</span> |
|
|
<span class="text-gray-400">/月</span> |
|
|
</div> |
|
|
<p class="text-gray-400 mb-6">适合个人设计师和小型项目</p> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-primary-500 mr-3"></i> |
|
|
<span class="text-gray-300">每月50次设计生成</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-primary-500 mr-3"></i> |
|
|
<span class="text-gray-300">基础CAD格式导出</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-primary-500 mr-3"></i> |
|
|
<span class="text-gray-300">单个用户许可</span> |
|
|
</li> |
|
|
<li class="flex items-center text-gray-500"> |
|
|
<i class="fas fa-times mr-3"></i> |
|
|
<span>高级技术支持</span> |
|
|
</li> |
|
|
<li class="flex items-center text-gray-500"> |
|
|
<i class="fas fa-times mr-3"></i> |
|
|
<span>团队协作功能</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="#" class="block w-full py-3 px-4 text-center rounded-lg bg-dark-700 hover:bg-dark-600 text-white font-medium border border-gray-700 transition duration-300">开始使用</a> |
|
|
</div> |
|
|
|
|
|
<div class="bg-dark-900 rounded-xl p-8 border-2 border-primary-500 transform scale-105 z-10 shadow-lg"> |
|
|
<div class="absolute top-0 right-0 bg-primary-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">最受欢迎</div> |
|
|
<h3 class="text-xl font-bold text-white mb-4">专业版</h3> |
|
|
<div class="mb-6"> |
|
|
<span class="text-4xl font-bold text-white">¥299</span> |
|
|
<span class="text-gray-400">/月</span> |
|
|
</div> |
|
|
<p class="text-gray-400 mb-6">适合中小型设计团队</p> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-primary-500 mr-3"></i> |
|
|
<span class="text-gray-300">每月200次设计生成</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-primary-500 mr-3"></i> |
|
|
<span class="text-gray-300">所有CAD格式导出</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-primary-500 mr-3"></i> |
|
|
<span class="text-gray-300">最多5个用户许可</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-primary-500 mr-3"></i> |
|
|
<span class="text-gray-300">优先技术支持</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-primary-500 mr-3"></i> |
|
|
<span class="text-gray-300">基础团队协作功能</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="#" class="block w-full py-3 px-4 text-center rounded-lg btn-primary font-medium transition duration-300">开始使用</a> |
|
|
</div> |
|
|
|
|
|
<div class="bg-dark-900 rounded-xl p-8 border border-gray-700 hover:border-primary-500 transition duration-300"> |
|
|
<h3 class="text-xl font-bold text-white mb-4">企业版</h3> |
|
|
<div class="mb-6"> |
|
|
<span class="text-4xl font-bold text-white">定制</span> |
|
|
</div> |
|
|
<p class="text-gray-400 mb-6">适合大型企业和定制需求</p> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-primary-500 mr-3"></i> |
|
|
<span class="text-gray-300">无限设计生成</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-primary-500 mr-3"></i> |
|
|
<span class="text-gray-300">所有CAD格式导出</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-primary-500 mr-3"></i> |
|
|
<span class="text-gray-300">多用户团队管理</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-primary-500 mr-3"></i> |
|
|
<span class="text-gray-300">专属客户经理</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-primary-500 mr-3"></i> |
|
|
<span class="text-gray-300">高级团队协作功能</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="#" class="block w-full py-3 px-4 text-center rounded-lg bg-dark-700 hover:bg-dark-600 text-white font-medium border border-gray-700 transition duration-300">联系我们</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 text-center"> |
|
|
<p class="text-gray-400">不确定哪种方案适合您？ <a href="#contact" class="text-primary-500 hover:text-primary-400 underline">联系我们</a> 获取个性化建议</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="testimonials" class="py-20 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<span class="inline-block px-3 py-1 text-sm font-semibold text-primary-500 bg-primary-500/10 rounded-full mb-4">客户评价</span> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">听听我们的用户怎么说</h2> |
|
|
<p class="text-lg text-gray-400 max-w-3xl mx-auto">来自各行业设计师和工程师的真实反馈</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
<div class="bg-dark-800 rounded-xl p-8 border border-gray-700"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Zhang"> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-bold text-white">张雨薇</h4> |
|
|
<p class="text-gray-400">机械设计师</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-6">"使用CADAI后，我的设计效率提高了3倍。以前需要一整天完成的设计现在只需几小时，而且AI生成的图纸质量非常高，减少了大量返工。"</p> |
|
|
<div class="flex"> |
|
|
<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> |
|
|
</div> |
|
|
|
|
|
<div class="bg-dark-800 rounded-xl p-8 border border-gray-700"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Li Wei"> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-bold text-white">李伟</h4> |
|
|
<p class="text-gray-400">产品经理</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-6">"作为非技术人员，CADAI让我能够直接将想法转化为设计图纸，与工程师沟通效率大幅提升。我们的产品开发周期缩短了40%。"</p> |
|
|
<div class="flex"> |
|
|
<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> |
|
|
</div> |
|
|
|
|
|
<div class="bg-dark-800 rounded-xl p-8 border border-gray-700"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Wang Jing"> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-bold text-white">王静</h4> |
|
|
<p class="text-gray-400">建筑设计师</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-6">"CADAI理解建筑术语的能力令人印象深刻。它生成的图纸符合我们的行业标准，节省了大量重复性工作，让我们能专注于创意设计。"</p> |
|
|
<div class="flex"> |
|
|
<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> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="faq" class="py-20 bg-dark-800 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<span class="inline-block px-3 py-1 text-sm font-semibold text-primary-500 bg-primary-500/10 rounded-full mb-4">常见问题</span> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">您可能关心的问题</h2> |
|
|
<p class="text-lg text-gray-400">找不到答案？<a href="#contact" class="text-primary-500 hover:text-primary-400 ml-2">联系我们</a></p> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="bg-dark-900 rounded-xl overflow-hidden border border-gray-700"> |
|
|
<button class="faq-toggle w-full flex items-center justify-between p-6 text-left"> |
|
|
<h3 class="text-lg font-medium text-white">CADAI支持哪些CAD格式？</h3> |
|
|
<i class="fas fa-chevron-down text-gray-400 transform transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="faq-content hidden px-6 pb-6 pt-0"> |
|
|
<p class="text-gray-400">CADAI支持所有主流CAD格式，包括DWG、DXF、STEP、IGES、STL、OBJ等。我们还支持导出为PDF、SVG等通用格式，方便查看和分享。如果您有特殊格式需求，可以联系我们定制解决方案。</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-dark-900 rounded-xl overflow-hidden border border-gray-700"> |
|
|
<button class="faq-toggle w-full flex items-center justify-between p-6 text-left"> |
|
|
<h3 class="text-lg font-medium text-white">AI生成的设计精度如何？</h3> |
|
|
<i class="fas fa-chevron-down text-gray-400 transform transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="faq-content hidden px-6 pb-6 pt-0"> |
|
|
<p class="text-gray-400">CADAI生成的图纸精度控制在0.1mm以内，满足绝大多数工程需求。对于特别精密的零件(如公差要求±0.01mm)，我们建议在生成后进行人工复核。AI会自动标注关键尺寸和公差，帮助您快速验证设计。</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-dark-900 rounded-xl overflow-hidden border border-gray-700"> |
|
|
<button class="faq-toggle w-full flex items-center justify-between p-6 text-left"> |
|
|
<h3 class="text-lg font-medium text-white">是否需要CAD专业知识才能使用？</h3> |
|
|
<i class="fas fa-chevron-down text-gray-400 transform transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="faq-content hidden px-6 pb-6 pt-0"> |
|
|
<p class="text-gray-400">不需要。CADAI设计初衷就是让非专业人士也能快速创建CAD设计。您可以用自然语言描述需求，AI会处理技术细节。当然，如果您有CAD经验，可以使用专业术语获得更精确的结果。我们还提供模板库和示例，帮助您快速上手。</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-dark-900 rounded-xl overflow-hidden border border-gray-700"> |
|
|
<button class="faq-toggle w-full flex items-center justify-between p-6 text-left"> |
|
|
<h3 class="text-lg font-medium text-white">如何保证设计的安全性和隐私？</h3> |
|
|
<i class="fas fa-chevron-down text-gray-400 transform transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="faq-content hidden px-6 pb-6 pt-0"> |
|
|
<p class="text-gray-400">我们采用企业级加密技术保护您的数据。所有设计文件和通信都经过加密传输和存储。您可以选择将数据保存在本地服务器(企业版功能)。我们不会将您的设计用于训练AI模型，除非获得明确授权。详细内容请参阅我们的隐私政策。</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-dark-900 rounded-xl overflow-hidden border border-gray-700"> |
|
|
<button class="faq-toggle w-full flex items-center justify-between p-6 text-left"> |
|
|
<h3 class="text-lg font-medium text-white">能否集成到现有设计流程中？</h3> |
|
|
<i class="fas fa-chevron-down text-gray-400 transform transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="faq-content hidden px-6 pb-6 pt-0"> |
|
|
<p class="text-gray-400">可以。CADAI提供API接口，支持与主流CAD软件(如AutoCAD、SolidWorks等)和PLM系统集成。我们还支持自定义工作流和自动化脚本，让AI生成的设计无缝融入您现有的设计验证和生产流程。企业客户可获得专属集成支持。</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-20 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<span class="inline-block px-3 py-1 text-sm font-semibold text-primary-500 bg-primary-500/10 rounded-full mb-4">联系我们</span> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">准备好改变您的设计方式了吗？</h2> |
|
|
<p class="text-lg text-gray-400 max-w-3xl mx-auto">填写下方表单，我们的专家会尽快与您联系</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col lg:flex-row bg-dark-800 rounded-xl overflow-hidden border border-gray-700 shadow-xl"> |
|
|
<div class="lg:w-1/2 p-12"> |
|
|
<h3 class="text-2xl font-bold text-white mb-6">发送消息</h3> |
|
|
<form> |
|
|
<div class="mb-6"> |
|
|
<label for="name" class="block text-sm font-medium text-gray-300 mb-2">您的姓名</label> |
|
|
<input type="text" id="name" class="w-full input-field py-3 px-4 rounded-lg text-white" placeholder="张三"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label for="email" class="block text-sm font-medium text-gray-300 mb-2">电子邮箱</label> |
|
|
<input type="email" id="email" class="w-full input-field py-3 px-4 rounded-lg text-white" placeholder="[email protected]"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label for="company" class="block text-sm font-medium text-gray-300 mb-2">公司名称 (选填)</label> |
|
|
<input type="text" id="company" class="w-full input-field py-3 px-4 rounded-lg text-white" placeholder="ABC科技有限公司"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label for="message" class="block text-sm font-medium text-gray-300 mb-2">您的需求</label> |
|
|
<textarea id="message" rows="4" class="w-full input-field py-3 px-4 rounded-lg text-white" placeholder="请描述您的CAD设计需求..."></textarea> |
|
|
</div> |
|
|
<button type="submit" class="w-full btn-primary py-3 px-4 rounded-lg font-medium">发送消息</button> |
|
|
</form> |
|
|
</div> |
|
|
<div class="lg:w-1/2 bg-gradient-to-br from-dark-700 to-dark-900 p-12 flex flex-col justify-between"> |
|
|
<div> |
|
|
<h3 class="text-2xl font-bold text-white mb-6">其他联系方式</h3> |
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-primary-500/10 flex items-center justify-center text-primary-500"> |
|
|
<i class="fas fa-envelope"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-medium text-white">电子邮件</h4> |
|
|
<p class="text-gray-400">[email protected]</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-primary-500/10 flex items-center justify-center text-primary-500"> |
|
|
<i class="fas fa-phone-alt"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-medium text-white">电话支持</h4> |
|
|
<p class="text-gray-400">400-888-8888</p> |
|
|
<p class="text-sm text-gray-500">周一至周五 9:00-18:00</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-primary-500/10 flex items-center justify-center text-primary-500"> |
|
|
<i class="fas fa-map-marker-alt"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-medium text-white">公司地址</h4> |
|
|
<p class="text-gray-400">上海市浦东新区张江高科技园区亮秀路112号Y1座</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-12"> |
|
|
<h4 class="text-lg font-medium text-white mb-4">关注我们</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="h-10 w-10 rounded-full bg-dark-700 hover:bg-dark-600 flex items-center justify-center text-gray-400 hover:text-white transition duration-300"> |
|
|
<i class="fab fa-weixin"></i> |
|
|
</a> |
|
|
<a href="#" class="h-10 w-10 rounded-full bg-dark-700 hover:bg-dark-600 flex items-center justify-center text-gray-400 hover:text-white transition duration-300"> |
|
|
<i class="fab fa-weibo"></i> |
|
|
</a> |
|
|
<a href="#" class="h-10 w-10 rounded-full bg-dark-700 hover:bg-dark-600 flex items-center justify-center text-gray-400 hover:text-white transition duration-300"> |
|
|
<i class="fab fa-linkedin-in"></i> |
|
|
</a> |
|
|
<a href="#" class="h-10 w-10 rounded-full bg-dark-700 hover:bg-dark-600 flex items-center justify-center text-gray-400 hover:text-white transition duration-300"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="demo" class="py-20 bg-gradient-to-br from-dark-800 to-dark-900 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="max-w-4xl mx-auto text-center"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-white mb-6">立即体验AI CAD生成</h2> |
|
|
<p class="text-xl text-gray-400 mb-10">无需信用卡，注册即可获得7天专业版试用</p> |
|
|
<div class="max-w-md mx-auto"> |
|
|
<div class="flex"> |
|
|
<input type="email" placeholder="输入您的电子邮箱" class="flex-1 input-field py-4 px-6 rounded-l-lg text-white"> |
|
|
<button class="btn-primary py-4 px-6 rounded-r-lg font-medium whitespace-nowrap">开始免费试用</button> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 mt-3">点击"开始免费试用"即表示您同意我们的服务条款和隐私政策</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-dark-900 border-t border-gray-800"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> |
|
|
<div class="grid grid-cols-2 md:grid-cols-5 gap-8"> |
|
|
<div class="col-span-2"> |
|
|
<span class="text-2xl font-bold gradient-text">CAD<span class="text-white">AI</span></span> |
|
|
<p class="mt-4 text-gray-400">通过人工智能技术革新CAD设计流程，让创意更快变为现实。</p> |
|
|
<div class="mt-6 flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-weixin text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-weibo text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-linkedin-in text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-github text-xl"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-white uppercase tracking-wider">产品</h3> |
|
|
<ul class="mt-4 space-y-3"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">功能</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">定价</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">演示</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">更新</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-white uppercase tracking-wider">资源</h3> |
|
|
<ul class="mt-4 space-y-3"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">文档</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">教程</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">博客</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">API</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-white uppercase tracking-wider">公司</h3> |
|
|
<ul class="mt-4 space-y-3"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">关于我们</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">加入我们</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">隐私政策</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">服务条款</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-400 text-sm">© 2023 CADAI Technologies. 保留所有权利。</p> |
|
|
<div class="mt-4 md:mt-0 flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-sm">隐私政策</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-sm">服务条款</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-sm">Cookie政策</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.faq-toggle').forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
const content = button.nextElementSibling; |
|
|
const icon = button.querySelector('i'); |
|
|
|
|
|
content.classList.toggle('hidden'); |
|
|
icon.classList.toggle('rotate-180'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
if (targetId === '#') return; |
|
|
|
|
|
const targetElement = document.querySelector(targetId); |
|
|
if (targetElement) { |
|
|
window.scrollTo({ |
|
|
top: targetElement.offsetTop - 80, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
|
|
|
|
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
mobileMenu.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('scroll', function() { |
|
|
const nav = document.querySelector('nav'); |
|
|
if (window.scrollY > 50) { |
|
|
nav.classList.add('shadow-lg'); |
|
|
nav.classList.remove('bg-dark-900/90'); |
|
|
nav.classList.add('bg-dark-900'); |
|
|
} else { |
|
|
nav.classList.remove('shadow-lg'); |
|
|
nav.classList.add('bg-dark-900/90'); |
|
|
nav.classList.remove('bg-dark-900'); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
<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=ColamanAI/deepsite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
