<section
  class="w-full py-12 px-4 bg-muted-100 dark:bg-muted-900 overflow-hidden"
>
  <div class="w-full max-w-7xl mx-auto">
    <!--Section title-->
    <div class="w-full max-w-2xl mx-auto text-center space-y-4 py-6">
      <!--Badge-->
      <span
        class="
          inline-block
          font-sans
          text-xs
          py-1.5
          px-3
          m-1
          rounded-lg
          bg-primary-100
          text-primary-500
          dark:bg-primary-500 dark:text-white
        "
      >
        Freelancer
      </span>
      <!--Title-->
      <h2
        class="
          font-heading font-bold
          text-4xl
          md:text-5xl
          text-muted-800
          dark:text-white
        "
      >
        For Freelancers
      </h2>
      <!--Subtitle-->
      <p class="font-sans text-lg text-muted-500 dark:text-muted-400">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </p>
    </div>

    <!--Pricing-->
    <div class="py-6">
      <div
        class="
          flex flex-col
          md:flex-row
          items-center
          justify-center
          space-y-8
          md:space-y-0 md:space-x-8
        "
      >
        <!--Pricing card-->
        <div
          class="
            max-w-xs
            rounded-md
            bg-white
            dark:bg-muted-800
            border-2 border-muted-200
            dark:border-muted-700
            px-8
            pt-8
            pb-4
          "
        >
          <h3
            class="
              font-heading
              text-2xl
              font-semibold
              text-muted-800
              dark:text-white/80
            "
          >
            Freelancer
          </h3>
          <p class="font-sans text-sm text-muted-500 dark:text-muted-400 mt-1">
            A hiring solution specially made for freelancers
          </p>
          <div class="flex items-center mt-3 mb-4">
            <h4
              class="text-5xl font-semibold text-muted-800 dark:text-white mr-4"
            >
              <template x-if="!yearly">
                <span>$19</span>
              </template>
              <template x-if="yearly">
                <span>$199</span>
              </template>
            </h4>
            <span class="font-sans text-xs text-muted-400">
              per user
              <br />
              <template x-if="!yearly">
                <span>per month</span>
              </template>
              <template x-if="yearly">
                <span>per year</span>
              </template>
            </span>
          </div>
          <button
            type="button"
            class="
              font-sans
              my-2
              w-full
              font-medium
              text-primary-500
              hover:text-muted-100 hover:bg-primary-500
              rounded
              border border-muted-200
              dark:border-muted-700
              hover:border-primary-500
              py-3
              transition-colors
              duration-300
              tw-accessibility
            "
          >
            Get Started
          </button>
          <button
            type="button"
            class="
              w-full
              font-medium
              text-muted-300
              py-3
              rounded
              border border-transparent
              hover:text-muted-500 hover:border-muted-300
              dark:hover:border-muted-500
              transition-colors
              duration-300
              tw-accessibility
            "
          >
            Learn More
          </button>
        </div>
        <!--Pricing card-->
        <div
          class="
            max-w-xs
            rounded-md
            bg-white
            dark:bg-muted-800
            border-2 border-primary-600
            dark:border-muted-700
            px-8
            pt-8
            pb-4
          "
        >
          <h3
            class="
              font-heading
              text-2xl
              font-semibold
              text-muted-800
              dark:text-white/80
            "
          >
            Freelancer +
          </h3>
          <p class="font-sans text-sm text-muted-500 dark:text-muted-400 mt-1">
            A hiring solution made for freelancers with additional perks
          </p>
          <div class="flex items-center mt-3 mb-4">
            <h4
              class="text-5xl font-semibold text-muted-800 dark:text-white mr-4"
            >
              <template x-if="!yearly">
                <span>$39</span>
              </template>
              <template x-if="yearly">
                <span>$449</span>
              </template>
            </h4>
            <span class="font-sans text-xs text-muted-400">
              per user
              <br />
              <template x-if="!yearly">
                <span>per month</span>
              </template>
              <template x-if="yearly">
                <span>per year</span>
              </template>
            </span>
          </div>
          <button
            type="button"
            class="
              font-sans
              my-2
              w-full
              font-semibold
              text-muted-100
              bg-primary-500
              hover:bg-primary-600
              py-3
              rounded
              transition-colors
              duration-300
              tw-accessibility
            "
          >
            Get Started
          </button>
          <button
            type="button"
            class="
              w-full
              font-medium
              text-muted-300
              py-3
              rounded
              border border-transparent
              hover:text-muted-500 hover:border-muted-300
              dark:hover:border-muted-500
              transition-colors
              duration-300
              tw-accessibility
            "
          >
            Learn More
          </button>
        </div>
        <!--Pricing card-->
        <div
          class="
            max-w-xs
            rounded-md
            bg-white
            dark:bg-muted-800
            border-2 border-muted-200
            dark:border-muted-700
            px-8
            pt-8
            pb-4
          "
        >
          <h3
            class="
              font-heading
              text-2xl
              font-semibold
              text-muted-800
              dark:text-white/80
            "
          >
            Head Hunter
          </h3>
          <p class="font-sans text-sm text-muted-500 dark:text-muted-400 mt-1">
            A professional solution for those who specialize in vetting and
            hiring
          </p>
          <div class="flex items-center mt-3 mb-4">
            <h4
              class="text-5xl font-semibold text-muted-800 dark:text-white mr-4"
            >
              <template x-if="!yearly">
                <span>$69</span>
              </template>
              <template x-if="yearly">
                <span>$749</span>
              </template>
            </h4>
            <span class="font-sans text-xs text-muted-400">
              per user
              <br />
              <template x-if="!yearly">
                <span>per month</span>
              </template>
              <template x-if="yearly">
                <span>per year</span>
              </template>
            </span>
          </div>
          <button
            type="button"
            class="
              font-sans
              my-2
              w-full
              font-medium
              text-primary-500
              hover:text-muted-100 hover:bg-primary-500
              rounded
              border border-muted-200
              dark:border-muted-700
              hover:border-primary-500
              py-3
              transition-colors
              duration-300
              tw-accessibility
            "
          >
            Get Started
          </button>
          <button
            type="button"
            class="
              w-full
              font-medium
              text-muted-300
              py-3
              rounded
              border border-transparent
              hover:text-muted-500 hover:border-muted-300
              dark:hover:border-muted-500
              transition-colors
              duration-300
              tw-accessibility
            "
          >
            Learn More
          </button>
        </div>
      </div>
    </div>

    <!--Carousel-->
    <div class="pt-6">{{> section/testimonials/carousel/card-carousel}}</div>
  </div>
</section>
