<template>
  <div class="hidden lg:flex items-center gap-2 mt-6 px-3 py-2 rounded-lg bg-neutral-50 dark:bg-neutral-800/50 border border-neutral-100 dark:border-neutral-800 w-fit transition-opacity hover:opacity-100 opacity-70">
    <UIcon
      name="i-ph-hand-pointing-duotone"
      class="w-5 h-5 text-primary-500 animate-wave origin-bottom"
    />
    <p class="text-xs font-medium text-neutral-500 dark:text-neutral-400">
      Tip: Hover over the <span class="font-bold text-neutral-900 dark:text-neutral-200">bold text</span> to reveal more details.
    </p>
  </div>
</template>
