dzinesco
dbf4b11e81
Major fixes and improvements: - Fixed edit event button functionality with proper event handlers and DOM ready state checking - Added status column to tickets table via Supabase migration to resolve 500 API errors - Updated stats API to correctly calculate revenue from decimal price values - Resolved authentication redirect loops by fixing cookie configuration for Docker environment - Fixed Permissions-Policy header syntax errors - Added comprehensive debugging and error handling for event management - Implemented modal-based event editing with form validation and API integration - Enhanced event data loading with proper error handling and user feedback 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
98 lines
34 KiB
HTML
98 lines
34 KiB
HTML
<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="description" content="Professional ticketing platform for events"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="generator" content="Astro v5.11.0"><title>Black Canyon Tickets - Premium Event Ticketing Platform</title><!-- Critical theme initialization - prevents FOUC --><script>
|
|
(function() {
|
|
// Get theme immediately - no localStorage check to avoid blocking
|
|
const savedTheme = (function() {
|
|
try {
|
|
return localStorage.getItem('theme') ||
|
|
(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
|
} catch (e) {
|
|
return 'dark';
|
|
}
|
|
})();
|
|
|
|
// Apply theme immediately to prevent flash
|
|
document.documentElement.setAttribute('data-theme', savedTheme);
|
|
document.documentElement.classList.add(savedTheme);
|
|
|
|
// Store for later use
|
|
window.__INITIAL_THEME__ = savedTheme;
|
|
})();
|
|
</script><!-- CSS is imported via the global style block below --><link rel="stylesheet" href="/_astro/_customSlug_.CaN76IU0.css">
|
|
<link rel="stylesheet" href="/_astro/login-new.CDrbLgUF.css">
|
|
<style>.glassmorphism[data-astro-cid-dslh5wa4]{background:var(--glass-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--glass-border);box-shadow:0 8px 32px var(--glass-shadow-lg)}html{scroll-behavior:smooth}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.animate-pulse[data-astro-cid-j7pv25f6]{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.delay-1000[data-astro-cid-j7pv25f6]{animation-delay:1s}.delay-500[data-astro-cid-j7pv25f6]{animation-delay:.5s}
|
|
</style></head> <body class="min-h-screen flex flex-col"> <!-- Skip Links for Accessibility --> <a href="#main-content" class="skip-link">Skip to main content</a> <a href="#navigation" class="skip-link">Skip to navigation</a> <div class="flex-1"> <main id="main-content" tabindex="-1"> <div class="min-h-screen relative overflow-hidden" data-astro-cid-j7pv25f6> <!-- Premium Hero Background with Animated Gradients --> <div class="absolute inset-0" style="background: var(--bg-gradient);" data-astro-cid-j7pv25f6> <!-- Animated Background Elements --> <div class="absolute inset-0 opacity-30" data-astro-cid-j7pv25f6> <!-- Large flowing orbs --> <div class="absolute top-16 left-16 w-80 h-80 rounded-full blur-3xl animate-float" style="background: var(--bg-orb-1); animation-duration: 20s;" data-astro-cid-j7pv25f6></div> <div class="absolute bottom-16 right-16 w-96 h-96 rounded-full blur-3xl animate-float" style="background: var(--bg-orb-2); animation-duration: 25s; animation-delay: -5s;" data-astro-cid-j7pv25f6></div> <div class="absolute top-1/3 right-1/4 w-72 h-72 rounded-full blur-3xl animate-float" style="background: var(--bg-orb-3); animation-duration: 18s; animation-delay: -10s;" data-astro-cid-j7pv25f6></div> <div class="absolute bottom-1/3 left-1/4 w-64 h-64 rounded-full blur-3xl animate-float" style="background: var(--bg-orb-4); animation-duration: 22s; animation-delay: -15s;" data-astro-cid-j7pv25f6></div> <div class="absolute top-2/3 left-1/2 w-56 h-56 rounded-full blur-3xl animate-float" style="background: var(--bg-orb-5); animation-duration: 16s; animation-delay: -8s;" data-astro-cid-j7pv25f6></div> <!-- Smaller accent orbs --> <div class="absolute top-1/4 left-3/4 w-32 h-32 rounded-full blur-2xl animate-pulse" style="background: var(--bg-orb-1); animation-duration: 3s;" data-astro-cid-j7pv25f6></div> <div class="absolute bottom-1/4 left-1/3 w-24 h-24 rounded-full blur-2xl animate-pulse" style="background: var(--bg-orb-2); animation-duration: 4s; animation-delay: -1s;" data-astro-cid-j7pv25f6></div> <div class="absolute top-3/4 right-1/3 w-40 h-40 rounded-full blur-2xl animate-pulse" style="background: var(--bg-orb-3); animation-duration: 5s; animation-delay: -2s;" data-astro-cid-j7pv25f6></div> </div> <!-- Geometric Patterns --> <div class="absolute inset-0" style="opacity: var(--grid-opacity, 0.1);" data-astro-cid-j7pv25f6> <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" data-astro-cid-j7pv25f6> <defs data-astro-cid-j7pv25f6> <!-- Fine grid pattern --> <pattern id="grid" width="3" height="3" patternUnits="userSpaceOnUse" data-astro-cid-j7pv25f6> <path d="M 3 0 L 0 0 0 3" fill="none" stroke="currentColor" stroke-width="0.2" style="color: var(--grid-pattern);" data-astro-cid-j7pv25f6></path> </pattern> <!-- Dots pattern --> <pattern id="dots" width="8" height="8" patternUnits="userSpaceOnUse" data-astro-cid-j7pv25f6> <circle cx="4" cy="4" r="0.5" fill="currentColor" style="color: var(--grid-pattern); opacity: 0.3;" data-astro-cid-j7pv25f6></circle> </pattern> <!-- Diagonal lines --> <pattern id="diagonals" width="10" height="10" patternUnits="userSpaceOnUse" data-astro-cid-j7pv25f6> <path d="M 0 10 L 10 0" stroke="currentColor" stroke-width="0.1" style="color: var(--grid-pattern); opacity: 0.2;" data-astro-cid-j7pv25f6></path> </pattern> </defs> <rect width="100" height="100" fill="url(#grid)" data-astro-cid-j7pv25f6></rect> <rect width="100" height="100" fill="url(#dots)" data-astro-cid-j7pv25f6></rect> <rect width="100" height="100" fill="url(#diagonals)" data-astro-cid-j7pv25f6></rect> </svg> </div> <!-- Premium geometric shapes --> <div class="absolute inset-0 opacity-10" data-astro-cid-j7pv25f6> <div class="absolute top-1/4 left-1/4 w-2 h-2 bg-purple-400 rounded-full animate-ping" style="animation-duration: 4s;" data-astro-cid-j7pv25f6></div> <div class="absolute top-3/4 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-ping" style="animation-duration: 6s; animation-delay: -2s;" data-astro-cid-j7pv25f6></div> <div class="absolute bottom-1/4 left-3/4 w-1.5 h-1.5 bg-indigo-400 rounded-full animate-ping" style="animation-duration: 5s; animation-delay: -4s;" data-astro-cid-j7pv25f6></div> <!-- Floating geometric shapes --> <div class="absolute top-1/3 right-1/5 w-8 h-8 border border-purple-300 rounded rotate-45 animate-spin" style="animation-duration: 30s;" data-astro-cid-j7pv25f6></div> <div class="absolute bottom-1/3 left-1/6 w-6 h-6 border border-blue-300 rounded-full animate-spin" style="animation-duration: 25s; animation-direction: reverse;" data-astro-cid-j7pv25f6></div> <div class="absolute top-2/3 right-2/5 w-4 h-4 bg-gradient-to-r from-purple-400 to-blue-400 rounded-sm animate-bounce" style="animation-duration: 8s;" data-astro-cid-j7pv25f6></div> </div> </div> <!-- Navigation --> <header class="absolute top-0 left-0 right-0 z-10 backdrop-blur-xl" style="background: var(--glass-bg); border-bottom: 1px solid var(--glass-border);"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between h-20"> <!-- Logo and Branding --> <div class="flex items-center space-x-8"> <a href="/" class="flex items-center space-x-2"> <img src="/images/logo.png" alt="Black Canyon Tickets" class="h-8 drop-shadow-lg" style="filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));"> <span class="text-xl font-light" style="color: var(--glass-text-primary);"> <span class="font-bold">Black Canyon</span> Tickets
|
|
</span> </a> <!-- Clean Navigation --> </div> <!-- Right side actions --> <div class="flex items-center space-x-4"> <!-- Mobile menu button --> <!-- Clean Action buttons --> <a href="/login-new" class="text-sm font-medium transition-colors duration-200" style="color: var(--glass-text-secondary);">
|
|
Login
|
|
</a> <a href="/login-new" class="backdrop-blur-lg px-6 py-2.5 rounded-xl text-sm font-semibold transition-all duration-200" style="background: var(--glass-bg-button); color: var(--glass-text-primary); border: 1px solid var(--glass-border);">
|
|
Create Events
|
|
</a> </div> </div> <!-- Clean Mobile Navigation --> </div> </header> <!-- Hero Section --> <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-32 pb-24 lg:pt-40 lg:pb-32" data-astro-cid-j7pv25f6> <div class="text-center" data-astro-cid-j7pv25f6> <!-- Badge --> <div class="inline-flex items-center px-4 py-2 rounded-full backdrop-blur-lg mb-8" style="background: var(--glass-bg); border: 1px solid var(--glass-border);" data-astro-cid-j7pv25f6> <span class="text-sm font-medium flex items-center gap-2" style="color: var(--glass-text-secondary);" data-astro-cid-j7pv25f6> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-j7pv25f6> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" data-astro-cid-j7pv25f6></path> </svg>
|
|
Premium Event Ticketing Platform
|
|
</span> </div> <!-- Main Heading --> <h1 class="text-5xl lg:text-7xl font-light mb-6 tracking-tight" style="color: var(--glass-text-primary);" data-astro-cid-j7pv25f6>
|
|
Premium Ticketing for
|
|
<span class="font-bold" style="color: var(--glass-text-accent);" data-astro-cid-j7pv25f6>
|
|
Colorado's Elite
|
|
</span> </h1> <!-- Subheading --> <p class="text-xl lg:text-2xl mb-12 max-w-3xl mx-auto leading-relaxed" style="color: var(--glass-text-secondary);" data-astro-cid-j7pv25f6>
|
|
Elegant self-service platform designed for upscale venues, prestigious events, and discerning organizers
|
|
</p> <!-- CTA Buttons --> <div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12" data-astro-cid-j7pv25f6> <a href="/login-new" class="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-8 py-4 rounded-xl font-semibold text-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-200 transform hover:scale-105 hover:shadow-xl" data-astro-cid-j7pv25f6>
|
|
Start Selling Tickets
|
|
</a> <a href="/calendar" class="backdrop-blur-xl px-8 py-4 rounded-xl font-semibold text-lg transition-all duration-200 transform hover:scale-105" style="background: var(--glass-bg-button); border: 1px solid var(--glass-border); color: var(--glass-text-primary);" data-astro-cid-j7pv25f6>
|
|
View Events
|
|
</a> </div> <!-- Feature Points --> <div class="flex flex-wrap justify-center gap-6 text-sm" style="color: var(--glass-text-tertiary);" data-astro-cid-j7pv25f6> <span class="flex items-center" data-astro-cid-j7pv25f6> <span class="w-2 h-2 rounded-full mr-2" style="background: var(--glass-text-accent);" data-astro-cid-j7pv25f6></span>
|
|
No setup fees
|
|
</span> <span class="flex items-center" data-astro-cid-j7pv25f6> <span class="w-2 h-2 rounded-full mr-2" style="background: var(--glass-text-accent);" data-astro-cid-j7pv25f6></span>
|
|
Instant payouts
|
|
</span> <span class="flex items-center" data-astro-cid-j7pv25f6> <span class="w-2 h-2 rounded-full mr-2" style="background: var(--glass-text-accent);" data-astro-cid-j7pv25f6></span>
|
|
Mobile-first design
|
|
</span> </div> </div> </div> <!-- Features Section --> <section id="features" class="relative z-10 py-20 lg:py-32" data-astro-cid-j7pv25f6> <div class="container mx-auto px-4" data-astro-cid-j7pv25f6> <div class="text-center mb-16" data-astro-cid-j7pv25f6> <h3 class="text-3xl lg:text-5xl font-light mb-6" style="color: var(--glass-text-primary);" data-astro-cid-j7pv25f6>
|
|
Why Choose
|
|
<span class="font-bold" style="color: var(--glass-text-accent);" data-astro-cid-j7pv25f6>
|
|
Black Canyon
|
|
</span> </h3> <p class="text-lg max-w-2xl mx-auto" style="color: var(--glass-text-secondary);" data-astro-cid-j7pv25f6>
|
|
Built specifically for Colorado's premium venues and high-end events
|
|
</p> </div> <!-- Feature Tiles Grid --> <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto" data-astro-cid-j7pv25f6> <!-- Quick Setup Tile --> <div class="group backdrop-blur-lg rounded-xl p-6 text-center transition-all duration-300 hover:transform hover:scale-105" style="background: var(--glass-bg-lg); border: 1px solid var(--glass-border);" data-astro-cid-j7pv25f6> <div class="w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-4" style="background: var(--glass-text-accent);" data-astro-cid-j7pv25f6> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" data-astro-cid-j7pv25f6> <path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z" data-astro-cid-j7pv25f6></path> </svg> </div> <h4 class="text-xl font-semibold mb-2" style="color: var(--glass-text-primary);" data-astro-cid-j7pv25f6>Quick Setup</h4> <p class="text-sm mb-4" style="color: var(--glass-text-tertiary);" data-astro-cid-j7pv25f6>
|
|
Create professional events in minutes with our intuitive dashboard
|
|
</p> <button class="font-medium text-sm transition-colors" style="color: var(--glass-text-accent);" data-astro-cid-j7pv25f6>
|
|
Learn More
|
|
</button> </div> <!-- Real Experience Tile --> <div class="group backdrop-blur-lg rounded-xl p-6 text-center transition-all duration-300 hover:transform hover:scale-105" style="background: var(--glass-bg-lg); border: 1px solid var(--glass-border);" data-astro-cid-j7pv25f6> <div class="w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-4" style="background: var(--success-color);" data-astro-cid-j7pv25f6> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-j7pv25f6> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" data-astro-cid-j7pv25f6></path> </svg> </div> <h4 class="text-xl font-semibold mb-2" style="color: var(--glass-text-primary);" data-astro-cid-j7pv25f6>Built by Event Pros</h4> <p class="text-sm mb-4" style="color: var(--glass-text-tertiary);" data-astro-cid-j7pv25f6>
|
|
Created by people who've actually worked ticket gates and run events
|
|
</p> <button class="font-medium text-sm transition-colors" style="color: var(--glass-text-accent);" data-astro-cid-j7pv25f6>
|
|
Learn More
|
|
</button> </div> <!-- Analytics Tile --> <div class="group backdrop-blur-lg rounded-xl p-6 text-center transition-all duration-300 hover:transform hover:scale-105" style="background: var(--glass-bg-lg); border: 1px solid var(--glass-border);" data-astro-cid-j7pv25f6> <div class="w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-4" style="background: var(--premium-gold);" data-astro-cid-j7pv25f6> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-j7pv25f6> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" data-astro-cid-j7pv25f6></path> </svg> </div> <h4 class="text-xl font-semibold mb-2" style="color: var(--glass-text-primary);" data-astro-cid-j7pv25f6>Live Analytics</h4> <p class="text-sm mb-4" style="color: var(--glass-text-tertiary);" data-astro-cid-j7pv25f6>
|
|
Real-time sales tracking with comprehensive reporting
|
|
</p> <button class="font-medium text-sm transition-colors" style="color: var(--glass-text-accent);" data-astro-cid-j7pv25f6>
|
|
Learn More
|
|
</button> </div> <!-- Human Support Tile --> <div class="group backdrop-blur-lg rounded-xl p-6 text-center transition-all duration-300 hover:transform hover:scale-105" style="background: var(--glass-bg-lg); border: 1px solid var(--glass-border);" data-astro-cid-j7pv25f6> <div class="w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-4" style="background: var(--warning-color);" data-astro-cid-j7pv25f6> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-j7pv25f6> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" data-astro-cid-j7pv25f6></path> </svg> </div> <h4 class="text-xl font-semibold mb-2" style="color: var(--glass-text-primary);" data-astro-cid-j7pv25f6>Real Human Support</h4> <p class="text-sm mb-4" style="color: var(--glass-text-tertiary);" data-astro-cid-j7pv25f6>
|
|
Actual humans help you before and during your event
|
|
</p> <button class="font-medium text-sm transition-colors" style="color: var(--glass-text-accent);" data-astro-cid-j7pv25f6>
|
|
Get Help
|
|
</button> </div> </div> </div> </section> <!-- Competitive Comparison Section --> <section class="relative py-16 lg:py-24 overflow-hidden" data-astro-cid-dslh5wa4> <!-- Background gradients --> <div class="absolute inset-0" style="background: var(--bg-gradient);" data-astro-cid-dslh5wa4></div> <div class="absolute inset-0" style="background: linear-gradient(to right, var(--bg-orb-2), var(--bg-orb-1), var(--bg-orb-2));" data-astro-cid-dslh5wa4></div> <!-- Glassmorphism overlay --> <div class="absolute inset-0 backdrop-blur-sm" style="background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1), transparent);" data-astro-cid-dslh5wa4></div> <div class="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8" data-astro-cid-dslh5wa4> <!-- Header --> <div class="text-center mb-16" data-astro-cid-dslh5wa4> <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full backdrop-blur-sm mb-6" style="background: var(--glass-bg); border: 1px solid var(--glass-border);" data-astro-cid-dslh5wa4> <span class="text-sm font-medium" style="color: var(--glass-text-accent);" data-astro-cid-dslh5wa4>Built by Event Professionals</span> </div> <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-6" style="color: var(--glass-text-primary);" data-astro-cid-dslh5wa4>
|
|
Why We're Better Than
|
|
<span class="text-transparent bg-clip-text" style="background-image: linear-gradient(to right, var(--glass-text-accent), var(--glass-text-accent));" data-astro-cid-dslh5wa4>
|
|
The Other Guys
|
|
</span> </h2> <p class="text-xl max-w-3xl mx-auto leading-relaxed" style="color: var(--glass-text-secondary);" data-astro-cid-dslh5wa4>
|
|
Built by people who've actually run gates — not just coded them.
|
|
Experience real ticketing without the headaches.
|
|
</p> </div> <!-- Comparison Grid --> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8 mb-16" data-astro-cid-dslh5wa4> <!-- Built from Experience --> <div class="glassmorphism p-6 lg:p-8 rounded-2xl hover:scale-105 transition-all duration-300" data-astro-cid-dslh5wa4> <div class="flex items-center gap-3 mb-4" data-astro-cid-dslh5wa4> <div class="w-12 h-12 rounded-full flex items-center justify-center" style="background: var(--success-bg);" data-astro-cid-dslh5wa4> <svg class="w-6 h-6" style="color: var(--success-color);" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-dslh5wa4> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" data-astro-cid-dslh5wa4></path> </svg> </div> <h3 class="text-xl font-semibold" style="color: var(--glass-text-primary);" data-astro-cid-dslh5wa4>Built by Event Pros</h3> </div> <div class="space-y-3" data-astro-cid-dslh5wa4> <div class="flex items-start gap-3" data-astro-cid-dslh5wa4> <span class="font-bold text-sm" style="color: var(--success-color);" data-astro-cid-dslh5wa4>✅ US:</span> <span class="text-sm" style="color: var(--glass-text-secondary);" data-astro-cid-dslh5wa4>Created by actual event professionals who've worked ticket gates</span> </div> <div class="flex items-start gap-3" data-astro-cid-dslh5wa4> <span class="font-bold text-sm" style="color: var(--error-color);" data-astro-cid-dslh5wa4>❌ THEM:</span> <span class="text-sm" style="color: var(--glass-text-tertiary);" data-astro-cid-dslh5wa4>Built by disconnected tech teams who've never run an event</span> </div> </div> </div> <!-- Faster Payouts --> <div class="glassmorphism p-6 lg:p-8 rounded-2xl hover:scale-105 transition-all duration-300" data-astro-cid-dslh5wa4> <div class="flex items-center gap-3 mb-4" data-astro-cid-dslh5wa4> <div class="w-12 h-12 rounded-full flex items-center justify-center" style="background: var(--success-bg);" data-astro-cid-dslh5wa4> <svg class="w-6 h-6" style="color: var(--success-color);" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-dslh5wa4> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" data-astro-cid-dslh5wa4></path> </svg> </div> <h3 class="text-xl font-semibold" style="color: var(--glass-text-primary);" data-astro-cid-dslh5wa4>Instant Payouts</h3> </div> <div class="space-y-3" data-astro-cid-dslh5wa4> <div class="flex items-start gap-3" data-astro-cid-dslh5wa4> <span class="font-bold text-sm" style="color: var(--success-color);" data-astro-cid-dslh5wa4>✅ US:</span> <span class="text-sm" style="color: var(--glass-text-secondary);" data-astro-cid-dslh5wa4">Stripe deposits go straight to you — no delays or fund holds</span> </div> <div class="flex items-start gap-3" data-astro-cid-dslh5wa4> <span class="font-bold text-sm" style="color: var(--error-color);" data-astro-cid-dslh5wa4">❌ THEM:</span> <span class="text-sm" style="color: var(--glass-text-tertiary);" data-astro-cid-dslh5wa4">Hold your money for days or weeks before releasing funds</span> </div> </div> </div> <!-- Transparent Fees --> <div class="glassmorphism p-6 lg:p-8 rounded-2xl hover:scale-105 transition-all duration-300" data-astro-cid-dslh5wa4> <div class="flex items-center gap-3 mb-4" data-astro-cid-dslh5wa4> <div class="w-12 h-12 rounded-full flex items-center justify-center" style="background: var(--success-bg);" data-astro-cid-dslh5wa4> <svg class="w-6 h-6" style="color: var(--success-color);" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-dslh5wa4> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" data-astro-cid-dslh5wa4></path> </svg> </div> <h3 class="text-xl font-semibold" style="color: var(--glass-text-primary);" data-astro-cid-dslh5wa4>No Hidden Fees</h3> </div> <div class="space-y-3" data-astro-cid-dslh5wa4> <div class="flex items-start gap-3" data-astro-cid-dslh5wa4> <span class="font-bold text-sm" style="color: var(--success-color);" data-astro-cid-dslh5wa4>✅ US:</span> <span class="text-sm" style="color: var(--glass-text-secondary);" data-astro-cid-dslh5wa4">Flat $1.50 + 2.5% per ticket. Stripe's fee is separate and visible</span> </div> <div class="flex items-start gap-3" data-astro-cid-dslh5wa4> <span class="font-bold text-sm" style="color: var(--error-color);" data-astro-cid-dslh5wa4">❌ THEM:</span> <span class="text-sm" style="color: var(--glass-text-tertiary);" data-astro-cid-dslh5wa4">Hidden platform fees, surprise charges, and confusing pricing</span> </div> </div> </div> <!-- Modern Platform --> <div class="glassmorphism p-6 lg:p-8 rounded-2xl hover:scale-105 transition-all duration-300" data-astro-cid-dslh5wa4> <div class="flex items-center gap-3 mb-4" data-astro-cid-dslh5wa4> <div class="w-12 h-12 rounded-full flex items-center justify-center" style="background: var(--success-bg);" data-astro-cid-dslh5wa4> <svg class="w-6 h-6" style="color: var(--success-color);" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-dslh5wa4> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" data-astro-cid-dslh5wa4></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" data-astro-cid-dslh5wa4></path> </svg> </div> <h3 class="text-xl font-semibold" style="color: var(--glass-text-primary);" data-astro-cid-dslh5wa4>Modern Technology</h3> </div> <div class="space-y-3" data-astro-cid-dslh5wa4> <div class="flex items-start gap-3" data-astro-cid-dslh5wa4> <span class="font-bold text-sm" style="color: var(--success-color);" data-astro-cid-dslh5wa4">✅ US:</span> <span class="text-sm" style="color: var(--glass-text-secondary);" data-astro-cid-dslh5wa4">Custom-built from scratch based on real-world event needs</span> </div> <div class="flex items-start gap-3" data-astro-cid-dslh5wa4> <span class="font-bold text-sm" style="color: var(--error-color);" data-astro-cid-dslh5wa4">❌ THEM:</span> <span class="text-sm" style="color: var(--glass-text-tertiary);" data-astro-cid-dslh5wa4">Bloated, recycled platforms with outdated interfaces</span> </div> </div> </div> <!-- Hands-On Support --> <div class="glassmorphism p-6 lg:p-8 rounded-2xl hover:scale-105 transition-all duration-300" data-astro-cid-dslh5wa4> <div class="flex items-center gap-3 mb-4" data-astro-cid-dslh5wa4> <div class="w-12 h-12 rounded-full flex items-center justify-center" style="background: var(--success-bg);" data-astro-cid-dslh5wa4> <svg class="w-6 h-6" style="color: var(--success-color);" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-dslh5wa4> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z" data-astro-cid-dslh5wa4></path> </svg> </div> <h3 class="text-xl font-semibold" style="color: var(--glass-text-primary);" data-astro-cid-dslh5wa4>Real Human Support</h3> </div> <div class="space-y-3" data-astro-cid-dslh5wa4> <div class="flex items-start gap-3" data-astro-cid-dslh5wa4> <span class="font-bold text-sm" style="color: var(--success-color);" data-astro-cid-dslh5wa4">✅ US:</span> <span class="text-sm" style="color: var(--glass-text-secondary);" data-astro-cid-dslh5wa4">Real humans help you before and during your event</span> </div> <div class="flex items-start gap-3" data-astro-cid-dslh5wa4> <span class="font-bold text-sm" style="color: var(--error-color);" data-astro-cid-dslh5wa4">❌ THEM:</span> <span class="text-sm" style="color: var(--glass-text-tertiary);" data-astro-cid-dslh5wa4">Outsourced support desks and endless ticket systems</span> </div> </div> </div> <!-- Performance & Reliability --> <div class="glassmorphism p-6 lg:p-8 rounded-2xl hover:scale-105 transition-all duration-300" data-astro-cid-dslh5wa4> <div class="flex items-center gap-3 mb-4" data-astro-cid-dslh5wa4> <div class="w-12 h-12 rounded-full flex items-center justify-center" style="background: var(--success-bg);" data-astro-cid-dslh5wa4> <svg class="w-6 h-6" style="color: var(--success-color);" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-dslh5wa4> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" data-astro-cid-dslh5wa4></path> </svg> </div> <h3 class="text-xl font-semibold" style="color: var(--glass-text-primary);" data-astro-cid-dslh5wa4">Rock-Solid Reliability</h3> </div> <div class="space-y-3" data-astro-cid-dslh5wa4> <div class="flex items-start gap-3" data-astro-cid-dslh5wa4> <span class="font-bold text-sm" style="color: var(--success-color);" data-astro-cid-dslh5wa4">✅ US:</span> <span class="text-sm" style="color: var(--glass-text-secondary);" data-astro-cid-dslh5wa4">Built for upscale events with enterprise-grade performance</span> </div> <div class="flex items-start gap-3" data-astro-cid-dslh5wa4> <span class="font-bold text-sm" style="color: var(--error-color);" data-astro-cid-dslh5wa4">❌ THEM:</span> <span class="text-sm" style="color: var(--glass-text-tertiary);" data-astro-cid-dslh5wa4">Crashes during sales rushes when you need them most</span> </div> </div> </div> </div> <!-- Call to Action --> <div class="text-center" data-astro-cid-dslh5wa4> <div class="inline-flex flex-col sm:flex-row gap-4" data-astro-cid-dslh5wa4> <a href="/login-new" class="inline-flex items-center justify-center px-8 py-4 font-semibold rounded-xl transition-all duration-300 transform hover:scale-105 hover:shadow-lg" style="background: linear-gradient(to right, rgb(37, 99, 235), rgb(147, 51, 234)); color: var(--glass-text-primary);" onmouseenter="this.style.background='linear-gradient(to right, rgb(29, 78, 216), rgb(126, 34, 206))'" onmouseleave="this.style.background='linear-gradient(to right, rgb(37, 99, 235), rgb(147, 51, 234))'" data-astro-cid-dslh5wa4> <span data-astro-cid-dslh5wa4>Switch to Black Canyon</span> <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-dslh5wa4> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" data-astro-cid-dslh5wa4></path> </svg> </a> <a href="/pricing" class="inline-flex items-center justify-center px-8 py-4 backdrop-blur-sm font-semibold rounded-xl transition-all duration-300" style="background: var(--glass-bg); color: var(--glass-text-primary); border: 1px solid var(--glass-border);" onmouseenter="this.style.background='var(--glass-bg-lg)'" onmouseleave="this.style.background='var(--glass-bg)'" data-astro-cid-dslh5wa4>
|
|
Compare Fees
|
|
</a> </div> <p class="text-sm mt-4" style="color: var(--glass-text-tertiary);" data-astro-cid-dslh5wa4>
|
|
Ready to experience real ticketing? Join event professionals who trust Black Canyon for their premium events.
|
|
</p> </div> </div> </section> </div> </main> </div> <!-- Footer --> <footer class="relative backdrop-blur-xl border-t" style="background: var(--glass-bg); border-color: var(--glass-border);"> <div class="max-w-7xl mx-auto px-4 py-16 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> <!-- Company Info --> <div class="md:col-span-2"> <div class="flex items-center space-x-2 mb-4"> <img src="/images/logo.png" alt="Black Canyon Tickets" class="h-8"> <span class="text-xl font-bold" style="color: var(--glass-text-primary);">Black Canyon Tickets</span> </div> <p class="text-sm mb-4 max-w-md" style="color: var(--glass-text-secondary);">
|
|
Premium ticketing platform designed for Colorado's upscale venues and prestigious events. Built by event professionals for event professionals.
|
|
</p> <div class="flex space-x-4"> <!-- Social Links --> <a href="#" class="hover:opacity-75 transition-opacity" style="color: var(--glass-text-tertiary);"> <span class="sr-only">Twitter</span> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> <path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84"></path> </svg> </a> <a href="#" class="hover:opacity-75 transition-opacity" style="color: var(--glass-text-tertiary);"> <span class="sr-only">LinkedIn</span> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z" clip-rule="evenodd"></path> </svg> </a> </div> </div> <!-- Quick Links --> <div> <h3 class="text-sm font-semibold mb-4" style="color: var(--glass-text-primary);">Platform</h3> <ul class="space-y-2"> <li><a href="/features" class="text-sm hover:opacity-75 transition-opacity" style="color: var(--glass-text-secondary);">Features</a></li> <li><a href="/pricing" class="text-sm hover:opacity-75 transition-opacity" style="color: var(--glass-text-secondary);">Pricing</a></li> <li><a href="/security" class="text-sm hover:opacity-75 transition-opacity" style="color: var(--glass-text-secondary);">Security</a></li> <li><a href="/api" class="text-sm hover:opacity-75 transition-opacity" style="color: var(--glass-text-secondary);">API</a></li> </ul> </div> <!-- Support --> <div> <h3 class="text-sm font-semibold mb-4" style="color: var(--glass-text-primary);">Support</h3> <ul class="space-y-2"> <li><a href="/help" class="text-sm hover:opacity-75 transition-opacity" style="color: var(--glass-text-secondary);">Help Center</a></li> <li><a href="/contact" class="text-sm hover:opacity-75 transition-opacity" style="color: var(--glass-text-secondary);">Contact Us</a></li> <li><a href="/status" class="text-sm hover:opacity-75 transition-opacity" style="color: var(--glass-text-secondary);">Status</a></li> <li><a href="/community" class="text-sm hover:opacity-75 transition-opacity" style="color: var(--glass-text-secondary);">Community</a></li> </ul> </div> </div> <!-- Bottom Section --> <div class="border-t pt-8 mt-8" style="border-color: var(--glass-border);"> <div class="flex flex-col md:flex-row justify-between items-center"> <p class="text-sm" style="color: var(--glass-text-tertiary);">
|
|
© 2024 Black Canyon Tickets. All rights reserved.
|
|
</p> <div class="flex space-x-6 mt-4 md:mt-0"> <a href="/privacy" class="text-sm hover:opacity-75 transition-opacity" style="color: var(--glass-text-tertiary);">Privacy Policy</a> <a href="/terms" class="text-sm hover:opacity-75 transition-opacity" style="color: var(--glass-text-tertiary);">Terms of Service</a> <a href="/cookies" class="text-sm hover:opacity-75 transition-opacity" style="color: var(--glass-text-tertiary);">Cookie Policy</a> </div> </div> </div> </div> </footer> <!-- Theme toggle script and other global scripts can be added here --> <script>
|
|
// Theme utilities for components
|
|
window.theme = {
|
|
get: () => document.documentElement.getAttribute('data-theme') || 'dark',
|
|
set: (theme) => {
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
document.documentElement.classList.remove('light', 'dark');
|
|
document.documentElement.classList.add(theme);
|
|
localStorage.setItem('theme', theme);
|
|
},
|
|
toggle: () => {
|
|
const current = window.theme.get();
|
|
window.theme.set(current === 'dark' ? 'light' : 'dark');
|
|
}
|
|
};
|
|
</script> </body></html> |