Modern Story Card 3

<!--
  Day 100: Modern Story Card 3

  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
-->

<!-- Modern Story Card 3 -->
<a
  href="javascript:void(0)"
  class="group relative mx-auto flex w-full max-w-sm flex-col overflow-hidden rounded-3xl bg-white p-3 shadow-lg active:opacity-90"
>
  <div class="relative aspect-3/4 w-full overflow-hidden rounded-2xl">
    <!-- Background Image -->
    <img
      src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=900&auto=format&fit=crop"
      alt="Cover Image"
      class="aspect-3/4 w-full object-cover grayscale-75 transition duration-400 ease-out group-hover:scale-110 group-hover:grayscale-0 group-active:scale-110"
    />
    <!-- END Background Image -->

    <!-- Overlay -->
    <div
      class="absolute inset-x-0 bottom-0 h-1/2 rounded-b-2xl bg-zinc-600/50 mask-t-from-50% backdrop-blur-xs transition-all duration-400 ease-out group-hover:bg-zinc-900/50 group-hover:opacity-0"
    ></div>
    <!-- END Overlay -->

    <!-- Content -->
    <div class="absolute inset-0 flex flex-col justify-between">
      <div
        class="origin-top-left p-7 transition duration-400 ease-out group-hover:-translate-y-full group-hover:-rotate-45 group-hover:opacity-0"
      >
        <div
          class="inline-flex items-center gap-1.5 rounded-full bg-zinc-900/50 px-3 py-2 text-xs 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-building-storefront inline-block size-4"
          >
            <path
              d="M4.5 7c.681 0 1.3-.273 1.75-.715C6.7 6.727 7.319 7 8 7s1.3-.273 1.75-.715A2.5 2.5 0 1 0 11.5 2h-7a2.5 2.5 0 0 0 0 5ZM6.25 8.097A3.986 3.986 0 0 1 4.5 8.5c-.53 0-1.037-.103-1.5-.29v4.29h-.25a.75.75 0 0 0 0 1.5h.5a.754.754 0 0 0 .138-.013A.5.5 0 0 0 3.5 14H6a.5.5 0 0 0 .5-.5v-3A.5.5 0 0 1 7 10h2a.5.5 0 0 1 .5.5v3a.5.5 0 0 0 .5.5h2.5a.5.5 0 0 0 .112-.013c.045.009.09.013.138.013h.5a.75.75 0 1 0 0-1.5H13V8.21c-.463.187-.97.29-1.5.29a3.986 3.986 0 0 1-1.75-.403A3.986 3.986 0 0 1 8 8.5a3.986 3.986 0 0 1-1.75-.403Z"
            />
          </svg>
          <span>Business</span>
        </div>
      </div>
      <div
        class="origin-bottom-left p-7 transition duration-400 ease-out group-hover:translate-y-full group-hover:rotate-45 group-hover:opacity-0"
      >
        <h3 class="text-2xl font-black text-white">
          How to Build a SaaS Product
        </h3>
        <p class="font-meidum mt-1 text-sm/relaxed text-white/90">
          Learn how to build a SaaS product from scratch using modern
          technologies.
        </p>
      </div>
    </div>
    <!-- END Content -->

    <!-- Arrow -->
    <div
      class="pointer-events-none absolute inset-0 flex -translate-x-full scale-300 items-center justify-center opacity-0 transition duration-400 ease-out group-hover:translate-x-0 group-hover:scale-100 group-hover:opacity-100 group-active:scale-75"
    >
      <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-arrow-right inline-block size-18 text-white"
      >
        <path d="M5 12h14" />
        <path d="m12 5 7 7-7 7" />
      </svg>
    </div>
    <!-- END Arrow -->
  </div>
</a>
<!-- END Modern Story Card 3 -->