fix: center event image and fix Join Now button navigation #7623

[AnkitRewar11]

Description
This PR fixes #7623

The Events section on desktop had three issues:

• Event banner image was misaligned with black/empty space around it
• Extra black space was appearing below the "Join Now" button
• "Join Now" button was not redirecting anywhere on click

What was wrong and what I fixed

src/components/UpcomingEventCard/EventCard.style.js

The image container was using object-fit: contain which shrinks the image to fit inside the box, leaving black/empty gaps around it. I changed it to object-fit: cover so the image fills the container properly. I also added flexbox centering (display: flex, align-items: center, justify-content: center) and overflow: hidden to make sure the image stays centered and does not overflow outside the container.

src/components/UpcomingEventCard/index.js

The "Join Now" button had $url={item.frontmatter.eurl} which was null or undefined for events that don't have an external registration link. This caused the button to render without any href, so clicking it did nothing. I added a fallback so if no external URL exists, it redirects to the internal event page instead. I also fixed $external={true} which was hardcoded — now it is $external={!!item.frontmatter.eurl} so only events with an external URL open in a new tab.

Notes for Reviewers
Only 2 files changed, 1 clean commit. The CI build:preview failure is a pre-existing issue in the repo and is not related to these changes.

Signed commits

• Yes, I signed my commits.

[github-actions]

🚀 Preview deployment: https://layer5io.github.io/layer5/pr-preview/pr-7633/

Note: Preview may take a moment (GitHub Pages deployment in progress). Please wait and refresh. Track deployment here

[rishiraj38]

Please attach a Before and After image for better reference.

[AnkitRewar11]

Before

after

Screen.Recording.2026-04-16.001011.mp4

@rishiraj38 here are the before and after results, along with a video recording after the changes.

[AnkitRewar11]

@rishiraj38 These changes have now been applied to the other slide images as well, which weren’t working before.

[rishiraj38]

Please revert the lints.

[AnkitRewar11]

Please revert the lints.

@rishiraj38 all set, please take a look again.

[rishiraj38]

LGTM!!!

[Bhumikagarggg]

@AnkitRewar11 Thank you for your contribution! Let's discuss this during the website call tomorrow at 5:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂