{{ $title := .Get "title" }}
{{ $subtitle := .Get "subtitle" }}

<div class="text-center mb-16">
  <h2 class="text-3xl font-bold mb-4">{{ $title }}</h2>
  <p class="text-xl text-gray-600">{{ $subtitle }}</p>
</div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
  {{ range $index := (seq 1 10) }}
    {{ $benefit := printf "benefit%d" $index }}
    {{ with $.Get $benefit }}
      {{ $parts := split . "|" }}
      {{ if ge (len $parts) 4 }}
        <div class="p-6 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow">
          <div class="w-12 h-12 rounded-lg flex items-center justify-center mb-4" style="background-color: {{ index $parts 1 }}15;">
            {{ partial "icons" (dict "name" (index $parts 0) "color" (index $parts 1) "size" "6") }}
          </div>
          <h3 class="text-xl font-bold mb-2">{{ index $parts 2 }}</h3>
          <p class="text-gray-600">{{ index $parts 3 }}</p>
        </div>
      {{ end }}
    {{ end }}
  {{ end }}
</div>