import * as React from "react";

import { cn } from "@/lib/utils";

export interface AmbientGlowCardProps
  extends React.HTMLAttributes<HTMLDivElement> {
  title: string;
  description: string;
  eyebrow?: string;
  icon?: React.ReactNode;
  badge?: string;
}

export function AmbientGlowCard({
  title,
  description,
  eyebrow,
  icon,
  badge,
  className,
  ...props
}: AmbientGlowCardProps) {
  return (
    <div
      className={cn(
        "relative overflow-hidden rounded-2xl border border-border bg-card p-6 shadow-lg",
        className
      )}
      {...props}
    >
      <div className="pointer-events-none absolute inset-0">
        <div className="ambient-glow absolute -inset-[60%] rounded-full bg-[conic-gradient(from_120deg,_hsl(var(--primary)/0.25),_hsl(var(--secondary)/0.2),_transparent_40%)] opacity-70 blur-3xl" />
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_hsl(var(--primary)/0.12),_transparent_60%)]" />
      </div>
      <div className="relative z-10 flex h-full flex-col gap-4">
        <div className="flex items-center justify-between">
          {eyebrow ? (
            <span className="text-xs font-semibold uppercase tracking-[0.2em] text-primary">
              {eyebrow}
            </span>
          ) : (
            <span />
          )}
          {badge ? (
            <span className="rounded-full border border-border bg-background/70 px-3 py-1 text-xs font-medium text-foreground shadow-sm">
              {badge}
            </span>
          ) : null}
        </div>
        <div className="space-y-3">
          {icon ? (
            <div className="flex h-10 w-10 items-center justify-center rounded-full border border-border bg-background/70 text-primary">
              {icon}
            </div>
          ) : null}
          <div>
            <h3 className="text-lg font-semibold text-foreground">{title}</h3>
            <p className="mt-2 text-sm text-muted-foreground">{description}</p>
          </div>
        </div>
      </div>
      <style jsx>{`
        @keyframes ambient-glow {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }

        .ambient-glow {
          animation: ambient-glow 18s linear infinite;
        }
      `}</style>
    </div>
  );
}
Ambient Glow Card

Ambient glow

Dependencies

Files

Installation
