Vortex

"use client";
import { Vortex } from "@/lab/aceternity/ui/vortex";

export default function VortexDemo() {
  return (
    <div className="relative h-full w-full overflow-hidden [container-type:size]">
      <Vortex
        backgroundColor="black"
        className="flex h-full w-full flex-col items-center justify-center px-[4cqw] py-4"
      >
        <h2 className="text-center text-[clamp(1.25rem,7cqw,3.75rem)] font-bold text-white">
          The hell is this?
        </h2>
        <p className="mt-[3cqh] max-w-xl text-center text-[clamp(0.7rem,2.6cqw,1.5rem)] text-white">
          This is chemical burn. It&apos;ll hurt more than you&apos;ve ever been burned and
          you&apos;ll have a scar.
        </p>
        <div className="mt-[4cqh] flex flex-row items-center gap-4 text-[clamp(0.7rem,1.8cqw,1rem)]">
          <button className="rounded-lg bg-blue-600 px-4 py-2 text-white shadow-[0px_2px_0px_0px_#FFFFFF40_inset] transition duration-200 hover:bg-blue-700">
            Order now
          </button>
          <button className="px-4 py-2 text-white">Watch trailer</button>
        </div>
      </Vortex>
    </div>
  );
}