{{include "header.html"}}
{{include "nav.html"}}

<main class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
  <header class="mb-8">
    <h1 class="text-3xl font-semibold tracking-tight md:text-4xl">解决方案</h1>
    <p class="mt-3 max-w-3xl text-[color:var(--muted)]">按场景、痛点和预期结果组织内容，帮助客户快速判断方案是否适配。</p>
  </header>
  {{if .List}}
  <div class="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
    {{range .List}}
    <article class="content-card">
      {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="aspect-[16/10] w-full rounded-2xl object-cover">{{end}}
      <div class="p-6">
        <div class="mb-3 flex flex-wrap gap-2">
          {{if .Ext}}{{if index .Ext "industry"}}<span class="chip">{{index .Ext "industry"}}</span>{{end}}{{end}}
          {{if .Ext}}{{if index .Ext "scenario"}}<span class="chip chip-soft">{{index .Ext "scenario"}}</span>{{end}}{{end}}
        </div>
        <h2 class="text-xl font-semibold"><a href="{{.URL}}">{{.Title}}</a></h2>
        <p class="mt-3 text-sm leading-7 text-[color:var(--muted)]">{{StrSub .Description 100}}</p>
      </div>
    </article>
    {{end}}
  </div>
  {{else}}
  <div class="panel text-center text-[color:var(--muted)]">暂无方案</div>
  {{end}}
</main>
{{include "footer.html"}}
{{include "js.html"}}