feat(landing): added live user count with scroll-triggered animation

- reads userCount from Firestore stats/public doc on landing page load
- count-up animation triggers via IntersectionObserver when stats strip is visible
- easeOutExpo easing for smooth deceleration (0 to N over 2 seconds)
- waits for both data load and scroll visibility before animating
- pulsing green dot indicator to signal the count is live
- increments counter on new sign-ups (Google + email) via getAdditionalUserInfo
- handles redirect-based sign-in new user detection in constructor

Author: sunnypatell

src/lib/components/landing/Hero.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
+	import { doc, getDoc } from 'firebase/firestore';
+	import { db } from '$lib/firebase';
 	import FlipWords from '$components/ui/FlipWords.svelte';
 	import SparklesText from '$components/ui/SparklesText.svelte';
 	import NumberFlow from '@number-flow/svelte';
@@ -13,8 +16,59 @@
 	let mouseX = $state(50);
 	let mouseY = $state(50);
 
+	// live user count from Firestore
+	let userCount = $state(0);
+	let displayCount = $state(0);
+	let isVisible = $state(false);
+	let hasAnimated = false;
+	let statsEl = $state<HTMLElement | null>(null);
+
+	// trigger count-up animation when both visible and count is loaded
+	$effect(() => {
+		if (isVisible && userCount > 0 && !hasAnimated) {
+			hasAnimated = true;
+			animateCount(userCount);
+		}
+	});
+
+	function animateCount(target: number) {
+		const duration = 2000;
+		const start = performance.now();
+
+		function tick(now: number) {
+			const elapsed = now - start;
+			const progress = Math.min(elapsed / duration, 1);
+			// easeOutExpo for smooth deceleration
+			const eased = progress === 1 ? 1 : 1 - Math.pow(2, -10 * progress);
+			displayCount = Math.floor(eased * target);
+			if (progress < 1) requestAnimationFrame(tick);
+		}
+		requestAnimationFrame(tick);
+	}
+
 	onMount(() => {
 		mounted = true;
+
+		// fetch live user count
+		getDoc(doc(db, 'stats', 'public'))
+			.then((snap) => {
+				if (snap.exists()) {
+					userCount = snap.data().userCount ?? 0;
+				}
+			})
+			.catch(() => {});
+
+		// observe stats strip for scroll-triggered animation
+		if (statsEl) {
+			const observer = new IntersectionObserver(
+				(entries) => {
+					if (entries[0].isIntersecting) isVisible = true;
+				},
+				{ threshold: 0.5 }
+			);
+			observer.observe(statsEl);
+			return () => observer.disconnect();
+		}
 	});
 
 	// converts pixel coords to percentage of hero bounds for the glow
@@ -159,7 +213,15 @@
 		</div>
 
 		<!-- stats strip -->
-		<div class="hero-stats">
+		<div class="hero-stats" bind:this={statsEl}>
+			<div class="stat">
+				<span class="stat-number">{displayCount.toLocaleString()}</span>
+				<span class="stat-label stat-live">
+					<span class="live-dot"></span>
+					Users Served
+				</span>
+			</div>
+			<div class="stat-divider"></div>
 			<div class="stat">
 				<span class="stat-number">6</span>
 				<span class="stat-label">ATS Platforms</span>
@@ -170,11 +232,6 @@
 				<span class="stat-label">Free & Open Source</span>
 			</div>
 			<div class="stat-divider"></div>
-			<div class="stat">
-				<span class="stat-number">Any</span>
-				<span class="stat-label">Industry or Role</span>
-			</div>
-			<div class="stat-divider"></div>
 			<div class="stat">
 				<span class="stat-number">0</span>
 				<span class="stat-label">Data Stored</span>
@@ -565,6 +622,22 @@
 		font-weight: 500;
 	}
 
+	.stat-live {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.35rem;
+	}
+
+	.live-dot {
+		width: 6px;
+		height: 6px;
+		border-radius: 50%;
+		background: var(--accent-green);
+		box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
+		animation: pulse 2s ease-in-out infinite;
+		flex-shrink: 0;
+	}
+
 	.stat-divider {
 		width: 1px;
 		height: 2.5rem;

src/lib/stores/auth.svelte.ts

@@ -4,6 +4,7 @@ import {
 	signInWithPopup,
 	signInWithRedirect,
 	getRedirectResult,
+	getAdditionalUserInfo,
 	signInWithEmailAndPassword,
 	createUserWithEmailAndPassword,
 	sendEmailVerification,
@@ -13,7 +14,8 @@ import {
 	updateProfile,
 	type User
 } from 'firebase/auth';
-import { auth } from '$lib/firebase';
+import { doc, updateDoc, increment } from 'firebase/firestore';
+import { auth, db } from '$lib/firebase';
 
 class AuthStore {
 	user = $state<User | null>(null);
@@ -51,7 +53,13 @@ class AuthStore {
 				this.loading = false;
 			});
 			// handle redirect result from signInWithRedirect fallback
-			getRedirectResult(auth).catch(() => {});
+			getRedirectResult(auth)
+				.then((result) => {
+					if (result && getAdditionalUserInfo(result)?.isNewUser) {
+						this.incrementUserCount();
+					}
+				})
+				.catch(() => {});
 		} else {
 			this.loading = false;
 		}
@@ -61,7 +69,10 @@ class AuthStore {
 		this.error = null;
 		const provider = new GoogleAuthProvider();
 		try {
-			await signInWithPopup(auth, provider);
+			const result = await signInWithPopup(auth, provider);
+			if (getAdditionalUserInfo(result)?.isNewUser) {
+				this.incrementUserCount();
+			}
 		} catch (err) {
 			// if popup fails with an internal SDK error (not a Firebase auth error),
 			// fall back to redirect-based sign-in
@@ -102,6 +113,8 @@ class AuthStore {
 			sendEmailVerification(credential.user).catch((err) => {
 				console.warn('[auth] failed to send verification email:', err);
 			});
+			// new email sign-up is always a new user
+			this.incrementUserCount();
 		} catch (err) {
 			this.error = this.getErrorMessage(err);
 			throw err;
@@ -131,6 +144,14 @@ class AuthStore {
 		this.error = null;
 	}
 
+	private incrementUserCount() {
+		updateDoc(doc(db, 'stats', 'public'), {
+			userCount: increment(1)
+		}).catch(() => {
+			// non-critical, don't break auth flow
+		});
+	}
+
 	private getErrorMessage(err: unknown): string {
 		const code = (err as { code?: string })?.code ?? '';
 		switch (code) {