Shooting Stars and Stars Background

"use client";
import { ShootingStars } from "@/lab/aceternity/ui/shooting-stars";
import { StarsBackground } from "@/lab/aceternity/ui/stars-background";

export default function ShootingStarsAndStarsBackgroundDemo() {
  return (
    <div className="@container relative flex h-full w-full flex-col items-center justify-center overflow-hidden bg-neutral-900">
      <h2 className="relative z-10 mx-auto flex max-w-5xl flex-col items-center gap-2 bg-gradient-to-b from-neutral-800 via-white to-white bg-clip-text text-center text-[clamp(1.4rem,5.5cqw,3rem)] leading-tight font-medium tracking-tight text-transparent @2xl:flex-row @2xl:gap-8">
        <span>Shooting Star</span>
        <span className="text-lg font-thin text-white">x</span>
        <span>Star Background</span>
      </h2>
      <ShootingStars />
      <StarsBackground />
    </div>
  );
}