<!doctype html>
<html lang="zh-cn">

<head>
  {{include "header.html"}}
</head>

<body class="bg-creative-50 text-creative-900">
  {{include "nav.html"}}
  {{include "bread.html"}}

  <main>
    <section class="bg-gradient-to-r from-creative-600 to-navy-600 py-20">
      <div class="container mx-auto px-4 text-center">
        <h1 class="text-3xl sm:text-4xl font-bold text-white">{{if .Single}}{{.Single.Title}}{{else}}合作流程{{end}}</h1>
        <p class="mt-4 text-white/80 max-w-xl mx-auto">{{if .Single}}{{.Single.Description}}{{else}}从沟通到交付，标准化服务流程{{end}}</p>
      </div>
    </section>

    <section class="container mx-auto px-4 py-16">
      <div class="max-w-4xl mx-auto">
        <div class="relative">
          <div class="absolute left-8 top-0 bottom-0 w-0.5 bg-gradient-to-b from-creative-400 to-navy-400 hidden md:block"></div>

          <div class="space-y-8">
            <div class="relative flex gap-6 items-start">
              <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-creative-500 to-creative-600 text-white flex items-center justify-center text-xl font-bold flex-shrink-0 shadow-creative z-10">1</div>
              <div class="flex-1 bg-white rounded-2xl border border-creative-100 shadow-card p-6">
                <h3 class="text-lg font-semibold text-creative-900">需求沟通</h3>
                <p class="mt-2 text-creative-600">深入了解您的品牌定位、目标受众、项目需求与预算，明确合作方向。</p>
              </div>
            </div>

            <div class="relative flex gap-6 items-start">
              <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-creative-500 to-navy-500 text-white flex items-center justify-center text-xl font-bold flex-shrink-0 shadow-creative z-10">2</div>
              <div class="flex-1 bg-white rounded-2xl border border-creative-100 shadow-card p-6">
                <h3 class="text-lg font-semibold text-creative-900">方案策划</h3>
                <p class="mt-2 text-creative-600">根据需求提供创意方案、设计风格参考与项目报价，双方确认合作意向。</p>
              </div>
            </div>

            <div class="relative flex gap-6 items-start">
              <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-navy-500 to-navy-600 text-white flex items-center justify-center text-xl font-bold flex-shrink-0 shadow-creative z-10">3</div>
              <div class="flex-1 bg-white rounded-2xl border border-creative-100 shadow-card p-6">
                <h3 class="text-lg font-semibold text-creative-900">设计执行</h3>
                <p class="mt-2 text-creative-600">专业团队进行创意设计，定期汇报项目进度，确保按时交付。</p>
              </div>
            </div>

            <div class="relative flex gap-6 items-start">
              <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-navy-500 to-navy-700 text-white flex items-center justify-center text-xl font-bold flex-shrink-0 shadow-creative z-10">4</div>
              <div class="flex-1 bg-white rounded-2xl border border-creative-100 shadow-card p-6">
                <h3 class="text-lg font-semibold text-creative-900">修改完善</h3>
                <p class="mt-2 text-creative-600">根据您的反馈进行调整优化，直至您完全满意为止。</p>
              </div>
            </div>

            <div class="relative flex gap-6 items-start">
              <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-creative-600 to-navy-600 text-white flex items-center justify-center text-xl font-bold flex-shrink-0 shadow-creative z-10">5</div>
              <div class="flex-1 bg-white rounded-2xl border border-creative-100 shadow-card p-6">
                <h3 class="text-lg font-semibold text-creative-900">成品交付</h3>
                <p class="mt-2 text-creative-600">提供完整的源文件与使用说明，项目正式交付验收。</p>
              </div>
            </div>

            <div class="relative flex gap-6 items-start">
              <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-creative-600 to-creative-700 text-white flex items-center justify-center text-xl font-bold flex-shrink-0 shadow-creative z-10">6</div>
              <div class="flex-1 bg-white rounded-2xl border border-creative-100 shadow-card p-6">
                <h3 class="text-lg font-semibold text-creative-900">售后支持</h3>
                <p class="mt-2 text-creative-600">提供一定期限的售后修改与咨询服务，确保项目顺利运行。</p>
              </div>
            </div>
          </div>
        </div>

        <div class="mt-16 bg-white rounded-2xl border border-creative-100 shadow-card p-8 text-center">
          <h2 class="text-2xl font-bold text-creative-900 mb-4">准备开始合作了吗？</h2>
          <p class="text-creative-600 mb-6">联系我们，开启您的品牌创意之旅</p>
          <a href="/contact" class="inline-flex items-center gap-2 px-8 py-4 rounded-full bg-gradient-to-r from-creative-600 to-navy-600 text-white font-semibold hover:shadow-creative transition-shadow">
            <i class="fa-solid fa-paper-plane"></i>
            <span>立即咨询</span>
          </a>
        </div>
      </div>
    </section>
  </main>

  {{include "footer.html"}}
  {{include "js.html"}}
</body>

</html>
