Stats 2

1"use client";
2 
3import { DollarSign, Smartphone, Star, Users } from "lucide-react";
4import { motion, useInView, useReducedMotion } from "motion/react";
5import React, { useRef } from "react";
6 
7const STAGGER_DELAY = 0.1;
8const ICON_STAGGER_OFFSET = 0.2;
9const VALUE_DELAY_OFFSET = 0.3;
10const TREND_STAGGER_OFFSET = 0.5;
11 
12interface StatsCardsProps {
13  description?: string;
14  stats?: Array<{
15    value: string;
16    label: string;
17    description?: string;
18    icon?: string;
19    trend?: {
20      value: string;
21      direction: "up" | "down";
22    };
23  }>;
24  title?: string;
25}
26 
27const iconMap = {
28  DollarSign,
29  Smartphone,
30  Star,
31  Users,
32};
33 
34export function StatsCards({
35  title = "Key Metrics",
36  description = "Track your success with these important numbers",
37  stats = [
38    {
39      description: "Annual recurring revenue",
40      icon: "DollarSign",
41      label: "Revenue",
42      trend: { direction: "up", value: "+12%" },
43      value: "2.5M",
44    },
45    {
46      description: "Happy customers worldwide",
47      icon: "Users",
48      label: "Customers",
49      trend: { direction: "up", value: "+8%" },
50      value: "45K",
51    },
52    {
53      description: "Customer satisfaction rate",
54      icon: "Star",
55      label: "Satisfaction",
56      trend: { direction: "up", value: "+2%" },
57      value: "98%",
58    },
59    {
60      description: "Total app downloads",
61      icon: "Smartphone",
62      label: "Downloads",
63      trend: { direction: "up", value: "+15%" },
64      value: "1.2M",
65    },
66  ],
67}: StatsCardsProps) {
68  const ref = useRef(null);
69  const isInView = useInView(ref, { once: true });
70  const shouldReduceMotion = useReducedMotion();
71 
72  return (
73    <section className="py-20">
74      <div className="mx-auto max-w-7xl px-6">
75        <motion.div
76          className="mb-16 text-center"
77          initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
78          transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.6 }}
79          viewport={{ once: true }}
80          whileInView={
81            shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
82          }
83        >
84          <h2 className="mb-4 font-bold text-3xl text-foreground lg:text-4xl">
85            {title}
86          </h2>
87          <p className="mx-auto max-w-2xl text-foreground/70 text-lg">
88            {description}
89          </p>
90        </motion.div>
91 
92        <div
93          className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4"
94          ref={ref}
95        >
96// … truncated