Border Beam

import { BorderBeam } from "@/components/ui/border-beam"

export default function BorderBeamDemo() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-8">
      <div className="relative w-full max-w-sm overflow-hidden rounded-xl border bg-background p-6">
        <h3 className="text-lg font-semibold text-foreground">Border Beam</h3>
        <p className="mt-1 text-sm font-medium text-muted-foreground">
          Animated border effect
        </p>
        <p className="mt-3 text-sm text-muted-foreground">
          A beam of light smoothly moves around the perimeter of the card,
          creating an impressive animation.
        </p>
        <BorderBeam />
      </div>
    </div>
  )
}