Animated Border

import { motion } from "framer-motion";

export function AnimatedBorder({ children }) {
  return (
    <div className="relative overflow-hidden rounded-2xl p-[2px]">
      <motion.div
        className="absolute inset-[-60%]"
        style={{ background: "conic-gradient(from 0deg, transparent 0deg, #4fa0ff 60deg, transparent 120deg)" }}
        animate={{ rotate: 360 }}
        transition={{ duration: 4, repeat: Infinity, ease: "linear" }}
      />
      <div className="relative rounded-[14px] bg-[#0a0e1a] p-6">{children}</div>
    </div>
  );
}