 Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory : /home/gositeme/domains/soundstudiopro.com/private_html/ |
<?php
session_start();
require_once 'config/database.php';
require_once 'includes/translations.php';
require_once 'config/event_pricing.php';
// Set page variables
$current_page = 'event-pricing';
$page_title = t('event_pricing.page_title');
$page_description = t('event_pricing.page_description');
include 'includes/header.php';
// Get pricing config
$pricing_config = getEventPricingConfig();
$tiers = $pricing_config['pricing_tiers'];
$eventbrite = $pricing_config['eventbrite_comparison'];
// Example calculations for a $50 ticket
$example_ticket_price = 50;
?>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #0a0a0a;
color: #fff;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Touch-friendly improvements */
* {
-webkit-tap-highlight-color: transparent;
}
button, a {
touch-action: manipulation;
}
.particle-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}
/* Reduce particle effects on mobile for better performance */
@media (max-width: 768px) {
.particle-canvas {
opacity: 0.6;
}
}
.content-wrapper {
position: relative;
z-index: 1;
}
.hero-section {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 4rem 2rem;
position: relative;
overflow: hidden;
}
.hero-content {
max-width: 900px;
z-index: 2;
position: relative;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(102, 126, 234, 0.2);
border: 1px solid rgba(102, 126, 234, 0.5);
padding: 0.5rem 1.5rem;
border-radius: 50px;
font-size: 0.9rem;
margin-bottom: 2rem;
backdrop-filter: blur(10px);
animation: pulse 2s ease-in-out infinite;
}
.hero-badge::before {
content: '✨';
font-size: 1.2rem;
animation: sparkle 1.5s ease-in-out infinite;
}
@keyframes sparkle {
0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
50% { transform: scale(1.3) rotate(180deg); opacity: 0.7; }
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.05); }
}
.hero-title {
font-size: clamp(2.5rem, 8vw, 5rem);
font-weight: 800;
margin-bottom: 1.5rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.1;
}
.hero-subtitle {
font-size: clamp(1.1rem, 3vw, 1.5rem);
color: #cbd5e0;
margin-bottom: 3rem;
line-height: 1.6;
}
.hero-cta {
display: inline-flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 1rem 2.5rem;
border-radius: 50px;
font-weight: 600;
font-size: 1.1rem;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
position: relative;
overflow: hidden;
}
.btn-primary::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.btn-primary:hover::before {
width: 300px;
height: 300px;
}
.btn-primary:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.6);
}
.btn-primary span {
position: relative;
z-index: 1;
}
.btn-secondary {
background: transparent;
color: #fff;
padding: 1rem 2.5rem;
border-radius: 50px;
font-weight: 600;
font-size: 1.1rem;
text-decoration: none;
border: 2px solid rgba(102, 126, 234, 0.5);
cursor: pointer;
transition: all 0.3s ease;
}
.btn-secondary:hover {
background: rgba(102, 126, 234, 0.1);
border-color: #667eea;
}
.comparison-badge {
background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
color: white;
padding: 1.5rem 2rem;
border-radius: 20px;
text-align: center;
max-width: 800px;
margin: -3rem auto 4rem;
position: relative;
z-index: 2;
box-shadow: 0 20px 60px rgba(72, 187, 120, 0.3);
}
.comparison-badge h2 {
font-size: clamp(1.5rem, 4vw, 2.5rem);
margin-bottom: 0.5rem;
}
.comparison-badge p {
font-size: 1.1rem;
opacity: 0.95;
}
.section {
padding: 5rem 2rem;
max-width: 1400px;
margin: 0 auto;
}
.section-title {
text-align: center;
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 700;
margin-bottom: 1rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section-subtitle {
text-align: center;
font-size: 1.2rem;
color: #a0aec0;
margin-bottom: 4rem;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 5rem;
}
.pricing-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
padding: 2.5rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.pricing-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.pricing-card:hover {
transform: translateY(-10px);
border-color: rgba(102, 126, 234, 0.5);
box-shadow: 0 20px 60px rgba(102, 126, 234, 0.2);
}
.pricing-card:hover::before {
transform: scaleX(1);
}
.pricing-card.featured {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
border-color: rgba(102, 126, 234, 0.5);
transform: scale(1.05);
}
.pricing-card.featured::before {
transform: scaleX(1);
}
.card-header {
text-align: center;
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.plan-name {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: #fff;
}
.plan-desc {
font-size: 0.95rem;
color: #a0aec0;
}
.fee-list {
margin-bottom: 2rem;
}
.fee-item {
display: flex;
justify-content: space-between;
padding: 1rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.fee-item:last-child {
border-bottom: none;
}
.fee-label {
color: #cbd5e0;
font-size: 1rem;
}
.fee-value {
font-weight: 600;
color: #fff;
font-size: 1.1rem;
}
.fee-total {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 2px solid rgba(102, 126, 234, 0.3);
display: flex;
justify-content: space-between;
align-items: center;
}
.fee-total-label {
font-weight: 700;
font-size: 1.2rem;
color: #fff;
}
.fee-total-value {
font-weight: 700;
font-size: 1.8rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.savings-badge {
text-align: center;
margin-top: 1.5rem;
padding: 1rem;
background: rgba(72, 187, 120, 0.1);
border: 1px solid rgba(72, 187, 120, 0.3);
border-radius: 12px;
}
.savings-badge .label {
font-size: 0.85rem;
color: #a0aec0;
margin-bottom: 0.5rem;
}
.savings-badge .amount {
font-size: 1.5rem;
font-weight: 700;
color: #48bb78;
}
.example-section {
background: rgba(255, 255, 255, 0.03);
border-radius: 32px;
padding: 4rem 2rem;
margin: 5rem 0;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.example-header {
text-align: center;
margin-bottom: 3rem;
}
.example-ticket {
background: rgba(255, 255, 255, 0.05);
border-radius: 24px;
padding: 3rem;
margin-bottom: 2rem;
}
.example-comparison {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-top: 2rem;
}
.example-column {
background: rgba(255, 255, 255, 0.03);
border-radius: 20px;
padding: 2rem;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.example-column h3 {
font-size: 1.3rem;
margin-bottom: 1.5rem;
text-align: center;
}
.example-row {
display: flex;
justify-content: space-between;
padding: 0.75rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
font-size: 1rem;
}
.example-row.total {
margin-top: 1rem;
padding-top: 1rem;
border-top: 2px solid rgba(102, 126, 234, 0.3);
font-weight: 700;
font-size: 1.2rem;
}
.example-savings {
background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
color: white;
padding: 2rem;
border-radius: 20px;
text-align: center;
margin-top: 2rem;
}
.example-savings .label {
font-size: 1rem;
opacity: 0.9;
margin-bottom: 0.5rem;
}
.example-savings .amount {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 0.5rem;
}
/* Fee Payment Options Section */
.fee-options-section {
margin: 6rem 0;
padding: 0 2rem;
}
.fee-options-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.fee-option-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.fee-option-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
border-color: rgba(102, 126, 234, 0.5);
}
.fee-option-header {
padding: 2rem;
text-align: center;
color: white;
position: relative;
overflow: hidden;
}
.fee-option-header.attendee-pays {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.fee-option-header.organizer-absorbs {
background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
}
.option-icon {
font-size: 3rem;
margin-bottom: 1rem;
display: inline-block;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.fee-option-header h3 {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 0.5rem;
text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.option-subtitle {
font-size: 0.95rem;
opacity: 0.95;
text-shadow: 0 1px 5px rgba(0,0,0,0.2);
}
.fee-option-body {
padding: 2rem;
}
.option-example {
margin-bottom: 1.5rem;
}
.example-label {
font-size: 0.9rem;
color: #a0aec0;
margin-bottom: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.example-breakdown {
background: rgba(255, 255, 255, 0.03);
border-radius: 12px;
padding: 1rem;
}
.breakdown-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
font-size: 0.95rem;
}
.breakdown-row:last-child {
border-bottom: none;
}
.breakdown-row.total {
margin-top: 0.5rem;
padding-top: 0.75rem;
border-top: 2px solid rgba(102, 126, 234, 0.3);
font-weight: 700;
font-size: 1.1rem;
}
.breakdown-row.profit {
margin-top: 0.5rem;
padding-top: 0.75rem;
border-top: 2px solid rgba(72, 187, 120, 0.3);
font-weight: 700;
font-size: 1.1rem;
color: #48bb78;
}
.fee-highlight {
font-weight: 700;
color: #f59e0b;
}
.total-amount {
font-weight: 800;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.profit-amount-green {
font-weight: 800;
color: #48bb78;
font-size: 1.3rem;
}
.option-benefits {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.benefit-item {
padding: 0.75rem 0;
color: #cbd5e0;
font-size: 0.95rem;
}
.fee-options-note {
margin-top: 3rem;
padding: 1.5rem;
background: rgba(102, 126, 234, 0.1);
border: 1px solid rgba(102, 126, 234, 0.3);
border-radius: 16px;
text-align: center;
}
.fee-options-note p {
color: #cbd5e0;
font-size: 1rem;
margin: 0;
}
.comparison-table-wrapper {
background: rgba(255, 255, 255, 0.03);
border-radius: 32px;
padding: 4rem 2rem;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.comparison-table {
width: 100%;
border-collapse: collapse;
margin-top: 2rem;
}
.comparison-table th,
.comparison-table td {
padding: 1.5rem;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.comparison-table th {
background: rgba(102, 126, 234, 0.1);
font-weight: 700;
font-size: 1.1rem;
color: #fff;
}
.comparison-table td {
color: #cbd5e0;
font-size: 1rem;
}
.comparison-table tr:last-child td {
border-bottom: none;
}
.comparison-table .better {
color: #48bb78;
font-weight: 700;
}
.comparison-table .worse {
color: #f56565;
}
.final-cta {
text-align: center;
padding: 6rem 2rem;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
border-radius: 32px;
margin: 5rem 0;
border: 1px solid rgba(102, 126, 234, 0.3);
}
.final-cta h2 {
font-size: clamp(2rem, 5vw, 3.5rem);
margin-bottom: 1rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.final-cta p {
font-size: 1.3rem;
color: #cbd5e0;
margin-bottom: 2.5rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Real Event Examples Section */
.examples-section {
margin: 6rem 0;
padding: 0 2rem;
}
.examples-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.event-example-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.6s ease forwards;
}
.event-example-card[data-animate-delay] {
animation-delay: calc(var(--delay, 0) * 1s);
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.event-example-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
border-color: rgba(102, 126, 234, 0.5);
}
.event-example-header {
padding: 2rem;
text-align: center;
color: white;
position: relative;
overflow: hidden;
}
.event-example-header::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
50% { transform: translate(-50%, -50%) rotate(180deg); }
}
.event-icon {
font-size: 4rem;
margin-bottom: 1rem;
display: inline-block;
animation: bounce 2s ease-in-out infinite;
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}
@keyframes bounce {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-10px) scale(1.1); }
}
.event-example-header h3 {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 0.5rem;
text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.event-example-header p {
font-size: 0.95rem;
opacity: 0.95;
text-shadow: 0 1px 5px rgba(0,0,0,0.2);
}
.event-example-body {
padding: 2rem;
}
.event-ticket-price {
text-align: center;
padding: 1.5rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 16px;
margin-bottom: 1.5rem;
border: 2px solid rgba(102, 126, 234, 0.2);
transition: all 0.3s ease;
}
.event-example-card:hover .event-ticket-price {
border-color: rgba(102, 126, 234, 0.5);
background: rgba(102, 126, 234, 0.1);
transform: scale(1.05);
}
.price-label {
display: block;
font-size: 0.9rem;
color: #a0aec0;
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.price-value {
display: block;
font-size: 2.5rem;
font-weight: 800;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.event-fees-breakdown {
margin-bottom: 1.5rem;
}
.fee-breakdown-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
margin-bottom: 0.75rem;
background: rgba(255, 255, 255, 0.03);
border-radius: 12px;
border-left: 3px solid #48bb78;
transition: all 0.3s ease;
}
.fee-breakdown-row.competitor {
border-left-color: #f56565;
opacity: 0.7;
}
.fee-breakdown-row:hover {
background: rgba(255, 255, 255, 0.08);
transform: translateX(5px);
}
.fee-breakdown-row span:first-child {
color: #cbd5e0;
font-size: 0.95rem;
}
.fee-amount {
font-weight: 700;
font-size: 1.2rem;
color: #fff;
}
.fee-breakdown-row.competitor .fee-amount {
color: #f56565;
}
.event-savings {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
background: linear-gradient(135deg, rgba(72, 187, 120, 0.15) 0%, rgba(56, 161, 105, 0.15) 100%);
border: 2px solid rgba(72, 187, 120, 0.3);
border-radius: 16px;
margin-bottom: 1.5rem;
animation: pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 20px rgba(72, 187, 120, 0.2); }
50% { box-shadow: 0 0 30px rgba(72, 187, 120, 0.4); }
}
.savings-icon {
font-size: 3rem;
animation: wiggle 1s ease-in-out infinite;
}
@keyframes wiggle {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-5deg); }
75% { transform: rotate(5deg); }
}
.savings-content {
flex: 1;
}
.savings-label {
display: block;
font-size: 0.85rem;
color: #a0aec0;
margin-bottom: 0.25rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.savings-amount {
display: block;
font-size: 2rem;
font-weight: 800;
color: #48bb78;
text-shadow: 0 2px 10px rgba(72, 187, 120, 0.3);
}
.event-attendee-pays {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.25rem;
background: rgba(102, 126, 234, 0.1);
border-radius: 12px;
border: 1px solid rgba(102, 126, 234, 0.3);
}
.event-attendee-pays span:first-child {
color: #cbd5e0;
font-size: 1rem;
font-weight: 600;
}
.attendee-amount {
font-size: 1.5rem;
font-weight: 800;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.event-organizer-profit {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
border: 2px solid rgba(102, 126, 234, 0.4);
border-radius: 16px;
margin-top: 1rem;
animation: profit-pulse 2s ease-in-out infinite;
}
@keyframes profit-pulse {
0%, 100% {
box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
transform: scale(1);
}
50% {
box-shadow: 0 0 30px rgba(102, 126, 234, 0.5);
transform: scale(1.02);
}
}
.profit-icon {
font-size: 3rem;
animation: money-bounce 2s ease-in-out infinite;
}
@keyframes money-bounce {
0%, 100% { transform: rotate(0deg) scale(1); }
25% { transform: rotate(-10deg) scale(1.1); }
75% { transform: rotate(10deg) scale(1.1); }
}
.profit-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.profit-label {
font-size: 0.85rem;
color: #a0aec0;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}
.profit-amount {
font-size: 2.2rem;
font-weight: 800;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
line-height: 1;
}
.profit-note {
font-size: 0.75rem;
color: #48bb78;
font-weight: 600;
margin-top: 0.25rem;
}
/* Enhanced animations for existing elements */
.pricing-card {
opacity: 0;
transform: translateY(20px);
animation: slideInUp 0.6s ease forwards;
}
.pricing-card:nth-child(1) { animation-delay: 0.1s; }
.pricing-card:nth-child(2) { animation-delay: 0.2s; }
.pricing-card:nth-child(3) { animation-delay: 0.3s; }
.pricing-card:nth-child(4) { animation-delay: 0.4s; }
.pricing-card:nth-child(5) { animation-delay: 0.5s; }
@keyframes slideInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.example-section {
opacity: 0;
animation: fadeIn 0.8s ease 0.6s forwards;
}
@keyframes fadeIn {
to { opacity: 1; }
}
.comparison-table-wrapper {
opacity: 0;
animation: fadeIn 0.8s ease 0.8s forwards;
}
.final-cta {
opacity: 0;
animation: fadeIn 0.8s ease 1s forwards;
}
/* Scroll-triggered animations */
@media (prefers-reduced-motion: no-preference) {
.event-example-card {
opacity: 0;
transform: translateY(50px) scale(0.95);
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.event-example-card.animate-in {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Mobile Responsive Styles */
@media (max-width: 768px) {
.hero-section {
min-height: 70vh;
padding: 2rem 1rem;
}
.hero-content {
padding: 0 1rem;
}
.hero-title {
font-size: 2rem;
margin-bottom: 1rem;
}
.hero-subtitle {
font-size: 1rem;
margin-bottom: 2rem;
}
.hero-badge {
font-size: 0.8rem;
padding: 0.4rem 1rem;
margin-bottom: 1.5rem;
}
.hero-cta {
flex-direction: column;
gap: 1rem;
width: 100%;
}
.btn-primary,
.btn-secondary {
width: 100%;
padding: 0.9rem 2rem;
font-size: 1rem;
}
.comparison-badge {
margin: -2rem 1rem 3rem;
padding: 1.25rem 1.5rem;
}
.comparison-badge h2 {
font-size: 1.3rem;
}
.comparison-badge p {
font-size: 0.95rem;
}
.section {
padding: 3rem 1rem;
}
.section-title {
font-size: 1.8rem;
margin-bottom: 0.75rem;
}
.section-subtitle {
font-size: 1rem;
margin-bottom: 2.5rem;
padding: 0 1rem;
}
.pricing-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
margin-bottom: 3rem;
}
.pricing-card {
padding: 1.75rem;
border-radius: 20px;
}
.pricing-card.featured {
transform: scale(1);
}
.plan-name {
font-size: 1.5rem;
}
.plan-desc {
font-size: 0.85rem;
}
.fee-item {
padding: 0.75rem 0;
font-size: 0.9rem;
}
.fee-value {
font-size: 1rem;
}
.fee-total-value {
font-size: 1.5rem;
}
.savings-badge {
padding: 0.75rem;
}
.savings-badge .amount {
font-size: 1.2rem;
}
.example-section {
padding: 2.5rem 1rem;
margin: 3rem 0;
border-radius: 24px;
}
.example-ticket {
padding: 2rem 1.5rem;
border-radius: 20px;
}
.example-comparison {
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: 1.5rem;
}
.example-column {
padding: 1.5rem;
border-radius: 16px;
}
.example-column h3 {
font-size: 1.1rem;
margin-bottom: 1rem;
}
.example-row {
padding: 0.6rem 0;
font-size: 0.9rem;
}
.example-row.total {
font-size: 1rem;
margin-top: 0.75rem;
padding-top: 0.75rem;
}
.example-savings {
padding: 1.5rem;
margin-top: 1.5rem;
}
.example-savings .amount {
font-size: 2rem;
}
.examples-section {
margin: 4rem 0;
padding: 0 1rem;
}
.examples-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: 2rem;
}
.fee-options-section {
margin: 4rem 0;
padding: 0 1rem;
}
.fee-options-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: 2rem;
}
.fee-option-card {
margin-bottom: 1.5rem;
}
.fee-option-header {
padding: 1.5rem;
}
.option-icon {
font-size: 2.5rem;
}
.fee-option-header h3 {
font-size: 1.5rem;
}
.fee-option-body {
padding: 1.5rem;
}
.event-example-card {
border-radius: 20px;
}
.event-example-header {
padding: 1.5rem;
}
.event-icon {
font-size: 3rem;
margin-bottom: 0.75rem;
}
.event-example-header h3 {
font-size: 1.5rem;
margin-bottom: 0.4rem;
}
.event-example-header p {
font-size: 0.85rem;
}
.event-example-body {
padding: 1.5rem;
}
.event-ticket-price {
padding: 1.25rem;
margin-bottom: 1.25rem;
}
.price-label {
font-size: 0.8rem;
}
.price-value {
font-size: 2rem;
}
.fee-breakdown-row {
padding: 0.75rem;
margin-bottom: 0.6rem;
}
.fee-breakdown-row span:first-child {
font-size: 0.85rem;
}
.fee-amount {
font-size: 1.1rem;
}
.event-savings {
padding: 1.25rem;
margin-bottom: 1.25rem;
flex-direction: column;
text-align: center;
gap: 0.75rem;
}
.savings-icon {
font-size: 2.5rem;
}
.savings-amount {
font-size: 1.75rem;
}
.event-attendee-pays {
padding: 1rem;
flex-direction: column;
text-align: center;
gap: 0.5rem;
}
.event-attendee-pays span:first-child {
font-size: 0.9rem;
}
.attendee-amount {
font-size: 1.3rem;
}
.event-organizer-profit {
padding: 1.25rem;
flex-direction: column;
text-align: center;
gap: 0.75rem;
margin-top: 0.75rem;
}
.profit-icon {
font-size: 2.5rem;
}
.profit-amount {
font-size: 1.75rem;
}
.profit-label {
font-size: 0.8rem;
}
.profit-note {
font-size: 0.7rem;
}
.comparison-table-wrapper {
padding: 2.5rem 1rem;
border-radius: 24px;
overflow-x: auto;
}
.comparison-table {
min-width: 600px;
font-size: 0.85rem;
}
.comparison-table th,
.comparison-table td {
padding: 1rem 0.75rem;
font-size: 0.85rem;
}
.comparison-table th {
font-size: 0.9rem;
}
.final-cta {
padding: 4rem 1.5rem;
margin: 3rem 0;
border-radius: 24px;
}
.final-cta h2 {
font-size: 1.8rem;
margin-bottom: 0.75rem;
}
.final-cta p {
font-size: 1rem;
margin-bottom: 2rem;
}
.final-cta > div:first-child {
font-size: 3rem;
}
}
/* Small mobile devices */
@media (max-width: 480px) {
.hero-section {
min-height: 60vh;
padding: 1.5rem 0.75rem;
}
.hero-title {
font-size: 1.75rem;
}
.hero-subtitle {
font-size: 0.95rem;
}
.section {
padding: 2rem 0.75rem;
}
.section-title {
font-size: 1.5rem;
}
.section-subtitle {
font-size: 0.9rem;
}
.pricing-card {
padding: 1.5rem;
}
.event-example-header {
padding: 1.25rem;
}
.event-example-body {
padding: 1.25rem;
}
.price-value {
font-size: 1.75rem;
}
.savings-amount {
font-size: 1.5rem;
}
.comparison-table {
min-width: 500px;
font-size: 0.8rem;
}
.comparison-table th,
.comparison-table td {
padding: 0.75rem 0.5rem;
font-size: 0.8rem;
}
}
/* Tablet responsive */
@media (min-width: 769px) and (max-width: 1024px) {
.pricing-grid {
grid-template-columns: repeat(2, 1fr);
}
.examples-grid {
grid-template-columns: repeat(2, 1fr);
}
.section {
padding: 4rem 1.5rem;
}
}
/* Improve scrolling on mobile */
@media (max-width: 768px) {
.comparison-table-wrapper {
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.comparison-table-wrapper::-webkit-scrollbar {
height: 6px;
}
.comparison-table-wrapper::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
}
.comparison-table-wrapper::-webkit-scrollbar-thumb {
background: rgba(102, 126, 234, 0.5);
border-radius: 10px;
}
}
</style>
<canvas class="particle-canvas" id="pricingParticles"></canvas>
<div class="content-wrapper">
<!-- Hero Section -->
<section class="hero-section">
<div class="hero-content">
<div class="hero-badge"><?= t('event_pricing.comparison_title') ?></div>
<h1 class="hero-title"><?= t('event_pricing.hero_title') ?></h1>
<p class="hero-subtitle"><?= t('event_pricing.hero_subtitle') ?></p>
<div class="hero-cta">
<a href="/events.php" class="btn-primary"><span><?= t('event_pricing.create_event') ?> 🎉</span></a>
<a href="/subscribe.php" class="btn-secondary"><?= t('event_pricing.upgrade_plan') ?> ⬆️</a>
</div>
</div>
</section>
<div class="section">
<div class="comparison-badge">
<h2><?= t('event_pricing.comparison_message') ?></h2>
<p><?= t('event_pricing.comparison_title') ?></p>
</div>
<!-- Pricing Tiers -->
<h2 class="section-title"><?= t('event_pricing.pricing_tiers') ?></h2>
<p class="section-subtitle"><?= t('event_pricing.choose_plan') ?></p>
<div class="pricing-grid">
<?php foreach ($tiers as $tier_key => $tier):
$example_fees = calculateEventTicketFees($example_ticket_price, $tier_key, false, false);
$eventbrite_fees = ($example_ticket_price * ($eventbrite['eventbrite_service_fee'] / 100)) + $eventbrite['eventbrite_fixed_fee'] + ($example_ticket_price * ($eventbrite['eventbrite_payment_processing'] / 100));
$savings = $eventbrite_fees - $example_fees['total_fees'];
?>
<div class="pricing-card <?= $tier_key === 'pro' ? 'featured' : '' ?>">
<div class="card-header">
<div class="plan-name"><?= t('event_pricing.tier.' . $tier_key . '.name') ?></div>
<div class="plan-desc"><?= t('event_pricing.tier.' . $tier_key . '.description') ?></div>
</div>
<div class="fee-list">
<div class="fee-item">
<span class="fee-label"><?= t('event_pricing.service_fee') ?></span>
<span class="fee-value"><?= number_format($tier['service_fee_percentage'], 1) ?>% + $<?= number_format($tier['fixed_fee_per_ticket'], 2) ?> <?= t('event_pricing.per_ticket') ?></span>
</div>
<div class="fee-item">
<span class="fee-label"><?= t('event_pricing.payment_processing') ?></span>
<span class="fee-value"><?= number_format($tier['payment_processing_percentage'], 1) ?>%</span>
</div>
<div class="fee-total">
<span class="fee-total-label"><?= t('event_pricing.total_fees') ?></span>
<span class="fee-total-value">$<?= number_format($example_fees['total_fees'], 2) ?></span>
</div>
</div>
<div class="savings-badge">
<div class="label"><?= t('event_pricing.on_ticket') ?> $<?= number_format($example_ticket_price, 0) ?></div>
<div class="amount"><?= t('event_pricing.save') ?> $<?= number_format($savings, 2) ?></div>
</div>
</div>
<?php endforeach; ?>
</div>
<!-- Example Calculations -->
<div class="example-section">
<div class="example-header">
<h2 class="section-title"><?= t('event_pricing.example_title') ?></h2>
<p class="section-subtitle"><?= t('event_pricing.example_subtitle') ?></p>
</div>
<div class="example-ticket">
<div style="text-align: center; margin-bottom: 2rem;">
<div style="font-size: 3rem; font-weight: 800; margin-bottom: 0.5rem;">$<?= number_format($example_ticket_price, 0) ?></div>
<div style="color: #a0aec0;"><?= t('event_pricing.ticket') ?></div>
</div>
<div class="example-comparison">
<div class="example-column">
<h3><?= t('event_pricing.our_platform') ?></h3>
<?php
$our_fees = calculateEventTicketFees($example_ticket_price, 'pro', false, false);
?>
<div class="example-row">
<span><?= t('event_pricing.ticket_price') ?></span>
<span>$<?= number_format($example_ticket_price, 2) ?></span>
</div>
<div class="example-row">
<span><?= t('event_pricing.service_fee') ?> (2.0% + $0.99 <?= t('event_pricing.per_ticket') ?>)</span>
<span>$<?= number_format($our_fees['service_fee'], 2) ?></span>
</div>
<div class="example-row">
<span><?= t('event_pricing.payment_processing') ?> (2.9%)</span>
<span>$<?= number_format($our_fees['payment_processing_fee'], 2) ?></span>
</div>
<div class="example-row total" style="color: #48bb78;">
<span><?= t('event_pricing.attendee_pays') ?></span>
<span>$<?= number_format($our_fees['attendee_pays'], 2) ?></span>
</div>
<div class="example-row total" style="color: #667eea;">
<span><?= t('event_pricing.organizer_receives') ?></span>
<span>$<?= number_format($our_fees['organizer_receives'], 2) ?></span>
</div>
</div>
<div class="example-column">
<h3><?= t('event_pricing.competitor') ?></h3>
<?php
$eb_service = ($example_ticket_price * ($eventbrite['eventbrite_service_fee'] / 100)) + $eventbrite['eventbrite_fixed_fee'];
$eb_processing = $example_ticket_price * ($eventbrite['eventbrite_payment_processing'] / 100);
$eb_total = $eb_service + $eb_processing;
$eb_attendee_pays = $example_ticket_price + $eb_total;
?>
<div class="example-row">
<span><?= t('event_pricing.ticket_price') ?></span>
<span>$<?= number_format($example_ticket_price, 2) ?></span>
</div>
<div class="example-row">
<span><?= t('event_pricing.service_fee') ?> (3.7% + $1.79)</span>
<span>$<?= number_format($eb_service, 2) ?></span>
</div>
<div class="example-row">
<span><?= t('event_pricing.payment_processing') ?> (2.9%)</span>
<span>$<?= number_format($eb_processing, 2) ?></span>
</div>
<div class="example-row total" style="color: #f56565;">
<span><?= t('event_pricing.attendee_pays') ?></span>
<span>$<?= number_format($eb_attendee_pays, 2) ?></span>
</div>
<div class="example-row total" style="color: #cbd5e0;">
<span><?= t('event_pricing.organizer_receives') ?></span>
<span>$<?= number_format($example_ticket_price, 2) ?></span>
</div>
</div>
</div>
<div class="example-savings">
<div class="label"><?= t('event_pricing.you_save') ?></div>
<div class="amount">$<?= number_format($eb_total - $our_fees['total_fees'], 2) ?></div>
<div style="font-size: 1rem; opacity: 0.9;"><?= t('event_pricing.per_ticket') ?></div>
<div style="margin-top: 1rem; font-size: 0.9rem; opacity: 0.8;"><?= t('event_pricing.savings_message') ?></div>
</div>
</div>
</div>
<!-- Real Event Examples -->
<div class="examples-section">
<h2 class="section-title"><?= t('event_pricing.examples.title') ?></h2>
<p class="section-subtitle"><?= t('event_pricing.examples.subtitle') ?></p>
<div class="examples-grid">
<?php
$event_examples = [
[
'icon' => '🎂',
'title' => t('event_pricing.examples.birthday.title'),
'ticket_price' => 25,
'description' => t('event_pricing.examples.birthday.description'),
'color' => '#ff6b9d'
],
[
'icon' => '💒',
'title' => t('event_pricing.examples.wedding.title'),
'ticket_price' => 75,
'description' => t('event_pricing.examples.wedding.description'),
'color' => '#c77dff'
],
[
'icon' => '🎸',
'title' => t('event_pricing.examples.concert.title'),
'ticket_price' => 50,
'description' => t('event_pricing.examples.concert.description'),
'color' => '#667eea'
],
[
'icon' => '🎓',
'title' => t('event_pricing.examples.workshop.title'),
'ticket_price' => 35,
'description' => t('event_pricing.examples.workshop.description'),
'color' => '#48bb78'
],
[
'icon' => '🎪',
'title' => t('event_pricing.examples.festival.title'),
'ticket_price' => 15,
'description' => t('event_pricing.examples.festival.description'),
'color' => '#f59e0b'
],
[
'icon' => '🎭',
'title' => t('event_pricing.examples.theater.title'),
'ticket_price' => 40,
'description' => t('event_pricing.examples.theater.description'),
'color' => '#ec4899'
]
];
foreach ($event_examples as $index => $example):
$pro_fees = calculateEventTicketFees($example['ticket_price'], 'pro', false, false);
$free_fees = calculateEventTicketFees($example['ticket_price'], 'free', false, false);
$eb_service = ($example['ticket_price'] * ($eventbrite['eventbrite_service_fee'] / 100)) + $eventbrite['eventbrite_fixed_fee'];
$eb_processing = $example['ticket_price'] * ($eventbrite['eventbrite_payment_processing'] / 100);
$eb_total = $eb_service + $eb_processing;
$savings = $eb_total - $pro_fees['total_fees'];
?>
<div class="event-example-card" data-animate-delay="<?= $index * 0.1 ?>">
<div class="event-example-header" style="background: linear-gradient(135deg, <?= $example['color'] ?> 0%, <?= $example['color'] ?>dd 100%);">
<div class="event-icon"><?= $example['icon'] ?></div>
<h3><?= $example['title'] ?></h3>
<p><?= $example['description'] ?></p>
</div>
<div class="event-example-body">
<div class="event-ticket-price">
<span class="price-label"><?= t('event_pricing.examples.ticket_price') ?></span>
<span class="price-value">$<?= number_format($example['ticket_price'], 0) ?></span>
</div>
<div class="event-fees-breakdown">
<div class="fee-breakdown-row">
<span><?= t('event_pricing.examples.our_fees') ?></span>
<span class="fee-amount">$<?= number_format($pro_fees['total_fees'], 2) ?></span>
</div>
<div class="fee-breakdown-row competitor">
<span><?= t('event_pricing.examples.other_platforms') ?></span>
<span class="fee-amount">$<?= number_format($eb_total, 2) ?></span>
</div>
</div>
<div class="event-savings">
<div class="savings-icon">💰</div>
<div class="savings-content">
<span class="savings-label"><?= t('event_pricing.examples.you_save') ?></span>
<span class="savings-amount">$<?= number_format($savings, 2) ?></span>
</div>
</div>
<div class="event-attendee-pays">
<span><?= t('event_pricing.examples.attendee_pays') ?></span>
<span class="attendee-amount">$<?= number_format($pro_fees['attendee_pays'], 2) ?></span>
</div>
<div class="event-organizer-profit">
<div class="profit-icon">💵</div>
<div class="profit-content">
<span class="profit-label"><?= t('event_pricing.examples.organizer_receives') ?></span>
<span class="profit-amount">$<?= number_format($pro_fees['organizer_receives'], 2) ?></span>
<span class="profit-note"><?= t('event_pricing.examples.your_profit') ?></span>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<!-- Fee Payment Options -->
<div class="fee-options-section">
<h2 class="section-title"><?= t('event_pricing.fee_options.title') ?></h2>
<p class="section-subtitle"><?= t('event_pricing.fee_options.subtitle') ?></p>
<div class="fee-options-grid">
<?php
$example_price = 50;
$attendee_pays_fees = calculateEventTicketFees($example_price, 'pro', false, false);
$organizer_absorbs_fees = calculateEventTicketFees($example_price, 'pro', false, true);
?>
<div class="fee-option-card">
<div class="fee-option-header attendee-pays">
<div class="option-icon">👥</div>
<h3><?= t('event_pricing.fee_options.attendee_pays.title') ?></h3>
<p class="option-subtitle"><?= t('event_pricing.fee_options.attendee_pays.subtitle') ?></p>
</div>
<div class="fee-option-body">
<div class="option-example">
<div class="example-label"><?= t('event_pricing.fee_options.example') ?> ($<?= number_format($example_price, 0) ?> ticket):</div>
<div class="example-breakdown">
<div class="breakdown-row">
<span><?= t('event_pricing.ticket_price') ?></span>
<span>$<?= number_format($example_price, 2) ?></span>
</div>
<div class="breakdown-row">
<span><?= t('event_pricing.total_fees') ?></span>
<span class="fee-highlight">+$<?= number_format($attendee_pays_fees['total_fees'], 2) ?></span>
</div>
<div class="breakdown-row total">
<span><?= t('event_pricing.examples.attendee_pays') ?></span>
<span class="total-amount">$<?= number_format($attendee_pays_fees['attendee_pays'], 2) ?></span>
</div>
<div class="breakdown-row profit">
<span><?= t('event_pricing.examples.organizer_receives') ?></span>
<span class="profit-amount-green">$<?= number_format($attendee_pays_fees['organizer_receives'], 2) ?></span>
</div>
</div>
</div>
<div class="option-benefits">
<div class="benefit-item">✅ <?= t('event_pricing.fee_options.attendee_pays.benefit1') ?></div>
<div class="benefit-item">✅ <?= t('event_pricing.fee_options.attendee_pays.benefit2') ?></div>
</div>
</div>
</div>
<div class="fee-option-card">
<div class="fee-option-header organizer-absorbs">
<div class="option-icon">🎯</div>
<h3><?= t('event_pricing.fee_options.organizer_absorbs.title') ?></h3>
<p class="option-subtitle"><?= t('event_pricing.fee_options.organizer_absorbs.subtitle') ?></p>
</div>
<div class="fee-option-body">
<div class="option-example">
<div class="example-label"><?= t('event_pricing.fee_options.example') ?> ($<?= number_format($example_price, 0) ?> ticket):</div>
<div class="example-breakdown">
<div class="breakdown-row">
<span><?= t('event_pricing.ticket_price') ?></span>
<span>$<?= number_format($example_price, 2) ?></span>
</div>
<div class="breakdown-row">
<span><?= t('event_pricing.total_fees') ?></span>
<span class="fee-highlight">-$<?= number_format($organizer_absorbs_fees['total_fees'], 2) ?></span>
</div>
<div class="breakdown-row total">
<span><?= t('event_pricing.examples.attendee_pays') ?></span>
<span class="total-amount">$<?= number_format($organizer_absorbs_fees['attendee_pays'], 2) ?></span>
</div>
<div class="breakdown-row profit">
<span><?= t('event_pricing.examples.organizer_receives') ?></span>
<span class="profit-amount-green">$<?= number_format($organizer_absorbs_fees['organizer_receives'], 2) ?></span>
</div>
</div>
</div>
<div class="option-benefits">
<div class="benefit-item">✅ <?= t('event_pricing.fee_options.organizer_absorbs.benefit1') ?></div>
<div class="benefit-item">✅ <?= t('event_pricing.fee_options.organizer_absorbs.benefit2') ?></div>
</div>
</div>
</div>
</div>
<div class="fee-options-note">
<p>💡 <?= t('event_pricing.fee_options.note') ?></p>
</div>
</div>
<!-- Comparison Table -->
<div class="comparison-table-wrapper">
<h2 class="section-title"><?= t('event_pricing.comparison_table_title') ?></h2>
<p class="section-subtitle"><?= t('event_pricing.comparison_table_subtitle') ?></p>
<table class="comparison-table">
<thead>
<tr>
<th><?= t('event_pricing.feature') ?></th>
<th><?= t('event_pricing.soundstudiopro') ?></th>
<th><?= t('event_pricing.competitor') ?></th>
</tr>
</thead>
<tbody>
<tr>
<td><?= t('event_pricing.service_fee') ?></td>
<td class="better">1.5% - 2.5% + $0.99 <?= t('event_pricing.per_ticket') ?></td>
<td class="worse">3.7% + $1.79 <?= t('event_pricing.per_ticket') ?></td>
</tr>
<tr>
<td><?= t('event_pricing.payment_processing') ?></td>
<td>2.9%</td>
<td>2.9%</td>
</tr>
<tr>
<td><?= t('event_pricing.fixed_fee') ?></td>
<td class="better">$0.99 <?= t('event_pricing.per_ticket') ?></td>
<td class="worse">$1.79 <?= t('event_pricing.per_ticket') ?></td>
</tr>
<tr>
<td><?= t('event_pricing.free_events') ?></td>
<td class="better"><?= t('event_pricing.no_fees') ?></td>
<td class="worse"><?= t('event_pricing.still_charged') ?></td>
</tr>
<tr>
<td><?= t('event_pricing.pricing_tiers') ?></td>
<td class="better"><?= t('event_pricing.five_tiers') ?></td>
<td><?= t('event_pricing.standard_rates_only') ?></td>
</tr>
</tbody>
</table>
</div>
<!-- Final CTA -->
<div class="final-cta">
<div style="font-size: 4rem; margin-bottom: 1rem; animation: bounce 2s ease-in-out infinite;">🎊</div>
<h2><?= t('event_pricing.cta_title') ?></h2>
<p><?= t('event_pricing.cta_message') ?></p>
<div class="hero-cta">
<a href="/events.php" class="btn-primary"><span><?= t('event_pricing.create_event') ?> 🚀</span></a>
<a href="/subscribe.php" class="btn-secondary"><?= t('event_pricing.upgrade_plan') ?> ⬆️</a>
</div>
</div>
</div>
</div>
<script>
// Particle System
(function() {
const canvas = document.getElementById('pricingParticles');
if (!canvas) return;
const ctx = canvas.getContext('2d');
let particles = [];
let animationId;
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
class Particle {
constructor() {
this.reset();
this.y = Math.random() * canvas.height;
}
reset() {
this.x = Math.random() * canvas.width;
this.y = -10;
this.size = Math.random() * 3 + 1;
this.speedY = Math.random() * 2 + 0.5;
this.speedX = (Math.random() - 0.5) * 0.5;
this.opacity = Math.random() * 0.5 + 0.2;
this.color = this.getRandomColor();
this.wobble = Math.random() * Math.PI * 2;
this.wobbleSpeed = Math.random() * 0.02 + 0.01;
}
getRandomColor() {
const colors = [
{ r: 102, g: 126, b: 234 }, // #667eea
{ r: 118, g: 75, b: 162 }, // #764ba2
{ r: 240, g: 147, b: 251 }, // #f093fb
{ r: 79, g: 172, b: 254 }, // #4facfe
{ r: 72, g: 187, b: 120 } // #48bb78
];
return colors[Math.floor(Math.random() * colors.length)];
}
update() {
this.y += this.speedY;
this.x += this.speedX + Math.sin(this.wobble) * 0.5;
this.wobble += this.wobbleSpeed;
this.opacity -= 0.002;
if (this.y > canvas.height + 10 || this.opacity <= 0) {
this.reset();
}
}
draw() {
ctx.save();
ctx.globalAlpha = this.opacity;
ctx.fillStyle = `rgb(${this.color.r}, ${this.color.g}, ${this.color.b})`;
ctx.shadowBlur = 20;
ctx.shadowColor = `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, 0.8)`;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
// Add glow effect
ctx.beginPath();
ctx.arc(this.x, this.y, this.size * 2.5, 0, Math.PI * 2);
ctx.fillStyle = `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, 0.15)`;
ctx.fill();
ctx.restore();
}
}
function initParticles() {
// Reduce particles on mobile for better performance
const isMobile = window.innerWidth <= 768;
const baseCount = isMobile ? 40 : 120;
const particleCount = Math.min(baseCount, Math.floor((canvas.width * canvas.height) / (isMobile ? 20000 : 12000)));
particles = [];
for (let i = 0; i < particleCount; i++) {
particles.push(new Particle());
}
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach(particle => {
particle.update();
particle.draw();
});
// Draw connections between nearby particles
ctx.strokeStyle = 'rgba(102, 126, 234, 0.08)';
ctx.lineWidth = 1;
for (let i = 0; i < particles.length; i++) {
for (let j = i + 1; j < particles.length; j++) {
const dx = particles[i].x - particles[j].x;
const dy = particles[i].y - particles[j].y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 120) {
ctx.globalAlpha = (120 - distance) / 120 * 0.15;
ctx.beginPath();
ctx.moveTo(particles[i].x, particles[i].y);
ctx.lineTo(particles[j].x, particles[j].y);
ctx.stroke();
}
}
}
ctx.globalAlpha = 1;
animationId = requestAnimationFrame(animate);
}
initParticles();
animate();
window.addEventListener('resize', () => {
initParticles();
});
})();
// Scroll-triggered animations for event examples
(function() {
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-in');
observer.unobserve(entry.target);
}
});
}, observerOptions);
// Observe all event example cards
document.querySelectorAll('.event-example-card').forEach((card, index) => {
card.style.setProperty('--delay', index * 0.1);
observer.observe(card);
});
// Add hover sound effects (optional, can be removed if not needed)
document.querySelectorAll('.event-example-card').forEach(card => {
card.addEventListener('mouseenter', function() {
this.style.transition = 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)';
});
});
})();
// Add number counting animation for savings
(function() {
const animateValue = (element, start, end, duration) => {
let startTimestamp = null;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
const current = start + (end - start) * progress;
element.textContent = '$' + current.toFixed(2);
if (progress < 1) {
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame(step);
};
const savingsElements = document.querySelectorAll('.savings-amount');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting && !entry.target.dataset.animated) {
const text = entry.target.textContent.replace('$', '');
const value = parseFloat(text);
if (!isNaN(value)) {
entry.target.dataset.animated = 'true';
animateValue(entry.target, 0, value, 1500);
}
}
});
}, { threshold: 0.5 });
savingsElements.forEach(el => observer.observe(el));
})();
</script>
<?php include 'includes/footer.php'; ?>