95 lines
4.7 KiB
HTML
95 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>UI/UX Pro Max - 示例落地页</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
<body class="bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 min-h-screen text-white">
|
|
|
|
<!-- 导航栏 -->
|
|
<nav class="fixed top-4 left-4 right-4 z-50">
|
|
<div class="max-w-7xl mx-auto bg-white/10 backdrop-blur-lg rounded-2xl border border-white/20 px-6 py-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="text-2xl font-bold">UI/UX Pro Max</div>
|
|
<div class="hidden md:flex gap-8">
|
|
<a href="#features" class="hover:text-purple-300 transition-colors cursor-pointer">功能</a>
|
|
<a href="#pricing" class="hover:text-purple-300 transition-colors cursor-pointer">定价</a>
|
|
<a href="#about" class="hover:text-purple-300 transition-colors cursor-pointer">关于</a>
|
|
</div>
|
|
<button class="bg-purple-500 hover:bg-purple-600 px-6 py-2 rounded-lg transition-colors cursor-pointer">
|
|
开始使用
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 英雄区 -->
|
|
<section class="pt-32 pb-20 px-4">
|
|
<div class="max-w-7xl mx-auto text-center">
|
|
<h1 class="text-6xl font-bold mb-6 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
|
|
AI 驱动的设计智能
|
|
</h1>
|
|
<p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
|
|
为 AI 编程助手提供专业的 UI/UX 设计知识库，包含 57 种风格、95 个配色方案和 98 条最佳实践
|
|
</p>
|
|
<div class="flex gap-4 justify-center">
|
|
<button class="bg-purple-500 hover:bg-purple-600 px-8 py-3 rounded-lg text-lg transition-colors cursor-pointer">
|
|
立即安装
|
|
</button>
|
|
<button class="bg-white/10 hover:bg-white/20 backdrop-blur-lg border border-white/20 px-8 py-3 rounded-lg text-lg transition-colors cursor-pointer">
|
|
查看文档
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 功能展示 -->
|
|
<section id="features" class="py-20 px-4">
|
|
<div class="max-w-7xl mx-auto">
|
|
<h2 class="text-4xl font-bold text-center mb-16">核心功能</h2>
|
|
<div class="grid md:grid-cols-3 gap-8">
|
|
<div class="bg-white/10 backdrop-blur-lg rounded-2xl border border-white/20 p-8 hover:bg-white/15 transition-colors cursor-pointer">
|
|
<div class="text-4xl mb-4">🎨</div>
|
|
<h3 class="text-2xl font-bold mb-4">57 种 UI 风格</h3>
|
|
<p class="text-gray-300">玻璃态、极简主义、野兽派、新拟态等现代设计风格</p>
|
|
</div>
|
|
<div class="bg-white/10 backdrop-blur-lg rounded-2xl border border-white/20 p-8 hover:bg-white/15 transition-colors cursor-pointer">
|
|
<div class="text-4xl mb-4">🎯</div>
|
|
<h3 class="text-2xl font-bold mb-4">95 个配色方案</h3>
|
|
<p class="text-gray-300">针对不同行业和产品类型的专业配色</p>
|
|
</div>
|
|
<div class="bg-white/10 backdrop-blur-lg rounded-2xl border border-white/20 p-8 hover:bg-white/15 transition-colors cursor-pointer">
|
|
<div class="text-4xl mb-4">✨</div>
|
|
<h3 class="text-2xl font-bold mb-4">98 条 UX 指南</h3>
|
|
<p class="text-gray-300">最佳实践、反模式和无障碍规则</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 定价 -->
|
|
<section id="pricing" class="py-20 px-4">
|
|
<div class="max-w-7xl mx-auto text-center">
|
|
<h2 class="text-4xl font-bold mb-16">完全免费</h2>
|
|
<div class="max-w-md mx-auto bg-white/10 backdrop-blur-lg rounded-2xl border border-white/20 p-8">
|
|
<div class="text-5xl font-bold mb-4">$0</div>
|
|
<p class="text-gray-300 mb-8">开源项目，永久免费使用</p>
|
|
<button class="w-full bg-purple-500 hover:bg-purple-600 px-8 py-3 rounded-lg text-lg transition-colors cursor-pointer">
|
|
开始使用
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 页脚 -->
|
|
<footer class="py-12 px-4 border-t border-white/10">
|
|
<div class="max-w-7xl mx-auto text-center text-gray-400">
|
|
<p>© 2024 UI/UX Pro Max. MIT License.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|