<div class="not-prose">
  <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
    <div class="grid grid-cols-1 md:grid-cols-2">
      <div class="p-8 md:p-12">
        <div class="inline-block px-4 py-2 rounded-full text-sm font-semibold mb-6" style="background-color: {{ .Get 0 }}15; color: {{ .Get 0 }};">{{ .Get 1 }}</div>
        <div class="text-3xl font-bold mb-4 !mt-0">{{ .Get 2 }}</div>
        <div class="text-gray-600 mb-6">{{ .Get 3 }}</div>
        <a href="{{ .Get 5 }}" class="inline-block px-6 py-3 text-white font-bold rounded-lg transition-colors hover:opacity-90 !no-underline !text-white" style="background-color: {{ .Get 0 }};">{{ .Get 4 }}</a>
      </div>
      <div class="p-8 md:p-12 flex items-center justify-center" style="background: linear-gradient(135deg, {{ .Get 0 }}03, {{ .Get 0 }}30);">
        <img src="{{ .Get 6 }}" alt="{{ .Get 7 }}" class="max-w-[200px] !my-0 !rounded-none !shadow-none">
      </div>
    </div>
  </div>
</div>
