Neon Gradient Card

/* Source: Magic UI (magicuidesign) — https://github.com/magicuidesign/magicui/blob/main/apps/www/registry/magicui/neon-gradient-card.tsx — MIT. Included under its original licence.
   Copyright (c) Magic UI. Adapted: replaced the JS size-measurement + Tailwind config keyframes with a self-contained pure-CSS pseudo-element border and a scoped <style> keyframe, so it compiles on Tailwind v4 with no config. */
import type { CSSProperties, ReactNode } from "react";

const cn = (...c: Array<string | false | null | undefined>) =>
  c.filter(Boolean).join(" ");

const NEON_CSS = `
@keyframes src-neon-spin {
  0%   { background-position: 0% 0%; }
  100% { background-position: 0% 100%; }
}
.src-neon-card { border-radius: var(--neon-radius); }
.src-neon-card::before,
.src-neon-card::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--neon-border));
  z-index: -1;
  border-radius: var(--neon-radius);
  background: linear-gradient(0deg, var(--neon-1), var(--neon-2));
  background-size: 100% 200%;
  animation: src-neon-spin 3000ms linear infinite alternate;
}
.src-neon-card::after {
  filter: blur(22px);
  opacity: 0.75;
}
.src-neon-card__content {
  border-radius: calc(var(--neon-radius) - var(--neon-border));
}
@media (prefers-reduced-motion: reduce) {
  .src-neon-card::before,
  .src-neon-card::after { animation: none; }
}
`;

interface NeonGradientCardProps {
  children?: ReactNode;
  className?: string;
  contentClassName?: string;
  borderSize?: number;
  borderRadius?: number;
  firstColor?: string;
  secondColor?: string;
}

function NeonGradientCard({
  children,
  className,
  contentClassName,
  borderSize = 2,
  borderRadius = 20,
  firstColor = "#ff00aa",
  secondColor = "#00FFF1",
}: NeonGradientCardProps) {
  return (
    <div
      className={cn("src-neon-card relative z-0", className)}
      style={
        {
          "--neon-1": firstColor,
          "--neon-2": secondColor,
          "--neon-border": `${borderSize}px`,
          "--neon-radius": `${borderRadius}px`,
        } as CSSProperties
      }
    >
      <style>{NEON_CSS}</style>
      <div
        className={cn(
          "src-neon-card__content relative h-full w-full bg-zinc-50 p-6 dark:bg-neutral-900",
          contentClassName
        )}
      >
        {children}
      </div>
    </div>
  );
}

export default function NeonGradientCardBlock() {
  return (
    <section className="bg-white px-6 py-16 dark:bg-zinc-950 md:py-24">
      <div className="mx-auto max-w-2xl text-center">
        <p className="text-sm font-semibold uppercase tracking-widest text-fuchsia-600 dark:text-fuchsia-400">
          Gradient
        </p>
        <h2 className="mt-3 text-balance text-3xl font-bold tracking-tight text-zinc-900 sm:text-4xl dark:text-white">
          An animated neon border
        </h2>
        <p className="mt-4 text-lg text-zinc-600 dark:text-zinc-400">
          A living gradient runs around the edge, with a soft glow bleeding out
          behind the card.
        </p>
      </div>

      <div className="mx-auto mt-12 max-w-sm">
        <NeonGradientCard>
          <span className="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-fuchsia-500 to-cyan-400 text-white">
            <svg
              aria-hidden="true"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth={1.8}
              strokeLinecap="round"
              strokeLinejoin="round"
              className="h-6 w-6"
            >
              <path d="M13 2 3 14h7l-1 8 10-12h-7z" />
            </svg>
          </span>
          <h3 className="mt-5 text-xl font-bold text-zinc-900 dark:text-white">
            Ship faster
          </h3>
          <p className="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-300">
            Preview, deploy and roll back in a single click. Every push gets its
            own URL so you can share work before it goes live.
          </p>
          <div className="mt-6 flex items-baseline gap-1">
            <span className="text-3xl font-bold text-zinc-900 dark:text-white">
              40%
            </span>
            <span className="text-sm text-zinc-500 dark:text-zinc-400">
              faster releases
            </span>
          </div>
        </NeonGradientCard>
      </div>
    </section>
  );
}