Number Counter

import { NumberTicker } from "@/components/ui/number-counter"

export function NumberTickerDemo() {
  return (
    <section className="from-white to-gray-50 py-24 dark:from-black dark:to-neutral-950">
      <div className="mx-auto max-w-6xl px-6 text-center">
        <div className="grid grid-cols-1 gap-12 md:grid-cols-3">
          <div>
            <p className="text-4xl font-bold text-purple-600 dark:text-purple-400">
              <NumberTicker value={12750} decimalPlaces={0} delayMs={300} />
              <span className="text-4xl">+</span>
            </p>
            <p className="mt-4 text-lg text-gray-600 dark:text-gray-400">
              Active users
            </p>
          </div>

          <div>
            <p className="text-4xl font-bold text-purple-600 dark:text-purple-400">
              <NumberTicker value={4.82} decimalPlaces={2} delayMs={600} />
              <span className="text-4xl">M</span>
            </p>
            <p className="mt-4 text-lg text-gray-600 dark:text-gray-400">
              Revenue generated
            </p>
          </div>

          <div>
            <p className="text-4xl font-bold text-purple-600 dark:text-purple-400">
              <NumberTicker value={99.7} decimalPlaces={1} delayMs={900} />
              <span className="text-4xl">%</span>
            </p>
            <p className="mt-4 text-lg text-gray-600 dark:text-gray-400">
              Uptime this year
            </p>
          </div>
        </div>
      </div>
    </section>
  )
}

import { NumberTicker } from "@/components/ui/number-counter"

export function NumberTickerDemo() {
  return (
    <section className="relative overflow-hidden py-32 text-white">
      <div className="relative mx-auto max-w-4xl px-6 text-center">
        <NumberTicker
          value={1000000}
          className="bg-gradient-to-r from-purple-400 to-purple-800 bg-clip-text text-6xl text-transparent md:text-8xl"
          delayMs={800}
          springConfig={{ damping: 35, stiffness: 70 }}
        />
      </div>
    </section>
  )
}