Hero 区域

<section class="bg-gradient-to-br from-indigo-50 to-white py-20">
  <div class="max-w-6xl mx-auto px-4 text-center">
    <h1 class="text-5xl font-bold text-gray-900 mb-6">
      构建你的<span class="text-indigo-600">下一个产品</span>
    </h1>
    <p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
      从零开始快速搭建专业网站。选择合适的方案，开始你的建站之旅。
    </p>
    <div class="flex gap-4 justify-center">
      <a href="#" class="bg-indigo-600 text-white px-8 py-3 rounded-lg
        hover:bg-indigo-700 transition font-medium">
        免费开始
      </a>
      <a href="#" class="border border-gray-300 text-gray-700 px-8 py-3 rounded-lg
        hover:border-gray-400 transition font-medium">
        了解更多
      </a>
    </div>
  </div>
</section>

功能卡片网格

<section class="py-16 bg-white">
  <div class="max-w-6xl mx-auto px-4">
    <h2 class="text-3xl font-bold text-center mb-12">核心功能</h2>
    <div class="grid md:grid-cols-3 gap-8">
      <div class="p-6 rounded-xl border border-gray-100 hover:shadow-lg transition">
        <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
          <svg class="w-6 h-6 text-indigo-600" 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>
        <h3 class="text-xl font-semibold mb-2">闪电加速</h3>
        <p class="text-gray-600">全球 CDN 加速，确保你的网站秒级加载。</p>
      </div>
      <div class="p-6 rounded-xl border border-gray-100 hover:shadow-lg transition">
        <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
          <svg class="w-6 h-6 text-green-600" 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-xl font-semibold mb-2">安全可靠</h3>
        <p class="text-gray-600">内置 WAF 和 DDoS 防护，守护你的网站安全。</p>
      </div>
      <div class="p-6 rounded-xl border border-gray-100 hover:shadow-lg transition">
        <div class="w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center mb-4">
          <svg class="w-6 h-6 text-amber-600" 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>
        <h3 class="text-xl font-semibold mb-2">99.9% 可用性</h3>
        <p class="text-gray-600">企业级 SLA 保障，确保你的业务持续在线。</p>
      </div>
    </div>
  </div>
</section>

价格表

<section class="py-16 bg-gray-50">
  <div class="max-w-6xl mx-auto px-4">
    <h2 class="text-3xl font-bold text-center mb-12">选择适合的方案</h2>
    <div class="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto">
      <div class="bg-white p-8 rounded-xl shadow-sm text-center">
        <h3 class="text-xl font-semibold mb-2">入门版</h3>
        <p class="text-4xl font-bold text-indigo-600 mb-6">$9<small class="text-lg text-gray-500">/月</small></p>
        <ul class="text-left space-y-3 mb-8">
          <li class="flex items-center gap-2">✓ 1 个网站</li>
          <li class="flex items-center gap-2">✓ 10GB 存储</li>
          <li class="flex items-center gap-2">✓ 免费 SSL</li>
        </ul>
        <a href="#" class="block w-full border border-indigo-600 text-indigo-600 py-2 rounded-lg
          hover:bg-indigo-50 transition">选择方案</a>
      </div>
      <div class="bg-white p-8 rounded-xl shadow-sm text-center ring-2 ring-indigo-600">
        <span class="text-xs bg-indigo-600 text-white px-3 py-1 rounded-full">推荐</span>
        <h3 class="text-xl font-semibold mt-2 mb-2">专业版</h3>
        <p class="text-4xl font-bold text-indigo-600 mb-6">$29<small class="text-lg text-gray-500">/月</small></p>
        <ul class="text-left space-y-3 mb-8">
          <li class="flex items-center gap-2">✓ 10 个网站</li>
          <li class="flex items-center gap-2">✓ 100GB 存储</li>
          <li class="flex items-center gap-2">✓ CDN 加速</li>
        </ul>
        <a href="#" class="block w-full bg-indigo-600 text-white py-2 rounded-lg
          hover:bg-indigo-700 transition">选择方案</a>
      </div>
      <div class="bg-white p-8 rounded-xl shadow-sm text-center">
        <h3 class="text-xl font-semibold mb-2">企业版</h3>
        <p class="text-4xl font-bold text-indigo-600 mb-6">$99<small class="text-lg text-gray-500">/月</small></p>
        <ul class="text-left space-y-3 mb-8">
          <li class="flex items-center gap-2">✓ 无限网站</li>
          <li class="flex items-center gap-2">✓ 1TB 存储</li>
          <li class="flex items-center gap-2">✓ 优先支持</li>
        </ul>
        <a href="#" class="block w-full border border-indigo-600 text-indigo-600 py-2 rounded-lg
          hover:bg-indigo-50 transition">联系销售</a>
      </div>
    </div>
  </div>
</section>

使用说明

  1. 将需要的 HTML 模块复制到你的项目文件中
  2. 确保已引入 Tailwind CSS（CDN 或 npm 安装）
  3. 修改文本内容和链接地址
  4. 根据品牌色替换 indigo 为你的主题色
<!-- CDN 方式引入 Tailwind -->
<script src="https://cdn.tailwindcss.com"></script>