Replacing Carousel with Grid Layout for Better Accessibility and UX

[barbaraperic]

Tagging @cwaring and @alanshaw for visibility :)

What Changed

• Removed the Carousel.vue and CarouselSection.vue components that implemented a horizontal scrolling carousel
• Introduced new GridLayout.vue and GridSection.vue components using CSS Grid for content display
• Updated KeyFeatures and Roadmap components to use the new grid layout
• Simplified the layout structure with responsive grid columns

Why This Change Matters

Improved Accessibility

• Removed complex mouse drag interactions that could be challenging for users with motor impairments
• Content is now presented in a more standard, predictable layout
• Better keyboard navigation as all content is immediately visible
• Eliminated the need for horizontal scrolling, which can be difficult for some users

Enhanced User Experience

• All content is now immediately visible without requiring user interaction
• Eliminated the need to scroll horizontally, which is often unintuitive on desktop devices
• Responsive layout automatically adjusts to different screen sizes
• More consistent with standard web patterns users are familiar with

Testing Notes

• Content displays correctly across different screen sizes
• Grid layout maintains proper spacing and alignment
• All features/roadmap cards are easily readable and accessible
• The layout works well on both desktop and mobile devices

Visuals

CleanShot.2025-03-31.at.13.12.57.mp4

CleanShot.2025-03-31.at.13.12.20.mp4