feat: improve home page consistency using card layouts and hover - #606
feat: improve home page consistency using card layouts and hover #606Prat260104 wants to merge 1 commit into
Conversation
The homepage features, tools, testimonials, and blog sections did not look consistent and lacked hover effects. This made the page feel disconnected. Change these sections to use modern cards with rounded borders and background colors. Add a smooth hover effect that lifts the cards when the user hovers over them. Fix grid sizes and image containers so illustrations fit perfectly without getting cut off. Also fix JSX syntax and type errors to make the build compile successfully. Signed-off-by: Prateek Rai <prateekrai903@gmail.com>
Video before the changesbefore.mp4Video after the changesafter.mp4 |
|
Hi @ashley-cui, @TomSweeneyRedHat, I wasn't sure whether I should raise an issue for this beforehand, so I decided not to create one. Whenever you have some time, I'd really appreciate your review and feedback. If you think these UI/UX improvements are the right direction, I'd be happy to make similar consistency improvements to the Features pages and, if appropriate, other pages outside the current LFX Fall scope as separate contributions. The changes in this PR are intentionally minimal. I haven't introduced any new UI/UX design decisions of my own—I simply made the existing design patterns more consistent across the affected components. Note : I have not touched the book section yet as there is another PR open related to adding Podman for devops and podman in action book in that section #527 . Thank you! |
|
Hi @ashley-cui ma'am, Just wanted to check if these changes are heading in the right direction. If everything looks good, can I move on to improving the features page? I'd also really appreciate any feedback whenever you have the time. Thank you! |
|
I feel like the existing styling looks better. This styling doesn't fit with the rest of the website, which is a lot more flat. I do agree that the blog title alignment needs to be fixed though. I don't think it needs to be re-designed, but we should find a way to crop the image displayed to a consistent size so the blog titles are properly aligned. Closing this for now, as I think this touches much more than we really want. Feel free to submit something else that addresses #606 though. |
2 participants
This PR improves the visual design and layout of the homepage. It focuses on making the layout cleaner and adding consistent card styling with hover effects.
Problem
Previously, the homepage sections (Features, Compatible Tools, Testimonials, and Blog Posts) had inconsistent layouts and styling. They also lacked hover effects, making the homepage feel less consistent and interactive. Additionally, the blog cards on the homepage had inconsistent sizing.
Solution
6xl. The blog images are now properly framed inside their containers so illustrations and characters are not cut off.PlayOnScrollandCommunityMeetingscomponents so the project builds successfully.These changes are important because the homepage is the first page many users see. Keeping the design consistent helps create a better first impression.
Note
This PR is focused only on the homepage. Other pages, such as Features and Community, will be addressed in separate PRs. This follows the Podman contributing guideline: "Solve one problem per patch." Keeping each PR focused also makes the review process faster.