Skip to content

Conversation

margaret-022
Copy link
Collaborator

@margaret-022 margaret-022 commented Aug 22, 2025

…etter UX

  • Add responsive hero images (desktop/mobile) with 768px breakpoint
  • Convert clunky hero buttons to sleek cards matching page design
  • Set card body text to 14px for improved readability
  • Update demo card copy from 'Account Kit' to 'Alchemy Smart Wallets'
  • Ensure proper grid alignment for all page elements

🎯 Overview

Enhances the /docs/wallets overview page with improved UX, responsive design, and better visual hierarchy.

✨ Changes

  • Responsive Hero Images: Added desktop/mobile hero images with 768px breakpoint
  • Card Design: Converted clunky hero buttons to sleek cards matching page design
  • Typography: Set card body text to 14px for improved readability
  • Copy Updates: Updated demo card from "Account Kit" to "Alchemy Smart Wallets"
  • Grid Alignment: Ensured proper alignment for all page elements

🧪 Testing

  • ✅ Desktop/mobile responsive images work at 768px breakpoint
  • ✅ All cards display with consistent 14px body text
  • ✅ Navigation cards are properly aligned to main content grid
  • ✅ All links and interactions function correctly

📱 Preview

View changes at: /docs/wallets


PR-Codex overview

This PR focuses on enhancing the layout and design of the index.mdx page, improving the presentation of wallet-related content, and introducing new styles for better responsiveness.

Detailed summary

  • Added a <style> block for custom styles.
  • Introduced the .hero-image-desktop class for responsive images.
  • Replaced a <div> with a <CardGroup> for better organization.
  • Updated Card components, including new titles and content.
  • Removed some existing Card components and replaced them with new ones.
  • Adjusted the layout and styling of various Card components for consistency.

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

…etter UX

- Add responsive hero images (desktop/mobile) with 768px breakpoint
- Convert clunky hero buttons to sleek cards matching page design
- Set card body text to 14px for improved readability
- Update demo card copy from 'Account Kit' to 'Alchemy Smart Wallets'
- Ensure proper grid alignment for all page elements
Copy link

vercel bot commented Aug 22, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
aa-sdk-ui-demo Ready Ready Preview Comment Aug 26, 2025 9:58pm

Copy link
Contributor

graphite-app bot commented Aug 22, 2025

How to use the Graphite Merge Queue

Add the label graphite-merge-queue to this PR to add it to the merge queue.

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

Copy link

github-actions bot commented Aug 22, 2025

🌿 Documentation Preview

Name Status Preview Updated (UTC)
Alchemy Docs ✅ Ready 🔗 Visit Preview Aug 26, 2025, 9:55 PM

@github-actions github-actions bot had a problem deploying to docs-preview August 22, 2025 23:32 Failure
@github-actions github-actions bot had a problem deploying to docs-preview August 25, 2025 13:52 Failure
@github-actions github-actions bot temporarily deployed to docs-preview August 25, 2025 13:53 Inactive
@github-actions github-actions bot temporarily deployed to docs-preview August 25, 2025 14:58 Inactive
.hero-image-mobile {
display: none;
width: 100%;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't recommend width: 100% here. since it's a vertical image, scaling it horizontally makes it huge. Also gets very pixelated. So I'd also use something higher res
image

- Remove mobile header image references (overviewHeaderMobile.png)
- Update responsive CSS to use single header image across all breakpoints
- Change Try our demo card icon from fa-regular to fa-solid fa-play
- Remove unnecessary style attributes from specific cards
- Ensure consistent icon positioning (centered) for both hero cards
- Fix image path issues and resolve cache conflicts
@github-actions github-actions bot temporarily deployed to docs-preview August 26, 2025 14:52 Inactive
@github-actions github-actions bot temporarily deployed to docs-preview August 26, 2025 16:55 Inactive
@github-actions github-actions bot temporarily deployed to docs-preview August 26, 2025 16:59 Inactive
@avarobinson avarobinson requested a review from dslovinsky August 26, 2025 17:02
avarobinson
avarobinson previously approved these changes Aug 26, 2025
@github-actions github-actions bot temporarily deployed to docs-preview August 26, 2025 21:54 Inactive
@avarobinson avarobinson merged commit 2e3b0c1 into main Aug 26, 2025
10 checks passed
@avarobinson avarobinson deleted the feat/wallets-page-improvements branch August 26, 2025 22:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants