{{include "header.html"}}
{{include "nav.html"}}
<main class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
  <section class="rounded-[2rem] border border-[var(--border)] bg-white p-6 md:p-10">
    <div class="section-kicker">软件产品</div>
    <h1 class="mt-4 text-4xl font-semibold">农场管理软件产品</h1>
    <p class="mt-4 max-w-3xl text-lg leading-8 text-[var(--muted)]">软件页面聚焦平台能力、场景和接入方式，帮助用户快速判断它是否适合自己的农场项目。</p>
  </section>
  <div class="mt-8 grid gap-6 md:grid-cols-2 xl:grid-cols-3">
    {{range .List}}
    <a href="{{.URL}}" class="card">
      {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="mb-4 h-48 w-full rounded-2xl object-cover">{{end}}
      <div class="text-sm text-[var(--primary)]">{{index .Ext "badge"}}</div>
      <h2 class="mt-3 text-2xl font-semibold">{{.Title}}</h2>
      <p class="mt-3 text-sm leading-7 text-[var(--muted)]">{{.Description}}</p>
      <div class="mt-5 space-y-2 text-sm">
        <div>场景：{{index .Ext "scenario"}}</div>
        <div>功能：{{index .Ext "function"}}</div>
        <div>接入：{{index .Ext "access"}}</div>
      </div>
    </a>
    {{end}}
  </div>
  {{if .Pager.Enabled}}
  <div class="mt-10 flex justify-center gap-2">
    {{range .Pager.Items}}{{if .Active}}<span class="pager active">{{.Label}}</span>{{else if .URL}}<a href="{{.URL}}" class="pager">{{.Label}}</a>{{end}}{{end}}
  </div>
  {{end}}
</main>
{{include "footer.html"}}
{{include "js.html"}}