csgowtf/src/lib/components/layout/Footer.svelte

<script lang="ts">
	import { Github, Heart } from 'lucide-svelte';

	const currentYear = new Date().getFullYear();

	const links = {
		main: [
			{ name: 'Home', href: '/' },
			{ name: 'Matches', href: '/matches' },
			{ name: 'Players', href: '/players' }
		],
		about: [
			{ name: 'About', href: '/about' },
			{ name: 'FAQ', href: '/faq' },
			{ name: 'Privacy', href: '/privacy' },
			{ name: 'Terms', href: '/terms' }
		],
		resources: [
			{ name: 'GitHub', href: 'https://somegit.dev/CSGOWTF/csgowtf', external: true },
			{ name: 'Backend', href: 'https://somegit.dev/CSGOWTF/csgowtfd', external: true },
			{
				name: 'Donate',
				href: 'https://liberapay.com/CSGOWTF/',
				external: true
			}
		]
	};
</script>

<footer class="relative border-t border-neon-blue/20 bg-void">
	<!-- Grid Pattern Overlay -->
	<div
		class="pointer-events-none absolute inset-0 opacity-10"
		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>

	<div class="container relative mx-auto px-4 py-12">
		<div class="grid gap-8 md:grid-cols-4">
			<!-- Brand -->
			<div class="md:col-span-1">
				<a
					href="/"
					class="mb-4 inline-block rounded text-2xl font-bold focus:outline-none focus-visible:ring-2 focus-visible:ring-neon-blue"
				>
					<span style="color: #00d4ff; text-shadow: 0 0 10px #00d4ff;">team</span><span
						style="color: #ffd700; text-shadow: 0 0 10px #ffd700;">flash.rip</span
					>
				</a>
				<p class="mb-4 text-sm text-white/50">
					Stop flashing your teammates. Free and open source.
				</p>
				<div class="flex gap-3">
					<a
						href="https://somegit.dev/CSGOWTF/csgowtf"
						target="_blank"
						rel="noopener noreferrer"
						class="rounded text-white/50 transition-colors hover:text-neon-blue focus:outline-none focus-visible:text-neon-blue"
						aria-label="GitHub"
					>
						<Github class="h-5 w-5" aria-hidden="true" />
					</a>
					<a
						href="https://liberapay.com/CSGOWTF/"
						target="_blank"
						rel="noopener noreferrer"
						class="rounded text-white/50 transition-colors hover:text-neon-red focus:outline-none focus-visible:text-neon-red"
						aria-label="Support on Liberapay"
					>
						<Heart class="h-5 w-5" aria-hidden="true" />
					</a>
				</div>
			</div>

			<!-- Links -->
			<div>
				<h3 class="mb-3 text-sm font-semibold uppercase tracking-wider text-white/70">Navigate</h3>
				<ul class="space-y-2">
					{#each links.main as link}
						<li>
							<a
								href={link.href}
								class="rounded text-sm text-white/40 transition-colors hover:text-neon-blue focus:outline-none focus-visible:text-neon-blue"
							>
								{link.name}
							</a>
						</li>
					{/each}
				</ul>
			</div>

			<div>
				<h3 class="mb-3 text-sm font-semibold uppercase tracking-wider text-white/70">About</h3>
				<ul class="space-y-2">
					{#each links.about as link}
						<li>
							<a
								href={link.href}
								class="rounded text-sm text-white/40 transition-colors hover:text-neon-blue focus:outline-none focus-visible:text-neon-blue"
							>
								{link.name}
							</a>
						</li>
					{/each}
				</ul>
			</div>

			<div>
				<h3 class="mb-3 text-sm font-semibold uppercase tracking-wider text-white/70">Resources</h3>
				<ul class="space-y-2">
					{#each links.resources as link}
						<li>
							<a
								href={link.href}
								class="rounded text-sm text-white/40 transition-colors hover:text-neon-blue focus:outline-none focus-visible:text-neon-blue"
								{...link.external ? { target: '_blank', rel: 'noopener noreferrer' } : {}}
							>
								{link.name}
							</a>
						</li>
					{/each}
				</ul>
			</div>
		</div>

		<!-- Bottom -->
		<div class="mt-12 border-t border-neon-blue/20 pt-8 text-center text-sm text-white/50">
			<p>
				© {currentYear} teamflash.rip Team. Licensed under
				<a
					href="/license"
					class="rounded transition-colors hover:text-neon-blue focus:outline-none focus-visible:text-neon-blue"
					>GPL-3.0</a
				>
			</p>
			<p class="mt-2">
				Made with <Heart class="inline h-4 w-4 text-neon-red" aria-hidden="true" /> by players who are
				tired of being flashed.
			</p>
		</div>
	</div>
</footer>