<section class="ml-[-1rem] mr-[-1rem] mb-8 w-80 flex flex-col flex-wrap items-stretch rounded-2xl bg-[#020617] dark:bg-[#1e293b] p-6">
  <div class="flex flex-col">
    <h2 class="text-[1.2rem] leading-8 font-bold text-[#f8fafc90]">{{ $title }}</h2>
    <h1 class="text-[3.75rem] leading-none font-bold text-[#f8fafc]">{{ $price }}</h1>
  </div>
  <p class="mt-3 mb-3 leading-relaxed text-[#f8fafc90]">{{ $description }}</p>
  <ul class="mb-6 flex-1 text-[#f8fafc90]">
    @foreach($features as $feature)
      <li class="mb-2 ml-2 flex">
        <svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 mr-2 text-[#0ea5e9]">
          <path clip-rule="evenodd" fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"></path>
        </svg>
        <p>{{ $feature }}</p>
      </li>
    @endforeach
  </ul>
  <a href="{{ $link }}" class="inline-block rounded-lg bg-[#0ea5e9] px-5 py-3 text-center font-semibold tracking-wider text-[#f8fafc] transition-all duration-300 hover:bg-[#0284c7]">
    {{ $buttonText }}
  </a>
</section>
