From c92af5f37783cd6ec8bb4ba74ee1069227653b52 Mon Sep 17 00:00:00 2001
From: vikingowl <christian@nachtigall.dev>
Date: Sun, 7 Dec 2025 17:22:08 +0100
Subject: [PATCH] style: Redesign about page with neon esports aesthetic
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Convert the about page from DaisyUI to the custom neon design system
with decorative blur orbs, glowing icons, and contextual hover effects
on feature cards. External links now open in new tabs.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/routes/about/+page.svelte | 229 +++++++++++++++++++++++-----------
 1 file changed, 158 insertions(+), 71 deletions(-)

diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index b806b51..02c887f 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -1,87 +1,174 @@
 <script lang="ts">
 	import { Github, Heart, Code, Zap } from 'lucide-svelte';
-	import Card from '$lib/components/ui/Card.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
 </script>
 
 <svelte:head>
 	<title>About - teamflash.rip</title>
 </svelte:head>
 
-<div class="container mx-auto max-w-4xl px-4 py-12">
-	<h1 class="mb-8 text-4xl font-bold">About teamflash.rip</h1>
-
-	<Card padding="lg" class="mb-8">
-		<h2 class="mb-4 text-2xl font-semibold">Our Mission</h2>
-		<p class="mb-4 text-base-content/80">
-			teamflash.rip is a free and open-source platform for analyzing Counter-Strike 2 matchmaking
-			matches. We're on a mission to expose every teammate who ever threw a flashbang backwards.
-		</p>
-		<p class="text-base-content/80">
-			Originally created for CS:GO, we've completely rewritten the platform to support CS2 with
-			modern technologies and the ability to track exactly who ruined your retake with a poorly
-			timed flash.
-		</p>
-	</Card>
-
-	<div class="mb-8 grid gap-6 md:grid-cols-3">
-		<Card padding="lg">
-			<Code class="mb-3 h-8 w-8 text-primary" />
-			<h3 class="mb-2 text-xl font-semibold">Open Source</h3>
-			<p class="text-sm text-base-content/70">
-				Built by the community, for the community. All code is available on GitHub.
-			</p>
-		</Card>
-
-		<Card padding="lg">
-			<Heart class="mb-3 h-8 w-8 text-error" />
-			<h3 class="mb-2 text-xl font-semibold">Free Forever</h3>
-			<p class="text-sm text-base-content/70">
-				No paywalls, no premium features. Everyone gets full access to all flash crime statistics.
-			</p>
-		</Card>
-
-		<Card padding="lg">
-			<Zap class="mb-3 h-8 w-8 text-warning" />
-			<h3 class="mb-2 text-xl font-semibold">Community Driven</h3>
-			<p class="text-sm text-base-content/70">
-				Contributions welcome! Help us shame more team-flashers together.
-			</p>
-		</Card>
+<div class="relative min-h-screen bg-void">
+	<!-- Decorative Background -->
+	<div class="pointer-events-none absolute inset-0 overflow-hidden">
+		<!-- Blur orbs -->
+		<div class="absolute -left-40 top-20 h-80 w-80 rounded-full bg-neon-blue/10 blur-[100px]"></div>
+		<div
+			class="absolute -right-40 top-40 h-80 w-80 rounded-full bg-neon-purple/10 blur-[100px]"
+		></div>
+		<div
+			class="absolute bottom-20 left-1/2 h-60 w-60 rounded-full bg-neon-gold/5 blur-[80px]"
+		></div>
+		<!-- Grid pattern -->
+		<div
+			class="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: 60px 60px;"
+		></div>
 	</div>
 
-	<Card padding="lg" class="mb-8">
-		<h2 class="mb-4 text-2xl font-semibold">Technology Stack</h2>
-		<div class="grid gap-4 md:grid-cols-2">
-			<div>
-				<h3 class="mb-2 font-semibold text-primary">Frontend</h3>
-				<ul class="space-y-1 text-sm text-base-content/80">
-					<li>• SvelteKit 2.0 + Svelte 5</li>
-					<li>• TypeScript (Strict Mode)</li>
-					<li>• Tailwind CSS + DaisyUI</li>
-					<li>• Vitest + Playwright</li>
-				</ul>
+	<!-- Content -->
+	<div class="container relative z-10 mx-auto max-w-4xl px-4 py-12">
+		<!-- Page Header -->
+		<h1
+			class="mb-8 text-4xl font-bold text-white"
+			style="text-shadow: 0 0 30px rgba(0, 212, 255, 0.5);"
+		>
+			About teamflash.rip
+		</h1>
+
+		<!-- Mission Card -->
+		<div class="mb-8 rounded-xl border border-white/10 bg-void-light p-6">
+			<h2
+				class="mb-4 text-2xl font-semibold text-white"
+				style="text-shadow: 0 0 15px rgba(0, 212, 255, 0.3);"
+			>
+				Our Mission
+			</h2>
+			<p class="mb-4 text-white/70">
+				teamflash.rip is a free and open-source platform for analyzing Counter-Strike 2 matchmaking
+				matches. We're on a mission to expose every teammate who ever threw a flashbang backwards.
+			</p>
+			<p class="text-white/70">
+				Originally created for CS:GO, we've completely rewritten the platform to support CS2 with
+				modern technologies and the ability to track exactly who ruined your retake with a poorly
+				timed flash.
+			</p>
+		</div>
+
+		<!-- Feature Cards -->
+		<div class="mb-8 grid gap-6 md:grid-cols-3">
+			<div
+				class="group rounded-xl border border-white/10 bg-void-light p-6 transition-all duration-300 hover:border-neon-blue/50 hover:shadow-[0_0_20px_rgba(0,212,255,0.1)]"
+			>
+				<Code
+					class="mb-3 h-8 w-8 text-neon-blue"
+					style="filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.5));"
+				/>
+				<h3 class="mb-2 text-xl font-semibold text-white">Open Source</h3>
+				<p class="text-sm text-white/60">
+					Built by the community, for the community. All code is available on GitHub.
+				</p>
 			</div>
-			<div>
-				<h3 class="mb-2 font-semibold text-secondary">Backend</h3>
-				<ul class="space-y-1 text-sm text-base-content/80">
-					<li>• Go + Gin Framework</li>
-					<li>• PostgreSQL Database</li>
-					<li>• Redis Cache</li>
-					<li>• Demo Parser (flash crime evidence collector)</li>
-				</ul>
+
+			<div
+				class="group rounded-xl border border-white/10 bg-void-light p-6 transition-all duration-300 hover:border-neon-red/50 hover:shadow-[0_0_20px_rgba(255,51,102,0.1)]"
+			>
+				<Heart
+					class="mb-3 h-8 w-8 text-neon-red"
+					style="filter: drop-shadow(0 0 8px rgba(255, 51, 102, 0.5));"
+				/>
+				<h3 class="mb-2 text-xl font-semibold text-white">Free Forever</h3>
+				<p class="text-sm text-white/60">
+					No paywalls, no premium features. Everyone gets full access to all flash crime statistics.
+				</p>
+			</div>
+
+			<div
+				class="group rounded-xl border border-white/10 bg-void-light p-6 transition-all duration-300 hover:border-neon-gold/50 hover:shadow-[0_0_20px_rgba(255,170,0,0.1)]"
+			>
+				<Zap
+					class="mb-3 h-8 w-8 text-neon-gold"
+					style="filter: drop-shadow(0 0 8px rgba(255, 170, 0, 0.5));"
+				/>
+				<h3 class="mb-2 text-xl font-semibold text-white">Community Driven</h3>
+				<p class="text-sm text-white/60">
+					Contributions welcome! Help us shame more team-flashers together.
+				</p>
 			</div>
 		</div>
-	</Card>
 
-	<div class="flex justify-center gap-4">
-		<Button variant="primary" href="https://somegit.dev/CSGOWTF/csgowtf">
-			<Github class="mr-2 h-5 w-5" />
-			View on GitHub
-		</Button>
-		<Button variant="secondary" href="https://liberapay.com/CSGOWTF/">
-			<Heart class="mr-2 h-5 w-5" />
-			Support Us
-		</Button>
+		<!-- Technology Stack Card -->
+		<div class="mb-8 rounded-xl border border-white/10 bg-void-light p-6">
+			<h2
+				class="mb-4 text-2xl font-semibold text-white"
+				style="text-shadow: 0 0 15px rgba(0, 212, 255, 0.3);"
+			>
+				Technology Stack
+			</h2>
+			<div class="grid gap-6 md:grid-cols-2">
+				<div>
+					<h3 class="mb-3 font-semibold text-neon-blue">Frontend</h3>
+					<ul class="space-y-2 text-sm text-white/70">
+						<li class="flex items-center gap-2">
+							<span class="h-1.5 w-1.5 rounded-full bg-neon-blue"></span>
+							SvelteKit 2.0 + Svelte 5
+						</li>
+						<li class="flex items-center gap-2">
+							<span class="h-1.5 w-1.5 rounded-full bg-neon-blue"></span>
+							TypeScript (Strict Mode)
+						</li>
+						<li class="flex items-center gap-2">
+							<span class="h-1.5 w-1.5 rounded-full bg-neon-blue"></span>
+							Tailwind CSS + DaisyUI
+						</li>
+						<li class="flex items-center gap-2">
+							<span class="h-1.5 w-1.5 rounded-full bg-neon-blue"></span>
+							Vitest + Playwright
+						</li>
+					</ul>
+				</div>
+				<div>
+					<h3 class="mb-3 font-semibold text-neon-purple">Backend</h3>
+					<ul class="space-y-2 text-sm text-white/70">
+						<li class="flex items-center gap-2">
+							<span class="h-1.5 w-1.5 rounded-full bg-neon-purple"></span>
+							Go + Gin Framework
+						</li>
+						<li class="flex items-center gap-2">
+							<span class="h-1.5 w-1.5 rounded-full bg-neon-purple"></span>
+							PostgreSQL Database
+						</li>
+						<li class="flex items-center gap-2">
+							<span class="h-1.5 w-1.5 rounded-full bg-neon-purple"></span>
+							Redis Cache
+						</li>
+						<li class="flex items-center gap-2">
+							<span class="h-1.5 w-1.5 rounded-full bg-neon-purple"></span>
+							Demo Parser (flash crime evidence collector)
+						</li>
+					</ul>
+				</div>
+			</div>
+		</div>
+
+		<!-- Action Buttons -->
+		<div class="flex flex-wrap justify-center gap-4">
+			<a
+				href="https://somegit.dev/CSGOWTF/csgowtf"
+				target="_blank"
+				rel="noopener noreferrer"
+				class="inline-flex items-center gap-2 rounded-lg bg-neon-blue px-6 py-3 font-medium text-void transition-all duration-300 hover:shadow-[0_0_25px_rgba(0,212,255,0.4)]"
+			>
+				<Github class="h-5 w-5" />
+				View on GitHub
+			</a>
+			<a
+				href="https://liberapay.com/CSGOWTF/"
+				target="_blank"
+				rel="noopener noreferrer"
+				class="inline-flex items-center gap-2 rounded-lg border border-neon-red/50 bg-neon-red/10 px-6 py-3 font-medium text-neon-red transition-all duration-300 hover:bg-neon-red/20 hover:shadow-[0_0_25px_rgba(255,51,102,0.3)]"
+			>
+				<Heart class="h-5 w-5" />
+				Support Us
+			</a>
+		</div>
 	</div>
 </div>