style: Redesign about page with neon esports aesthetic
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>
This commit is contained in:
@@ -1,87 +1,174 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Github, Heart, Code, Zap } from 'lucide-svelte';
|
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>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
<title>About - teamflash.rip</title>
|
<title>About - teamflash.rip</title>
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<div class="container mx-auto max-w-4xl px-4 py-12">
|
<div class="relative min-h-screen bg-void">
|
||||||
<h1 class="mb-8 text-4xl font-bold">About teamflash.rip</h1>
|
<!-- Decorative Background -->
|
||||||
|
<div class="pointer-events-none absolute inset-0 overflow-hidden">
|
||||||
<Card padding="lg" class="mb-8">
|
<!-- Blur orbs -->
|
||||||
<h2 class="mb-4 text-2xl font-semibold">Our Mission</h2>
|
<div class="absolute -left-40 top-20 h-80 w-80 rounded-full bg-neon-blue/10 blur-[100px]"></div>
|
||||||
<p class="mb-4 text-base-content/80">
|
<div
|
||||||
teamflash.rip is a free and open-source platform for analyzing Counter-Strike 2 matchmaking
|
class="absolute -right-40 top-40 h-80 w-80 rounded-full bg-neon-purple/10 blur-[100px]"
|
||||||
matches. We're on a mission to expose every teammate who ever threw a flashbang backwards.
|
></div>
|
||||||
</p>
|
<div
|
||||||
<p class="text-base-content/80">
|
class="absolute bottom-20 left-1/2 h-60 w-60 rounded-full bg-neon-gold/5 blur-[80px]"
|
||||||
Originally created for CS:GO, we've completely rewritten the platform to support CS2 with
|
></div>
|
||||||
modern technologies and the ability to track exactly who ruined your retake with a poorly
|
<!-- Grid pattern -->
|
||||||
timed flash.
|
<div
|
||||||
</p>
|
class="absolute inset-0 opacity-20"
|
||||||
</Card>
|
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 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>
|
</div>
|
||||||
|
|
||||||
<Card padding="lg" class="mb-8">
|
<!-- Content -->
|
||||||
<h2 class="mb-4 text-2xl font-semibold">Technology Stack</h2>
|
<div class="container relative z-10 mx-auto max-w-4xl px-4 py-12">
|
||||||
<div class="grid gap-4 md:grid-cols-2">
|
<!-- Page Header -->
|
||||||
<div>
|
<h1
|
||||||
<h3 class="mb-2 font-semibold text-primary">Frontend</h3>
|
class="mb-8 text-4xl font-bold text-white"
|
||||||
<ul class="space-y-1 text-sm text-base-content/80">
|
style="text-shadow: 0 0 30px rgba(0, 212, 255, 0.5);"
|
||||||
<li>• SvelteKit 2.0 + Svelte 5</li>
|
>
|
||||||
<li>• TypeScript (Strict Mode)</li>
|
About teamflash.rip
|
||||||
<li>• Tailwind CSS + DaisyUI</li>
|
</h1>
|
||||||
<li>• Vitest + Playwright</li>
|
|
||||||
</ul>
|
<!-- 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>
|
||||||
<div>
|
|
||||||
<h3 class="mb-2 font-semibold text-secondary">Backend</h3>
|
<div
|
||||||
<ul class="space-y-1 text-sm text-base-content/80">
|
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)]"
|
||||||
<li>• Go + Gin Framework</li>
|
>
|
||||||
<li>• PostgreSQL Database</li>
|
<Heart
|
||||||
<li>• Redis Cache</li>
|
class="mb-3 h-8 w-8 text-neon-red"
|
||||||
<li>• Demo Parser (flash crime evidence collector)</li>
|
style="filter: drop-shadow(0 0 8px rgba(255, 51, 102, 0.5));"
|
||||||
</ul>
|
/>
|
||||||
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
|
||||||
|
|
||||||
<div class="flex justify-center gap-4">
|
<!-- Technology Stack Card -->
|
||||||
<Button variant="primary" href="https://somegit.dev/CSGOWTF/csgowtf">
|
<div class="mb-8 rounded-xl border border-white/10 bg-void-light p-6">
|
||||||
<Github class="mr-2 h-5 w-5" />
|
<h2
|
||||||
View on GitHub
|
class="mb-4 text-2xl font-semibold text-white"
|
||||||
</Button>
|
style="text-shadow: 0 0 15px rgba(0, 212, 255, 0.3);"
|
||||||
<Button variant="secondary" href="https://liberapay.com/CSGOWTF/">
|
>
|
||||||
<Heart class="mr-2 h-5 w-5" />
|
Technology Stack
|
||||||
Support Us
|
</h2>
|
||||||
</Button>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user