Create a Dedicated Event Details Page ("When & Where") for Upcoming LAN Party

[tormachris]

Design and implement a new page that visually and clearly communicates the date, time, and location for the LAN party.

---

Requirements

• Unique Event Page:

  • Create a new top-level section (/events/) under content/events/_index.md (and content/events/_index.en.md).
  • The page should auto-appear in navigation due to Hugo's section discovery.

• Visual Structure:

  • Hero image at the top (using {{< paige/image >}}).

  • Intro callout with a left-border (using {{< intro >}}).

  • "When & Where" event info grid:

    • Propose and implement a new .cag-event-info grid style—three side-by-side cards for:
      • Date 📅
      • Time 🕐
      • Location 📍
    • Each card should have a bold icon, small-caps label, and a prominent value.

  • Place the countdown timer (using {{< countdown target="..." >}}) just under the info grid.

  • Google Map embed:

    • Use the existing {{< maps >}} shortcode for now.
    • PROPOSE: Extend the shortcode to accept a custom src parameter for new venues (optimize for future events).

  • Callout for navigation/travel tips (using {{< callout icon="📍" >}}).

  • Sectioned copy introducing venue spaces (reuse from content/location/_index.md when possible).

• Alignment and Consistency:

  • Match the site's visual language: color palette from cag.css, typography hierarchy, .cag-card elements, borders, and accent lines.
  • All new elements (or modifications) must support dark mode and reflow within the Bootstrap .container/.row layout.
  • Follow multilingual approach: mirror in content/events/_index.en.md.

• Proposals & Suggestions:

  • New CSS for .cag-event-info (refer to analysis: visual spec provided).
  • Add a parameter to the maps shortcode for location flexibility.
  • Optional: add an inline .cag-date-badge component for "Early access: Fri 7pm" callouts in headers or prose.
  • For improved SEO, consider extending the page front-matter to include a paige.pages.schemas entry for @type: Event with startDate, endDate, location, etc.

---

References from Repository:

• Layout pipeline: layouts/_default/baseof.html, single.html, list.html, page.html (supports sections and articles)
• Google Maps shortcode: layouts/shortcodes/maps.html (currently hard-coded, see opportunity for change)
• Color and card system: assets/css/cag.css (see analysis for variables and classes)
• Countdown: layouts/shortcodes/countdown.html
• Callout: layouts/shortcodes/callout.html
• Card grid: layouts/shortcodes/features.html
• Example copy: content/location/_index.md (venue text and map usage)
• Examplar for card anatomy: content/_index.md and content/recap/_index.md

Acceptance Criteria

• An event details page exists with hero image, "when & where" info grid, and a Google Maps embed.
• New page fits the Ctrl-Alt-GG design system (colors, typography, cards, grid).
• Supports all event details in both Hungarian and English.
• New visual components (if any) are documented and reusable for future events.

[tormachris]

Consider replacing Google Maps with leaflet.js or Mapbox with Google and Apple Maps buttons under the embed.

Integrate public transport stops near the location into the page with BKK's color scheme (purple + the transport method's signature color)