Background Boxes

"use client";
import React from "react";
import { Boxes } from "@/lab/aceternity/ui/background-boxes";
import { cn } from "@/lib/utils";

export default function BackgroundBoxesDemo() {
  return (
    <div className="h-full relative w-full overflow-hidden bg-slate-900 flex flex-col items-center justify-center [container-type:inline-size]">
      <div className="absolute inset-0 w-full h-full bg-slate-900 z-20 [mask-image:radial-gradient(transparent,white)] pointer-events-none" />

      <Boxes />
      <h1 className={cn("text-[clamp(1.1rem,4.5cqw,2.25rem)] text-white relative z-20 pointer-events-none")}>
        Tailwind is Awesome
      </h1>
      <p className="text-center mt-2 text-neutral-300 relative z-20 pointer-events-none text-[clamp(0.7rem,1.8cqw,1rem)]">
        Framer motion is the best animation library ngl
      </p>
    </div>
  );
}