import { DotPattern } from "@/components/vritti/dot-pattern";

export function DotPatternExample() {
  return (
    <div className="relative flex h-[500px] w-full items-center justify-center overflow-hidden rounded-lg border bg-background">
      <DotPattern className="text-neutral-300 dark:text-neutral-700" />
      <div className="z-10 text-center">
        <h1 className="text-4xl font-bold">Dot Pattern Background</h1>
        <p className="text-muted-foreground mt-2">
          A beautiful dot pattern for your backgrounds
        </p>
      </div>
    </div>
  );
}

import { DotPattern } from "@/components/vritti/dot-pattern";

export function DotPatternGradientExample() {
  return (
    <div className="relative flex h-[500px] w-full items-center justify-center overflow-hidden rounded-lg border bg-background">
      <DotPattern
        className="[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]"
        glow
      />
      <div className="z-10 text-center">
        <h1 className="text-4xl font-bold">Radial Gradient Mask</h1>
        <p className="text-muted-foreground mt-2">
          Dots fade out in a radial gradient with glow effect
        </p>
      </div>
    </div>
  );
}

import { DotPattern } from "@/components/vritti/dot-pattern";

export function DotPatternLinearExample() {
  return (
    <div className="relative flex h-[500px] w-full items-center justify-center overflow-hidden rounded-lg border bg-background">
      <DotPattern
        width={24}
        height={24}
        cr={1.5}
        className="[mask-image:linear-gradient(to_bottom,white,transparent)] text-blue-400 dark:text-blue-600"
      />
      <div className="z-10 text-center">
        <h1 className="text-4xl font-bold">Linear Gradient Mask</h1>
        <p className="text-muted-foreground mt-2">
          Larger dots with a top-to-bottom fade
        </p>
      </div>
    </div>
  );
}