Fix/past events UI

[becky-n]

What does this PR do?

Fixed UI changes for past events card to match figma and be more readable.

Checklist

• My branch follows the naming convention (feature/, fix/, chore/, hotfix/)
• My commit messages follow the conventional commits format
• CI checks pass

Linked Issues

Closes #95 and #84

[Copilot]

Pull request overview

Updates the Events page “Past Events” UI to better match the Figma designs by improving mobile layout (horizontal scrolling) and refining the past event card visuals for readability.

Changes:

• Switch past events listing to a horizontally scrollable, snap-aligned row on mobile while retaining the grid layout on larger screens.
• Adjust past event card styling (corner radius, hover blur/opacity, and add a 25% black overlay) to improve text legibility and match Figma.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
web/src/app/events/_components/PastEventsSection.tsx	Makes the past events list horizontally scrollable on mobile with snap behavior; preserves grid layout at sm+.
web/src/app/events/_components/PastEventCard.tsx	Refines card styling (radius, hover image treatment, overlay, gradients, icon sizing) to improve readability and match design.

Comments suppressed due to low confidence (1)

web/src/app/events/_components/PastEventCard.tsx:92

• This card still uses text-white/text-white/90 in several places, while other updated parts use the palette token text-ssa-white. Using the palette token throughout keeps the card consistent with the design system color (--color-ssa-white) and avoids mixing pure white with the off-white brand color.

      <div className="absolute inset-x-0 bottom-0 flex flex-col gap-3 p-6">
        <div className="flex items-center gap-2 text-white/90">
          <FaCalendarDays
            className="h-[1em] w-[1em] shrink-0"
            aria-hidden="true"
          />
          <time
            dateTime={date}
            className="font-averia text-base font-bold tracking-wide"
          >
            {formattedDate}
          </time>
        </div>
        <h3 className="font-averia text-3xl font-bold leading-tight text-white">
          {name}
        </h3>

---

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

[oorjagandhi]

Looks good thanks for taking this on!

Just some small fixes:

• pls make all text on the card text-ssa-white
• decrease calender icon size OR increase date text size, so they are consistently sized
• another change I forgot to flag initially - could you please decrease the border radius on the tags to make them more square:

here is Figma so you can take the border radius

Thank you!

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated no new comments.

[joengy]

Nice work on the styling of the past events, just a heads-up, PR #75 (the sponsors page that Jotinder was working on) also retyles the same HighlightCard component, but differently it adds an explicit variant field to a HighlightCardBadge object instead of matching on the badge text (badge.toLowerCase().includes('non-member')).

I think its worth taking a look at how it's done because whichever PR gets merged second will have conflicts.

[oorjagandhi]

LGTM thanks!

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

[joengy]

lgtm