<!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="prose max-w-none mb-12">
          {{if .Single}}{{.Single.Content|Str2Html}}{{end}}
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          <div class="bg-white rounded-2xl border border-creative-100 shadow-card overflow-hidden text-center hover:shadow-creative transition-shadow">
            <div class="relative">
              <img src="https://picsum.photos/seed/team-1/400/400" alt="团队成员" class="w-full aspect-square object-cover" />
              <div class="absolute inset-0 bg-gradient-to-t from-creative-900/60 to-transparent"></div>
            </div>
            <div class="p-5">
              <div class="font-semibold text-creative-900">张明</div>
              <div class="text-sm text-creative-500 mt-1">创意总监</div>
              <p class="text-xs text-creative-600 mt-2">10年品牌设计经验</p>
            </div>
          </div>

          <div class="bg-white rounded-2xl border border-creative-100 shadow-card overflow-hidden text-center hover:shadow-creative transition-shadow">
            <div class="relative">
              <img src="https://picsum.photos/seed/team-2/400/400" alt="团队成员" class="w-full aspect-square object-cover" />
              <div class="absolute inset-0 bg-gradient-to-t from-creative-900/60 to-transparent"></div>
            </div>
            <div class="p-5">
              <div class="font-semibold text-creative-900">李华</div>
              <div class="text-sm text-creative-500 mt-1">视觉设计师</div>
              <p class="text-xs text-creative-600 mt-2">专注品牌视觉系统</p>
            </div>
          </div>

          <div class="bg-white rounded-2xl border border-creative-100 shadow-card overflow-hidden text-center hover:shadow-creative transition-shadow">
            <div class="relative">
              <img src="https://picsum.photos/seed/team-3/400/400" alt="团队成员" class="w-full aspect-square object-cover" />
              <div class="absolute inset-0 bg-gradient-to-t from-creative-900/60 to-transparent"></div>
            </div>
            <div class="p-5">
              <div class="font-semibold text-creative-900">王芳</div>
              <div class="text-sm text-creative-500 mt-1">营销策划</div>
              <p class="text-xs text-creative-600 mt-2">数字营销专家</p>
            </div>
          </div>

          <div class="bg-white rounded-2xl border border-creative-100 shadow-card overflow-hidden text-center hover:shadow-creative transition-shadow">
            <div class="relative">
              <img src="https://picsum.photos/seed/team-4/400/400" alt="团队成员" class="w-full aspect-square object-cover" />
              <div class="absolute inset-0 bg-gradient-to-t from-creative-900/60 to-transparent"></div>
            </div>
            <div class="p-5">
              <div class="font-semibold text-creative-900">陈强</div>
              <div class="text-sm text-creative-500 mt-1">影视导演</div>
              <p class="text-xs text-creative-600 mt-2">资深影视制作人</p>
            </div>
          </div>
        </div>

        <div class="mt-16 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-6 py-3 rounded-full bg-gradient-to-r from-creative-600 to-navy-600 text-white 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>
