Design event

[felixvik21]

Make design for interest group event page

Result

If you've made visual changes, please check the boxes below and include images showing the changes. Descriptions are appreciated.

• Changes look good on both light and dark theme.
• Changes look good with different viewports (mobile, tablet, etc.).
• Changes look good with slower Internet connections.

Caution

Make sure your images do not contain any real user information.

Testing

• I have thoroughly tested my changes.

Please describe what and how the changes have been tested, and provide instructions to reproduce if necessary.

---

Resolves ... #5898

[Copilot]

Pull request overview

This PR implements the visual design for the interest group event detail page (/interest-events/:interestEventId), addressing issue #5898. It creates a new page layout with multiple sub-sections (attendees, attend/registration, organizer, and admin) displayed in a two-column split view.

Changes:

• Adds a new +Page.tsx event detail page with hardcoded placeholder layout (header image, event info, description, and sidebar sections)
• Introduces four sub-section components (AttendeesSection, AttendSection, OrganizerSection, AdminSection) each with their own CSS module
• Adds shared box styles and a new --font-size-xxl CSS variable to the global design system

Reviewed changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 18 comments.

Show a summary per file

File	Description
+Page.tsx	Main page layout with hardcoded placeholder content for the interest event detail view
AdminSection.tsx	Admin panel stub with a chevron arrow icon
AttendSection.tsx	Registration/sign-up box with attend button and deadline info
AttendeesSection.tsx	Attendee list section with avatar stack and progress bar
OrganizerSection.tsx	Organizer and contact info box with hardcoded names
adminSection.module.css	Minimal CSS for arrow icon sizing
attendSection.module.css	Styles for dot indicator, attend button, and deadline info
attendeesSection.module.css	Styles for stacked avatar icons and progress bar
boxes.module.css	Shared styles for the right-side info box cards
interestEventDetail.module.css	Main page layout styles with Google Fonts import
organizerSection.module.css	Text-align style for organizer list
variables.css	Adds --font-size-xxl: 2.5rem design token

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

@felixvik21 I've opened a new pull request, #5905, to work on those changes. Once the pull request is ready, I'll request review from you.

[celiacisternas]

Looks good!