revamp events page

[elyashium]

[Feature Request] Redesign Events and Event Detail Pages

Description

This issue outlines a feature request to redesign the main /events page and the individual event detail pages (/events/[id]). The current design is not visually engaging and lacks an intuitive information hierarchy, especially on the detail pages where long vertical scrolling harms the user experience.

The goal is to create a more aesthetically pleasing, user-friendly, and scannable experience by introducing a modern card-based layout, better visual language, and an improved page structure for event details.

Objectives

• Enhance Visual Appeal: Introduce images and a modern card layout to make the events section more engaging.
• Improve User Experience: Implement filtering for past events and create a "single look" view for event details to reduce excessive scrolling.
• Better Information Architecture: Reorganize event metadata into a fixed, easily scannable section on detail pages.

---

1. Improvements for the Main Events Page (/events)

a. Event Cards Redesign

The current list of events should be replaced with a modern card-based layout.

• Visual Language: Each event card must feature a prominent image to provide immediate visual context and appeal.
• Content on Card: Cards should display essential information concisely: Event Title, Date, and a short Tagline/Summary.

b. Filtering for Past Events

To improve navigation, a filtering system should be implemented for the "Past Events" section.

• Functionality: Users should be able to filter past events by year and/or month.
• UI: Implement a clean dropdown or a set of buttons for an intuitive user interface.

2. Redesign of the Individual Event Page (/events/[id])

The current single-column, vertically scrolling layout is unappealing. This should be replaced with a two-column layout to create a more organized, "one-look" page experience.

a. Left Section (Scrollable Content)

This will be the main content area of the page.

• Behavior: This section will be scrollable.
• Content: It will contain the detailed event description, narrative text, and embedded images or galleries.

b. Right Section (Fixed Metadata)

This section will act as a static, at-a-glance information panel.

• Behavior: This section will not be scrollable and should remain fixed in view as the user scrolls the left section. On smaller screens (mobile), this section should stack neatly above or below the main content.
• Content: It must include key metadata such as:
  • Date & Time
  • Venue/Location
  • Guests / Speakers
  • Sponsors / Partners
  • Event Highlights (e.g., a short bulleted list)

sub issue : #8