feat: InspiraUI

src/components/InspiraUI/interactive-hover-button/InteractiveHoverButton.vue

@@ -0,0 +1,60 @@
+<template>
+  <button
+    ref="buttonRef"
+    :class="
+      cn(
+        'group relative w-auto cursor-pointer overflow-hidden rounded-full border bg-background p-2 px-6 text-center font-semibold',
+        props.class,
+      )
+    "
+  >
+    <div class="flex items-center gap-2">
+      <div
+        class="size-2 scale-100 rounded-lg bg-primary transition-all duration-300 group-hover:scale-[100.8]"
+      ></div>
+      <span
+        class="inline-block whitespace-nowrap transition-all duration-300 group-hover:translate-x-12 group-hover:opacity-0"
+      >
+        {{ text }}
+      </span>
+    </div>
+
+    <div
+      class="absolute top-0 z-10 flex size-full translate-x-12 items-center justify-center gap-2 text-primary-foreground opacity-0 transition-all duration-300 group-hover:-translate-x-5 group-hover:opacity-100"
+    >
+      <span class="whitespace-nowrap">{{ text }}</span>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="lucide lucide-arrow-right"
+      >
+        <path d="M5 12h14" />
+        <path d="m12 5 7 7-7 7" />
+      </svg>
+    </div>
+  </button>
+</template>
+
+<script lang="ts" setup>
+import { cn } from "@/shadcn/lib/utils";
+import { ref } from "vue";
+
+interface Props {
+  text?: string;
+  class?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  text: "Button",
+});
+
+const buttonRef = ref<HTMLButtonElement>();
+</script>
+
+<style></style>