Stats 1

1"use client";
2 
3import { motion, useInView, useReducedMotion } from "motion/react";
4import { useRef } from "react";
5 
6const STAGGER_DELAY = 0.1;
7const VALUE_DELAY_OFFSET = 0.2;
8 
9interface StatsGridProps {
10  description?: string;
11  stats?: Array<{
12    value: string;
13    label: string;
14    description?: string;
15  }>;
16  title?: string;
17}
18 
19export function StatsGrid({
20  title = "Our Impact in Numbers",
21  description = "See how we're making a difference across the globe",
22  stats = [
23    {
24      description: "Growing every day",
25      label: "Active Users",
26      value: "10M+",
27    },
28    {
29      description: "Reliable service",
30      label: "Uptime",
31      value: "99.9%",
32    },
33    {
34      description: "Worldwide reach",
35      label: "Countries",
36      value: "150+",
37    },
38    {
39      description: "Always here to help",
40      label: "Support",
41      value: "24/7",
42    },
43  ],
44}: StatsGridProps) {
45  const ref = useRef(null);
46  const isInView = useInView(ref, { once: true });
47  const shouldReduceMotion = useReducedMotion();
48 
49  return (
50    <section className="py-20">
51      <div className="mx-auto max-w-7xl px-6">
52        <motion.div
53          className="mb-16 text-center"
54          initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
55          transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.6 }}
56          viewport={{ once: true }}
57          whileInView={
58            shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
59          }
60        >
61          <h2 className="mb-4 font-bold text-3xl text-foreground lg:text-4xl">
62            {title}
63          </h2>
64          <p className="mx-auto max-w-2xl text-foreground/70 text-lg">
65            {description}
66          </p>
67        </motion.div>
68        <div
69          className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4"
70          ref={ref}
71        >
72          {stats.map((stat, index) => (
73            <motion.div
74              animate={(() => {
75                if (shouldReduceMotion) {
76                  return { opacity: 1 };
77                }
78                return isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 };
79              })()}
80              className="group relative overflow-hidden rounded-2xl border border-border bg-background p-8 text-center transition-all hover:border-brand hover:shadow-lg"
81              initial={
82                shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 30 }
83              }
84              key={stat.label}
85// … truncated