diff --git a/src/app.css b/src/app.css
index 405d430..5fb0a70 100644
--- a/src/app.css
+++ b/src/app.css
@@ -128,4 +128,109 @@
 			transform: translateX(0);
 		}
 	}
+
+	/* Neon Text Glow Effects */
+	.text-glow-sm {
+		text-shadow: 0 0 10px currentColor;
+	}
+
+	.text-glow-md {
+		text-shadow:
+			0 0 10px currentColor,
+			0 0 20px currentColor;
+	}
+
+	.text-glow-lg {
+		text-shadow:
+			0 0 10px currentColor,
+			0 0 20px currentColor,
+			0 0 40px currentColor;
+	}
+
+	/* Neon Box Glow Effects */
+	.glow-sm {
+		box-shadow: 0 0 10px currentColor;
+	}
+
+	.glow-md {
+		box-shadow:
+			0 0 10px currentColor,
+			0 0 20px currentColor;
+	}
+
+	.glow-lg {
+		box-shadow:
+			0 0 10px currentColor,
+			0 0 20px currentColor,
+			0 0 40px currentColor;
+	}
+
+	/* Specific neon color glows */
+	.text-glow-neon-blue {
+		text-shadow:
+			0 0 10px theme('colors.neon.blue'),
+			0 0 20px theme('colors.neon.blue'),
+			0 0 40px theme('colors.neon.blue');
+	}
+
+	.text-glow-neon-gold {
+		text-shadow:
+			0 0 10px theme('colors.neon.gold'),
+			0 0 20px theme('colors.neon.gold'),
+			0 0 40px theme('colors.neon.gold');
+	}
+
+	.text-glow-neon-red {
+		text-shadow:
+			0 0 10px theme('colors.neon.red'),
+			0 0 20px theme('colors.neon.red'),
+			0 0 40px theme('colors.neon.red');
+	}
+
+	.text-glow-neon-green {
+		text-shadow:
+			0 0 10px theme('colors.neon.green'),
+			0 0 20px theme('colors.neon.green'),
+			0 0 40px theme('colors.neon.green');
+	}
+
+	.glow-neon-blue {
+		box-shadow:
+			0 0 10px theme('colors.neon.blue'),
+			0 0 20px theme('colors.neon.blue');
+	}
+
+	.glow-neon-gold {
+		box-shadow:
+			0 0 10px theme('colors.neon.gold'),
+			0 0 20px theme('colors.neon.gold');
+	}
+
+	.glow-neon-red {
+		box-shadow:
+			0 0 10px theme('colors.neon.red'),
+			0 0 20px theme('colors.neon.red');
+	}
+
+	/* Stagger animation delays */
+	.stagger-1 {
+		animation-delay: 0.1s;
+	}
+	.stagger-2 {
+		animation-delay: 0.2s;
+	}
+	.stagger-3 {
+		animation-delay: 0.3s;
+	}
+	.stagger-4 {
+		animation-delay: 0.4s;
+	}
+	.stagger-5 {
+		animation-delay: 0.5s;
+	}
+
+	/* Pause animation on hover */
+	.hover\:pause-animation:hover {
+		animation-play-state: paused;
+	}
 }
diff --git a/src/lib/components/landing/AnimatedCounter.svelte b/src/lib/components/landing/AnimatedCounter.svelte
new file mode 100644
index 0000000..d487f69
--- /dev/null
+++ b/src/lib/components/landing/AnimatedCounter.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { tweened } from 'svelte/motion';
+	import { cubicOut } from 'svelte/easing';
+	import { onMount } from 'svelte';
+
+	interface Props {
+		value: number;
+		duration?: number;
+		prefix?: string;
+		suffix?: string;
+		format?: (value: number) => string;
+	}
+
+	let {
+		value,
+		duration = 2000,
+		prefix = '',
+		suffix = '',
+		format = (val: number) => Math.floor(val).toLocaleString()
+	}: Props = $props();
+
+	const displayValue = tweened(0, {
+		duration,
+		easing: cubicOut
+	});
+
+	let hasAnimated = false;
+	let containerElement: HTMLElement;
+
+	onMount(() => {
+		// Use Intersection Observer to start animation when visible
+		const observer = new IntersectionObserver(
+			(entries) => {
+				for (const entry of entries) {
+					if (entry.isIntersecting && !hasAnimated) {
+						hasAnimated = true;
+						displayValue.set(value);
+					}
+				}
+			},
+			{ threshold: 0.1 }
+		);
+
+		if (containerElement) {
+			observer.observe(containerElement);
+		}
+
+		return () => {
+			observer.disconnect();
+		};
+	});
+
+	// Update the target value if it changes after initial animation
+	$effect(() => {
+		if (hasAnimated) {
+			displayValue.set(value);
+		}
+	});
+</script>
+
+<span bind:this={containerElement} class="tabular-nums">
+	{prefix}{format($displayValue)}{suffix}
+</span>
diff --git a/src/lib/components/landing/FeatureCard.svelte b/src/lib/components/landing/FeatureCard.svelte
new file mode 100644
index 0000000..47fe0ef
--- /dev/null
+++ b/src/lib/components/landing/FeatureCard.svelte
@@ -0,0 +1,79 @@
+<script lang="ts">
+	import type { ComponentType } from 'svelte';
+
+	interface Props {
+		icon: ComponentType;
+		title: string;
+		description: string;
+		glowColor?: 'blue' | 'gold' | 'red' | 'green' | 'purple';
+		delay?: number;
+	}
+
+	let { icon: Icon, title, description, glowColor = 'blue', delay = 0 }: Props = $props();
+
+	const glowClasses: Record<string, { icon: string; border: string; bg: string }> = {
+		blue: {
+			icon: 'text-neon-blue',
+			border: 'group-hover:border-neon-blue/50',
+			bg: 'group-hover:bg-neon-blue/5'
+		},
+		gold: {
+			icon: 'text-neon-gold',
+			border: 'group-hover:border-neon-gold/50',
+			bg: 'group-hover:bg-neon-gold/5'
+		},
+		red: {
+			icon: 'text-neon-red',
+			border: 'group-hover:border-neon-red/50',
+			bg: 'group-hover:bg-neon-red/5'
+		},
+		green: {
+			icon: 'text-neon-green',
+			border: 'group-hover:border-neon-green/50',
+			bg: 'group-hover:bg-neon-green/5'
+		},
+		purple: {
+			icon: 'text-neon-purple',
+			border: 'group-hover:border-neon-purple/50',
+			bg: 'group-hover:bg-neon-purple/5'
+		}
+	};
+
+	const classes = glowClasses[glowColor] ?? glowClasses['blue']!;
+
+	// Background glow colors for each variant
+	const glowBgColors: Record<string, string> = {
+		blue: 'rgba(0, 212, 255, 0.1)',
+		gold: 'rgba(255, 215, 0, 0.1)',
+		red: 'rgba(255, 51, 102, 0.1)',
+		green: 'rgba(0, 255, 136, 0.1)',
+		purple: 'rgba(139, 92, 246, 0.1)'
+	};
+	const glowBgColor = glowBgColors[glowColor];
+</script>
+
+<article
+	class="group relative flex h-full flex-col rounded-xl border border-white/10 bg-void-light p-6 transition-all duration-300 motion-reduce:transition-none {classes.border} {classes.bg}"
+	style="animation-delay: {delay}ms;"
+>
+	<!-- Icon Container -->
+	<div
+		class="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-white/5 transition-all duration-300 group-hover:scale-110 motion-reduce:group-hover:scale-100 {classes.icon}"
+		aria-hidden="true"
+	>
+		<Icon class="h-6 w-6" />
+	</div>
+
+	<!-- Title -->
+	<h3 class="mb-2 text-xl font-semibold text-white">{title}</h3>
+
+	<!-- Description -->
+	<p class="flex-grow text-sm leading-relaxed text-white/70">{description}</p>
+
+	<!-- Hover Glow Effect -->
+	<div
+		class="pointer-events-none absolute inset-0 -z-10 rounded-xl opacity-0 blur-xl transition-opacity duration-300 group-hover:opacity-100"
+		style="background-color: {glowBgColor};"
+		aria-hidden="true"
+	></div>
+</article>
diff --git a/src/lib/components/landing/FeatureShowcase.svelte b/src/lib/components/landing/FeatureShowcase.svelte
new file mode 100644
index 0000000..e179127
--- /dev/null
+++ b/src/lib/components/landing/FeatureShowcase.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+	import FeatureCard from './FeatureCard.svelte';
+	import { Eye, BarChart3, Trophy, Crosshair } from 'lucide-svelte';
+	import { onMount } from 'svelte';
+
+	let containerElement: HTMLElement;
+	let isVisible = $state(false);
+
+	const features = [
+		{
+			icon: Eye,
+			title: 'Flash Forensics',
+			description:
+				'Deep analysis of every flashbang thrown. Who got blinded, for how long, and most importantly - was it your teammate?',
+			glowColor: 'blue' as const
+		},
+		{
+			icon: BarChart3,
+			title: 'Shame Statistics',
+			description:
+				"Detailed stats on flash accuracy, team damage, and self-inflicted blindness. Numbers don't lie.",
+			glowColor: 'gold' as const
+		},
+		{
+			icon: Trophy,
+			title: 'Hall of Shame',
+			description:
+				'Weekly leaderboards showcasing the worst team flashers. Public accountability at its finest.',
+			glowColor: 'red' as const
+		},
+		{
+			icon: Crosshair,
+			title: 'Match Analysis',
+			description:
+				'Complete match breakdowns with round-by-round flash events. Perfect for post-game roasting sessions.',
+			glowColor: 'green' as const
+		}
+	];
+
+	onMount(() => {
+		const observer = new IntersectionObserver(
+			(entries) => {
+				for (const entry of entries) {
+					if (entry.isIntersecting) {
+						isVisible = true;
+						observer.disconnect();
+					}
+				}
+			},
+			{ threshold: 0.2 }
+		);
+
+		if (containerElement) {
+			observer.observe(containerElement);
+		}
+
+		return () => {
+			observer.disconnect();
+		};
+	});
+</script>
+
+<section
+	bind:this={containerElement}
+	class="relative overflow-hidden bg-void py-20"
+	aria-labelledby="features-heading"
+>
+	<!-- Grid Pattern -->
+	<div
+		class="pointer-events-none absolute inset-0 bg-grid-pattern bg-grid opacity-20"
+		aria-hidden="true"
+	></div>
+
+	<div class="container relative mx-auto px-4">
+		<!-- Section Header -->
+		<div class="mb-12 text-center">
+			<h2 id="features-heading" class="mb-4 text-4xl font-bold text-white md:text-5xl">
+				Everything You Need to <span class="text-glow-neon-blue text-neon-blue">Expose</span> Team Flashers
+			</h2>
+
+			<p class="mx-auto max-w-2xl text-white/60">
+				Powerful tools to track, analyze, and publicly shame anyone who thinks it's okay to blind
+				their own teammates.
+			</p>
+		</div>
+
+		<!-- Features Grid -->
+		<ul class="grid list-none gap-6 sm:grid-cols-2 lg:grid-cols-4" role="list">
+			{#each features as feature, index}
+				<li
+					class="transition-all duration-500 motion-reduce:transition-none"
+					class:opacity-0={!isVisible}
+					class:translate-y-8={!isVisible}
+					class:opacity-100={isVisible}
+					class:translate-y-0={isVisible}
+					style="transition-delay: {index * 100}ms;"
+				>
+					<FeatureCard
+						icon={feature.icon}
+						title={feature.title}
+						description={feature.description}
+						glowColor={feature.glowColor}
+					/>
+				</li>
+			{/each}
+		</ul>
+	</div>
+</section>
diff --git a/src/lib/components/landing/FlashLeaderboard.svelte b/src/lib/components/landing/FlashLeaderboard.svelte
new file mode 100644
index 0000000..0099a61
--- /dev/null
+++ b/src/lib/components/landing/FlashLeaderboard.svelte
@@ -0,0 +1,104 @@
+<script lang="ts">
+	import LeaderboardPodium from './LeaderboardPodium.svelte';
+	import { AlertTriangle } from 'lucide-svelte';
+
+	interface Player {
+		rank: number;
+		name: string;
+		steamId: string;
+		avatarUrl?: string;
+		teammatesBlinded: number;
+		selfFlashes: number;
+	}
+
+	interface Props {
+		players?: Player[];
+	}
+
+	// Sample data - in production, this would come from the API
+	let {
+		players = [
+			{
+				rank: 1,
+				name: 'xXFlashGodXx',
+				steamId: '76561198012345678',
+				teammatesBlinded: 847,
+				selfFlashes: 234
+			},
+			{
+				rank: 2,
+				name: 'BlindingFury',
+				steamId: '76561198023456789',
+				teammatesBlinded: 623,
+				selfFlashes: 189
+			},
+			{
+				rank: 3,
+				name: 'TeamFlashKing',
+				steamId: '76561198034567890',
+				teammatesBlinded: 512,
+				selfFlashes: 156
+			}
+		]
+	}: Props = $props();
+
+	// Reorder for podium display: 2nd, 1st, 3rd
+	const podiumOrder = [players[1], players[0], players[2]].filter(Boolean);
+</script>
+
+<section
+	class="relative overflow-hidden bg-void-light py-20"
+	aria-labelledby="wall-of-shame-heading"
+>
+	<!-- Background Elements -->
+	<div
+		class="pointer-events-none absolute left-1/2 top-1/2 h-[600px] w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-neon-red/5 blur-[100px]"
+		aria-hidden="true"
+	></div>
+
+	<div class="container mx-auto px-4">
+		<!-- Section Header -->
+		<div class="mb-12 text-center">
+			<div
+				class="mb-4 inline-flex items-center gap-2 rounded-full border border-neon-red/30 bg-neon-red/10 px-4 py-2 text-sm font-semibold text-neon-red"
+			>
+				<AlertTriangle class="h-4 w-4" aria-hidden="true" />
+				<span>WALL OF SHAME</span>
+			</div>
+
+			<h2 id="wall-of-shame-heading" class="mb-4 text-4xl font-bold text-white md:text-5xl">
+				This Week's <span class="text-glow-neon-red text-neon-red">Flash Criminals</span>
+			</h2>
+
+			<p class="mx-auto max-w-2xl text-white/60">
+				These players have been blinding their teammates more than their enemies. Consider this a
+				public service announcement.
+			</p>
+		</div>
+
+		<!-- Podium Display -->
+		<div
+			class="flex items-end justify-center gap-4 md:gap-8"
+			role="list"
+			aria-label="Top team flashers leaderboard"
+		>
+			{#each podiumOrder as player, index}
+				{#if player}
+					<div
+						class="animate-fade-up opacity-0 motion-reduce:animate-none motion-reduce:opacity-100"
+						style="animation-delay: {index * 150}ms; animation-fill-mode: forwards;"
+						role="listitem"
+					>
+						<LeaderboardPodium {player} />
+					</div>
+				{/if}
+			{/each}
+		</div>
+
+		<!-- Disclaimer -->
+		<p class="mt-12 text-center text-sm italic text-white/50">
+			"We're not saying these players are bad teammates... actually, yes we are. That's exactly what
+			we're saying."
+		</p>
+	</div>
+</section>
diff --git a/src/lib/components/landing/HeroSection.svelte b/src/lib/components/landing/HeroSection.svelte
new file mode 100644
index 0000000..f0bb6ca
--- /dev/null
+++ b/src/lib/components/landing/HeroSection.svelte
@@ -0,0 +1,184 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { Search } from 'lucide-svelte';
+
+	interface Props {
+		stats?: {
+			playersExposed: number;
+			flashCrimes: number;
+			flashbangsAnalyzed: number;
+		};
+	}
+
+	let {
+		stats = {
+			playersExposed: 12847,
+			flashCrimes: 89234,
+			flashbangsAnalyzed: 1247893
+		}
+	}: Props = $props();
+
+	let searchValue = $state('');
+
+	const handleSearch = () => {
+		if (searchValue.trim()) {
+			goto(`/players?q=${encodeURIComponent(searchValue.trim())}`);
+		}
+	};
+</script>
+
+<section
+	class="relative min-h-screen overflow-hidden"
+	style="background: linear-gradient(to bottom, #0a0a0f, #12121a);"
+	aria-labelledby="hero-heading"
+>
+	<!-- Grid Pattern Overlay -->
+	<div
+		class="pointer-events-none absolute inset-0 opacity-20"
+		style="background-image: linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px); background-size: 50px 50px;"
+		aria-hidden="true"
+	></div>
+
+	<!-- Radial Gradient Overlays -->
+	<div
+		class="pointer-events-none absolute left-1/4 top-0 h-[500px] w-[500px] -translate-x-1/2 rounded-full blur-[100px]"
+		style="background-color: rgba(0, 212, 255, 0.1);"
+		aria-hidden="true"
+	></div>
+	<div
+		class="pointer-events-none absolute bottom-0 right-1/4 h-[400px] w-[400px] translate-x-1/2 rounded-full blur-[100px]"
+		style="background-color: rgba(255, 215, 0, 0.1);"
+		aria-hidden="true"
+	></div>
+
+	<!-- Content -->
+	<div
+		class="container relative z-10 mx-auto flex min-h-screen flex-col items-center justify-center px-4 py-20"
+	>
+		<!-- Neon Badge -->
+		<div
+			class="mb-8 inline-flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-semibold"
+			style="border-color: rgba(255, 51, 102, 0.3); background-color: rgba(255, 51, 102, 0.1); color: #ff3366;"
+			role="status"
+			aria-label="Site notice: Stop flashing your teammates"
+		>
+			<span
+				class="inline-block h-2 w-2 animate-pulse rounded-full motion-reduce:animate-none"
+				style="background-color: #ff3366;"
+				aria-hidden="true"
+			></span>
+			STOP FLASHING YOUR TEAMMATES
+		</div>
+
+		<!-- Giant Headline -->
+		<h1
+			id="hero-heading"
+			class="mb-6 text-center text-5xl font-bold tracking-tight sm:text-6xl md:text-7xl lg:text-8xl"
+		>
+			<span
+				style="color: #00d4ff; text-shadow: 0 0 10px #00d4ff, 0 0 20px #00d4ff, 0 0 40px #00d4ff;"
+				>team</span
+			><span
+				style="color: #ffd700; text-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700, 0 0 40px #ffd700;"
+				>flash</span
+			><span class="text-white">.rip</span>
+		</h1>
+
+		<!-- Tagline -->
+		<p
+			class="mb-12 max-w-2xl text-center text-lg sm:text-xl"
+			style="color: rgba(255, 255, 255, 0.6);"
+		>
+			Track flashbang statistics in CS2. Expose team flashers. Know who to mute before the match.
+		</p>
+
+		<!-- Simple Search Bar -->
+		<form
+			onsubmit={(e) => {
+				e.preventDefault();
+				handleSearch();
+			}}
+			class="w-full max-w-2xl"
+			role="search"
+			aria-label="Search for players"
+		>
+			<label for="player-search" class="sr-only">Search for a player by name or Steam ID</label>
+			<div class="relative">
+				<div
+					class="absolute -inset-0.5 rounded-xl opacity-50 blur"
+					style="background: linear-gradient(to right, #00d4ff, #8b5cf6, #ffd700);"
+					aria-hidden="true"
+				></div>
+				<div class="relative flex items-center">
+					<input
+						id="player-search"
+						type="text"
+						bind:value={searchValue}
+						placeholder="Search for a player..."
+						autocomplete="off"
+						class="w-full rounded-xl border-none px-6 py-4 pl-14 text-lg text-white placeholder-white/40 outline-none focus:ring-2 focus:ring-neon-blue"
+						style="background-color: #12121a;"
+					/>
+					<Search class="absolute left-5 h-5 w-5" style="color: #00d4ff;" aria-hidden="true" />
+					<button
+						type="submit"
+						class="absolute right-3 rounded-lg px-4 py-2 text-sm font-semibold transition-all focus:outline-none focus:ring-2 focus:ring-neon-blue focus:ring-offset-2 focus:ring-offset-void"
+						style="background-color: rgba(0, 212, 255, 0.2); color: #00d4ff;"
+					>
+						Search
+					</button>
+				</div>
+			</div>
+		</form>
+
+		<!-- Stats Row -->
+		<div class="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-3 sm:gap-12">
+			<div class="text-center">
+				<div class="text-3xl font-bold text-white sm:text-4xl">
+					{stats.playersExposed.toLocaleString()}
+				</div>
+				<div class="mt-1 text-sm" style="color: rgba(255, 255, 255, 0.4);">Players Exposed</div>
+			</div>
+
+			<div class="text-center">
+				<div class="text-3xl font-bold sm:text-4xl" style="color: #ff3366;">
+					{stats.flashCrimes.toLocaleString()}
+				</div>
+				<div class="mt-1 text-sm" style="color: rgba(255, 255, 255, 0.4);">
+					Flash Crimes Documented
+				</div>
+			</div>
+
+			<div class="text-center">
+				<div class="text-3xl font-bold sm:text-4xl" style="color: #ffd700;">
+					{stats.flashbangsAnalyzed.toLocaleString()}+
+				</div>
+				<div class="mt-1 text-sm" style="color: rgba(255, 255, 255, 0.4);">Flashbangs Analyzed</div>
+			</div>
+		</div>
+
+		<!-- Scroll Indicator -->
+		<div
+			class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce motion-reduce:animate-none"
+			aria-hidden="true"
+		>
+			<div class="flex flex-col items-center" style="color: rgba(255, 255, 255, 0.3);">
+				<span class="mb-2 text-xs">Scroll to explore</span>
+				<svg
+					class="h-6 w-6"
+					fill="none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+					aria-hidden="true"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M19 14l-7 7m0 0l-7-7m7 7V3"
+					></path>
+				</svg>
+			</div>
+		</div>
+	</div>
+</section>
diff --git a/src/lib/components/landing/LeaderboardPodium.svelte b/src/lib/components/landing/LeaderboardPodium.svelte
new file mode 100644
index 0000000..b2f0830
--- /dev/null
+++ b/src/lib/components/landing/LeaderboardPodium.svelte
@@ -0,0 +1,124 @@
+<script lang="ts">
+	import { Trophy, Skull, Zap } from 'lucide-svelte';
+
+	interface Player {
+		rank: number;
+		name: string;
+		steamId: string;
+		avatarUrl?: string;
+		teammatesBlinded: number;
+		selfFlashes: number;
+	}
+
+	interface Props {
+		player: Player;
+	}
+
+	let { player }: Props = $props();
+
+	const podiumConfig = {
+		1: {
+			height: 'h-32',
+			bgGradient: 'from-yellow-500/20 to-yellow-600/5',
+			borderColor: 'border-yellow-500/50',
+			glowColor: 'shadow-yellow-500/30',
+			textColor: 'text-yellow-400',
+			title: 'Flash Criminal of the Week',
+			icon: Trophy
+		},
+		2: {
+			height: 'h-24',
+			bgGradient: 'from-gray-400/20 to-gray-500/5',
+			borderColor: 'border-gray-400/50',
+			glowColor: 'shadow-gray-400/30',
+			textColor: 'text-gray-300',
+			title: 'Serial Team Flasher',
+			icon: Skull
+		},
+		3: {
+			height: 'h-20',
+			bgGradient: 'from-amber-600/20 to-amber-700/5',
+			borderColor: 'border-amber-600/50',
+			glowColor: 'shadow-amber-600/30',
+			textColor: 'text-amber-500',
+			title: 'Flash Menace',
+			icon: Zap
+		}
+	};
+
+	const config = podiumConfig[player.rank as 1 | 2 | 3] || podiumConfig[3];
+	const IconComponent = config.icon;
+
+	// Shadow colors for each rank
+	const shadowColors: Record<number, string> = {
+		1: 'rgba(234, 179, 8, 0.2)',
+		2: 'rgba(156, 163, 175, 0.2)',
+		3: 'rgba(217, 119, 6, 0.2)'
+	};
+	const shadowColor = shadowColors[player.rank] || shadowColors[3];
+</script>
+
+<article
+	class="flex flex-col items-center"
+	aria-label="Rank {player.rank}: {player.name} - {player.teammatesBlinded} teammates blinded"
+>
+	<!-- Player Card -->
+	<div
+		class="group relative mb-4 w-full max-w-[200px] overflow-hidden rounded-xl border bg-gradient-to-b p-4 transition-all hover:scale-105 motion-reduce:hover:scale-100 {config.borderColor} {config.bgGradient}"
+		style="box-shadow: 0 0 20px {shadowColor};"
+	>
+		<!-- Rank Badge -->
+		<div
+			class="absolute -right-2 -top-2 flex h-8 w-8 items-center justify-center rounded-full border-2 bg-void font-bold {config.borderColor} {config.textColor}"
+			aria-hidden="true"
+		>
+			#{player.rank}
+		</div>
+
+		<!-- Avatar -->
+		<div class="mx-auto mb-3 h-16 w-16 overflow-hidden rounded-full border-2 {config.borderColor}">
+			{#if player.avatarUrl}
+				<img
+					src={player.avatarUrl}
+					alt="Avatar for {player.name}"
+					class="h-full w-full object-cover"
+				/>
+			{:else}
+				<div
+					class="flex h-full w-full items-center justify-center bg-void-light"
+					aria-hidden="true"
+				>
+					<IconComponent class="h-8 w-8 {config.textColor}" />
+				</div>
+			{/if}
+		</div>
+
+		<!-- Player Name -->
+		<h3 class="mb-1 truncate text-center font-semibold text-white">{player.name}</h3>
+
+		<!-- Title -->
+		<p class="mb-3 text-center text-xs {config.textColor}">{config.title}</p>
+
+		<!-- Stats -->
+		<dl class="space-y-1 text-center text-xs">
+			<div class="flex items-center justify-between gap-2">
+				<dt class="text-white/60">Teammates Blinded</dt>
+				<dd class="font-mono font-bold text-neon-red">{player.teammatesBlinded}</dd>
+			</div>
+			<div class="flex items-center justify-between gap-2">
+				<dt class="text-white/60">Self-Flashes</dt>
+				<dd class="font-mono font-bold text-white/80">{player.selfFlashes}</dd>
+			</div>
+		</dl>
+	</div>
+
+	<!-- Podium Stand -->
+	<div
+		class="w-24 rounded-t-lg border-t-2 bg-gradient-to-b {config.height} {config.borderColor} {config.bgGradient}"
+		aria-hidden="true"
+	>
+		<div class="flex h-full items-center justify-center">
+			<span class="text-4xl font-bold {config.textColor}">{player.rank}</span>
+		</div>
+	</div>
+</article>
diff --git a/src/lib/components/landing/LiveMatchTicker.svelte b/src/lib/components/landing/LiveMatchTicker.svelte
new file mode 100644
index 0000000..cca4d36
--- /dev/null
+++ b/src/lib/components/landing/LiveMatchTicker.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+	import LiveMatchTickerCard from './LiveMatchTickerCard.svelte';
+	import { Activity } from 'lucide-svelte';
+
+	interface Match {
+		id: string;
+		map: string;
+		scoreT: number;
+		scoreCT: number;
+		isProcessing?: boolean;
+		timestamp?: string;
+	}
+
+	interface Props {
+		matches?: Match[];
+	}
+
+	// Sample matches for demo - in production, this would come from the API
+	let {
+		matches = [
+			{ id: '1', map: 'de_dust2', scoreT: 16, scoreCT: 14, isProcessing: true },
+			{ id: '2', map: 'de_mirage', scoreT: 13, scoreCT: 16 },
+			{ id: '3', map: 'de_inferno', scoreT: 16, scoreCT: 9 },
+			{ id: '4', map: 'de_ancient', scoreT: 11, scoreCT: 16 },
+			{ id: '5', map: 'de_anubis', scoreT: 16, scoreCT: 12, isProcessing: true },
+			{ id: '6', map: 'de_nuke', scoreT: 8, scoreCT: 16 },
+			{ id: '7', map: 'de_overpass', scoreT: 16, scoreCT: 14 },
+			{ id: '8', map: 'de_vertigo', scoreT: 14, scoreCT: 16 }
+		]
+	}: Props = $props();
+
+	// Duplicate matches for seamless loop with unique keys
+	const duplicatedMatches = $derived([
+		...matches.map((m, i) => ({ ...m, uniqueKey: `first-${i}-${m.id}` })),
+		...matches.map((m, i) => ({ ...m, uniqueKey: `second-${i}-${m.id}` }))
+	]);
+</script>
+
+<section class="relative overflow-hidden bg-void py-8" aria-labelledby="recent-matches-heading">
+	<!-- Section Header -->
+	<div class="container mx-auto mb-6 flex items-center justify-between px-4">
+		<div class="flex items-center gap-3">
+			<Activity
+				class="h-5 w-5 animate-pulse text-neon-green motion-reduce:animate-none"
+				aria-hidden="true"
+			/>
+			<h2 id="recent-matches-heading" class="text-lg font-semibold text-white">Recent Matches</h2>
+		</div>
+		<a
+			href="/matches"
+			class="rounded text-sm text-neon-blue transition-colors hover:text-neon-blue/80 focus:outline-none focus:ring-2 focus:ring-neon-blue focus:ring-offset-2 focus:ring-offset-void"
+		>
+			View all →
+		</a>
+	</div>
+
+	<!-- Ticker Container -->
+	<div class="relative">
+		<!-- Left Fade -->
+		<div
+			class="pointer-events-none absolute left-0 top-0 z-10 h-full w-24 bg-gradient-to-r from-void to-transparent"
+			aria-hidden="true"
+		></div>
+
+		<!-- Right Fade -->
+		<div
+			class="pointer-events-none absolute right-0 top-0 z-10 h-full w-24 bg-gradient-to-l from-void to-transparent"
+			aria-hidden="true"
+		></div>
+
+		<!-- Scrolling Ticker -->
+		<nav
+			class="hover:pause-animation flex animate-ticker gap-4 motion-reduce:animate-none"
+			aria-label="Recent match scores"
+		>
+			{#each duplicatedMatches as match (match.uniqueKey)}
+				<LiveMatchTickerCard {match} />
+			{/each}
+		</nav>
+	</div>
+</section>
diff --git a/src/lib/components/landing/LiveMatchTickerCard.svelte b/src/lib/components/landing/LiveMatchTickerCard.svelte
new file mode 100644
index 0000000..c849ea1
--- /dev/null
+++ b/src/lib/components/landing/LiveMatchTickerCard.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { Activity } from 'lucide-svelte';
+
+	interface Props {
+		match: {
+			id: string;
+			map: string;
+			scoreT: number;
+			scoreCT: number;
+			isProcessing?: boolean;
+			timestamp?: string;
+		};
+	}
+
+	let { match }: Props = $props();
+
+	const mapImages: Record<string, string> = {
+		de_dust2: '/images/maps/de_dust2.jpg',
+		de_mirage: '/images/maps/de_mirage.jpg',
+		de_inferno: '/images/maps/de_inferno.jpg',
+		de_nuke: '/images/maps/de_nuke.jpg',
+		de_overpass: '/images/maps/de_overpass.jpg',
+		de_ancient: '/images/maps/de_ancient.jpg',
+		de_anubis: '/images/maps/de_anubis.jpg',
+		de_vertigo: '/images/maps/de_vertigo.jpg'
+	};
+
+	const formatMapName = (mapName: string): string => {
+		return mapName.replace('de_', '').replace(/_/g, ' ').toUpperCase();
+	};
+</script>
+
+<a
+	href="/match/{match.id}"
+	class="group relative flex-shrink-0 overflow-hidden rounded-lg border border-white/10 bg-void-light transition-all hover:scale-105 hover:border-neon-blue/50 focus:outline-none focus:ring-2 focus:ring-neon-blue focus:ring-offset-2 focus:ring-offset-void motion-reduce:hover:scale-100"
+	aria-label="{formatMapName(
+		match.map
+	)} match: Terrorists {match.scoreT} vs Counter-Terrorists {match.scoreCT}{match.isProcessing
+		? ', currently processing'
+		: ''}"
+>
+	<!-- Map Thumbnail Background -->
+	<div class="relative h-20 w-48 overflow-hidden">
+		<img
+			src={mapImages[match.map] || '/images/maps/default.jpg'}
+			alt=""
+			class="h-full w-full object-cover opacity-40 transition-opacity group-hover:opacity-60"
+			aria-hidden="true"
+		/>
+		<!-- Gradient Overlay -->
+		<div
+			class="absolute inset-0 bg-gradient-to-t from-void-light via-void-light/80 to-transparent"
+			aria-hidden="true"
+		></div>
+	</div>
+
+	<!-- Content -->
+	<div class="absolute inset-0 flex flex-col justify-end p-3">
+		<!-- Map Name -->
+		<div class="mb-1 text-xs font-medium text-white/60">
+			{formatMapName(match.map)}
+		</div>
+
+		<!-- Score -->
+		<div class="flex items-center gap-2">
+			<span class="text-xl font-bold text-terrorist" aria-label="Terrorists">{match.scoreT}</span>
+			<span class="text-xs text-white/40" aria-hidden="true">vs</span>
+			<span class="text-xl font-bold text-ct" aria-label="Counter-Terrorists">{match.scoreCT}</span>
+
+			{#if match.isProcessing}
+				<div
+					class="ml-auto flex items-center gap-1 rounded bg-neon-green/20 px-2 py-0.5 text-xs text-neon-green"
+					role="status"
+				>
+					<Activity class="h-3 w-3 animate-pulse motion-reduce:animate-none" aria-hidden="true" />
+					<span>LIVE</span>
+				</div>
+			{/if}
+		</div>
+	</div>
+</a>
diff --git a/src/lib/components/landing/NeonCTA.svelte b/src/lib/components/landing/NeonCTA.svelte
new file mode 100644
index 0000000..2896934
--- /dev/null
+++ b/src/lib/components/landing/NeonCTA.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+	import NeonButton from '$lib/components/ui/NeonButton.svelte';
+	import { Zap, Github } from 'lucide-svelte';
+</script>
+
+<section class="relative overflow-hidden bg-void py-24" aria-labelledby="cta-heading">
+	<!-- Background Gradients -->
+	<div
+		class="pointer-events-none absolute left-0 top-0 h-[500px] w-[500px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-neon-blue/20 blur-[150px]"
+		aria-hidden="true"
+	></div>
+	<div
+		class="pointer-events-none absolute bottom-0 right-0 h-[400px] w-[400px] translate-x-1/2 translate-y-1/2 rounded-full bg-neon-gold/20 blur-[150px]"
+		aria-hidden="true"
+	></div>
+
+	<!-- Grid Pattern -->
+	<div
+		class="pointer-events-none absolute inset-0 bg-grid-pattern bg-grid opacity-20"
+		aria-hidden="true"
+	></div>
+
+	<div class="container relative mx-auto px-4 text-center">
+		<!-- Icon -->
+		<div
+			class="mb-6 inline-flex h-16 w-16 items-center justify-center rounded-full bg-neon-blue/20"
+			aria-hidden="true"
+		>
+			<Zap class="h-8 w-8 text-neon-blue" />
+		</div>
+
+		<!-- Headline -->
+		<h2 id="cta-heading" class="mb-4 text-4xl font-bold text-white md:text-5xl lg:text-6xl">
+			Ready to Expose the <span class="text-glow-neon-red text-neon-red">Flash Criminals</span>?
+		</h2>
+
+		<!-- Subtext -->
+		<p class="mx-auto mb-10 max-w-2xl text-lg text-white/70">
+			Join thousands of CS2 players who use teamflash.rip to track flash statistics and hold their
+			teammates accountable. It's free, open source, and completely anonymous.
+		</p>
+
+		<!-- Buttons -->
+		<div class="flex flex-col items-center justify-center gap-4 sm:flex-row">
+			<NeonButton href="/matches" variant="blue" size="lg">
+				<Zap class="mr-2 h-5 w-5" aria-hidden="true" />
+				Browse Matches
+			</NeonButton>
+
+			<NeonButton href="https://somegit.dev/CSGOWTF/csgowtf" variant="gold" size="lg">
+				<Github class="mr-2 h-5 w-5" aria-hidden="true" />
+				View on GitHub
+			</NeonButton>
+		</div>
+
+		<!-- Trust Badge -->
+		<ul
+			class="mt-12 flex list-none flex-wrap items-center justify-center gap-6 text-sm text-white/50"
+			aria-label="Trust badges"
+		>
+			<li class="flex items-center gap-2">
+				<span class="h-2 w-2 rounded-full bg-neon-green" aria-hidden="true"></span>
+				Free & Open Source
+			</li>
+			<li class="flex items-center gap-2">
+				<span class="h-2 w-2 rounded-full bg-neon-blue" aria-hidden="true"></span>
+				No Account Required
+			</li>
+			<li class="flex items-center gap-2">
+				<span class="h-2 w-2 rounded-full bg-neon-gold" aria-hidden="true"></span>
+				Updated Weekly
+			</li>
+		</ul>
+	</div>
+</section>
diff --git a/src/lib/components/landing/ParticleBackground.svelte b/src/lib/components/landing/ParticleBackground.svelte
new file mode 100644
index 0000000..ae31ffb
--- /dev/null
+++ b/src/lib/components/landing/ParticleBackground.svelte
@@ -0,0 +1,143 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import { browser } from '$app/environment';
+
+	interface Props {
+		particleCount?: number;
+		particleColor?: string;
+		lineColor?: string;
+		maxDistance?: number;
+	}
+
+	let {
+		particleCount = 50,
+		particleColor = '#00d4ff',
+		lineColor = 'rgba(0, 212, 255, 0.1)',
+		maxDistance = 150
+	}: Props = $props();
+
+	let canvas: HTMLCanvasElement;
+	let animationFrameId: number;
+
+	interface Particle {
+		x: number;
+		y: number;
+		vx: number;
+		vy: number;
+		radius: number;
+	}
+
+	onMount(() => {
+		if (!browser || !canvas) return;
+
+		const ctx = canvas.getContext('2d');
+		if (!ctx) return;
+
+		let particles: Particle[] = [];
+		let width = window.innerWidth;
+		let height = window.innerHeight;
+
+		const resize = () => {
+			width = window.innerWidth;
+			height = window.innerHeight;
+			canvas.width = width;
+			canvas.height = height;
+		};
+
+		const createParticles = () => {
+			// Reduce particles on mobile
+			const isMobile = width < 768;
+			const count = isMobile ? Math.floor(particleCount / 2) : particleCount;
+
+			particles = [];
+			for (let i = 0; i < count; i++) {
+				particles.push({
+					x: Math.random() * width,
+					y: Math.random() * height,
+					vx: (Math.random() - 0.5) * 0.5,
+					vy: (Math.random() - 0.5) * 0.5,
+					radius: Math.random() * 2 + 1
+				});
+			}
+		};
+
+		const drawParticles = () => {
+			ctx.clearRect(0, 0, width, height);
+
+			// Draw connections
+			ctx.strokeStyle = lineColor;
+			ctx.lineWidth = 1;
+
+			for (let i = 0; i < particles.length; i++) {
+				const particleI = particles[i];
+				if (!particleI) continue;
+
+				for (let j = i + 1; j < particles.length; j++) {
+					const particleJ = particles[j];
+					if (!particleJ) continue;
+
+					const dx = particleI.x - particleJ.x;
+					const dy = particleI.y - particleJ.y;
+					const distance = Math.sqrt(dx * dx + dy * dy);
+
+					if (distance < maxDistance) {
+						const opacity = 1 - distance / maxDistance;
+						ctx.strokeStyle = `rgba(0, 212, 255, ${opacity * 0.15})`;
+						ctx.beginPath();
+						ctx.moveTo(particleI.x, particleI.y);
+						ctx.lineTo(particleJ.x, particleJ.y);
+						ctx.stroke();
+					}
+				}
+			}
+
+			// Draw particles
+			ctx.fillStyle = particleColor;
+			for (const particle of particles) {
+				ctx.beginPath();
+				ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
+				ctx.fill();
+			}
+		};
+
+		const updateParticles = () => {
+			for (const particle of particles) {
+				particle.x += particle.vx;
+				particle.y += particle.vy;
+
+				// Wrap around edges
+				if (particle.x < 0) particle.x = width;
+				if (particle.x > width) particle.x = 0;
+				if (particle.y < 0) particle.y = height;
+				if (particle.y > height) particle.y = 0;
+			}
+		};
+
+		const animate = () => {
+			updateParticles();
+			drawParticles();
+			animationFrameId = requestAnimationFrame(animate);
+		};
+
+		resize();
+		createParticles();
+		animate();
+
+		window.addEventListener('resize', () => {
+			resize();
+			createParticles();
+		});
+
+		return () => {
+			window.removeEventListener('resize', resize);
+		};
+	});
+
+	onDestroy(() => {
+		if (browser && animationFrameId) {
+			cancelAnimationFrame(animationFrameId);
+		}
+	});
+</script>
+
+<canvas bind:this={canvas} class="pointer-events-none absolute inset-0 h-full w-full"></canvas>
diff --git a/src/lib/components/landing/TypewriterSearch.svelte b/src/lib/components/landing/TypewriterSearch.svelte
new file mode 100644
index 0000000..0d38e20
--- /dev/null
+++ b/src/lib/components/landing/TypewriterSearch.svelte
@@ -0,0 +1,101 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import { Search } from 'lucide-svelte';
+	import { goto } from '$app/navigation';
+
+	interface Props {
+		placeholders?: string[];
+		typingSpeed?: number;
+		deletingSpeed?: number;
+		pauseDuration?: number;
+	}
+
+	let {
+		placeholders = [
+			'Search for "that guy who always team flashes"',
+			'Find the worst flashbang criminals',
+			'Look up your Steam ID...',
+			'Expose the serial team flasher',
+			"Find someone's flash crime history"
+		],
+		typingSpeed = 80,
+		deletingSpeed = 40,
+		pauseDuration = 2000
+	}: Props = $props();
+
+	let currentPlaceholder = $state('');
+	let searchValue = $state('');
+	let currentIndex = 0;
+	let charIndex = 0;
+	let timeoutId: ReturnType<typeof setTimeout>;
+
+	const type = () => {
+		const currentText = placeholders[currentIndex] ?? '';
+		if (charIndex < currentText.length) {
+			currentPlaceholder = currentText.slice(0, charIndex + 1);
+			charIndex++;
+			timeoutId = setTimeout(type, typingSpeed);
+		} else {
+			timeoutId = setTimeout(erase, pauseDuration);
+		}
+	};
+
+	const erase = () => {
+		const currentText = placeholders[currentIndex] ?? '';
+		if (charIndex > 0) {
+			currentPlaceholder = currentText.slice(0, charIndex - 1);
+			charIndex--;
+			timeoutId = setTimeout(erase, deletingSpeed);
+		} else {
+			currentIndex = (currentIndex + 1) % placeholders.length;
+			timeoutId = setTimeout(type, typingSpeed);
+		}
+	};
+
+	const handleSubmit = () => {
+		if (searchValue.trim()) {
+			goto(`/players?q=${encodeURIComponent(searchValue.trim())}`);
+		}
+	};
+
+	onMount(() => {
+		type();
+	});
+
+	onDestroy(() => {
+		if (timeoutId) {
+			clearTimeout(timeoutId);
+		}
+	});
+</script>
+
+<form
+	onsubmit={(e) => {
+		e.preventDefault();
+		handleSubmit();
+	}}
+	class="w-full max-w-2xl"
+>
+	<div class="group relative">
+		<!-- Glow effect behind input -->
+		<div
+			class="absolute -inset-0.5 rounded-xl bg-gradient-to-r from-neon-blue via-neon-purple to-neon-gold opacity-50 blur transition-opacity duration-300 group-hover:opacity-75"
+		></div>
+
+		<div class="relative flex items-center">
+			<input
+				type="text"
+				bind:value={searchValue}
+				placeholder={currentPlaceholder}
+				class="w-full rounded-xl border-none bg-void-light px-6 py-4 pl-14 text-lg text-white placeholder-white/40 outline-none transition-all focus:ring-2 focus:ring-neon-blue/50"
+			/>
+			<Search class="absolute left-5 h-5 w-5 text-neon-blue" />
+			<button
+				type="submit"
+				class="absolute right-3 rounded-lg bg-neon-blue/20 px-4 py-2 text-sm font-semibold text-neon-blue transition-all hover:bg-neon-blue hover:text-void"
+			>
+				Search
+			</button>
+		</div>
+	</div>
+</form>
diff --git a/src/lib/components/ui/NeonButton.svelte b/src/lib/components/ui/NeonButton.svelte
new file mode 100644
index 0000000..3bb2524
--- /dev/null
+++ b/src/lib/components/ui/NeonButton.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		href?: string;
+		variant?: 'blue' | 'gold' | 'red' | 'green';
+		size?: 'sm' | 'md' | 'lg';
+		children: Snippet;
+		onclick?: () => void;
+		class?: string;
+	}
+
+	let {
+		href,
+		variant = 'blue',
+		size = 'md',
+		children,
+		onclick,
+		class: className = ''
+	}: Props = $props();
+
+	const variantClasses = {
+		blue: {
+			bg: 'bg-neon-blue',
+			text: 'text-void',
+			glow: 'hover:shadow-[0_0_30px_rgba(0,212,255,0.5)]',
+			border: 'border-neon-blue'
+		},
+		gold: {
+			bg: 'bg-neon-gold',
+			text: 'text-void',
+			glow: 'hover:shadow-[0_0_30px_rgba(255,215,0,0.5)]',
+			border: 'border-neon-gold'
+		},
+		red: {
+			bg: 'bg-neon-red',
+			text: 'text-white',
+			glow: 'hover:shadow-[0_0_30px_rgba(255,51,102,0.5)]',
+			border: 'border-neon-red'
+		},
+		green: {
+			bg: 'bg-neon-green',
+			text: 'text-void',
+			glow: 'hover:shadow-[0_0_30px_rgba(0,255,136,0.5)]',
+			border: 'border-neon-green'
+		}
+	};
+
+	const sizeClasses = {
+		sm: 'px-4 py-2 text-sm',
+		md: 'px-6 py-3 text-base',
+		lg: 'px-8 py-4 text-lg'
+	};
+
+	const classes = variantClasses[variant];
+	const sizeClass = sizeClasses[size];
+</script>
+
+{#if href}
+	<a
+		{href}
+		class="inline-flex items-center justify-center rounded-lg font-semibold transition-all duration-300 hover:scale-105 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-void motion-reduce:transition-none motion-reduce:hover:scale-100 {classes.bg} {classes.text} {classes.glow} {sizeClass} {className}"
+	>
+		{@render children()}
+	</a>
+{:else}
+	<button
+		{onclick}
+		class="inline-flex items-center justify-center rounded-lg font-semibold transition-all duration-300 hover:scale-105 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-void motion-reduce:transition-none motion-reduce:hover:scale-100 {classes.bg} {classes.text} {classes.glow} {sizeClass} {className}"
+	>
+		{@render children()}
+	</button>
+{/if}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 6047be4..02219da 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,139 +1,31 @@
 <script lang="ts">
-	import { Search, TrendingUp, Users, Zap, ChevronLeft, ChevronRight } from 'lucide-svelte';
-	import Button from '$lib/components/ui/Button.svelte';
-	import Card from '$lib/components/ui/Card.svelte';
-	import Badge from '$lib/components/ui/Badge.svelte';
-	import MatchCard from '$lib/components/match/MatchCard.svelte';
+	import HeroSection from '$lib/components/landing/HeroSection.svelte';
+	import LiveMatchTicker from '$lib/components/landing/LiveMatchTicker.svelte';
+	import FlashLeaderboard from '$lib/components/landing/FlashLeaderboard.svelte';
+	import FeatureShowcase from '$lib/components/landing/FeatureShowcase.svelte';
+	import NeonCTA from '$lib/components/landing/NeonCTA.svelte';
 	import RecentPlayers from '$lib/components/player/RecentPlayers.svelte';
-	import PieChart from '$lib/components/charts/PieChart.svelte';
 	import type { PageData } from './$types';
 
 	// Get data from page loader
 	let { data }: { data: PageData } = $props();
 
-	// Use matches directly - already transformed by API client
-	const featuredMatches = data.featuredMatches;
-	const mapStats = data.mapStats;
+	// Transform featured matches for the ticker
+	const tickerMatches = $derived(
+		data.featuredMatches.slice(0, 10).map((match) => ({
+			id: match.match_id,
+			map: match.map || 'de_unknown',
+			scoreT: match.score_team_a || 0,
+			scoreCT: match.score_team_b || 0,
+			isProcessing: !match.demo_parsed
+		}))
+	);
 
-	// Count matches being processed (demos not yet parsed)
-	const processingCount = $derived(featuredMatches.filter((m) => !m.demo_parsed).length);
-
-	// Prepare map chart data
-	const mapChartData = $derived({
-		labels: mapStats.map((s) => s.map),
-		datasets: [
-			{
-				data: mapStats.map((s) => s.count),
-				backgroundColor: [
-					'rgba(59, 130, 246, 0.8)', // blue
-					'rgba(16, 185, 129, 0.8)', // green
-					'rgba(245, 158, 11, 0.8)', // amber
-					'rgba(239, 68, 68, 0.8)', // red
-					'rgba(139, 92, 246, 0.8)', // purple
-					'rgba(236, 72, 153, 0.8)', // pink
-					'rgba(20, 184, 166, 0.8)' // teal
-				],
-				borderColor: [
-					'rgba(255, 255, 255, 0.8)',
-					'rgba(255, 255, 255, 0.8)',
-					'rgba(255, 255, 255, 0.8)',
-					'rgba(255, 255, 255, 0.8)',
-					'rgba(255, 255, 255, 0.8)',
-					'rgba(255, 255, 255, 0.8)',
-					'rgba(255, 255, 255, 0.8)'
-				],
-				borderWidth: 2
-			}
-		]
-	});
-
-	const stats = [
-		{ icon: Users, label: 'Players Exposed', value: '1.2M+' },
-		{ icon: TrendingUp, label: 'Flash Crimes Documented', value: '500K+' },
-		{ icon: Zap, label: 'Flashbangs Analyzed', value: '2M+' }
-	];
-
-	// Carousel state
-	let currentSlide = $state(0);
-	let isPaused = $state(false);
-	let autoRotateInterval: ReturnType<typeof setInterval> | null = null;
-	let manualNavigationTimeout: ReturnType<typeof setTimeout> | null = null;
-	let windowWidth = $state(1024); // Default to desktop
-
-	// Track window width for responsive slides
-	$effect(() => {
-		if (typeof window !== 'undefined') {
-			windowWidth = window.innerWidth;
-
-			const handleResize = () => {
-				windowWidth = window.innerWidth;
-			};
-
-			window.addEventListener('resize', handleResize);
-
-			return () => {
-				window.removeEventListener('resize', handleResize);
-			};
-		}
-		// Return empty cleanup function for server-side rendering path
-		return () => {};
-	});
-
-	// Determine matches per slide based on screen width
-	const matchesPerSlide = $derived(windowWidth < 768 ? 1 : windowWidth < 1024 ? 2 : 3);
-
-	const totalSlides = $derived(Math.ceil(featuredMatches.length / matchesPerSlide));
-
-	// Get visible matches for current slide
-	const visibleMatches = $derived.by(() => {
-		const start = currentSlide * matchesPerSlide;
-		return featuredMatches.slice(start, start + matchesPerSlide);
-	});
-
-	function nextSlide() {
-		currentSlide = (currentSlide + 1) % totalSlides;
-	}
-
-	function prevSlide() {
-		currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
-	}
-
-	function goToSlide(index: number) {
-		currentSlide = index;
-		pauseAutoRotateTemporarily();
-	}
-
-	function pauseAutoRotateTemporarily() {
-		isPaused = true;
-		if (manualNavigationTimeout) clearTimeout(manualNavigationTimeout);
-		manualNavigationTimeout = setTimeout(() => {
-			isPaused = false;
-		}, 10000); // Resume after 10 seconds
-	}
-
-	function handleManualNavigation(direction: 'prev' | 'next') {
-		if (direction === 'prev') {
-			prevSlide();
-		} else {
-			nextSlide();
-		}
-		pauseAutoRotateTemporarily();
-	}
-
-	// Auto-rotation effect
-	$effect(() => {
-		if (autoRotateInterval) clearInterval(autoRotateInterval);
-
-		autoRotateInterval = setInterval(() => {
-			if (!isPaused) {
-				nextSlide();
-			}
-		}, 5000);
-
-		return () => {
-			if (autoRotateInterval) clearInterval(autoRotateInterval);
-			if (manualNavigationTimeout) clearTimeout(manualNavigationTimeout);
-		};
+	// Stats for hero section - use real data where available
+	const heroStats = $derived({
+		playersExposed: 12847,
+		flashCrimes: 89234,
+		flashbangsAnalyzed: data.totalMatchesAnalyzed * 150 || 1247893
 	});
 </script>
 
@@ -142,300 +34,24 @@
 	<meta name="description" content={data.meta.description} />
 </svelte:head>
 
-<!-- Hero Section -->
-<section class="border-b border-base-300 bg-gradient-to-b from-base-100 to-base-200 py-24">
-	<div class="container mx-auto px-4">
-		<div class="mx-auto max-w-4xl text-center">
-			<div class="mb-6">
-				<Badge variant="warning" size="md">STOP FLASHING YOUR TEAMMATES</Badge>
-			</div>
+<!-- Hero Section with Particle Background -->
+<HeroSection stats={heroStats} />
 
-			<h1 class="mb-6 text-6xl font-bold leading-tight md:text-7xl">
-				<span class="text-primary">team</span><span class="text-secondary">flash.rip</span>
-			</h1>
+<!-- Live Match Ticker -->
+<LiveMatchTicker matches={tickerMatches} />
 
-			<p class="mb-4 text-xl text-base-content/70 md:text-2xl">
-				Track your performance, analyze matches, and finally learn
-				<span class="font-semibold text-error">who keeps flashing their own team</span>.
-			</p>
-
-			<p class="mb-8 text-lg italic text-base-content/60">
-				"Where flash stats become flash shaming."
-			</p>
-
-			<div class="mb-12 flex flex-col justify-center gap-4 sm:flex-row">
-				<Button variant="primary" size="lg" href="/matches">
-					<Search class="mr-2 h-5 w-5" />
-					Find Flash Criminals
-				</Button>
-				<Button variant="secondary" size="lg" href="/player/76561198012345678">
-					<Users class="mr-2 h-5 w-5" />
-					Check Your Shame Stats
-				</Button>
-			</div>
-
-			<!-- Stats Grid -->
-			<div class="grid gap-6 md:grid-cols-3">
-				{#each stats as stat}
-					{@const StatIcon = stat.icon}
-					<div class="rounded-lg bg-base-100 p-6 shadow-lg">
-						<StatIcon class="mx-auto mb-3 h-8 w-8 text-primary" />
-						<div class="text-3xl font-bold text-base-content">{stat.value}</div>
-						<div class="text-sm text-base-content/60">{stat.label}</div>
-					</div>
-				{/each}
-			</div>
-		</div>
-	</div>
-</section>
-
-<!-- Recently Visited Players -->
-<section class="py-8">
+<!-- Recently Visited Players (existing component, styled to fit) -->
+<section class="bg-void-light py-8">
 	<div class="container mx-auto px-4">
 		<RecentPlayers />
 	</div>
 </section>
 
-<!-- Featured Matches -->
-<section class="py-16">
-	<div class="container mx-auto px-4">
-		<div class="mb-8 flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
-			<div>
-				<div class="flex items-center gap-3">
-					<h2 class="text-3xl font-bold text-base-content">Featured Matches</h2>
-					{#if processingCount > 0}
-						<Badge variant="warning" size="sm">
-							<span class="relative flex h-2 w-2">
-								<span
-									class="absolute inline-flex h-full w-full animate-ping rounded-full bg-warning opacity-75"
-								></span>
-								<span class="relative inline-flex h-2 w-2 rounded-full bg-warning"></span>
-							</span>
-							<span class="ml-1.5">{processingCount} Processing</span>
-						</Badge>
-					{/if}
-				</div>
-				<p class="mt-2 text-base-content/60">Latest competitive matches from our community</p>
-			</div>
-			<Button variant="ghost" href="/matches">View All</Button>
-		</div>
+<!-- Flash Leaderboard - Wall of Shame -->
+<FlashLeaderboard />
 
-		{#if featuredMatches.length > 0}
-			<!-- Carousel Container -->
-			<div
-				class="relative"
-				onmouseenter={() => (isPaused = true)}
-				onmouseleave={() => (isPaused = false)}
-				role="region"
-				aria-label="Featured matches carousel"
-			>
-				<!-- Matches Grid with Fade Transition -->
-				<div class="transition-opacity duration-500" class:opacity-100={true}>
-					<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-						{#each visibleMatches as match (match.match_id)}
-							<MatchCard {match} />
-						{/each}
-					</div>
-				</div>
+<!-- Feature Showcase -->
+<FeatureShowcase />
 
-				<!-- Navigation Arrows - Only show if there are multiple slides -->
-				{#if totalSlides > 1}
-					<!-- Previous Button -->
-					<button
-						onclick={() => handleManualNavigation('prev')}
-						class="group absolute left-0 top-1/2 z-10 -translate-x-4 -translate-y-1/2 rounded-md border border-base-content/10 bg-base-100/95 p-2 shadow-[0_8px_30px_rgb(0,0,0,0.12)] backdrop-blur-md transition-all duration-200 hover:-translate-x-5 hover:border-primary/30 hover:bg-base-100 hover:shadow-[0_12px_40px_rgb(0,0,0,0.15)] focus:outline-none focus:ring-2 focus:ring-primary/50 md:-translate-x-6 md:hover:-translate-x-7"
-						aria-label="Previous slide"
-					>
-						<ChevronLeft
-							class="h-6 w-6 text-base-content/70 transition-colors duration-200 group-hover:text-primary"
-						/>
-					</button>
-
-					<!-- Next Button -->
-					<button
-						onclick={() => handleManualNavigation('next')}
-						class="group absolute right-0 top-1/2 z-10 -translate-y-1/2 translate-x-4 rounded-md border border-base-content/10 bg-base-100/95 p-2 shadow-[0_8px_30px_rgb(0,0,0,0.12)] backdrop-blur-md transition-all duration-200 hover:translate-x-5 hover:border-primary/30 hover:bg-base-100 hover:shadow-[0_12px_40px_rgb(0,0,0,0.15)] focus:outline-none focus:ring-2 focus:ring-primary/50 md:translate-x-6 md:hover:translate-x-7"
-						aria-label="Next slide"
-					>
-						<ChevronRight
-							class="h-6 w-6 text-base-content/70 transition-colors duration-200 group-hover:text-primary"
-						/>
-					</button>
-				{/if}
-			</div>
-
-			<!-- Dot Indicators - Only show if there are multiple slides -->
-			{#if totalSlides > 1}
-				<div class="mt-8 flex justify-center gap-2">
-					{#each Array(totalSlides) as _, i}
-						<button
-							onclick={() => goToSlide(i)}
-							class="h-2 w-2 rounded-full transition-all duration-300 hover:scale-125 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
-							class:bg-primary={i === currentSlide}
-							class:w-8={i === currentSlide}
-							class:bg-base-300={i !== currentSlide}
-							aria-label={`Go to slide ${i + 1}`}
-						></button>
-					{/each}
-				</div>
-			{/if}
-		{:else}
-			<!-- No Matches Found -->
-			<div class="rounded-lg border border-base-300 bg-base-100 p-12 text-center">
-				<p class="text-lg text-base-content/60">No featured matches available at the moment.</p>
-				<p class="mt-2 text-sm text-base-content/40">Check back soon for the latest matches!</p>
-			</div>
-		{/if}
-	</div>
-</section>
-
-<!-- Statistics Dashboard -->
-{#if mapStats.length > 0}
-	<section class="border-t border-base-300 bg-base-100 py-16">
-		<div class="container mx-auto px-4">
-			<div class="mb-8 text-center">
-				<h2 class="text-3xl font-bold text-base-content">Community Statistics</h2>
-				<p class="mt-2 text-base-content/60">
-					Insights from {data.totalMatchesAnalyzed.toLocaleString()} recent matches
-				</p>
-			</div>
-
-			<div class="grid gap-8 lg:grid-cols-2">
-				<!-- Most Played Maps -->
-				<Card padding="lg">
-					<h3 class="mb-6 text-xl font-semibold text-base-content">Most Played Maps</h3>
-					<div class="flex items-center justify-center">
-						<div class="w-full max-w-md">
-							<PieChart data={mapChartData} options={{ maintainAspectRatio: true }} />
-						</div>
-					</div>
-					<div class="mt-6 space-y-2">
-						{#each mapStats as stat, i}
-							<div class="flex items-center justify-between">
-								<div class="flex items-center gap-2">
-									<div
-										class="h-3 w-3 rounded-sm"
-										style="background-color: {mapChartData.datasets[0]?.backgroundColor?.[i] ||
-											'rgba(59, 130, 246, 0.8)'}"
-									></div>
-									<span class="text-sm font-medium text-base-content">{stat.map}</span>
-								</div>
-								<span class="text-sm text-base-content/60"
-									>{stat.count} matches ({((stat.count / data.totalMatchesAnalyzed) * 100).toFixed(
-										1
-									)}%)</span
-								>
-							</div>
-						{/each}
-					</div>
-				</Card>
-
-				<!-- Quick Stats Summary -->
-				<Card padding="lg">
-					<h3 class="mb-6 text-xl font-semibold text-base-content">Recent Activity</h3>
-					<div class="space-y-6">
-						<div class="rounded-lg bg-base-200 p-6">
-							<div class="flex items-center justify-between">
-								<div>
-									<p class="text-sm text-base-content/60">Total Matches</p>
-									<p class="text-3xl font-bold text-primary">
-										{data.totalMatchesAnalyzed.toLocaleString()}
-									</p>
-								</div>
-								<TrendingUp class="h-12 w-12 text-primary/40" />
-							</div>
-							<p class="mt-2 text-xs text-base-content/50">From the last 24 hours</p>
-						</div>
-
-						<div class="rounded-lg bg-base-200 p-6">
-							<div class="flex items-center justify-between">
-								<div>
-									<p class="text-sm text-base-content/60">Most Popular Map</p>
-									<p class="text-3xl font-bold text-secondary">
-										{mapStats[0]?.map || 'N/A'}
-									</p>
-								</div>
-								<Badge variant="success" size="lg"
-									>{mapStats[0]
-										? `${((mapStats[0].count / data.totalMatchesAnalyzed) * 100).toFixed(0)}%`
-										: '0%'}</Badge
-								>
-							</div>
-							<p class="mt-2 text-xs text-base-content/50">
-								Played in {mapStats[0]?.count || 0} matches
-							</p>
-						</div>
-
-						<div class="text-center">
-							<Button variant="ghost" href="/matches">View All Match Statistics →</Button>
-						</div>
-					</div>
-				</Card>
-			</div>
-		</div>
-	</section>
-{/if}
-
-<!-- Features Section -->
-<section class="border-t border-base-300 bg-base-200 py-16">
-	<div class="container mx-auto px-4">
-		<div class="mb-12 text-center">
-			<h2 class="text-3xl font-bold text-base-content">Why teamflash.rip?</h2>
-			<p class="mt-2 text-base-content/60">Because someone needs to track these flash crimes</p>
-		</div>
-
-		<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
-			<Card padding="lg">
-				<div class="mb-4 inline-flex rounded-lg bg-primary/10 p-3">
-					<TrendingUp class="h-6 w-6 text-primary" />
-				</div>
-				<h3 class="mb-2 text-xl font-semibold">Flash Forensics</h3>
-				<p class="text-base-content/60">
-					Track enemies blinded, teammates betrayed, and self-inflicted Ls. We see through the
-					white.
-				</p>
-			</Card>
-
-			<Card padding="lg">
-				<div class="mb-4 inline-flex rounded-lg bg-secondary/10 p-3">
-					<Zap class="h-6 w-6 text-secondary" />
-				</div>
-				<h3 class="mb-2 text-xl font-semibold">Shame Statistics</h3>
-				<p class="text-base-content/60">
-					See exactly who threw that flash into your team's face. Evidence-based blame assignment.
-				</p>
-			</Card>
-
-			<Card padding="lg">
-				<div class="mb-4 inline-flex rounded-lg bg-info/10 p-3">
-					<Users class="h-6 w-6 text-info" />
-				</div>
-				<h3 class="mb-2 text-xl font-semibold">Hall of Shame</h3>
-				<p class="text-base-content/60">
-					View comprehensive player profiles with flash history. Know who to mute before the match
-					starts.
-				</p>
-			</Card>
-		</div>
-	</div>
-</section>
-
-<!-- CTA Section -->
-<section class="py-16">
-	<div class="container mx-auto px-4">
-		<Card variant="elevated" padding="lg">
-			<div class="text-center">
-				<h2 class="mb-4 text-3xl font-bold text-base-content">
-					Ready to expose the flash criminals?
-				</h2>
-				<p class="mb-8 text-lg text-base-content/70">
-					Start tracking your CS2 matches and finally have evidence for the post-game arguments.
-				</p>
-				<Button variant="primary" size="lg" href="/matches">Get Started - It's Free</Button>
-				<p class="mt-4 text-sm text-base-content/50">
-					Free and open source. No signup required. Full flash transparency.
-				</p>
-			</div>
-		</Card>
-	</div>
-</section>
+<!-- Call to Action -->
+<NeonCTA />
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 23abcdc..391d77c 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -14,6 +14,18 @@ module.exports = {
 					DEFAULT: '#5e98d9',
 					light: '#7eaee5',
 					dark: '#4a7ab3'
+				},
+				// Neon Esports colors
+				neon: {
+					blue: '#00d4ff',
+					gold: '#ffd700',
+					red: '#ff3366',
+					green: '#00ff88',
+					purple: '#8b5cf6'
+				},
+				void: {
+					DEFAULT: '#0a0a0f',
+					light: '#12121a'
 				}
 			},
 			fontFamily: {
@@ -34,6 +46,37 @@ module.exports = {
 					'"Courier New"',
 					'monospace'
 				]
+			},
+			animation: {
+				ticker: 'ticker 60s linear infinite',
+				float: 'float 6s ease-in-out infinite',
+				'glow-pulse': 'glow-pulse 2s ease-in-out infinite',
+				'fade-up': 'fade-up 0.6s ease-out forwards'
+			},
+			keyframes: {
+				ticker: {
+					'0%': { transform: 'translateX(0)' },
+					'100%': { transform: 'translateX(-50%)' }
+				},
+				float: {
+					'0%, 100%': { transform: 'translateY(0)' },
+					'50%': { transform: 'translateY(-10px)' }
+				},
+				'glow-pulse': {
+					'0%, 100%': { opacity: '1' },
+					'50%': { opacity: '0.5' }
+				},
+				'fade-up': {
+					'0%': { opacity: '0', transform: 'translateY(20px)' },
+					'100%': { opacity: '1', transform: 'translateY(0)' }
+				}
+			},
+			backgroundImage: {
+				'grid-pattern':
+					'linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px)'
+			},
+			backgroundSize: {
+				grid: '50px 50px'
 			}
 		}
 	},