Framework Agnostic

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { useState, useEffect } from "react";
5import type { SVGProps } from "react";
6 
7type FrameworkAgnosticProps = {
8  cardTitle?: string;
9  cardDescription?: string;
10};
11 
12const FrameworkAgnostic = ({
13  cardTitle = "Framework Agnostic",
14  cardDescription = "Seamlessly integrate with any tech stack, whether it's Next.js,React, HTML, or anything else. Statsio works everywhere.",
15}: FrameworkAgnosticProps) => {
16  return (
17    <div
18      className={cn(
19        "relative",
20        "flex flex-col justify-between",
21        "h-80 space-y-4",
22        "rounded-md border border-neutral-800/80 bg-neutral-950",
23      )}
24    >
25      <FrameworkCard />
26      <div className="px-4 pb-4">
27        <div className="text-sm font-semibold text-white">{cardTitle}</div>
28        <div className="mt-2 text-xs text-neutral-400">{cardDescription}</div>
29      </div>
30    </div>
31  );
32};
33 
34export default FrameworkAgnostic;
35 
36const FrameworkCard = () => {
37  const [nextJsTransform, setNextJsTransform] = useState("none");
38  const [reactTransform, setReactTransform] = useState("none");
39  const [htmlTransform, setHtmlTransform] = useState("none");
40 
41  useEffect(() => {
42    const cycleAnimations = async () => {
43      const upStyle = "translateY(-3.71px) rotateX(10.71deg) translateZ(20px)";
44      const downStyle = "none";
45 
46      const transitionDuration = 1100;
47 
48      const durationOfUpState = 1200;
49      const delayBetweenCards = 600;
50 
51      while (true) {
52        setReactTransform(upStyle);
53        await new Promise((resolve) => setTimeout(resolve, durationOfUpState));
54        setReactTransform(downStyle);
55        await new Promise((resolve) =>
56          setTimeout(resolve, transitionDuration + delayBetweenCards),
57        );
58 
59        setNextJsTransform(upStyle);
60        await new Promise((resolve) => setTimeout(resolve, durationOfUpState));
61        setNextJsTransform(downStyle);
62        await new Promise((resolve) =>
63          setTimeout(resolve, transitionDuration + delayBetweenCards),
64        );
65 
66        setHtmlTransform(upStyle);
67        await new Promise((resolve) => setTimeout(resolve, durationOfUpState));
68        setHtmlTransform(downStyle);
69        await new Promise((resolve) =>
70          setTimeout(resolve, transitionDuration + delayBetweenCards),
71        );
72      }
73    };
74 
75    cycleAnimations();
76  }, []);
77 
78  const cardClasses =
79// … truncated