[FRONTEND] Join AYO page – Opportunities list section

[bryyj-y]

Is your feature request related to a problem? Please describe.

Users need a clear and up-to-date way to view available opportunities such as scholarships and competitions. Currently, there is no dedicated section where these can be browsed or filtered.

Describe the solution you'd like

• Build an Opportunities section/page displaying available opportunities
• Each opportunity card should include:
  - Scholarship / competition name
  - Application deadline
  - Short blurb/description
  - “Read more” link (expands to details card)
  - “Apply” hyperlink
• Include sorting functionality:
  - Sort opportunities by closing date (soonest first / latest first)
  - Display number of opportunities currently shown (e.g. “X opportunities available”)
• Ensure responsive layout
• Use hardcoded placeholder data for M1, structured for future backend integration
• Match Figma design styling

Additional context

• This is a read-only page for M1
• Backend integration will later replace hardcoded report data
• Apply links may point to placeholder URLs for now

BEFORE MERGING

• Storybooks created where possible
• Tested with react testing library
• Tests written for critical interactions
• PR Reviewed (For non-trivial changes)
• Changes tested after rebasing on master or merging in master (hint: git fetch origin master:master, then git rebase master or git merge master)
• All required PR checks passing