Migrate EventCard to Shadcn

[minimalsm]

Description

• Updates EventCard to shadcn

Notes

1. Hardcoded 1.6rem line height for the description text (per OldText) as the defaults we have varied too much from the current design. Our designers should pull this component in line with current DS.

2. Slight differences in spacing compared to the original design (which had kind of unusual spacing). IMO, these are improvements but defer to @nloureiro

3. I've hardcoded the background colors (bg-[#FCFCFC] dark:bg-[#272627]) in the CardHeader. Our default theme values didn't provide a good match for this use case. another area where we might want to consult with design

Related Issue

13946

[netlify[bot]]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	ffee150028a9c6c49edcbafbc7f77e96ed72a867
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/66f57cfd7a654f000783fe86
😎 Deploy Preview	https://deploy-preview-13966--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 47 (🟢 up 1 from production) Accessibility: 93 (no change from production) Best Practices: 89 (🔴 down 9 from production) SEO: 92 (no change from production) PWA: - View the detailed breakdown and full score reports

---

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

[nloureiro]

agree. The spacing was off. Thank you for the adjustments

comapring with Figma, the text size is bigger, but now we are bumping everything to 16 or above so let's keep it like this

With this text size, we should do a 2-card line. It's too narrow for an MD page. Would it be on another PR to do this?

[minimalsm]

Thanks @nloureiro

agree. The spacing was off. Thank you for the adjustments

comapring with Figma, the text size is bigger, but now we are bumping everything to 16 or above so let's keep it like this

Okay can update to 16px fontsize. With that we can probably normalise line height too?

With this text size, we should do a 2-card line. It's too narrow for an MD page. Would it be on another PR to do this?

We can handle that in #13967, which is the upcoming events grid wrapper

[nloureiro]

Thanks @nloureiro

agree. The spacing was off. Thank you for the adjustments comapring with Figma, the text size is bigger, but now we are bumping everything to 16 or above so let's keep it like this

Okay can update to 16px fontsize. With that we can probably normalise line height too?

yes, makes sense

With this text size, we should do a 2-card line. It's too narrow for an MD page. Would it be on another PR to do this?

We can handle that in #13967, which is the upcoming events grid wrapper

ok, got it

[minimalsm]

Updated font size implementation after discussion with @nloureiro:

Mobile: 16px font size Desktop: Retaining 14px font size

Rationale:

• 3-column grid on large screens necessitates smaller font due to limited width
• 2-column grid on large screens was tested but felt clunky and reduced event discoverability

Changes implemented && ready for review :)