feat: migrate ExpandableCard component to shadcn

[kushagrasarathe]

Migrates ExpandableCard component to ShadCN from Chakra

Description

This PR updates the ExpandableCard to use ShadcnUI's accordion component instead of Chakra component. Styles have been updated for both light and dark version.

Note

@pettinarip I've used the accordion from /tailwind directory and did not directly overwrite the classes in the primitives, instead added classes in the ExpandableCard component to keep the UI similar to how it was with Chakra.

Lemme know if this approach doesn't look good, happy to update it.

Also the default behaviour on shadcn accordion doesn't allow the accordion it to be closed if clicked on content, I can add this using mouse events, thoughts?

Related Issue

#13946

[netlify]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	c0f29ed
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/66fee4542b7556000832f73f
😎 Deploy Preview	https://deploy-preview-14017--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 48 (🟢 up 2 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.

[pettinarip]

Great start @kushagrasarathe! The approach you took is perfect. Left a few requests on color token changes to match the Design System.

This is how I see it on https://deploy-preview-14017--ethereumorg.netlify.app/en/contributing/style-guide/

We would also need to align the text on the header texts to the left.

[kushagrasarathe]

Hey @pettinarip pushed the changes requestd 🙌

Great start @kushagrasarathe! The approach you took is perfect. Left a few requests on color token changes to match the Design System.

This is how I see it on https://deploy-preview-14017--ethereumorg.netlify.app/en/contributing/style-guide/

We would also need to align the text on the header texts to the left.

[pettinarip]

Thanks @kushagrasarathe !

[gitpoap-bot]

Congrats, your important contribution to this open-source project has earned you a GitPOAP!

Be sure to join the Ethereum.org discord if you are interested in contributing further to the project or have any questions for the team.

GitPOAP: 2024 Ethereum.org Contributor:

Head to gitpoap.io & connect your GitHub account to mint!

Learn more about GitPOAPs here.