feat: Modularize event management system - 98.7% reduction in main file size
BREAKING CHANGES: - Refactored monolithic manage.astro (7,623 lines) into modular architecture - Original file backed up as manage-old.astro NEW ARCHITECTURE: ✅ 5 Utility Libraries: - event-management.ts: Event data operations & formatting - ticket-management.ts: Ticket CRUD operations & sales data - seating-management.ts: Seating map management & layout generation - sales-analytics.ts: Sales metrics, reporting & data export - marketing-kit.ts: Marketing asset generation & social media ✅ 5 Shared Components: - TicketTypeModal.tsx: Reusable ticket type creation/editing - SeatingMapModal.tsx: Advanced seating map editor with drag-and-drop - EmbedCodeModal.tsx: Widget embedding with customization - OrdersTable.tsx: Comprehensive orders table with sorting/pagination - AttendeesTable.tsx: Attendee management with export capabilities ✅ 11 Tab Components: - TicketsTab.tsx: Ticket management with card/list views - VenueTab.tsx: Seating map management & venue configuration - OrdersTab.tsx: Sales data & order management - AttendeesTab.tsx: Attendee check-in & management - PresaleTab.tsx: Presale code generation & tracking - DiscountTab.tsx: Discount code management - AddonsTab.tsx: Add-on product management - PrintedTab.tsx: Printed ticket barcode management - SettingsTab.tsx: Event configuration & custom fields - MarketingTab.tsx: Marketing kit with social media templates - PromotionsTab.tsx: Campaign & promotion management ✅ 4 Infrastructure Components: - TabNavigation.tsx: Responsive tab navigation system - EventManagement.tsx: Main orchestration component - EventHeader.astro: Event information header - QuickStats.astro: Statistics dashboard BENEFITS: - 98.7% reduction in main file size (7,623 → ~100 lines) - Dramatic improvement in maintainability and team collaboration - Component-level testing now possible - Reusable components across multiple features - Lazy loading support for better performance - Full TypeScript support with proper interfaces - Separation of concerns: business logic separated from UI 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
200
src/components/ComparisonSection.astro
Normal file
200
src/components/ComparisonSection.astro
Normal file
@@ -0,0 +1,200 @@
|
||||
---
|
||||
// ComparisonSection.astro - Competitive advantage comparison section
|
||||
---
|
||||
|
||||
<section class="relative py-16 lg:py-24 overflow-hidden">
|
||||
<!-- Background gradients -->
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900"></div>
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-blue-900/20 via-purple-900/20 to-blue-900/20"></div>
|
||||
|
||||
<!-- Glassmorphism overlay -->
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-black/10 to-transparent backdrop-blur-sm"></div>
|
||||
|
||||
<div class="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<!-- Header -->
|
||||
<div class="text-center mb-16">
|
||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 mb-6">
|
||||
<span class="text-blue-400 text-sm font-medium">Built by Event Professionals</span>
|
||||
</div>
|
||||
|
||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-6">
|
||||
Why We're Better Than
|
||||
<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400">
|
||||
The Other Guys
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<p class="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
|
||||
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">
|
||||
|
||||
<!-- Built from Experience -->
|
||||
<div class="glassmorphism p-6 lg:p-8 rounded-2xl hover:scale-105 transition-all duration-300">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-12 h-12 rounded-full bg-green-500/20 flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<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"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-white">Built by Event Pros</h3>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="text-green-400 font-bold text-sm">✅ US:</span>
|
||||
<span class="text-gray-300 text-sm">Created by actual event professionals who've worked ticket gates</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="text-red-400 font-bold text-sm">❌ THEM:</span>
|
||||
<span class="text-gray-400 text-sm">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">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-12 h-12 rounded-full bg-green-500/20 flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-white">Instant Payouts</h3>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="text-green-400 font-bold text-sm">✅ US:</span>
|
||||
<span class="text-gray-300 text-sm">Stripe deposits go straight to you — no delays or fund holds</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="text-red-400 font-bold text-sm">❌ THEM:</span>
|
||||
<span class="text-gray-400 text-sm">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">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-12 h-12 rounded-full bg-green-500/20 flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<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"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-white">No Hidden Fees</h3>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="text-green-400 font-bold text-sm">✅ US:</span>
|
||||
<span class="text-gray-300 text-sm">Flat $1.50 + 2.5% per ticket. Stripe's fee is separate and visible</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="text-red-400 font-bold text-sm">❌ THEM:</span>
|
||||
<span class="text-gray-400 text-sm">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">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-12 h-12 rounded-full bg-green-500/20 flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<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"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-white">Modern Technology</h3>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="text-green-400 font-bold text-sm">✅ US:</span>
|
||||
<span class="text-gray-300 text-sm">Custom-built from scratch based on real-world event needs</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="text-red-400 font-bold text-sm">❌ THEM:</span>
|
||||
<span class="text-gray-400 text-sm">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">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-12 h-12 rounded-full bg-green-500/20 flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<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"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-white">Real Human Support</h3>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="text-green-400 font-bold text-sm">✅ US:</span>
|
||||
<span class="text-gray-300 text-sm">Real humans help you before and during your event</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="text-red-400 font-bold text-sm">❌ THEM:</span>
|
||||
<span class="text-gray-400 text-sm">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">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-12 h-12 rounded-full bg-green-500/20 flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<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"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-white">Rock-Solid Reliability</h3>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="text-green-400 font-bold text-sm">✅ US:</span>
|
||||
<span class="text-gray-300 text-sm">Built for upscale events with enterprise-grade performance</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="text-red-400 font-bold text-sm">❌ THEM:</span>
|
||||
<span class="text-gray-400 text-sm">Crashes during sales rushes when you need them most</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Call to Action -->
|
||||
<div class="text-center">
|
||||
<div class="inline-flex flex-col sm:flex-row gap-4">
|
||||
<a href="/login" class="inline-flex items-center justify-center px-8 py-4 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold rounded-xl hover:from-blue-600 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 hover:shadow-lg">
|
||||
<span>Switch to Black Canyon</span>
|
||||
<svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="/pricing" class="inline-flex items-center justify-center px-8 py-4 bg-white/10 backdrop-blur-sm text-white font-semibold rounded-xl border border-white/20 hover:bg-white/20 transition-all duration-300">
|
||||
Compare Fees
|
||||
</a>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm mt-4">
|
||||
Ready to experience real ticketing? Join event professionals who've made the switch.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.glassmorphism {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user