English 中文 العربية 日本語 Português

Tailwind CSS: 实战：用Tailwind CSS构建SaaS产品落地页

1. 项目需求

构建一个完整的 SaaS 产品落地页（Landing Page），包含导航栏、Hero 区域、特性展示、价格方案、用户评价和页脚，支持暗黑模式，适配移动端到桌面端。

2. 技术要求

3. 分步实现

▶ 示例：第一步 - 响应式导航栏

导航栏包含 Logo、菜单链接和 CTA 按钮，移动端折叠为汉堡菜单。

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh" class="scroll-smooth">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CloudFlow - 智能工作流平台</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class'
    }
  </script>
</head>
<body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors">

  <!-- 导航栏 -->
  <nav class="fixed top-0 w-full bg-white/80 dark:bg-gray-950/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800 z-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-16">
        <!-- Logo -->
        <div class="flex items-center gap-2">
          <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
            <span class="text-white font-bold text-sm">CF</span>
          </div>
          <span class="text-xl font-bold">CloudFlow</span>
        </div>

        <!-- 桌面端菜单 -->
        <div class="hidden md:flex items-center gap-8">
          <a href="#features" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">功能</a>
          <a href="#pricing" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">价格</a>
          <a href="#testimonials" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">评价</a>
        </div>

        <!-- CTA 按钮 -->
        <div class="hidden md:flex items-center gap-4">
          <button id="themeToggle" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
            <span class="dark:hidden">🌙</span>
            <span class="hidden dark:inline">☀️</span>
          </button>
          <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">登录</a>
          <a href="#" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">免费试用</a>
        </div>

        <!-- 移动端菜单按钮 -->
        <button id="menuToggle" class="md:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
          </svg>
        </button>
      </div>
    </div>

    <!-- 移动端菜单 -->
    <div id="mobileMenu" class="hidden md:hidden border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950">
      <div class="px-4 py-4 space-y-3">
        <a href="#features" class="block py-2 text-gray-600 dark:text-gray-400 hover:text-blue-600">功能</a>
        <a href="#pricing" class="block py-2 text-gray-600 dark:text-gray-400 hover:text-blue-600">价格</a>
        <a href="#testimonials" class="block py-2 text-gray-600 dark:text-gray-400 hover:text-blue-600">评价</a>
        <div class="pt-3 border-t border-gray-200 dark:border-gray-800">
          <a href="#" class="block w-full text-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">免费试用</a>
        </div>
      </div>
    </div>
  </nav>

  <script>
    const themeToggle = document.getElementById('themeToggle');
    themeToggle?.addEventListener('click', () => {
      document.documentElement.classList.toggle('dark');
    });
    const menuToggle = document.getElementById('menuToggle');
    const mobileMenu = document.getElementById('mobileMenu');
    menuToggle?.addEventListener('click', () => {
      mobileMenu.classList.toggle('hidden');
    });
  </script>

</body>
</html>
逻辑代码 67 行（超过 40 行限制，仅展示）

▶ 示例：第二步 - Hero 区域

大标题配合副标题、双 CTA 按钮和特性图标列表。

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh" class="scroll-smooth">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CloudFlow - 智能工作流平台</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = { darkMode: 'class' }
  </script>
</head>
<body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors">

  <!-- Hero 区域 -->
  <section class="pt-32 pb-20 px-4">
    <div class="max-w-7xl mx-auto text-center">
      <!-- 标签 -->
      <div class="inline-flex items-center gap-2 px-4 py-1.5 bg-blue-50 dark:bg-blue-950 text-blue-600 dark:text-blue-400 rounded-full text-sm mb-8">
        <span class="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></span>
        新版本 v3.0 已发布
      </div>

      <!-- 大标题 -->
      <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight mb-6">
        让工作流<span class="text-blue-600 dark:text-blue-400">自动化</span>
        <br class="hidden sm:block">
        释放团队生产力
      </h1>

      <!-- 副标题 -->
      <p class="text-lg sm:text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto mb-10">
        CloudFlow 帮助您连接 200+ 应用，可视化编排工作流，无需编码即可实现业务流程自动化。
      </p>

      <!-- CTA 按钮 -->
      <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
        <a href="#" class="w-full sm:w-auto px-8 py-3.5 bg-blue-600 text-white text-lg rounded-xl hover:bg-blue-700 hover:shadow-lg hover:shadow-blue-500/25 transition-all">
          免费开始使用
        </a>
        <a href="#" class="w-full sm:w-auto px-8 py-3.5 border border-gray-300 dark:border-gray-700 text-lg rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800 transition-all flex items-center justify-center gap-2">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"/>
          </svg>
          观看演示
        </a>
      </div>

      <!-- 特性图标 -->
      <div class="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-3xl mx-auto">
        <div class="flex flex-col items-center gap-2">
          <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-xl flex items-center justify-center">
            <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
            </svg>
          </div>
          <span class="text-sm text-gray-600 dark:text-gray-400">极速部署</span>
        </div>
        <div class="flex flex-col items-center gap-2">
          <div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-xl flex items-center justify-center">
            <svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
            </svg>
          </div>
          <span class="text-sm text-gray-600 dark:text-gray-400">安全可靠</span>
        </div>
        <div class="flex flex-col items-center gap-2">
          <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-xl flex items-center justify-center">
            <svg class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
            </svg>
          </div>
          <span class="text-sm text-gray-600 dark:text-gray-400">200+ 集成</span>
        </div>
        <div class="flex flex-col items-center gap-2">
          <div class="w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-xl flex items-center justify-center">
            <svg class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
            </svg>
          </div>
          <span class="text-sm text-gray-600 dark:text-gray-400">数据洞察</span>
        </div>
      </div>
    </div>
  </section>

</body>
</html>
逻辑代码 75 行（超过 40 行限制，仅展示）

▶ 示例：第三步 - 特性卡片

使用 Grid 布局展示 4 个特性卡片，带图标和描述。

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>特性卡片</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = { darkMode: 'class' }
  </script>
</head>
<body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100">

  <section id="features" class="py-20 px-4">
    <div class="max-w-7xl mx-auto">
      <!-- 标题 -->
      <div class="text-center mb-16">
        <h2 class="text-3xl sm:text-4xl font-bold mb-4">为什么选择 CloudFlow</h2>
        <p class="text-gray-600 dark:text-gray-400 max-w-xl mx-auto">强大的功能让您的工作流程更加高效</p>
      </div>

      <!-- 特性卡片网格 -->
      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- 卡片 1 -->
        <div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
          <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-blue-600 transition-colors">
            <svg class="w-6 h-6 text-blue-600 dark:text-blue-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/>
            </svg>
          </div>
          <h3 class="text-lg font-semibold mb-2">可视化编排</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">拖拽式界面，轻松构建复杂工作流，无需编写代码</p>
        </div>

        <!-- 卡片 2 -->
        <div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
          <div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-green-600 transition-colors">
            <svg class="w-6 h-6 text-green-600 dark:text-green-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
            </svg>
          </div>
          <h3 class="text-lg font-semibold mb-2">团队协作</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">实时协作编辑，权限管理，团队成员共同维护流程</p>
        </div>

        <!-- 卡片 3 -->
        <div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
          <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-purple-600 transition-colors">
            <svg class="w-6 h-6 text-purple-600 dark:text-purple-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
            </svg>
          </div>
          <h3 class="text-lg font-semibold mb-2">智能分析</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">内置数据分析仪表盘，实时监控流程运行状态</p>
        </div>

        <!-- 卡片 4 -->
        <div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
          <div class="w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-orange-600 transition-colors">
            <svg class="w-6 h-6 text-orange-600 dark:text-orange-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
            </svg>
          </div>
          <h3 class="text-lg font-semibold mb-2">企业安全</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">SOC 2 认证，端到端加密，满足企业级安全合规要求</p>
        </div>
      </div>
    </div>
  </section>

</body>
</html>
逻辑代码 60 行（超过 40 行限制，仅展示）

▶ 示例：第四步 - 价格表

3 个价格方案卡片，中间方案高亮推荐。

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>价格表</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = { darkMode: 'class' }
  </script>
</head>
<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100">

  <section id="pricing" class="py-20 px-4">
    <div class="max-w-7xl mx-auto">
      <!-- 标题 -->
      <div class="text-center mb-16">
        <h2 class="text-3xl sm:text-4xl font-bold mb-4">简单透明的定价</h2>
        <p class="text-gray-600 dark:text-gray-400 max-w-xl mx-auto">选择适合您团队的方案，随时升级或降级</p>
      </div>

      <!-- 价格卡片 -->
      <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
        <!-- 免费版 -->
        <div class="bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700">
          <h3 class="text-lg font-semibold mb-2">免费版</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-6">适合个人用户试用</p>
          <div class="mb-6">
            <span class="text-4xl font-bold">¥0</span>
            <span class="text-gray-500">/月</span>
          </div>
          <ul class="space-y-3 mb-8">
            <li class="flex items-center gap-3 text-sm">
              <svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
              </svg>
              5 个工作流
            </li>
            <li class="flex items-center gap-3 text-sm">
              <svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
              </svg>
              1,000 次执行/月
            </li>
            <li class="flex items-center gap-3 text-sm">
              <svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
              </svg>
              社区支持
            </li>
          </ul>
          <a href="#" class="block w-full py-3 text-center border border-gray-300 dark:border-gray-600 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
            开始使用
          </a>
        </div>

        <!-- 专业版（推荐） -->
        <div class="relative bg-white dark:bg-gray-800 rounded-2xl p-8 border-2 border-blue-600 shadow-xl shadow-blue-600/10 scale-105">
          <div class="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 bg-blue-600 text-white text-sm rounded-full">
            最受欢迎
          </div>
          <h3 class="text-lg font-semibold mb-2">专业版</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-6">适合中小团队</p>
          <div class="mb-6">
            <span class="text-4xl font-bold">¥99</span>
            <span class="text-gray-500">/月</span>
          </div>
          <ul class="space-y-3 mb-8">
            <li class="flex items-center gap-3 text-sm">
              <svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
              </svg>
              无限工作流
            </li>
            <li class="flex items-center gap-3 text-sm">
              <svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
              </svg>
              50,000 次执行/月
            </li>
            <li class="flex items-center gap-3 text-sm">
              <svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
              </svg>
              优先邮件支持
            </li>
            <li class="flex items-center gap-3 text-sm">
              <svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
              </svg>
              高级数据分析
            </li>
          </ul>
          <a href="#" class="block w-full py-3 text-center bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-colors">
            立即升级
          </a>
        </div>

        <!-- 企业版 -->
        <div class="bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700">
          <h3 class="text-lg font-semibold mb-2">企业版</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-6">适合大型企业</p>
          <div class="mb-6">
            <span class="text-4xl font-bold">¥299</span>
            <span class="text-gray-500">/月</span>
          </div>
          <ul class="space-y-3 mb-8">
            <li class="flex items-center gap-3 text-sm">
              <svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
              </svg>
              一切专业版功能
            </li>
            <li class="flex items-center gap-3 text-sm">
              <svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
              </svg>
              无限执行次数
            </li>
            <li class="flex items-center gap-3 text-sm">
              <svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
              </svg>
              专属客户经理
            </li>
            <li class="flex items-center gap-3 text-sm">
              <svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
              </svg>
              SLA 保障
            </li>
          </ul>
          <a href="#" class="block w-full py-3 text-center border border-gray-300 dark:border-gray-600 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
            联系销售
          </a>
        </div>
      </div>
    </div>
  </section>

</body>
</html>
逻辑代码 132 行（超过 40 行限制，仅展示）

▶ 示例：第五步 - 用户评价与页脚

展示社会证明（用户评价）和完整的页脚链接。

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户评价与页脚</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = { darkMode: 'class' }
  </script>
</head>
<body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100">

  <!-- 用户评价 -->
  <section id="testimonials" class="py-20 px-4 bg-gray-50 dark:bg-gray-900">
    <div class="max-w-7xl mx-auto">
      <div class="text-center mb-16">
        <h2 class="text-3xl sm:text-4xl font-bold mb-4">深受团队信赖</h2>
        <p class="text-gray-600 dark:text-gray-400">超过 10,000 家企业选择 CloudFlow</p>
      </div>

      <div class="grid md:grid-cols-3 gap-8">
        <!-- 评价 1 -->
        <div class="bg-white dark:bg-gray-800 p-6 rounded-2xl">
          <div class="flex items-center gap-1 mb-4">
            <span class="text-yellow-400">★★★★★</span>
          </div>
          <p class="text-gray-600 dark:text-gray-400 mb-6">"CloudFlow 帮我们节省了每周 20 小时的重复工作，团队终于可以专注于更有价值的事情。"</p>
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center font-semibold text-blue-600">张</div>
            <div>
              <p class="font-medium text-sm">张明</p>
              <p class="text-gray-500 text-xs">某科技公司 CTO</p>
            </div>
          </div>
        </div>

        <!-- 评价 2 -->
        <div class="bg-white dark:bg-gray-800 p-6 rounded-2xl">
          <div class="flex items-center gap-1 mb-4">
            <span class="text-yellow-400">★★★★★</span>
          </div>
          <p class="text-gray-600 dark:text-gray-400 mb-6">"可视化编排非常直观，即使非技术人员也能快速上手，大大降低了自动化门槛。"</p>
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center font-semibold text-green-600">李</div>
            <div>
              <p class="font-medium text-sm">李芳</p>
              <p class="text-gray-500 text-xs">某电商运营总监</p>
            </div>
          </div>
        </div>

        <!-- 评价 3 -->
        <div class="bg-white dark:bg-gray-800 p-6 rounded-2xl">
          <div class="flex items-center gap-1 mb-4">
            <span class="text-yellow-400">★★★★★</span>
          </div>
          <p class="text-gray-600 dark:text-gray-400 mb-6">"企业版的安全合规特性让我们放心地将核心业务流程迁移到云端，非常推荐。"</p>
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center font-semibold text-purple-600">王</div>
            <div>
              <p class="font-medium text-sm">王强</p>
              <p class="text-gray-500 text-xs">某金融机构 IT 主管</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 品牌 Logo -->
      <div class="mt-16 text-center">
        <p class="text-gray-500 text-sm mb-6">他们都在使用 CloudFlow</p>
        <div class="flex flex-wrap items-center justify-center gap-8 opacity-50">
          <span class="text-2xl font-bold text-gray-400">TechCorp</span>
          <span class="text-2xl font-bold text-gray-400">DataFlow</span>
          <span class="text-2xl font-bold text-gray-400">CloudBase</span>
          <span class="text-2xl font-bold text-gray-400">NetPro</span>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="bg-gray-900 dark:bg-gray-950 text-gray-400 py-16 px-4">
    <div class="max-w-7xl mx-auto">
      <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
        <!-- 产品 -->
        <div>
          <h4 class="text-white font-semibold mb-4">产品</h4>
          <ul class="space-y-2 text-sm">
            <li><a href="#" class="hover:text-white transition-colors">功能</a></li>
            <li><a href="#" class="hover:text-white transition-colors">价格</a></li>
            <li><a href="#" class="hover:text-white transition-colors">集成</a></li>
            <li><a href="#" class="hover:text-white transition-colors">更新日志</a></li>
          </ul>
        </div>
        <!-- 资源 -->
        <div>
          <h4 class="text-white font-semibold mb-4">资源</h4>
          <ul class="space-y-2 text-sm">
            <li><a href="#" class="hover:text-white transition-colors">文档</a></li>
            <li><a href="#" class="hover:text-white transition-colors">API</a></li>
            <li><a href="#" class="hover:text-white transition-colors">教程</a></li>
            <li><a href="#" class="hover:text-white transition-colors">博客</a></li>
          </ul>
        </div>
        <!-- 公司 -->
        <div>
          <h4 class="text-white font-semibold mb-4">公司</h4>
          <ul class="space-y-2 text-sm">
            <li><a href="#" class="hover:text-white transition-colors">关于我们</a></li>
            <li><a href="#" class="hover:text-white transition-colors">招贤纳士</a></li>
            <li><a href="#" class="hover:text-white transition-colors">联系我们</a></li>
          </ul>
        </div>
        <!-- 法律 -->
        <div>
          <h4 class="text-white font-semibold mb-4">法律</h4>
          <ul class="space-y-2 text-sm">
            <li><a href="#" class="hover:text-white transition-colors">隐私政策</a></li>
            <li><a href="#" class="hover:text-white transition-colors">服务条款</a></li>
            <li><a href="#" class="hover:text-white transition-colors">安全合规</a></li>
          </ul>
        </div>
      </div>

      <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row items-center justify-between gap-4">
        <div class="flex items-center gap-2">
          <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
            <span class="text-white font-bold text-sm">CF</span>
          </div>
          <span class="text-white font-bold">CloudFlow</span>
        </div>
        <p class="text-sm">© 2025 CloudFlow. 保留所有权利。</p>
      </div>
    </div>
  </footer>

</body>
</html>
逻辑代码 121 行（超过 40 行限制，仅展示）

▶ 示例：完整落地页

将以上所有部分组合成一个完整的落地页文件：

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh" class="scroll-smooth">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CloudFlow - 智能工作流自动化平台</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = { darkMode: 'class' }
  </script>
</head>
<body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors">

  <!-- 导航栏 -->
  <nav class="fixed top-0 w-full bg-white/80 dark:bg-gray-950/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800 z-50">
    <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 gap-2">
          <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
            <span class="text-white font-bold text-sm">CF</span>
          </div>
          <span class="text-xl font-bold">CloudFlow</span>
        </div>
        <div class="hidden md:flex items-center gap-8">
          <a href="#features" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">功能</a>
          <a href="#pricing" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">价格</a>
          <a href="#testimonials" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">评价</a>
        </div>
        <div class="hidden md:flex items-center gap-4">
          <button id="themeToggle" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
            <span class="dark:hidden">🌙</span>
            <span class="hidden dark:inline">☀️</span>
          </button>
          <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 transition-colors">登录</a>
          <a href="#" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">免费试用</a>
        </div>
        <button id="menuToggle" class="md:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
          </svg>
        </button>
      </div>
    </div>
    <div id="mobileMenu" class="hidden md:hidden border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950">
      <div class="px-4 py-4 space-y-3">
        <a href="#features" class="block py-2 text-gray-600 dark:text-gray-400">功能</a>
        <a href="#pricing" class="block py-2 text-gray-600 dark:text-gray-400">价格</a>
        <a href="#testimonials" class="block py-2 text-gray-600 dark:text-gray-400">评价</a>
        <div class="pt-3 border-t border-gray-200 dark:border-gray-800">
          <a href="#" class="block w-full text-center px-4 py-2 bg-blue-600 text-white rounded-lg">免费试用</a>
        </div>
      </div>
    </div>
  </nav>

  <!-- Hero -->
  <section class="pt-32 pb-20 px-4">
    <div class="max-w-7xl mx-auto text-center">
      <div class="inline-flex items-center gap-2 px-4 py-1.5 bg-blue-50 dark:bg-blue-950 text-blue-600 dark:text-blue-400 rounded-full text-sm mb-8">
        <span class="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></span>
        新版本 v3.0 已发布
      </div>
      <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight mb-6">
        让工作流<span class="text-blue-600 dark:text-blue-400">自动化</span>
        <br class="hidden sm:block">释放团队生产力
      </h1>
      <p class="text-lg sm:text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto mb-10">
        CloudFlow 帮助您连接 200+ 应用，可视化编排工作流，无需编码即可实现业务流程自动化。
      </p>
      <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
        <a href="#" class="w-full sm:w-auto px-8 py-3.5 bg-blue-600 text-white text-lg rounded-xl hover:bg-blue-700 hover:shadow-lg hover:shadow-blue-500/25 transition-all">免费开始使用</a>
        <a href="#" class="w-full sm:w-auto px-8 py-3.5 border border-gray-300 dark:border-gray-700 text-lg rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800 transition-all flex items-center justify-center gap-2">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"/></svg>
          观看演示
        </a>
      </div>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-3xl mx-auto">
        <div class="flex flex-col items-center gap-2">
          <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-xl flex items-center justify-center"><svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg></div>
          <span class="text-sm text-gray-600 dark:text-gray-400">极速部署</span>
        </div>
        <div class="flex flex-col items-center gap-2">
          <div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-xl flex items-center justify-center"><svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
          <span class="text-sm text-gray-600 dark:text-gray-400">安全可靠</span>
        </div>
        <div class="flex flex-col items-center gap-2">
          <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-xl flex items-center justify-center"><svg class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg></div>
          <span class="text-sm text-gray-600 dark:text-gray-400">200+ 集成</span>
        </div>
        <div class="flex flex-col items-center gap-2">
          <div class="w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-xl flex items-center justify-center"><svg class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
          <span class="text-sm text-gray-600 dark:text-gray-400">数据洞察</span>
        </div>
      </div>
    </div>
  </section>

  <!-- 特性 -->
  <section id="features" class="py-20 px-4">
    <div class="max-w-7xl mx-auto">
      <div class="text-center mb-16">
        <h2 class="text-3xl sm:text-4xl font-bold mb-4">为什么选择 CloudFlow</h2>
        <p class="text-gray-600 dark:text-gray-400 max-w-xl mx-auto">强大的功能让您的工作流程更加高效</p>
      </div>
      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
          <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-blue-600 transition-colors"><svg class="w-6 h-6 text-blue-600 dark:text-blue-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/></svg></div>
          <h3 class="text-lg font-semibold mb-2">可视化编排</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">拖拽式界面，轻松构建复杂工作流，无需编写代码</p>
        </div>
        <div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
          <div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-green-600 transition-colors"><svg class="w-6 h-6 text-green-600 dark:text-green-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
          <h3 class="text-lg font-semibold mb-2">团队协作</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">实时协作编辑，权限管理，团队成员共同维护流程</p>
        </div>
        <div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
          <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-purple-600 transition-colors"><svg class="w-6 h-6 text-purple-600 dark:text-purple-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
          <h3 class="text-lg font-semibold mb-2">智能分析</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">内置数据分析仪表盘，实时监控流程运行状态</p>
        </div>
        <div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
          <div class="w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-orange-600 transition-colors"><svg class="w-6 h-6 text-orange-600 dark:text-orange-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg></div>
          <h3 class="text-lg font-semibold mb-2">企业安全</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">SOC 2 认证，端到端加密，满足企业级安全合规要求</p>
        </div>
      </div>
    </div>
  </section>

  <!-- 价格表 -->
  <section id="pricing" class="py-20 px-4 bg-gray-50 dark:bg-gray-900">
    <div class="max-w-7xl mx-auto">
      <div class="text-center mb-16">
        <h2 class="text-3xl sm:text-4xl font-bold mb-4">简单透明的定价</h2>
        <p class="text-gray-600 dark:text-gray-400 max-w-xl mx-auto">选择适合您团队的方案，随时升级或降级</p>
      </div>
      <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
        <div class="bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700">
          <h3 class="text-lg font-semibold mb-2">免费版</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-6">适合个人用户试用</p>
          <div class="mb-6"><span class="text-4xl font-bold">¥0</span><span class="text-gray-500">/月</span></div>
          <ul class="space-y-3 mb-8">
            <li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>5 个工作流</li>
            <li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>1,000 次执行/月</li>
            <li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>社区支持</li>
          </ul>
          <a href="#" class="block w-full py-3 text-center border border-gray-300 dark:border-gray-600 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">开始使用</a>
        </div>
        <div class="relative bg-white dark:bg-gray-800 rounded-2xl p-8 border-2 border-blue-600 shadow-xl shadow-blue-600/10 md:scale-105">
          <div class="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 bg-blue-600 text-white text-sm rounded-full">最受欢迎</div>
          <h3 class="text-lg font-semibold mb-2">专业版</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-6">适合中小团队</p>
          <div class="mb-6"><span class="text-4xl font-bold">¥99</span><span class="text-gray-500">/月</span></div>
          <ul class="space-y-3 mb-8">
            <li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>无限工作流</li>
            <li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>50,000 次执行/月</li>
            <li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>优先邮件支持</li>
            <li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>高级数据分析</li>
          </ul>
          <a href="#" class="block w-full py-3 text-center bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-colors">立即升级</a>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700">
          <h3 class="text-lg font-semibold mb-2">企业版</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-6">适合大型企业</p>
          <div class="mb-6"><span class="text-4xl font-bold">¥299</span><span class="text-gray-500">/月</span></div>
          <ul class="space-y-3 mb-8">
            <li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>一切专业版功能</li>
            <li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>无限执行次数</li>
            <li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>专属客户经理</li>
            <li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>SLA 保障</li>
          </ul>
          <a href="#" class="block w-full py-3 text-center border border-gray-300 dark:border-gray-600 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">联系销售</a>
        </div>
      </div>
    </div>
  </section>

  <!-- 用户评价 -->
  <section id="testimonials" class="py-20 px-4">
    <div class="max-w-7xl mx-auto">
      <div class="text-center mb-16">
        <h2 class="text-3xl sm:text-4xl font-bold mb-4">深受团队信赖</h2>
        <p class="text-gray-600 dark:text-gray-400">超过 10,000 家企业选择 CloudFlow</p>
      </div>
      <div class="grid md:grid-cols-3 gap-8">
        <div class="bg-gray-50 dark:bg-gray-900 p-6 rounded-2xl">
          <div class="flex items-center gap-1 mb-4"><span class="text-yellow-400">★★★★★</span></div>
          <p class="text-gray-600 dark:text-gray-400 mb-6">"CloudFlow 帮我们节省了每周 20 小时的重复工作，团队终于可以专注于更有价值的事情。"</p>
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center font-semibold text-blue-600">张</div>
            <div><p class="font-medium text-sm">张明</p><p class="text-gray-500 text-xs">某科技公司 CTO</p></div>
          </div>
        </div>
        <div class="bg-gray-50 dark:bg-gray-900 p-6 rounded-2xl">
          <div class="flex items-center gap-1 mb-4"><span class="text-yellow-400">★★★★★</span></div>
          <p class="text-gray-600 dark:text-gray-400 mb-6">"可视化编排非常直观，即使非技术人员也能快速上手，大大降低了自动化门槛。"</p>
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center font-semibold text-green-600">李</div>
            <div><p class="font-medium text-sm">李芳</p><p class="text-gray-500 text-xs">某电商运营总监</p></div>
          </div>
        </div>
        <div class="bg-gray-50 dark:bg-gray-900 p-6 rounded-2xl">
          <div class="flex items-center gap-1 mb-4"><span class="text-yellow-400">★★★★★</span></div>
          <p class="text-gray-600 dark:text-gray-400 mb-6">"企业版的安全合规特性让我们放心地将核心业务流程迁移到云端，非常推荐。"</p>
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center font-semibold text-purple-600">王</div>
            <div><p class="font-medium text-sm">王强</p><p class="text-gray-500 text-xs">某金融机构 IT 主管</p></div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="bg-gray-900 dark:bg-gray-950 text-gray-400 py-16 px-4">
    <div class="max-w-7xl mx-auto">
      <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
        <div>
          <h4 class="text-white font-semibold mb-4">产品</h4>
          <ul class="space-y-2 text-sm">
            <li><a href="#" class="hover:text-white transition-colors">功能</a></li>
            <li><a href="#" class="hover:text-white transition-colors">价格</a></li>
            <li><a href="#" class="hover:text-white transition-colors">集成</a></li>
            <li><a href="#" class="hover:text-white transition-colors">更新日志</a></li>
          </ul>
        </div>
        <div>
          <h4 class="text-white font-semibold mb-4">资源</h4>
          <ul class="space-y-2 text-sm">
            <li><a href="#" class="hover:text-white transition-colors">文档</a></li>
            <li><a href="#" class="hover:text-white transition-colors">API</a></li>
            <li><a href="#" class="hover:text-white transition-colors">教程</a></li>
            <li><a href="#" class="hover:text-white transition-colors">博客</a></li>
          </ul>
        </div>
        <div>
          <h4 class="text-white font-semibold mb-4">公司</h4>
          <ul class="space-y-2 text-sm">
            <li><a href="#" class="hover:text-white transition-colors">关于我们</a></li>
            <li><a href="#" class="hover:text-white transition-colors">招贤纳士</a></li>
            <li><a href="#" class="hover:text-white transition-colors">联系我们</a></li>
          </ul>
        </div>
        <div>
          <h4 class="text-white font-semibold mb-4">法律</h4>
          <ul class="space-y-2 text-sm">
            <li><a href="#" class="hover:text-white transition-colors">隐私政策</a></li>
            <li><a href="#" class="hover:text-white transition-colors">服务条款</a></li>
            <li><a href="#" class="hover:text-white transition-colors">安全合规</a></li>
          </ul>
        </div>
      </div>
      <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row items-center justify-between gap-4">
        <div class="flex items-center gap-2">
          <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center"><span class="text-white font-bold text-sm">CF</span></div>
          <span class="text-white font-bold">CloudFlow</span>
        </div>
        <p class="text-sm">© 2025 CloudFlow. 保留所有权利。</p>
      </div>
    </div>
  </footer>

  <script>
    document.getElementById('themeToggle')?.addEventListener('click', () => {
      document.documentElement.classList.toggle('dark');
    });
    document.getElementById('menuToggle')?.addEventListener('click', () => {
      document.getElementById('mobileMenu').classList.toggle('hidden');
    });
  </script>

</body>
</html>
逻辑代码 259 行（超过 40 行限制，仅展示）

4. 验收标准

5. 拓展方向

❓ 常见问题

Q Tailwind 的 container 类和手动设置 max-width 有什么区别？
A container 类会自动根据断点调整最大宽度并居中，但默认不带内边距，通常需要配合 px-4 使用。手动设置 max-width 更灵活，但需要自己处理响应式。
Q 如何在 Tailwind 中实现暗色模式？
A 使用 dark: 前缀，如 dark:bg-gray-900 dark:text-white。需要在 tailwind.config.js 中设置 darkMode: 'class'，然后在 <html> 标签添加 dark 类。
Q 响应式设计应该移动优先还是桌面优先？
A Tailwind 默认移动优先（sm:、md:、lg: 从小到大）。先写移动端样式，再用断点前缀覆盖大屏幕样式。

📖 小节

📝 作业

  1. 基础（难度⭐）：使用 Tailwind 的 lex 和 gap 创建一个 3 列响应式卡片布局，移动端变为 1 列。
  2. 进阶（难度⭐⭐）：为页面添加暗色模式切换功能，使用 dark: 前缀和 Alpine.js。
  3. 挑战（难度⭐⭐⭐）：实现一个完整的 SaaS 落地页，包含 Hero、特性介绍、定价卡片和用户评价，全部使用 Tailwind 类。
Web-Tutorial.com

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏