site-bento

1"use client";
2 
3import React, { useState, useEffect, useRef } from "react";
4import {
5  motion,
6  useMotionValue,
7  useTransform,
8  type Variants,
9} from "framer-motion";
10import {
11  ArrowUpRight,
12  CheckCircle2,
13  Clock,
14  Sparkles,
15  Zap,
16  Plus,
17} from "lucide-react";
18import { cn } from "@repo/shadcn-ui/lib/utils";
19 
20export interface BentoItem {
21  id: string;
22  title: string;
23  description: string;
24  icons?: boolean;
25  href?: string;
26  feature?:
27    | "chart"
28    | "counter"
29    | "code"
30    | "timeline"
31    | "spotlight"
32    | "icons"
33    | "typing"
34    | "metrics";
35  spotlightItems?: string[];
36  timeline?: Array<{ year: string; event: string }>;
37  code?: string;
38  codeLang?: string;
39  typingText?: string;
40  metrics?: Array<{
41    label: string;
42    value: number;
43    suffix?: string;
44    color?: string;
45  }>;
46  statistic?: {
47    value: string;
48    label: string;
49    start?: number;
50    end?: number;
51    suffix?: string;
52  };
53  size?: "sm" | "md" | "lg";
54  className?: string;
55}
56 
57export interface BentoGridProps {
58  items: BentoItem[];
59  className?: string;
60  title?: string;
61  subtitle?: string;
62}
63 
64const fadeInUp: Variants = {
65  hidden: { opacity: 0, y: 20 },
66  visible: {
67    opacity: 1,
68    y: 0,
69    transition: {
70      duration: 0.5,
71      ease: "easeOut",
72    },
73  },
74};
75 
76const staggerContainer: Variants = {
77  hidden: { opacity: 0 },
78  visible: {
79    opacity: 1,
80    transition: {
81      staggerChildren: 0.15,
82      delayChildren: 0.3,
83    },
84  },
85};
86 
87const SpotlightFeature = ({ items }: { items: string[] }) => {
88  return (
89    <ul className="mt-2 space-y-1.5">
90      {items.map((item, index) => (
91        <motion.li
92          key={`spotlight-${item.toLowerCase().replace(/\s+/g, "-")}`}
93          initial={{ opacity: 0, x: -10 }}
94          animate={{ opacity: 1, x: 0 }}
95          transition={{ delay: 0.1 * index }}
96          className="flex items-center gap-2"
97        >
98          <CheckCircle2 className="h-4 w-4 text-emerald-500 dark:text-emerald-400 flex-shrink-0" />
99          <span className="text-sm text-neutral-700 dark:text-neutral-300">
100            {item}
101          </span>
102        </motion.li>
103      ))}
104    </ul>
105  );
106};
107 
108const CounterAnimation = ({
109  start,
110  end,
111  suffix = "",
112}: {
113  start: number;
114  end: number;
115  suffix?: string;
116}) => {
117  const [count, setCount] = useState(start);
118 
119  useEffect(() => {
120    const duration = 2000;
121    const frameRate = 1000 / 60;
122    const totalFrames = Math.round(duration / frameRate);
123 
124    let currentFrame = 0;
125// … truncated