{{include "header.html"}}
{{include "nav.html"}}
{{if .Single}}
<main class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
  <section class="rounded-[2.5rem] border border-[var(--border)] bg-white p-6 shadow-[var(--shadow)] md:p-10">
    <div class="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
      <div class="max-w-3xl">
        <div class="text-sm font-semibold uppercase tracking-[0.2em] text-[var(--muted)]">关于我们</div>
        <h1 class="mt-3 text-3xl font-semibold text-[var(--text)] md:text-5xl">{{.Single.Column.Name}}</h1>
        {{if .Single.Column.Description}}<p class="mt-4 text-base leading-8 text-[var(--muted)]">{{.Single.Column.Description}}</p>{{end}}
        {{if .Single.Column.Content}}<div class="vm-prose mt-6 max-w-none text-[var(--text)]">{{.Single.Column.Content|Str2Html}}</div>{{end}}
      </div>
      <div class="flex w-full flex-col gap-3 lg:max-w-sm">
        <div class="rounded-[1.25rem] bg-[var(--surface-blue)] p-4">
          <div class="text-sm text-[var(--muted)]">定位</div>
          <div class="mt-2 text-lg font-semibold text-[var(--text)]">AI 产品与企业落地内容建设</div>
        </div>
        <div class="rounded-[1.25rem] bg-[var(--surface-soft)] p-4">
          <div class="text-sm text-[var(--muted)]">原则</div>
          <div class="mt-2 text-lg font-semibold text-[var(--text)]">围绕结果、边界和可交付性</div>
        </div>
        <div class="rounded-[1.25rem] bg-white p-4 border border-[var(--border)]">
          <div class="text-sm text-[var(--muted)]">合作</div>
          <div class="mt-2 text-lg font-semibold text-[var(--text)]">适合官网、产品页和咨询转化</div>
        </div>
      </div>
    </div>
  </section>
</main>
{{end}}
{{include "footer.html"}}
{{include "js.html"}}