Mesh Gradient Background

"use client";

import { MeshGradientBg } from "@/components/ui/mesh-gradient-bg";

export default function MeshGradientBgDemo() {
  return (
    <div className="flex min-h-svh w-full items-center justify-center bg-background p-6">
      <div className="relative aspect-[2/1] w-full max-w-3xl overflow-hidden rounded-2xl border shadow-sm">
        <MeshGradientBg width={1280} height={640} className="!h-full !w-full" />
        <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-3 px-6 text-center">
          <span className="text-xs font-medium uppercase tracking-[0.2em] text-white/70">
            Environment
          </span>
          <h2 className="text-3xl font-semibold text-white sm:text-4xl">
            Mesh Gradient Background
          </h2>
          <p className="max-w-sm text-sm text-white/70">
            Living gradient with amorphous color blobs slowly drifting across
            the frame.
          </p>
        </div>
      </div>
    </div>
  );
}