<div class="rounded-lg p-6 mb-8 text-white mt-6"
     style="background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px);">
    <h2 class="text-xl font-bold mb-4">{{ .Params.messaging.title }}</h2>
    <div class="space-y-3">
      {{ range .Params.messaging.items }}
        <div class="flex items-start">
          <div class="flex-shrink-0 h-5 w-5 {{ .color }} mt-0.5 mr-2">
            <i class="{{ .icon }}"></i>
          </div>
          <p class="text-sm opacity-80">{{ .text }}</p>
        </div>
      {{ end }}
    </div>
</div>
