better hero and menu CTA / move c4p away from the menu / polish UI/UX

kmacedovarela · kmacedovarela · commit 763fa0cc6e08 · 2025-06-16T21:52:01.000-03:00
diff --git a/index.html b/index.html
@@ -26,7 +26,13 @@
       });
       
       gtag('js', new Date());
-      gtag('config', 'G-K4QDNZB9C7');
+      
+      // Basic anonymous config - always runs
+      gtag('config', 'G-K4QDNZB9C7', {
+        'anonymize_ip': true,
+        'allow_google_signals': false,
+        'allow_ad_personalization_signals': false
+      });
     </script>
 
     
@@ -89,8 +95,7 @@
                     <a href="#" onclick="window.scrollTo({top: 0, behavior: 'smooth'}); return false;">Home</a>
                     <a href="#agenda">Agenda</a>
                     <a href="#speakers">Speakers</a>
-                    <a href="https://sessionize.com/sjcelebration-c4p/" target="_blank" rel="noopener">Call for Papers <span class="material-icons">open_in_new</span></a>
-                    <a href="https://soujava.dev/30y-celebration-week" target="_blank" rel="noopener" class="nav-register">Register</a>
+                    <a href="https://soujava.dev/live-celebrationweek" target="_blank" rel="noopener" class="nav-register">Join Now</a>
                 </div>
                 <button class="nav-toggle" aria-label="Toggle navigation">
                     <span>☰</span>
@@ -123,14 +128,10 @@ <h1>#CelebrationWeek for 30y of Java</h1>
                     </div>
                     
                     <div class="cta-buttons">
-                        <a href="https://soujava.dev/30y-celebration-week" 
-                           class="btn btn-primary" 
-                           target="_blank" 
-                           rel="noopener">
-                            Register for Free
-                        </a>
-                        <a href="#agenda" class="btn btn-outline">View Agenda</a>
+                      <a id="primaryCtaButton" href="#" class="btn btn-primary" style="display: none;"></a>
+                      <a id="secondaryCtaButton" href="#" class="btn btn-outline" style="display: none;"></a>
                     </div>
+                    <p class="live-cta-subtext">Access the live streams, agenda, and recordings. Open to all.</p>
                 </div>
                 
                 <!-- Speaker Carousel -->
@@ -207,7 +208,7 @@ <h2 class="section-title">Agenda</h2>
             <div class="container">
                 <div class="section-content">
                     <h2 class="section-title">Featured Speakers</h2>
-                    <p class="section-description">Meet our incredible lineup of Java Champions, experts, and community leaders from around the world.</p>
+                    <p class="section-description">Meet our incredible lineup of Java Champions, experts, and community leaders from around the world. Our program was curated from a public <a href="https://sessionize.com/sjcelebration-c4p/" target="_blank" rel="noopener" class="inline-link">Call for Papers <span class="material-icons inline-link-icon">open_in_new</span></a>, showcasing talent from the global Java community.</p>
                 </div>
                 
                 <div id="speakers-container" class="speakers-grid">
@@ -219,50 +220,39 @@ <h2 class="section-title">Featured Speakers</h2>
             </div>
         </section>
 
-        <!-- CTA Section -->
-        <section class="section cta-section">
-            <div class="container">
-                <div class="section-content">
-                    <h2 class="section-title">Ready to join us?</h2>
-                    <p class="section-description">Don't miss this opportunity to connect with the Java community and celebrate 30 years of innovation.</p>
-                    <div class="cta-button-wrapper">
-                        <a href="https://soujava.dev/30y-celebration-week" 
-                           class="btn btn-primary" 
-                           target="_blank" 
-                           rel="noopener">
-                            Register for Free
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </section>
+
     </main>
 
     <!-- Footer -->
     <footer class="footer">
         <div class="container">
-            <div class="footer-sponsors">
-                <div class="sponsors-section">
+            <div class="footer-content">
+                <!-- Organizer Tier -->
+                <div class="footer-tier footer-organizer">
                     <p class="sponsor-label">Brought to you by</p>
-                    <div class="sponsor-logos">
-                        <a href="https://soujava.org.br" target="_blank" rel="noopener">
-                            <img src="./logos/soujava.png" alt="SouJava" class="sponsor-logo">
-                        </a>
-                    </div>
+                    <a href="https://soujava.org.br" target="_blank" rel="noopener" class="logo-link">
+                        <img src="./logos/soujava.png" alt="SouJava" class="organizer-logo">
+                    </a>
                 </div>
                 
-                <div class="sponsors-section">
+                <!-- Supporter Tier -->
+                <div class="footer-tier footer-supporters">
                     <p class="sponsor-label">Proudly supported by</p>
-                    <div class="sponsor-logos">
-                        <a href="https://aletyx.com" target="_blank" rel="noopener">
-                            <img src="./logos/aletyx.png" alt="Aletyx" class="sponsor-logo">
+                    <div class="supporter-logos">
+                        <a href="https://aletyx.com" target="_blank" rel="noopener" class="logo-link">
+                            <img src="./logos/aletyx.png" alt="Aletyx" class="supporter-logo">
+                        </a>
+                        <a href="https://jakarta.ee" target="_blank" rel="noopener" class="logo-link">
+                            <img src="./logos/jakartaee.png" alt="Jakarta EE" class="supporter-logo">
                         </a>
                     </div>
                 </div>
             </div>
             
             <div class="footer-bottom">
-                <p>&copy; 2025 SouJava. All rights reserved.</p>
+                <p>&copy; 2025 SouJava. All rights reserved. | 
+                   <a href="#" onclick="CookieConsent.showPreferences(); return false;" style="color: var(--text-secondary); text-decoration: underline;">Cookie Settings</a>
+                </p>
             </div>
         </div>
     </footer>
diff --git a/js/cookie-consent.js b/js/cookie-consent.js
@@ -27,10 +27,9 @@ const CookieConsent = {
         banner.innerHTML = `
             <div class="consent-content">
                 <div class="consent-text">
-                    <p><strong>We use cookies to improve your experience</strong></p>
-                    <p>We use analytics cookies to understand how you use our site.
+                    <p>We collect anonymous visitor statistics to improve our event. With your consent, we can also track which sessions and speakers interest you most.
                     <a href="https://policies.google.com/technologies/cookies" target="_blank" rel="noopener">Learn more</a></p>
-                    <p class="consent-legal">By clicking "Accept", you consent to our use of analytics cookies.</p>
+                    <p class="consent-legal">Basic anonymous metrics are always collected. Enhanced tracking requires consent.</p>
                 </div>
                 <div class="consent-buttons">
                     <button class="consent-button consent-reject" onclick="CookieConsent.reject()">Reject</button>
@@ -78,9 +77,6 @@ const CookieConsent = {
                 line-height: 1.4;
             }
             
-            .consent-text p:first-child {
-                display: none;
-            }
             
             .consent-text a {
                 color: #5cb6fa;
@@ -91,7 +87,7 @@ const CookieConsent = {
             .consent-legal {
                 font-size: 0.75rem;
                 opacity: 0.8;
-                display: none;
+                margin-top: 0.25rem;
             }
             
             .consent-buttons {
@@ -189,23 +185,35 @@ const CookieConsent = {
     },
     
     enableAnalytics() {
-        // Initialize analytics only after consent
-        if (window.EventAnalytics && typeof window.EventAnalytics.init === 'function') {
-            window.EventAnalytics.init();
+        // Re-initialize enhanced tracking after consent
+        if (window.EventAnalytics && typeof window.EventAnalytics.initEnhancedTracking === 'function') {
+            window.EventAnalytics.initEnhancedTracking();
         }
         
-        // Fire page view if it hasn't been sent
+        // Update consent mode to allow cookies
         if (typeof gtag !== 'undefined') {
-            gtag('event', 'page_view', {
-                page_location: window.location.href,
-                page_title: document.title
+            gtag('consent', 'update', {
+                'analytics_storage': 'granted'
             });
         }
     },
     
     // Check if user has consented (for use in other scripts)
     canTrack() {
         return this.hasConsent;
+    },
+    
+    // Allow users to change their consent
+    resetConsent() {
+        localStorage.removeItem(this.consentKey);
+        this.hasConsent = false;
+        location.reload();
+    },
+    
+    // Show preferences (can be called from anywhere)
+    showPreferences() {
+        localStorage.removeItem(this.consentKey);
+        this.showBanner();
     }
 };
 
diff --git a/js/event-analytics.js b/js/event-analytics.js
@@ -1,9 +1,23 @@
 /**
  * Event Analytics for Java 30Y Celebration
- * Focused tracking for tech conference KPIs
+ * Two-tier approach: Anonymous metrics + Enhanced tracking with consent
  */
 
 const EventAnalytics = {
+    // Track basic anonymous metrics (no consent needed)
+    trackAnonymousEvent(eventName, parameters = {}) {
+        if (typeof gtag === 'undefined') return;
+        
+        // Only send non-personal, anonymous events
+        const anonymousParams = {
+            ...parameters,
+            'anonymize_ip': true,
+            'allow_google_signals': false,
+            'allow_ad_personalization_signals': false
+        };
+        
+        gtag('event', eventName, anonymousParams);
+    },
     // Track which sessions people are actually interested in
     trackSessionInterest(session) {
         if (typeof gtag === 'undefined' || !CookieConsent.canTrack()) return;
@@ -162,11 +176,37 @@ const EventAnalytics = {
 
     // Initialize all tracking
     init() {
-        // Only initialize if we have consent
-        if (!CookieConsent.canTrack()) {
-            return;
+        // ALWAYS track basic anonymous metrics
+        this.initBasicTracking();
+        
+        // Only initialize enhanced tracking if we have consent
+        if (CookieConsent.canTrack()) {
+            this.initEnhancedTracking();
         }
+    },
+    
+    // Basic anonymous tracking - always runs
+    initBasicTracking() {
+        // Track basic page navigation
+        this.trackAnonymousEvent('page_view', {
+            page_location: window.location.pathname,
+            page_title: document.title
+        });
         
+        // Track registration clicks anonymously
+        document.querySelectorAll('a[href*="soujava.dev/30y-celebration-week"]').forEach(link => {
+            link.addEventListener('click', () => {
+                this.trackAnonymousEvent('registration_intent', {
+                    click_location: link.closest('header') ? 'header' : 
+                                   link.closest('nav') ? 'nav' : 
+                                   link.closest('.cta-section') ? 'cta' : 'other'
+                });
+            });
+        });
+    },
+    
+    // Enhanced tracking - only with consent
+    initEnhancedTracking() {
         // Scroll tracking
         this.initScrollTracking();
         
@@ -183,8 +223,11 @@ const EventAnalytics = {
     }
 };
 
-// Don't auto-initialize - wait for consent
-// The cookie consent script will call this when appropriate
+// Initialize immediately for basic tracking
+// Enhanced features will activate if/when consent is given
+document.addEventListener('DOMContentLoaded', () => {
+    EventAnalytics.init();
+});
 
 // Export for use in main.js
 window.EventAnalytics = EventAnalytics;
diff --git a/logos/jakartaee.png b/logos/jakartaee.png
diff --git a/main.js b/main.js
@@ -4,6 +4,25 @@
  * FIXES: Proper session scheduling, timezone handling, and data validation
  */
 
+// =======================================================
+//   DAILY HERO BUTTON CONFIGURATION - FINAL VERSION
+// =======================================================
+const HERO_CTA_CONFIG = {
+  // Primary button links to the LIVE or UPCOMING stream
+  primary: {
+    text: "Join the Live Stream",
+    link: "https://soujava.dev/celebration-day-2" // This link is still updated daily
+  },
+  // Secondary button links to the MOST RECENT recording
+  secondary: {
+    text: "Latest Recordings",
+    link: "https://soujava.dev/celebration-day-1" // This link is also updated daily
+  },
+  // Set to false if you only want to show one button
+  showSecondaryButton: true 
+};
+// =======================================================
+
 // Application State
 const AppState = {
     eventData: null,
@@ -818,9 +837,18 @@ class ScheduleRenderer {
             
             AppState.eventData.schedule.forEach((day, dayIndex) => {
                 const dayAnchor = Utils.createDayAnchor(day.date);
+                // Calculate the day number (June 16 = day 1)
+                const dayNumber = new Date(day.date + 'T00:00:00').getDate() - 15;
+                const streamLink = `https://soujava.dev/celebration-day-${dayNumber}`;
+                
                 scheduleHTML += `
                     <div class="day-group" data-day="${day.date}" id="${dayAnchor}">
-                        <h3 class="day-header">${Utils.formatDateHeader(day.date)}</h3>
+                        <div class="day-header-container">
+                            <h3 class="day-header">${Utils.formatDateHeader(day.date)}</h3>
+                            <a href="${streamLink}" target="_blank" rel="noopener" class="day-stream-link">
+                                Watch Day ${dayNumber} Stream <span class="material-icons">open_in_new</span>
+                            </a>
+                        </div>
                 `;
                 
                 day.sessions.forEach(session => {
@@ -1100,12 +1128,8 @@ class ScheduleRenderer {
                 Analytics.trackSessionDetailsView('Session Not Found', []);
             }
         } else {
-            // When collapsing, remove the hash entirely (don't assume where user came from)
+            // When collapsing, remove the hash from the URL without causing a page jump.
             if (window.history && window.history.replaceState) {
-                // First clear the hash to remove :target styling
-                window.location.hash = '';
-                
-                // Then clean up the URL
                 const baseUrl = window.location.pathname + window.location.search;
                 window.history.replaceState(null, '', baseUrl);
             }
@@ -1907,6 +1931,32 @@ window.addEventListener('unhandledrejection', function(e) {
     }
 });
 
+// Apply Hero CTA Configuration
+function applyHeroCtaConfig() {
+  const primaryBtn = document.getElementById('primaryCtaButton');
+  const secondaryBtn = document.getElementById('secondaryCtaButton');
+
+  // Configure Primary Button
+  if (primaryBtn && HERO_CTA_CONFIG.primary && HERO_CTA_CONFIG.primary.text) {
+    primaryBtn.textContent = HERO_CTA_CONFIG.primary.text;
+    primaryBtn.href = HERO_CTA_CONFIG.primary.link;
+    primaryBtn.target = "_blank";
+    primaryBtn.rel = "noopener";
+    primaryBtn.style.display = 'inline-flex';
+  }
+
+  // Configure Secondary Button
+  if (secondaryBtn && HERO_CTA_CONFIG.showSecondaryButton && HERO_CTA_CONFIG.secondary && HERO_CTA_CONFIG.secondary.text) {
+    secondaryBtn.textContent = HERO_CTA_CONFIG.secondary.text;
+    secondaryBtn.href = HERO_CTA_CONFIG.secondary.link;
+    secondaryBtn.target = "_blank";
+    secondaryBtn.rel = "noopener";
+    secondaryBtn.style.display = 'inline-flex';
+  } else if (secondaryBtn) {
+    secondaryBtn.style.display = 'none'; // Ensure it's hidden if not configured
+  }
+}
+
 // Initialize Application
 let app;
 let modalHandler;
@@ -1915,6 +1965,9 @@ function initApp() {
     app = new App();
     modalHandler = app.modalHandler; // Make modal handler globally available
     app.init();
+    
+    // Apply hero CTA configuration
+    applyHeroCtaConfig();
 }
 
 // Start the application when DOM is ready
diff --git a/style.css b/style.css
