Security Card

1"use client";
2import { cn } from "@/lib/utils";
3import { motion } from "motion/react";
4import { IoMdCheckmark } from "react-icons/io";
5import React, { useEffect, useRef, useState } from "react";
6 
7type SecurityCardProps = {
8  delay?: number;
9  name?: string;
10  email?: string;
11  cardTitle?: string;
12  cardDescription?: string;
13};
14 
15const SecurityCard = ({
16  delay = 5000,
17  name = "Liam Parker",
18  email = "liam.parker@example.com",
19  cardTitle = "Smart Access Control",
20  cardDescription = "Evaluate each login based on real-time signals like IP, device history, and context before allowing access intelligently.",
21}: SecurityCardProps) => {
22  const [animationKey, setAnimationKey] = useState(0);
23  const delayTime = Math.max(delay, 5000);
24  useEffect(() => {
25    const interval = setInterval(() => {
26      setAnimationKey((prev) => prev + 1);
27    }, delayTime);
28 
29    return () => clearInterval(interval);
30  }, [delayTime]);
31 
32  return (
33    <Securitycard
34      name={name}
35      email={email}
36      key={animationKey}
37      cardTitle={cardTitle}
38      cardDescription={cardDescription}
39    />
40  );
41};
42export default SecurityCard;
43 
44const Securitycard = ({
45  name,
46  email,
47  cardTitle,
48  cardDescription,
49}: {
50  name: string;
51  email: string;
52  cardTitle: string;
53  cardDescription: string;
54}) => {
55  return (
56    <div
57      className={cn(
58        "relative overflow-hidden",
59        "shadow-sm shadow-black/10",
60        "flex h-108 w-full max-w-87.5 items-center justify-center",
61        "rounded-md bg-neutral-100 shadow-sm ring-1 shadow-black/10 ring-black/10 dark:bg-neutral-900 dark:ring-neutral-800",
62      )}
63    >
64      <InfiniteScrambler />
65      <ContainerMask />
66      <div
67        className={cn(
68          "absolute bottom-0 h-1/2 w-[150%] rounded-t-[60%]",
69          "bg-linear-to-b from-neutral-200 to-neutral-50 shadow-[0_0_900px_rgba(250,250,250,0.9)]",
70          "dark:from-neutral-800 dark:to-neutral-950 dark:shadow-[0_0_900px_rgba(10,10,10,0.9)]",
71        )}
72      />
73      <div className="absolute top-[70%] flex h-12 w-full flex-col items-center justify-center gap-1">
74        <div className="text-primary flex items-center justify-center text-xs">
75          <motion.p
76            initial={{
77              x: 8,
78            }}
79            animate={{
80              x: -2,
81            }}
82            transition={{
83              duration: 0.4,
84              ease: "easeInOut",
85              delay: 1.8,
86            }}
87          >
88            {name}
89          </motion.p>
90// … truncated