tyler/blackcanyontickets
1
0
Fork 0
Code Issues 8 Pull Requests Packages Projects Releases Wiki Activity

Initial commit - Black Canyon Tickets whitelabel platform

Browse Source 
🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
dzinesco
2025-07-08 12:31:31 -06:00
commit 997c129383
139 changed files with 60476 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
src/pages/404.astro Normal file
View File

@@ -0,0 +1,223 @@
---
import Layout from '../layouts/Layout.astro';
import PublicHeader from '../components/PublicHeader.astro';
---
<Layout title="Page Not Found - Black Canyon Tickets">
<div class="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50/30">
<PublicHeader />
<!-- 404 Hero Section -->
<section class="relative overflow-hidden min-h-screen flex items-center justify-center">
<!-- Animated Background -->
<div class="absolute inset-0 opacity-30">
<div class="absolute top-1/4 left-1/4 w-64 h-64 bg-gradient-to-br from-blue-400 to-purple-500 rounded-full blur-3xl animate-pulse"></div>
<div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-gradient-to-br from-purple-400 to-pink-500 rounded-full blur-3xl animate-pulse delay-1000"></div>
<div class="absolute top-1/2 right-1/3 w-48 h-48 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-full blur-3xl animate-pulse delay-500"></div>
</div>
<!-- Floating Elements -->
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<div class="absolute top-20 left-20 w-8 h-8 bg-blue-200 rounded-full animate-float opacity-60"></div>
<div class="absolute top-40 right-32 w-6 h-6 bg-purple-200 rounded-full animate-float opacity-50" style="animation-delay: 1s;"></div>
<div class="absolute bottom-40 left-1/3 w-10 h-10 bg-pink-200 rounded-full animate-float opacity-40" style="animation-delay: 2s;"></div>
<div class="absolute bottom-20 right-20 w-12 h-12 bg-cyan-200 rounded-full animate-float opacity-70" style="animation-delay: 1.5s;"></div>
</div>
<div class="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<!-- 404 Illustration -->
<div class="mb-12">
<div class="relative inline-block">
<!-- Large 404 Text with Gradient -->
<h1 class="text-[12rem] sm:text-[16rem] lg:text-[20rem] font-black leading-none">
<span class="bg-gradient-to-br from-gray-200 via-gray-300 to-gray-400 bg-clip-text text-transparent drop-shadow-2xl">
404
</span>
</h1>
<!-- Floating Calendar Icon -->
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 animate-bounce">
<div class="w-24 h-24 bg-gradient-to-br from-blue-600 to-purple-600 rounded-2xl shadow-2xl flex items-center justify-center transform rotate-12 hover:rotate-0 transition-transform duration-500">
<svg class="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
</div>
</div>
</div>
</div>
<!-- Error Message -->
<div class="mb-12">
<h2 class="text-4xl lg:text-6xl font-light text-gray-900 mb-6 tracking-tight">
Oops! Event Not Found
</h2>
<p class="text-xl lg:text-2xl text-gray-600 mb-8 max-w-2xl mx-auto leading-relaxed">
It seems like this page decided to skip the party. Let's get you back to where the action is.
</p>
<!-- Search Suggestion -->
<div class="bg-white/70 backdrop-blur-lg border border-white/50 rounded-2xl p-8 shadow-2xl max-w-lg mx-auto mb-8">
<h3 class="text-lg font-semibold text-gray-900 mb-4">Looking for something specific?</h3>
<div class="relative">
<input
type="text"
id="error-search"
placeholder="Search events..."
class="w-full px-4 py-3 pr-12 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
/>
<button
id="error-search-btn"
class="absolute right-2 top-2 p-2 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-200"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- Action Buttons -->
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
<a
href="/calendar"
class="group inline-flex items-center space-x-3 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-8 py-4 rounded-xl font-semibold text-lg shadow-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300"
>
<svg class="w-6 h-6 group-hover:animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
<span>Browse All Events</span>
</a>
<a
href="/"
class="group inline-flex items-center space-x-3 bg-white border-2 border-gray-200 hover:border-gray-300 text-gray-700 hover:text-gray-900 px-8 py-4 rounded-xl font-semibold text-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300"
>
<svg class="w-6 h-6 group-hover:-translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
</svg>
<span>Go Home</span>
</a>
</div>
<!-- Popular Suggestions -->
<div class="max-w-2xl mx-auto">
<h3 class="text-lg font-semibold text-gray-800 mb-6">Or explore these popular sections:</h3>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
<a
href="/calendar?featured=true"
class="group p-4 bg-white/50 backdrop-blur-sm border border-white/50 rounded-xl hover:bg-white/70 hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300"
>
<div class="text-2xl mb-2 group-hover:animate-pulse">⭐</div>
<div class="text-sm font-medium text-gray-700">Featured Events</div>
</a>
<a
href="/calendar?category=music"
class="group p-4 bg-white/50 backdrop-blur-sm border border-white/50 rounded-xl hover:bg-white/70 hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300"
>
<div class="text-2xl mb-2 group-hover:animate-pulse">🎵</div>
<div class="text-sm font-medium text-gray-700">Music</div>
</a>
<a
href="/calendar?category=arts"
class="group p-4 bg-white/50 backdrop-blur-sm border border-white/50 rounded-xl hover:bg-white/70 hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300"
>
<div class="text-2xl mb-2 group-hover:animate-pulse">🎨</div>
<div class="text-sm font-medium text-gray-700">Arts</div>
</a>
<a
href="/calendar?category=community"
class="group p-4 bg-white/50 backdrop-blur-sm border border-white/50 rounded-xl hover:bg-white/70 hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300"
>
<div class="text-2xl mb-2 group-hover:animate-pulse">🤝</div>
<div class="text-sm font-medium text-gray-700">Community</div>
</a>
</div>
</div>
</div>
</section>
</div>
</Layout>
<style>
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse-glow {
0%, 100% {
box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}
50% {
box-shadow: 0 0 40px rgba(59, 130, 246, 0.8);
}
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-fade-in-up {
animation: fadeInUp 0.6s ease-out;
}
.animate-pulse-glow {
animation: pulse-glow 2s ease-in-out infinite;
}
/* Interactive hover effects */
.hover-lift {
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.hover-lift:hover {
transform: translateY(-8px) scale(1.02);
}
</style>
<script>
// Search functionality from 404 page
const errorSearch = document.getElementById('error-search');
const errorSearchBtn = document.getElementById('error-search-btn');
function performSearch() {
const query = errorSearch.value.trim();
if (query) {
window.location.href = `/calendar?search=${encodeURIComponent(query)}`;
}
}
errorSearchBtn?.addEventListener('click', performSearch);
errorSearch?.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
performSearch();
}
});
// Add some interactive animations on page load
document.addEventListener('DOMContentLoaded', () => {
// Animate elements on scroll/load
const animateElements = document.querySelectorAll('.animate-fade-in-up');
animateElements.forEach((el, index) => {
setTimeout(() => {
el.style.animation = `fadeInUp 0.6s ease-out ${index * 0.1}s both`;
}, 100);
});
});
</script>