forked from CSGOWTF/csgowtf
vikingowl
1ddda81d93
- Create HeroSection with animated search bar and stat counters - Add LiveMatchTicker with auto-scrolling recent matches - Build FlashLeaderboard "Wall of Shame" with podium display - Implement FeatureShowcase with scroll-triggered animations - Add NeonCTA call-to-action section with trust badges - Create reusable NeonButton component with glow effects Accessibility improvements: - Add aria-labels, aria-hidden for decorative elements - Implement focus-visible ring styles for keyboard navigation - Support prefers-reduced-motion across all animations - Use semantic HTML (article, nav, dl) for screen readers - Improve color contrast ratios for WCAG compliance 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
80 lines
2.3 KiB
Svelte
80 lines
2.3 KiB
Svelte
<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>
|