Akshith - Align Event Details UI

[akshith312]

Description

Related PRS (if any):

This frontend PR is related to the #4349
…

Main changes explained:

• Fixed Alignment Issues
• Added User Avatars
• Fixed Spelling of Participates to Participants
• Added Location and Event type in Header section
• Added Styling for FAQ Section
• Added styling for Dark Mode
  …

How to test:

1. check into current branch
2. do npm install and npm run start:local to run this PR locally
3. Clear site data/cache
4. log as admin user
5. go to dashboard→ /communityportal/activities/Register/{activityID}
6. verify the alignment of components is correct.
7. Verify if the colors change based on availability of the spots in events
8. Check if Participants are displayed with their user avatars when Participants Tab is selected.

Screenshots or videos of changes:

Screen.Recording.2026-01-03.165051.mp4

Note:

The data used is mock data.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	6efb8f6
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6959d98c9291590008ab0aa3
😎 Deploy Preview	https://deploy-preview-4665--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[sonarqubecloud]

Quality Gate failed

Failed conditions
C Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE