Magnetic Button

import { ButtonMagnetic } from '@/components/ui/button-magnetic'

import { ArrowRight } from 'lucide-react'
import { ButtonMagnetic } from '@/components/ui/button-magnetic'

export default function ButtonMagneticDemo() {
  return (
    <div className="mx-auto flex min-h-[360px] max-w-3xl flex-col items-center justify-center gap-10 px-6 py-16">
      <div className="max-w-md text-center">
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
          Meridian Studio · public beta
        </p>
        <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
          Move the pointer near a control, it leans at most 8px. On touch devices the
          effect is off, so the hit target never lies.
        </p>
      </div>

      <div className="flex flex-wrap items-center justify-center gap-4">
        <ButtonMagnetic>
          Start free trial
          <ArrowRight className="size-4" aria-hidden="true" />
        </ButtonMagnetic>
        <ButtonMagnetic variant="ink">Book a walkthrough</ButtonMagnetic>
        <ButtonMagnetic variant="outline">View pricing</ButtonMagnetic>
      </div>

      <div className="flex flex-wrap items-center justify-center gap-4">
        <ButtonMagnetic size="sm">Export CSV</ButtonMagnetic>
        <ButtonMagnetic size="md">Invite teammates</ButtonMagnetic>
        <ButtonMagnetic size="lg">Open workspace</ButtonMagnetic>
      </div>
    </div>
  )
}