Border beam card

/* globals.css
@property --beam { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes beam { to { --beam: 1turn; } }
.border-beam {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--tst-bg), var(--tst-bg)) padding-box,
    conic-gradient(from var(--beam), var(--tst-border) 0 68%, var(--tst-primary) 87%, var(--tst-info) 92%, var(--tst-border) 97%) border-box;
  animation: beam 5s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .border-beam { animation: none; } }
*/
import { Check } from "lucide-react";

export function BeamPlanCard() {
  return (
    <div className="border-beam w-full max-w-[290px] rounded-lg p-[18px] animate-rise motion-reduce:animate-none">
      <div className="flex items-center justify-between">
        <span className="font-medium text-fg">Team</span>
        <span className="inline-flex h-[22px] items-center rounded-full bg-primary-soft px-2 text-xs font-medium text-primary-soft-fg">Most picked</span>
      </div>
      <p className="mt-2 text-[32px] font-medium leading-tight tracking-tight text-fg">
        $48<span className="text-sm font-normal tracking-normal text-fg-muted"> / month</span>
      </p>
      <ul className="mb-4 mt-3.5 grid gap-1.5 text-[13.5px] text-fg">
        {["10 seats included", "Shared brand kit", "Review and handoff"].map((f) => (
          <li key={f} className="flex items-center gap-2"><Check className="size-[15px] text-primary" />{f}</li>
        ))}
      </ul>
      <button type="button" className="h-9 w-full rounded bg-primary text-sm font-medium text-primary-fg transition hover:bg-primary-hover active:scale-[.97] motion-reduce:transition-none">
        Choose Team
      </button>
    </div>
  );
}