[Developers Live] Fix Event Banner Mobile Layout and Create New Event CTA Block

[gribbletog]

Summary

Resolved critical mobile layout issues with the event-banner block where the header content was completely misaligned with the background image, and created a new standalone event-cta block to replace embedded CTA functionality.

Initial Problem

• Mobile Header Completely Broken: Poor spacing and alignment between text content and background image on mobile devices
• Adobe Logo Positioning: Logo was positioned too high and getting cut off by the red rectangle area
• Content Misalignment: Text elements not properly positioned within the dark background area
• Embedded CTA Limitation: CTA functionality was embedded in event-banner, preventing reuse at bottom of page

Issues Fixed

Event Banner Block

• Mobile Layout Restoration: Fixed completely broken mobile header layout with proper content positioning
• Background Image Alignment: Resolved severe misalignment between text content and background graphic
• Desktop Proportions: Fixed banner height from 600px to 472px to achieve proper 1200x472 aspect ratio
• Background Scaling: Implemented proper background-size: cover scaling to prevent image distortion
• Content Positioning: Moved content to proper position within dark background area
• Typography: Increased subtitle font size to 22px on desktop for better readability

Event CTA Block (New Block Creation)

• New Standalone Block: Created completely new event-cta block with full functionality
• Reusable Component: Can be used independently anywhere on pages (especially bottom of page)
• Mobile Typography: Optimized text sizing (18px tablet, 16px mobile)
• Compact Spacing: Proper vertical spacing with reduced bottom padding
• UTM Tracking: Includes UTM parameter handling for analytics
• Consistent Styling: Maintains visual consistency with event-banner design

Technical Changes

Files Created/Modified

• blocks/event-banner/event-banner.css - Fixed mobile layout and desktop proportions
• blocks/event-cta/event-cta.css - NEW FILE - Complete styling for standalone CTA block
• blocks/event-cta/event-cta.js - NEW FILE - Block functionality including UTM tracking

Key Features of New Event CTA Block

• Responsive Design: Mobile-optimized typography and spacing
• UTM Parameter Handling: Automatic UTM tracking for analytics
• Flexible Content: Supports tagline text and CTA button
• Clean Layout: Flexbox-based layout with proper gap management
• Button Styling: Consistent with event-banner button design

Before/After

• Before: Mobile header was completely broken with misaligned content, CTA embedded in banner
• After: Proper mobile layout + new reusable CTA block for flexible page placement

Testing

• ✅ Mobile layout completely restored and functional
• ✅ Desktop proportions match design specifications
• ✅ Background image properly aligned with content on all devices
• ✅ New event-cta block works independently throughout site
• ✅ UTM tracking functionality working correctly
• ✅ All responsive breakpoints properly handled

Branch

devlive-blocks

Impact

• Restored completely broken mobile experience
• Created new reusable component for site-wide CTA usage
• Improved code architecture with separation of concerns
• Enhanced analytics tracking capabilities