Homepage Hero Section Layout Issues & UX Revamp

[SandeepVashishtha]

Description

The homepage hero section is positioned too high on the page, causing poor visual balance and making the layout feel cramped. On some screen sizes, important content appears cut off or hidden below the fold. The current design also leaves large unused whitespace while failing to create a compelling first impression.

Current Behavior

• Hero content starts immediately below the navbar with minimal spacing.
• Main heading appears too close to the top navigation.
• Large portions of the page remain empty while useful content is pushed out of view.
• Search bar lacks visual prominence and hierarchy.
• Hero section does not effectively communicate the platform's value.
• Overall layout feels unfinished and unbalanced.

Expected Behavior

• Hero section should be vertically centered or properly spaced from the navbar.
• Important content should be visible without requiring unnecessary scrolling.
• Strong visual hierarchy between heading, description, search, and call-to-action elements.
• Better utilization of available screen space.
• Modern, engaging landing page experience.

Screenshots

Current UI:

Proposed Revamp

Option A: Modern Centered Hero

• Add sufficient top padding (pt-16 to pt-24).
• Center content vertically within the viewport.
• Add a descriptive subtitle below the heading.
• Increase spacing between elements.
• Add prominent CTA buttons.

Option B: Full Landing Page Redesign

• Hero section with headline, subtitle, search, and CTA buttons.
• Featured events section immediately below the hero.
• Statistics section (Events, Users, Hackathons, Communities).
• Trending categories and upcoming events.
• Better animations and responsive layout.

Suggested Improvements

• Increase spacing between navbar and hero content.
• Ensure all critical content is visible on common desktop resolutions.
• Improve typography hierarchy.
• Add meaningful subtitle/description text.
• Redesign search bar for better visibility and usability.
• Reduce unused whitespace.
• Improve responsive behavior across screen sizes.
• Add featured content sections below the hero.

Acceptance Criteria

• Hero section has balanced vertical spacing.
• No important content appears cut off on desktop screens.
• Search bar is visually prominent and accessible.
• Layout adapts correctly across breakpoints.
• Landing page provides a modern and engaging user experience.
• Lighthouse accessibility and responsiveness scores remain unaffected.

[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]

/claim

[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).