fix responsiveness on the new landing page

[mindapivessa]

What changed? Why?

• ComponentPreview: Implemented fixed width and adjust how the content overflow for responsiveness.
• SwapDemo: Assigned width for breakpoints for responsiveness
• Tweets: Adjusted the width of the cards for responsiveness

Acceptance criteria

• Users can view component and code blocks decently (nothing gets cut off in an awkward way)
• Users can scroll horizontally and vertically to view overflow content
• Copying and components preview should still work E2E (apart from Swap and Checkout)

Notes to reviewers

• Used magic numbers as a fix because using w-full didn't work. In our next improvement, will find a more elegant way to address this.
• Some code blocks are indented weirdly and should be addressed with syntax highlighting as a fast follow.
• @alissacrane-cb could we follow up on this and replacing the checkout button with a fake button that triggers a modal like what we have on the template?

How to test

• git clone https://github.com/mindapivessa/onchainkit.git
• Switch to mind/landing-fix-responsive-1023 branch to pull the changes
• Try running it locally please! My vercel build is still failing :(

How has it been tested?

Screen.Recording.2024-10-24.at.1.41.22.AM.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
onchainkit-coverage	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 24, 2024 2:10pm
onchainkit-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 24, 2024 2:10pm
onchainkit-routes	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 24, 2024 2:10pm

[vercel]

Someone is attempting to deploy a commit to the Coinbase Team on Vercel.

A member of the Team first needs to authorize it.