Updated Frontend

app/components/Stats.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+const stats = [
+  { value: "3", label: "Categories" },
+  { value: "∞", label: "Possibilities" },
+  { value: "1", label: "Winner Per Category" },
+  { value: "100%", label: "Free Entry" },
+];
+
+export default function Stats() {
+  return (
+    <section className="py-16 bg-lime-400">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
+          {stats.map((stat, index) => (
+            <motion.div
+              key={stat.label}
+              initial={{ opacity: 0, scale: 0.8 }}
+              whileInView={{ opacity: 1, scale: 1 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5, delay: index * 0.1 }}
+              className="text-center"
+            >
+              <div className="text-5xl sm:text-6xl font-black text-black mb-2">
+                {stat.value}
+              </div>
+              <div className="text-black/70 font-medium tracking-wide uppercase text-sm">
+                {stat.label}
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}