Bot Detection

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { motion } from "motion/react";
5import React, { useEffect, useState } from "react";
6 
7type BotDetectionProps = {
8  cardTitle?: string;
9  cardDescription?: string;
10};
11 
12const positions = [
13  { top: "80px", left: "34px" },
14  { top: "161px", left: "90px" },
15  { top: "120px", left: "230px" },
16  { top: "203px", left: "165px" },
17  { top: "100px", left: "120px" },
18  { top: "164px", left: "15px" },
19  { top: "238px", left: "61px" },
20  { top: "180px", left: "237px" },
21  { top: "53px", left: "204px" },
22];
23 
24const BotDetection = ({
25  cardTitle = "Bot Detection",
26  cardDescription = "Experience fewer fraudulent sign-ups with our sophisticated, AI-driven bot detection that constantly adapts, ensuring high accuracy and efficient platform protection.",
27}: BotDetectionProps) => {
28  const [currentIndex, setCurrentIndex] = useState(0);
29 
30  useEffect(() => {
31    setCurrentIndex(1);
32    const interval = setInterval(() => {
33      setCurrentIndex((prev) => (prev + 1) % positions.length);
34    }, 3000);
35 
36    return () => {
37      clearInterval(interval);
38    };
39  }, []);
40 
41  return (
42    <div
43      className={cn(
44        "relative overflow-hidden",
45        "h-120 w-full max-w-87.5",
46        "rounded-md border border-neutral-800 bg-black",
47      )}
48    >
49      <div className="absolute left-1/2 h-full max-w-75 min-w-75 -translate-x-1/2">
50        <div className="relative h-[80%] w-full">
51          <motion.div
52            className="pointer-events-none absolute bottom-5 left-37 h-62.5 w-62.5 origin-bottom-left"
53            style={{
54              background:
55                "radial-gradient(circle at 0% 100%, rgba(255, 255, 255, 0.3) 5%, transparent 60%)",
56            }}
57            initial={{ opacity: 0.7, rotate: -55 }}
58            animate={{
59              opacity: [0.7, 1, 0.7],
60              rotate: [-55, -40, -50, -45, -55, -50, -45, -50, -45, -55],
61            }}
62            transition={{
63              duration: 18,
64              repeat: Infinity,
65              ease: "easeInOut",
66            }}
67          />
68 
69          <ContainerMask />
70          <svg
71            width="100%"
72            height="100%"
73            className="pointer-events-none absolute top-0 left-0 animate-pulse"
74          >
75            {positions.map((pos, i) => (
76              <g key={i}>
77                <rect
78                  x={pos.left}
79                  y={pos.top}
80                  width={5}
81                  height={5}
82                  rx={1}
83// … truncated