Glow Effect Card

/* Source: motion-primitives (Julien Thibeaut / ibelick) — https://github.com/ibelick/motion-primitives/blob/main/components/core/glow-effect.tsx — MIT. Included under its original licence.
   Copyright (c) 2024 ibelick. Adapted: trimmed to the "rotate" glow mode, dropped the cn/@/lib/utils helper, and wrapped it in a self-contained showcase card with a concrete zinc/white surface and dark: variants. */
"use client";

import type { CSSProperties } from "react";
import { motion, type Transition } from "motion/react";

type GlowEffectProps = {
  className?: string;
  style?: CSSProperties;
  colors?: string[];
  blurClassName?: string;
  transition?: Transition;
  scale?: number;
  duration?: number;
};

function GlowEffect({
  className,
  style,
  colors = ["#0894FF", "#C959DD", "#FF2E54", "#FF9004"],
  blurClassName = "blur-lg",
  transition,
  scale = 1,
  duration = 6,
}: GlowEffectProps) {
  const baseTransition: Transition = {
    repeat: Infinity,
    duration,
    ease: "linear",
  };

  return (
    <motion.div
      aria-hidden
      style={
        {
          ...style,
          "--scale": scale,
          willChange: "transform",
          backfaceVisibility: "hidden",
        } as CSSProperties
      }
      animate={{
        background: [
          `conic-gradient(from 0deg at 50% 50%, ${colors.join(", ")})`,
          `conic-gradient(from 360deg at 50% 50%, ${colors.join(", ")})`,
        ],
        transition: transition ?? baseTransition,
      }}
      className={[
        "pointer-events-none absolute inset-0 h-full w-full scale-[var(--scale)] transform-gpu",
        blurClassName,
        className || "",
      ].join(" ")}
    />
  );
}

export default function GlowEffectCard() {
  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-indigo-600 dark:text-indigo-400">
          Gradient
        </p>
        <h2 className="mt-3 text-balance text-3xl font-bold tracking-tight text-zinc-900 sm:text-4xl dark:text-white">
          A card wrapped in living light
        </h2>
        <p className="mt-4 text-lg text-zinc-600 dark:text-zinc-400">
          A slow conic gradient rotates behind the card, blurred into a soft,
          shifting halo.
        </p>
      </div>

      <div className="mx-auto mt-12 max-w-sm">
        <div className="relative">
          <GlowEffect
            colors={["#6366f1", "#a855f7", "#ec4899", "#f59e0b"]}
            blurClassName="blur-xl"
            duration={7}
            scale={0.96}
            className="rounded-3xl"
          />
          <div className="relative flex flex-col rounded-3xl border border-zinc-200/70 bg-white p-8 dark:border-zinc-800/70 dark:bg-zinc-900">
            <span className="inline-flex h-11 w-11 items-center justify-center rounded-xl bg-zinc-900 text-white dark:bg-white dark:text-zinc-900">
              <svg
                aria-hidden="true"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth={1.7}
                strokeLinecap="round"
                strokeLinejoin="round"
                className="h-6 w-6"
              >
                <path d="M12 3v18M3 12h18" />
                <circle cx="12" cy="12" r="9" />
              </svg>
            </span>
            <h3 className="mt-5 text-xl font-bold text-zinc-900 dark:text-white">
              Pro plan
            </h3>
            <p className="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
              Everything you need to launch, with priority support and unlimited
              projects.
            </p>
            <div className="mt-6 flex items-baseline gap-1">
              <span className="text-4xl font-bold text-zinc-900 dark:text-white">
                $29
              </span>
              <span className="text-sm text-zinc-500 dark:text-zinc-400">
                / month
              </span>
            </div>
            <button
              type="button"
              className="mt-6 inline-flex items-center justify-center rounded-xl bg-zinc-900 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-zinc-700 dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-200"
            >
              Get started
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}