Refactr a lot of things

src/components/cards/GlowingBorderWrapper.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+import { useTheme } from "next-themes"
+import { ReactNode } from "react"
+
+interface GlowingBorderWrapperProps {
+  children: ReactNode
+  className?: string
+  animate?: boolean
+  colors?: string[]
+}
+
+export function GlowingBorderWrapper({
+  children,
+  className,
+  animate = true,
+  colors = [],
+}: GlowingBorderWrapperProps) {
+  const { theme } = useTheme()
+
+  const gradientColors = colors.length
+    ? colors.join(", ")
+    : theme === "dark"
+      ? "rgba(255,255,255,0.2), rgba(255,255,255,0.05)"
+      : "rgba(0,0,0,0.1), rgba(0,0,0,0.03)"
+
+  return (
+    <div
+      className={cn(
+        "relative rounded-lg p-[2px]",
+        animate && "animate-glow",
+        className
+      )}
+      style={{
+        background: `linear-gradient(135deg, ${gradientColors})`,
+      }}
+    >
+      <div className="rounded-md overflow-hidden">{children}</div>
+    </div>
+  )
+}