Homepage code example redesign

[wackerow]

Description

• Updates the displaying of code examples on the homepage for both desktop and mobile
• Desktop: Updates CodeModal (partially updating to tailwind; leaving Chakra modal logic) with fresh set of pain more in line with latest theming and buttons
  • Replaces close butting with ui/button using "Close" label
• Mobile: Removes usage of modal; replaces with ui/accordion, allowing code example to unfold in-place.
  • Max-height of 50vh (half the device height) to limit obtrusiveness, and ensure user has screen space available to swipe the document, and not get stuck in nested scrolling.
• Adds "copy" buttons to both desktop and mobile code examples. Desktop displays icon + "Copy" as "outline" variant (with more space to avoid overlapping text); mobile displays only icon with solid variant (high likelihood of overlapping with other text).
• For "copy" functionality, added a new useClipboard hook based on usehooks-ts library, mimicking Chakra-UI useClipboard hook.

Preview link

https://deploy-preview-13844--ethereumorg.netlify.app/en/

Related issue

• Homepage redesign #13528

[netlify]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	148cc69
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/66e9436501bd5d0008ac9f8d
😎 Deploy Preview	https://deploy-preview-13844--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 37 (🔴 down 11 from production) Accessibility: 92 (🔴 down 1 from production) Best Practices: 83 (🔴 down 9 from production) SEO: 92 (🔴 down 1 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]

@wackerow the mobile code examples look amazing! really like it, well done.

I've created a PR #13861 to share my thoughts on (IMO) a cleaner useClipboard hook.