Warp Background

"use client";

import { WarpBackground } from "@/lab/magicui/ui/warp-background";

export default function WarpBackgroundDemo() {
  return (
    <div className="relative h-full w-full">
      <WarpBackground className="flex h-full w-full items-center justify-center rounded-none border-0 p-[8%]">
        <div className="w-80 max-w-full rounded-xl border border-neutral-200 bg-white p-4 text-neutral-950 shadow-sm">
          <div className="flex flex-col gap-2">
            <div className="leading-snug font-semibold">Congratulations on Your Promotion!</div>
            <p className="text-sm text-neutral-500">
              Your hard work and dedication have paid off. We&apos;re thrilled to see you take this next step in your
              career. Keep up the fantastic work!
            </p>
          </div>
        </div>
      </WarpBackground>
    </div>
  );
}