Glare Hover

"use client";

import { GlareHover } from "@/lab/magicui/ui/glare-hover";

import { Fit } from "./fit";

export default function GlareHoverDemo() {
  return (
    <Fit width={360} height={380}>
      <div className="flex h-full w-full items-center justify-center">
        <GlareHover className="rounded-xl" duration={600}>
          <div className="flex w-[340px] flex-col gap-6 rounded-xl border border-neutral-200 bg-white py-6 text-neutral-950 shadow-sm">
            <div className="px-6">
              <div className="flex items-center justify-between">
                <div className="leading-none font-semibold">Pro</div>
                <span className="rounded-md bg-neutral-900 px-2 py-0.5 text-xs font-medium text-white">Popular</span>
              </div>
              <div className="mt-1.5 text-sm text-neutral-500">For teams that need more.</div>
              <div className="flex items-baseline gap-1 pt-2">
                <span className="text-4xl font-semibold tracking-tight">$49</span>
                <span className="text-sm text-neutral-500">/mo</span>
              </div>
            </div>
            <div className="flex flex-col gap-2.5 px-6">
              {["Unlimited projects", "Team collaboration", "Advanced analytics"].map((f) => (
                <div key={f} className="flex items-center gap-2 text-sm">
                  <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
                    <path
                      d="M12.5 3.5L6 10L2.5 6.5"
                      stroke="currentColor"
                      strokeWidth="1.5"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                  {f}
                </div>
              ))}
              <div className="flex items-center gap-2 text-sm text-neutral-500">
                <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
                  <circle cx="7.5" cy="7.5" r="1.5" fill="currentColor" opacity="0.4" />
                </svg>
                SSO (coming soon)
              </div>
            </div>
            <div className="px-6">
              <button type="button" className="h-9 w-full rounded-md bg-neutral-900 text-sm font-medium text-white">
                Get started
              </button>
            </div>
          </div>
        </GlareHover>
      </div>
    </Fit>
  );
}