Trending Events Cards Need UI/UX Redesign

[SandeepVashishtha]

Description

The "Trending Events" section contains event cards that appear visually cluttered and difficult to scan. Too many actions, badges, statistics, reminders, and social icons are displayed simultaneously, making the cards overwhelming and reducing focus on the most important event information.

A cleaner, more modern card design would improve readability, user engagement, and overall visual consistency across the platform.

Current Issues

Visual Clutter

• Too many icons displayed in the card header.
• Social sharing actions occupy significant space.
• Registration statistics, reminders, engagement metrics, and actions compete for attention.
• Multiple information sections create a crowded layout.

Poor Information Hierarchy

• Event title, date, location, and CTA are not clearly prioritized.
• Important information gets lost among secondary details.
• Seat availability indicators are difficult to notice quickly.

Inconsistent Spacing

• Uneven padding between sections.
• Cards feel overly tall due to excessive content.
• Large vertical footprint reduces the number of visible events on screen.

Expected Behavior

• Clean and modern event cards.
• Clear hierarchy: Event → Date → Location → CTA.
• Secondary information hidden behind expandable sections, tooltips, or detail pages.
• Better spacing and visual balance.
• Improved responsiveness across screen sizes.

Proposed Redesign

Simplified Card Layout

• Event image
• Event title
• Date & location
• Category badge
• Registration status
• Primary CTA button

Move Secondary Details

• Share actions → overflow menu (⋮)
• Reminder settings → event details page/modal
• Detailed analytics → event details page
• Social sharing icons → hidden until hover or menu interaction

Visual Improvements

• Reduce card height by 25–40%.
• Improve typography hierarchy.
• Standardize badge styling.
• Use consistent spacing throughout the card.
• Improve hover and focus states.

Acceptance Criteria

• Cards contain only essential information by default.
• Event title and CTA are immediately visible.
• Secondary actions moved to an overflow menu or details page.
• Card height is significantly reduced.
• Improved spacing and visual hierarchy.
• Responsive design works correctly on mobile, tablet, and desktop.
• Accessibility standards are maintained.

Screenshots

Current UI:

[github-actions]

Thanks for opening this issue.

If you want to connect with the Eventra community or follow updates, please join our Discord server:
https://discord.gg/6MQ9r5nHT

We will review your issue as soon as possible.

[anujsharma8d]

/assign

[github-actions]

Hi @anujsharma8d, please wait 6h before claiming this issue again (cooldown active).

[Avani176]

/assign

[github-actions]

Hi @Avani176, please wait 6h before claiming this issue again (cooldown active).

[Tanmoysahacodes]

/assign

[github-actions]

Hi @Tanmoysahacodes, please wait 6h before claiming this issue again (cooldown active).

[srujana-manda]

Hi @SandeepVashishtha,
I noticed that part of this issue is related to the Trending Events section alignment/layout. I have already created a separate issue addressing the misalignment problem.