fix: balance EventLanding hero on wide screens

[Anshumancanrock]

What type of PR is this?

/kind bug

What this PR does / why we need it:

Event landing pages capped the description at 720px, so wide screens had a big empty gap on the right. Moved date/location/time into a side card next to the description so the layout fills naturally.

Which issue(s) this PR fixes:

Fixes #749

Before:

Description stuck at 720px max-width, empty space on the right on widescreen.

After:

Description + links on the left, event details card (date / location / time / room) on the right; stacks on smaller screens.

Checklist:

• npm run lint and npm run format:check pass
• npm run build succeeds for both en and zh
• Chinese translation updated if English docs changed (or noted why not)
• Commits are signed off (git commit -s)

Summary by CodeRabbit

• Style
  • Reorganized event hero content into a clearer two-column layout.
  • Added an accessible details card for event date, location, time, room, and links.
  • Improved spacing, alignment, icon sizing, and metadata presentation.
  • Added responsive behavior for smaller screens, including a single-column layout and reordered content.

[hami-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: Anshumancanrock
Once this PR has been reviewed and has the lgtm label, please assign windsonsea for approval. For more information see the Kubernetes Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[netlify]

✅ Deploy Preview for project-hami ready!

Name	Link
🔨 Latest commit	efa8b23
🔍 Latest deploy log	https://app.netlify.com/projects/project-hami/deploys/6a796f2af9b23a00085beb0a
😎 Deploy Preview	https://deploy-preview-751--project-hami.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: fe008894-84fb-48f8-97cf-73851f456b0d

📥 Commits

Reviewing files that changed from the base of the PR and between 15f12ab and efa8b23.

📒 Files selected for processing (2)

• src/components/EventLanding.js
• src/components/EventLanding.module.css

---

📝 Walkthrough

Walkthrough

The event hero now separates description and links from event metadata. The metadata appears in an accessible details card. CSS adds a two-column layout, sticky details, updated spacing, and responsive single-column behavior.

Changes

Event hero layout

Layer / File(s)	Summary
Hero structure and metadata src/components/EventLanding.js	The component groups description and links in heroMain and places event metadata in an accessible heroAside card.
Hero layout and responsive behavior src/components/EventLanding.module.css	The stylesheet adds the two-column grid, sticky details card, metadata spacing, updated link spacing, and a responsive single-column layout below 996px.

Estimated code review effort: 3 (Moderate) | ~15–30 minutes

Possibly related PRs

• Project-HAMi/website#642: Refactors the same EventLanding component and CSS.
• Project-HAMi/website#649: Modifies the same hero links and event metadata styling.
• Project-HAMi/website#740: Introduces related event metadata fields.

Suggested reviewers: fishman

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the primary change: balancing the EventLanding hero layout on wide screens.
Linked Issues check	✅ Passed	The two-column hero layout addresses issue #749 by using the empty right-side space for event metadata and stacking on smaller screens.
Out of Scope Changes check	✅ Passed	The code changes remain within the linked issue scope and only modify the EventLanding structure and responsive styling.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[Anshumancanrock]

Hi @fishman, could you please take a look at this PR when you have time? Thanks!