+ {/* Header */}
+
+
+ Black Canyon Tickets
+
+
+ Premium Glassmorphism Design System
+
+
+
+ {/* Glass Cards Grid */}
+
+ {/* Basic Glass Card */}
+
+
+ Basic Glass Card
+
+
+ Clean glassmorphism effect with backdrop blur and subtle borders.
+
+
+ Learn More
+
+
+
+ {/* Hero Glass Card */}
+
+
+ Hero Glass Card
+
+
+ Enhanced gradient background for featured content.
+
+
+ Get Started
+
+
+
+ {/* Compact Glass Card */}
+
+
+ Compact Card
+
+
+ Smaller variant for lists and dense layouts.
+
+
+
+
+ {/* Button Showcase */}
+
+
Glass Buttons
+
+
+
+
+
+
+
+
+ {/* Form Elements */}
+
+
+ Glass Form Elements
+
+
+
+
+ {/* Status Cards */}
+
+
+
Success
+
+ Operation completed successfully
+
+
+
+
Warning
+
Please check your input
+
+
+
Error
+
Something went wrong
+
+
+
Info
+
Additional information
+
+
+
+ {/* Animation Showcase */}
+
+
+ Animations & Effects
+
+
+
+
+ {/* Typography Showcase */}
+
+
+ Typography System
+
+
+
Heading 1
+
Heading 2
+
Heading 3
+
Heading 4
+
+ Large body text with excellent readability
+
+
+ Regular body text for most content
+
+
+ Small text for captions and secondary information
+
+
Text with golden glow effect
+
+ Premium gradient text
+
+
+
+
+ {/* Color System */}
+
+
Color System
+
+ {/* Glass Colors */}
+
+
+ {/* Gold Colors */}
+
+
+ {/* Sky Colors */}
+
+
+ {/* Violet Colors */}
+
+
+
+
+ {/* Floating Elements */}
+
+
+ {/* Header */}
+
+
+ Design System Documentation
+
+
+ Complete reference for Black Canyon Tickets glassmorphism theme
+
+
+
+ {/* Component Reference */}
+
+
+ Component Reference
+
+
+ {glassComponents.map((component, index) => (
+
+
+
+
+ {component.name}
+
+
{component.description}
+
+ Usage: {component.usage}
+
+
+
+
+ {component.name.includes('button') && (
+ Sample
+ )}
+
+
+
+
+ ))}
+
+
+ {/* Color Tokens */}
+
+ Color Tokens
+
+ {colorTokens.map((category, categoryIndex) => (
+
+
+ {category.category}
+
+
+ {category.tokens.map((token, tokenIndex) => (
+
+
+
+
+
+ {token.name}
+
+
{token.value}
+
{token.usage}
+
+
+
+ ))}
+
+
+ ))}
+
+
+ {/* Animations */}
+
+ Animation System
+
+ {animations.map((animation, index) => (
+
+
+ animate-{animation.name}
+
+
+
{animation.description}
+
+ Duration: {animation.duration}
+ Easing: cubic-bezier
+
+
+
+
+ ))}
+
+
+ {/* Shadows */}
+
+ Shadow System
+
+ {shadows.map((shadow, index) => (
+
+
+ {shadow.name}
+
+
{shadow.usage}
+
+
+ {shadow.value}
+
+
+ ))}
+
+
+ {/* Usage Guidelines */}
+
+ Usage Guidelines
+
+
+
+ ✅ Best Practices
+
+
+ - • Use glass effects sparingly for maximum impact
+ - • Layer glass components for depth hierarchy
+ - • Maintain contrast ratios for accessibility
+ - • Use consistent animation timing
+ - • Apply hover effects for interactive elements
+ - • Use semantic color variants for status
+
+
+
+
+ ❌ Avoid
+
+
+ - • Overusing blur effects on mobile devices
+ - • Mixing different glass opacities randomly
+ - • Applying glass effects to small text
+ - • Using too many competing animations
+ - • Ignoring reduced motion preferences
+ - • Low contrast text on glass backgrounds
+
+
+
+
+ {/* Accessibility */}
+
+
+ Accessibility Features
+
+
+
+
+ Focus Management
+
+
+ All interactive elements include visible focus rings with gold
+ accent colors.
+
+
+
+
+ Contrast Ratios
+
+
+ Text maintains WCAG AA compliance with minimum 4.5:1 contrast
+ ratios.
+
+
+
+
+ Motion Control
+
+
+ Animations respect prefers-reduced-motion user settings.
+
+
+
+
+ {/* Performance Notes */}
+
+
+ Performance Considerations
+
+
+
+ Optimizations Included
+
+
+ - • CSS transforms use GPU acceleration
+ - • Backdrop-filter optimized for modern browsers
+ - • Animation delays prevent simultaneous triggers
+ - • Selective application of expensive effects
+ - • Compressed gradient values for smaller CSS bundle
+
+
+