Stats/Counter

<section className="py-12 border-y border-border bg-muted/30">
  <div className="container mx-auto px-4">
    <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
      <div className="space-y-2">
        <h4 className="text-4xl font-extrabold tracking-tighter text-primary">100+</h4>
        <p className="text-sm text-muted-foreground font-medium">Components</p>
      </div>
      <div className="space-y-2">
        <h4 className="text-4xl font-extrabold tracking-tighter text-primary">50k</h4>
        <p className="text-sm text-muted-foreground font-medium">Downloads</p>
      </div>
      <div className="space-y-2">
        <h4 className="text-4xl font-extrabold tracking-tighter text-primary">4.9</h4>
        <p className="text-sm text-muted-foreground font-medium">Star Rating</p>
      </div>
      <div className="space-y-2">
        <h4 className="text-4xl font-extrabold tracking-tighter text-primary">24/7</h4>
        <p className="text-sm text-muted-foreground font-medium">Support</p>
      </div>
    </div>
  </div>
</section>

"use client";

import React, { useState } from "react";

interface StatsProps {
  className?: string;
  children?: React.ReactNode;
}

export default function Stats({
  className = "",
  children,
}: StatsProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <section className="py-12 border-y border-border bg-muted/30">
  <div className="container mx-auto px-4">
    <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
      <div className="space-y-2">
        <h4 className="text-4xl font-extrabold tracking-tighter text-primary">100+</h4>
        <p className="text-sm text-muted-foreground font-medium">Components</p>
      </div>
      <div className="space-y-2">
        <h4 className="text-4xl font-extrabold tracking-tighter text-primary">50k</h4>
        <p className="text-sm text-muted-foreground font-medium">Downloads</p>
      </div>
      <div className="space-y-2">
        <h4 className="text-4xl font-extrabold tracking-tighter text-primary">4.9</h4>
        <p className="text-sm text-muted-foreground font-medium">Star Rating</p>
      </div>
      <div className="space-y-2">
        <h4 className="text-4xl font-extrabold tracking-tighter text-primary">24/7</h4>
        <p className="text-sm text-muted-foreground font-medium">Support</p>
      </div>
    </div>
  </div>
</section>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedStats() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <section className="py-12 border-y border-border bg-muted/30">
  <div className="container mx-auto px-4">
    <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
      <div className="space-y-2">
        <h4 className="text-4xl font-extrabold tracking-tighter text-primary">100+</h4>
        <p className="text-sm text-muted-foreground font-medium">Components</p>
      </div>
      <div className="space-y-2">
        <h4 className="text-4xl font-extrabold tracking-tighter text-primary">50k</h4>
        <p className="text-sm text-muted-foreground font-medium">Downloads</p>
      </div>
      <div className="space-y-2">
        <h4 className="text-4xl font-extrabold tracking-tighter text-primary">4.9</h4>
        <p className="text-sm text-muted-foreground font-medium">Star Rating</p>
      </div>
      <div className="space-y-2">
        <h4 className="text-4xl font-extrabold tracking-tighter text-primary">24/7</h4>
        <p className="text-sm text-muted-foreground font-medium">Support</p>
      </div>
    </div>
  </div>
</section>
    </motion.div>
  );
}