@props([
    'logoSrc' => 'https://v0.dev/placeholder.svg',
    'logoAlt' => 'Financial Partner Logo',
    'title' => 'Partner Name Not Set',
    'tagline' => 'Partner Tagline Not Set',
    'description' => null,
    'features' => [],
    'applyUrl' => '#',
    'applyText' => 'Apply Now',
    'disclaimer' => '',
])
<div class="overflow-hidden rounded-xl bg-white shadow-[0_2px_8px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]">
  <div class="px-6 py-8 md:px-8 md:py-16">
    <div class="flex flex-col gap-2 md:gap-6 md:flex-row">
      <picture class="mx-auto flex h-auto w-full flex-shrink-0 items-center justify-center md:mx-0 md:h-24 md:w-48">
        <img src="{{ $logoSrc }}" alt="{{ $logoAlt }}" class="max-h-full max-w-56 object-contain md:max-w-full"
          loading="lazy">
      </picture>
      <div class="flex-1">
        <h3 class="text-center text-xl font-bold text-[#033551] md:text-start">{{ $title }}</h3>
        <p class="mb-4 text-center text-base md:text-lg font-medium text-[#033551] md:text-start">{{ $tagline }}</p>
        @isset($description)
          <p class="mb-6 text-gray-600">{{ $description }}</p>
        @endisset

        @if (count($features) > 0)
          <div class="mb-3 md:mb-6">
            <h4 class="mb-3 flex items-center text-lg font-semibold text-gray-800">
              <span class="mr-2 flex-shrink-0">
                <x-icons.check-sticker class="text-primary h-5 w-5" />
              </span>
              <span>Features</span>
            </h4>
            <ul class="grid grid-cols-1 gap-2 text-gray-700 md:grid-cols-2">
              @foreach ($features as $feature)
                <li class="flex items-start">
                  <span class="mr-2 mt-0.5 flex-shrink-0">
                    <x-icons.check-line class="text-primary h-5 w-5" />
                  </span>
                  <span>{{ $feature }}</span>
                </li>
              @endforeach
            </ul>
          </div>
        @endif

        <a href="{{ $applyUrl }}" target="_blank"
          class="bg-success inline-block px-6 py-3 font-semibold text-white shadow-md transition-colors duration-300 hover:bg-[#8bc62f] hover:shadow-lg w-full md:w-auto text-center">
          {{ $applyText }}
        </a>

        @if ($disclaimer)
          <p class="mt-4 text-xs leading-relaxed text-gray-500">
            {{ $disclaimer }}
          </p>
        @endif
      </div>
    </div>
  </div>
</div>