Experience Card

<!--
  Day 82: Experience Card

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- Experience Card -->
<div
  class="relative mx-auto w-full max-w-lg rounded-3xl border border-zinc-200 bg-white ring-4 ring-zinc-300/25"
>
  <div class="relative overflow-hidden rounded-3xl bg-white">
    <!-- Header -->
    <div class="relative overflow-hidden">
      <!-- Experience Badge -->
      <div class="absolute top-0 left-0 p-6">
        <span
          class="inline-flex items-center gap-1 rounded-full bg-zinc-900/50 px-2.5 py-1 text-sm font-medium text-white backdrop-blur-sm"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="hi-micro hi-star inline-block size-4 text-orange-400"
          >
            <path
              fill-rule="evenodd"
              d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
              clip-rule="evenodd"
            />
          </svg>
          <span>Popular</span>
        </span>
      </div>
      <!-- END Experience Badge -->

      <!-- Favorite Button -->
      <div class="absolute top-0 right-0 p-6">
        <button
          type="button"
          class="inline-flex size-8 items-center justify-center rounded-full bg-zinc-900/50 text-white backdrop-blur-sm hover:bg-zinc-900 hover:text-red-400"
          aria-label="Favorite"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
            class="lucide lucide-heart inline-block size-4"
          >
            <path
              d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"
            />
          </svg>
        </button>
      </div>
      <!-- END Favorite Button -->

      <!-- Experience Image -->
      <img
        src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Mountain Adventure"
        class="aspect-16/9 w-full object-cover"
      />
      <!-- END Experience Image -->
    </div>
    <!-- END Header -->

    <!-- Experience Details -->
    <div class="p-6">
      <!-- Experience Title and Location -->
      <div class="mb-4">
        <h3 class="mb-1 text-xl font-bold text-zinc-800">
          Mountain Hiking Adventure
        </h3>
        <div class="flex items-center gap-1 text-sm text-zinc-600">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
            class="lucide lucide-map-pin inline-block size-4 text-zinc-400"
          >
            <path
              d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"
            />
            <circle cx="12" cy="10" r="3" />
          </svg>
          <span>Rocky Mountain, Colorado</span>
        </div>
      </div>
      <!-- END Experience Title and Location -->

      <!-- Duration and Difficulty -->
      <div
        class="mb-4 flex flex-col justify-between gap-2 sm:flex-row sm:items-center"
      >
        <div class="flex items-center gap-4">
          <div class="flex items-center gap-2">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              aria-hidden="true"
              class="lucide lucide-clock-2 inline-block size-4 text-zinc-400"
            >
              <circle cx="12" cy="12" r="10" />
              <polyline points="12 6 12 12 16 10" />
            </svg>
            <span class="text-sm text-zinc-600">6 hours</span>
          </div>
          <div class="flex items-center gap-2">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              aria-hidden="true"
              class="lucide lucide-trending-up inline-block size-4 text-zinc-400"
            >
              <polyline points="22 7 13.5 15.5 8.5 10.5 2 17" />
              <polyline points="16 7 22 7 22 13" />
            </svg>
            <span class="text-sm text-zinc-600">Moderate</span>
          </div>
        </div>
        <div class="flex items-center gap-1">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            class="size-4 text-orange-400"
          >
            <polygon
              points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"
            />
          </svg>
          <span class="text-sm font-medium text-zinc-700">4.9</span>
          <span class="text-sm text-zinc-500">(369)</span>
        </div>
      </div>
      <!-- END Duration and Difficulty -->

      <hr class="my-4 border-zinc-100" />

      <!-- Experience Features -->
      <div class="mb-4 flex flex-wrap gap-1.5">
        <span
          class="rounded-lg bg-zinc-200/50 px-2 py-1 text-xs font-medium text-zinc-700"
        >
          Guide Included
        </span>
        <span
          class="rounded-lg bg-zinc-200/50 px-2 py-1 text-xs font-medium text-zinc-700"
        >
          Equipment Provided
        </span>
        <span
          class="rounded-lg bg-zinc-200/50 px-2 py-1 text-xs font-medium text-zinc-700"
        >
          Lunch Included
        </span>
        <span
          class="rounded-lg bg-zinc-200/50 px-2 py-1 text-xs font-medium text-zinc-700"
        >
          Small Group
        </span>
      </div>
      <!-- END Experience Features -->

      <!-- Tour Operator -->
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
          <div class="flex items-center gap-2">
            <div
              class="flex size-8 items-center justify-center rounded-full bg-blue-100 text-blue-600"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                aria-hidden="true"
                class="lucide lucide-mountain-snow inline-block size-4"
              >
                <path d="m8 3 4 8 5-5 5 15H2L8 3z" />
                <path
                  d="M4.14 15.08c2.62-1.57 5.24-1.43 7.86.42 2.74 1.94 5.49 2 8.23.19"
                />
              </svg>
            </div>
            <div>
              <div class="text-sm font-medium text-zinc-800">Super Hikes</div>
              <div class="text-xs text-zinc-600">Licensed Guide</div>
            </div>
          </div>
        </div>
        <span
          class="inline-flex items-center gap-1 rounded-lg bg-emerald-100 px-2 py-1 text-xs font-medium text-emerald-700"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="hi-micro hi-check inline-block size-4"
          >
            <path
              fill-rule="evenodd"
              d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
              clip-rule="evenodd"
            />
          </svg>
          <span>Available</span>
        </span>
      </div>
      <!-- END Tour Operator -->

      <hr class="my-4 border-zinc-100" />

      <!-- Price and Book Button -->
      <div class="flex items-center justify-between">
        <div>
          <div class="flex items-baseline gap-1">
            <span class="text-2xl font-bold text-zinc-800">$89</span>
            <span class="text-xs text-zinc-600">/person</span>
          </div>
          <p class="text-xs text-emerald-600">Free cancellation</p>
        </div>
        <button
          type="button"
          class="rounded-xl bg-blue-600 px-6 py-2.5 text-sm font-medium text-white shadow-lg shadow-blue-500/25 hover:bg-blue-700 hover:shadow-blue-500/50"
        >
          Book Now
        </button>
      </div>
      <!-- END Price and Book Button -->
    </div>
  </div>
</div>
<!-- END Experience Card -->