ADD LANDING PAGE

src/components/Stats.jsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useState, useRef } from 'react'
+import useReveal from '../hooks/useReveal'
+
+function Counter({ end, suffix = '', duration = 2000 }) {
+  const [count, setCount] = useState(0)
+  const ref = useRef(null)
+  const started = useRef(false)
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && !started.current) {
+          started.current = true
+          const step = end / (duration / 16)
+          let current = 0
+          const timer = setInterval(() => {
+            current += step
+            if (current >= end) {
+              setCount(end)
+              clearInterval(timer)
+            } else {
+              setCount(Math.floor(current))
+            }
+          }, 16)
+        }
+      },
+      { threshold: 0.5 }
+    )
+    if (ref.current) observer.observe(ref.current)
+    return () => observer.disconnect()
+  }, [end, duration])
+
+  return (
+    <span ref={ref}>
+      {count.toLocaleString()}{suffix}
+    </span>
+  )
+}
+
+const stats = [
+  { value: 40, suffix: '', label: 'Days to Transform', color: 'text-nova-primary' },
+  { value: 5, suffix: '', label: 'Daily Habits', color: 'text-nova-accent' },
+  { value: 40, suffix: '+', label: 'Days of History', color: 'text-nova-warning' },
+  { value: 100, suffix: '%', label: 'Free to Use', color: 'text-nova-success' },
+]
+
+export default function Stats() {
+  const ref = useReveal()
+
+  return (
+    <section className="py-16 relative" ref={ref}>
+      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="reveal glass-card p-8 sm:p-10">
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
+            {stats.map((stat, i) => (
+              <div key={i} className="text-center">
+                <p className={`text-4xl sm:text-5xl font-bold ${stat.color} mb-2`}>
+                  <Counter end={stat.value} suffix={stat.suffix} />
+                </p>
+                <p className="text-nova-textSecondary text-sm font-medium">{stat.label}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}