Wavy Background

"use client";
import { WavyBackground } from "@/lab/aceternity/ui/wavy-background";

export default function WavyBackgroundDemo() {
  return (
    <div className="relative h-full w-full [container-type:size]">
      <WavyBackground className="mx-auto max-w-4xl px-4 pb-[18cqh]">
        <p className="text-center text-[clamp(1.25rem,7.5cqw,4.5rem)] font-bold text-white">
          Hero waves are cool
        </p>
        <p className="mt-[2cqh] text-center text-[clamp(0.7rem,2.2cqw,1.125rem)] font-normal text-white">
          Leverage the power of canvas to create a beautiful hero section
        </p>
      </WavyBackground>
    </div>
  );
}