import * as React from "react";

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

type GlassCardProps = React.HTMLAttributes<HTMLDivElement> & {
  title: string;
  description: string;
  eyebrow?: string;
  highlight?: string;
  icon?: React.ReactNode;
};

export function GlassCard({
  title,
  description,
  eyebrow,
  highlight,
  icon,
  className,
  ...props
}: GlassCardProps) {
  return (
    <div
      className={cn(
        "relative overflow-hidden rounded-2xl border border-border/50 bg-card/40 p-6 shadow-lg backdrop-blur-xl",
        className
      )}
      {...props}
    >
      <div className="pointer-events-none absolute inset-0">
        <div className="absolute -top-16 left-1/2 h-40 w-40 -translate-x-1/2 rounded-full bg-primary/20 blur-3xl" />
        <div className="absolute bottom-0 right-0 h-32 w-32 rounded-full bg-secondary/20 blur-3xl" />
        <div className="absolute inset-0 bg-gradient-to-br from-transparent via-background/30 to-transparent" />
      </div>

      <div className="relative flex items-start gap-4">
        {icon ? (
          <div className="flex h-12 w-12 items-center justify-center rounded-xl border border-border/60 bg-background/60 text-foreground">
            {icon}
          </div>
        ) : null}
        <div className="space-y-3">
          <div className="flex flex-wrap items-center gap-2">
            {eyebrow ? (
              <span className="text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
                {eyebrow}
              </span>
            ) : null}
            {highlight ? (
              <span className="rounded-full border border-border/60 bg-background/60 px-2.5 py-1 text-xs font-medium text-foreground">
                {highlight}
              </span>
            ) : null}
          </div>
          <h3 className="text-lg font-semibold text-foreground">{title}</h3>
          <p className="text-sm leading-relaxed text-muted-foreground">
            {description}
          </p>
        </div>
      </div>
    </div>
  );
}
Glass Card

Glass Card

Dependencies

Files

Installation
