Improve mobile view layout and navigation consistency

[mariobehling]

The mobile view has several usability and layout inconsistencies that should be improved for better user experience and alignment with the desktop version.

Issues to Address

Navigation and Sections

• When clicking on "Tickets" in the menu:

  • Page should scroll to the tickets section
  • The "Tickets" heading must remain visible

• Move "Redeem voucher":

  • Position it below the tickets section

Layout and Alignment

• Ensure the featured speaker section width matches the text section above it

• Ensure from to date display in the header area is properly aligned

  • Likely requires adjusting vertical spacing and moving elements slightly upward

Header Improvements

• Add a "Join Online Event" button:

  • Style: blue button
  • Position: bottom right of the header image

Language Selector

• Adjust language dropdown:

  • Align horizontally (in parallel), similar to desktop behavior

Expected Result

• Improved navigation flow on mobile
• Consistent spacing and alignment across sections
• Better visibility and accessibility of key actions (tickets, join event)
• Consistency with desktop layout where applicable

Notes

• Test across different mobile screen sizes
• Ensure no overlap or clipping in header and navigation areas
• Keep spacing efficient to avoid excessive vertical scrolling

[AKRITI-ENG]

Hi @mariobehling, I would love to work on this!
I have already started looking into the codebase and have a plan to implement the following changes:

• Fixing the scroll behavior for the "Tickets" navigation item so the heading remains visible.
• Moving the "Redeem voucher" section above the featured speakers.
• Adjusting the layout width of the featured speakers section and the alignment of the event dates in the header.
• Adding the "Join Online Event" blue button to the header image.
• Ensuring the language dropdown displays horizontally side-by-side on mobile devices.
  I will raise pr soon