---
import Icon from '@ui/Icon.astro'
import Button from '@ui/Button.astro'
---

<div class="card card-gradient card-gradient-love">
  <div class="ribbon bg-pink">Featured</div>
  <div class="card-body">
    <div class="h-subheader text-pink">Professional</div>
    <div class="d-flex align-items-baseline mt-5">
      <div class="display-5">$199</div>
      <div class="fs-1 text-secondary">/ month</div>
    </div>
    <ul class="list-unstyled mt-6 space-y space-y-2">
      <li class="d-flex gap-2">
        <div><Icon name="check" color="success" /></div>
        <div><strong>Unlimited</strong> Target Audience</div>
      </li>
      <li class="d-flex gap-2">
        <div><Icon name="check" color="success" /></div>
        <div><strong>1</strong> User Account</div>
      </li>
      <li class="d-flex gap-2">
        <div><Icon name="check" color="success" /></div>
        <div><strong>100+</strong> Video Tuts</div>
      </li>
      <li class="d-flex gap-2">
        <div><Icon name="x" color="secondary" /></div>
        <div class="text-secondary">Public Displays</div>
      </li>
    </ul>
    <p class="mt-4 text-muted">This plan is perfect for small businesses and startups. It includes all the features you need to get started.</p>
    <div class="mt-6">
      <Button text="Purchase Now" color="pink" block />
    </div>
  </div>
</div>