Spotlight

"use client";
import React from "react";
import { cn } from "@/lib/utils";
import { Spotlight } from "@/lab/aceternity/ui/spotlight";

export default function SpotlightPreview() {
  return (
    <div className="@container relative flex h-full w-full items-center justify-center overflow-hidden bg-black/[0.96] antialiased">
      <div
        className={cn(
          "pointer-events-none absolute inset-0 [background-size:40px_40px] select-none",
          "[background-image:linear-gradient(to_right,#171717_1px,transparent_1px),linear-gradient(to_bottom,#171717_1px,transparent_1px)]",
        )}
      />

      <Spotlight className="-top-[30%] left-0 @2xl:-top-[15%] @2xl:left-[20%]" fill="white" />
      <div className="relative z-10 mx-auto w-full max-w-7xl p-4">
        <h1 className="bg-opacity-50 bg-gradient-to-b from-neutral-50 to-neutral-400 bg-clip-text text-center text-[clamp(1.5rem,7cqw,4.5rem)] leading-tight font-bold text-transparent">
          Spotlight <br /> is the new trend.
        </h1>
        <p className="mx-auto mt-[2cqw] max-w-[70cqw] text-center text-[clamp(0.65rem,1.8cqw,1rem)] font-normal text-neutral-300">
          Spotlight effect is a great way to draw attention to a specific part of the page. Here, we are
          drawing the attention towards the text section of the page. I don&apos;t know why but I&apos;m
          running out of copy.
        </p>
      </div>
    </div>
  );
}