two column view on events/id pages

[elyashium]

[Sub-Issue] Implement Two-Column Layout for Event Detail Page (/events/[id])

Parent Issue: #7

Description

This task focuses on implementing the redesigned two-column layout for the individual event detail page, as specified in the parent issue. The goal is to separate the page's primary content from its metadata, creating a more organized and aesthetically pleasing user experience that avoids long, unappealing vertical scrolling.

Requirements

1. Page Structure

• Implement a two-column layout on desktop views.
• The layout should consist of a scrollable left section for content and a fixed right section for metadata.
• Ensure the layout is responsive: on mobile devices, the columns should stack vertically (it is recommended the right metadata section appears first).

2. Left Column (Scrollable Content)

• This column should be the primary content container.
• It must be vertically scrollable, independent of the right column.
• It will display the main event description, including paragraphs of text and any associated images.

3. Right Column (Fixed Metadata)

• This column must remain fixed in the viewport and should not scroll with the page.
• It will serve as an "at-a-glance" summary panel.
• Populate this section with the following data points for the event:
  • Date & Time
  • Venue/Location
  • Guests
  • Sponsors
  • Highlights (as a list)