EventHeaderSection

The EventHeaderSection component displays a full-width hero section for FiNAN events with a background image, countdown timer, event details, and call-to-action buttons. It integrates with the RegistrationModal component to handle event registrations.

Component Type

Presentation Component - Displays event information with interactive elements (countdown timer and modal trigger).

Usage

Used on event pages to showcase conference details with visual appeal and urgency through the countdown timer.

Used on:

• src/pages/triennial-gathering-2026.astro - Main event landing page
• src/pages/index.astro - Homepage feature

Props

interface Props {
  secondaryButtonText: string;      // Text for secondary CTA button
  secondaryButtonLink: string;      // URL for secondary CTA button
  headingLevel?: 'h1' | 'h2';      // Semantic heading level (default: 'h1')
  subtitleSize?: 'md:text-xl' | 'md:text-2xl';  // Responsive subtitle size
  countdownSize?: 'lg:text-4xl' | 'lg:text-5xl'; // Responsive countdown size
  id?: string;                      // Section ID for anchor links (default: 'triennial-gathering-2026')
}

Prop Details

Prop	Type	Required	Default	Description
secondaryButtonText	string	✅ Yes	-	Label for the secondary button (e.g., “View Schedule”)
secondaryButtonLink	string	✅ Yes	-	URL destination for secondary button
headingLevel	'h1' | 'h2'	No	'h1'	Controls semantic heading level for SEO
subtitleSize	'md:text-xl' | 'md:text-2xl'	No	'md:text-2xl'	Tailwind class for responsive subtitle sizing
countdownSize	'lg:text-4xl' | 'lg:text-5xl'	No	'lg:text-5xl'	Tailwind class for responsive countdown sizing
id	string	No	'triennial-gathering-2026'	HTML ID for section (enables anchor linking)

Code Example

Basic Usage

---
import EventHeaderSection from '@/components/EventHeaderSection.astro';
---

<EventHeaderSection
  secondaryButtonText="View Schedule"
  secondaryButtonLink="/schedule"
/>

With Custom Sizing

---
import EventHeaderSection from '@/components/EventHeaderSection.astro';
---

<EventHeaderSection
  secondaryButtonText="Learn More"
  secondaryButtonLink="/about-event"
  headingLevel="h2"
  subtitleSize="md:text-xl"
  countdownSize="lg:text-4xl"
  id="event-2026"
/>

Component Structure

The component consists of several key sections:

1. Background Image - Full-width optimized image (Northern Lights over Reykjavik)
2. Conference Label - Small descriptor text (“FiNAN Conference”)
3. Main Title - Event name (h1 or h2: “Triennial Gathering 2026”)
4. Subtitle - Event theme (“Amplifying Voices…”)
5. Date & Location - Icon + text display for event details
6. Countdown Timer - Real-time countdown to event date (March 30, 2026)
7. CTA Buttons - Registration (modal trigger) + secondary action

Interactive Features

1. Countdown Timer

The component includes a live countdown timer that:

• Counts down to March 30, 2026 (hardcoded for 2026 Triennial Gathering)
• Updates every second with days, hours, minutes, and seconds
• Displays 00:00:00:00 after the event date passes
• Automatically cleans up on navigation (Astro view transitions support)

Caution

Post-Event TODO: The countdown date is hardcoded to March 30, 2026. After the event, this component should be updated or removed.

2. Registration Modal Integration

The primary “Register Now” button triggers the RegistrationModal component:

• Uses data-modal-trigger="registration-modal" attribute
• Calls the modal’s exposed _openModal() method
• Includes comprehensive error handling and logging
• Works with Astro view transitions

Tip

The RegistrationModal component is automatically included in this component and doesn’t need to be added separately to the page.

Image Optimization

The background image uses Astro’s optimized Image component:

<Image
  src={bannerImage}
  alt="Northern Lights over Reykjavik, Iceland"
  loading="lazy"
  format="webp"
  quality={65}
  width={1920}
  height={1080}
/>

Image source: src/assets/images/events/banner-triennial-gathering-2026.jpg

Responsive Design

The component is fully responsive with breakpoints:

• Mobile (< 768px): Single column, smaller text, stacked buttons
• Tablet (768px - 1024px): Larger text, horizontal layout for date/location
• Desktop (> 1024px): Maximum text sizes, full-width background

Key responsive features:

• Countdown timer maintains readability at all sizes
• Buttons switch from full-width to auto-width on larger screens
• Subtitle and countdown sizes can be customized via props

JavaScript Lifecycle

The component manages two interactive features with proper cleanup:

Initialization

// Runs on:
document.addEventListener('astro:page-load', initCountdown);
document.addEventListener('DOMContentLoaded', initCountdown);

Cleanup

// Runs before navigation:
document.addEventListener('astro:before-swap', () => {
  clearInterval(countdownIntervalId);      // Stop countdown
  modalTriggerController.abort();          // Remove event listeners
});

This pattern ensures no memory leaks during navigation in Astro’s SPA mode.

Error Handling

The component includes comprehensive error handling:

1. Countdown Timer

   • Validates all DOM elements exist before updating
   • Logs clear error messages if elements are missing
   • Gracefully handles calculation errors

2. Modal Integration

   • Checks for trigger button existence
   • Verifies modal element is present
   • Confirms _openModal() method is available
   • Provides actionable error messages

Styling

Uses Tailwind CSS with the following patterns:

• Background overlay: bg-gray-900/70 (70% opacity dark overlay)
• Text hierarchy: White text with gray variants for secondary info
• Buttons:
  • Primary: White background, gray text, shadow on hover
  • Secondary: Bordered, transparent with hover background
• Countdown box: Backdrop blur with semi-transparent background

Accessibility

• Semantic HTML with proper heading hierarchy
• Focus-visible ring on primary button
• Descriptive alt text for icons and images
• Keyboard-accessible modal trigger
• ARIA-friendly modal integration

Common Use Cases

Event Landing Page

---
import EventHeaderSection from '@/components/EventHeaderSection.astro';
import Layout from '@/layouts/Layout.astro';
---

<Layout title="Triennial Gathering 2026">
  <EventHeaderSection
    secondaryButtonText="View Full Schedule"
    secondaryButtonLink="#schedule"
  />
  <!-- Rest of event page content -->
</Layout>

Homepage Feature

---
import EventHeaderSection from '@/components/EventHeaderSection.astro';
---

<EventHeaderSection
  headingLevel="h2"
  secondaryButtonText="Learn More"
  secondaryButtonLink="/triennial-gathering-2026"
  id="upcoming-event"
/>

Related Components

• RegistrationModal - Handles event registration form (automatically included)
• Modal - Base modal component used by RegistrationModal
• BannerTriennialGathering - Smaller announcement banner variant

Implementation Notes

Note

This component is tightly coupled to the 2026 Triennial Gathering event. For future events:

1. Update the countdown date in the JavaScript (line 158)
2. Update event details (title, subtitle, dates, location)
3. Replace the background image
4. Consider making event details configurable via props

Source Code

File location: src/components/EventHeaderSection.astro

Key dependencies:

• astro:assets - Image optimization
• RegistrationModal.astro - Registration form modal
• Background image: src/assets/images/events/banner-triennial-gathering-2026.jpg

Troubleshooting

Countdown timer not updating

Issue: Timer shows 00:00:00:00 or doesn’t change

Solutions:

1. Check browser console for error messages
2. Verify DOM elements exist (IDs: days, hours, minutes, seconds)
3. Ensure script is running (check Network tab for JS errors)

Registration modal not opening

Issue: Click on “Register Now” does nothing

Solutions:

1. Check console for [EventHeader] error messages
2. Verify RegistrationModal component is included in the page
3. Ensure modal has attribute data-modal="registration-modal"
4. Check that modal’s _openModal() method is available

Background image not loading

Issue: Section has no background image or shows broken image

Solutions:

1. Verify image exists at src/assets/images/events/banner-triennial-gathering-2026.jpg
2. Check browser Network tab for 404 errors
3. Ensure Astro’s image optimization is working (run pnpm build)