Card with Animated Borders 2

<!--
  Day 57: Card with Animated Borders 2

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

<!-- Card with Animated Borders 2 -->
<div
  class="mx-auto w-full max-w-md rounded-3xl bg-white/40 p-3 shadow-sm shadow-slate-300 backdrop-blur-xs"
>
  <div
    class="group relative flex flex-col overflow-hidden rounded-2xl bg-gray-50 before:absolute before:-top-full before:-right-full before:-bottom-full before:-left-full before:-m-96 before:block before:animate-[spin_5s_linear_infinite] before:bg-[conic-gradient(#c800de,transparent,#f6339a)] before:opacity-0 before:transition-all before:duration-500 before:ease-out before:content-[''] hover:before:opacity-50"
  >
    <div class="relative m-0.75 grow rounded-xl bg-gray-50 p-6 lg:p-8 xl:p-10">
      <div
        class="absolute end-2 top-2 rounded-full bg-gray-200/50 px-2 py-1 text-xs font-medium text-gray-950 transition duration-500 ease-out group-hover:bg-purple-200/75 group-hover:text-purple-950"
      >
        AI Powered
      </div>
      <div class="relative mb-8 w-12 text-purple-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-sparkles absolute right-0 bottom-0 inline-block size-10 translate-x-2 translate-y-2 opacity-25 transition group-hover:translate-x-0 group-hover:translate-y-0 group-hover:opacity-0"
        >
          <path
            d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"
          />
          <path d="M20 3v4" />
          <path d="M22 5h-4" />
          <path d="M4 17v2" />
          <path d="M5 18H3" />
        </svg>
        <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-sparkles relative inline-block size-12 transition group-hover:translate-x-1 group-hover:translate-y-1"
        >
          <path
            d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"
          />
          <path d="M20 3v4" />
          <path d="M22 5h-4" />
          <path d="M4 17v2" />
          <path d="M5 18H3" />
        </svg>
      </div>
      <h4 class="mb-3 text-xl font-bold">Smart Content Generator</h4>
      <p class="text-sm leading-relaxed font-medium text-gray-600">
        Our AI-powered content engine creates personalized copy for your website
        in seconds, adapting to your brand voice and optimizing for engagement.
      </p>
    </div>
  </div>
</div>
<!-- END Card with Animated Borders 2 -->