UI Improvements: Design Optimization for Homepage Components #682 #683
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The commit message follows the contribution guidelines.
UI improvements have been tested in both light & dark mode.
Which issue(s) this PR fixes:
Fixes #682, #665
What kind of change does this PR introduce?
🆕 Feature Enhancement
🎨 UI/UX Improvement
What is the current behavior? (UI Improvements: Design Optimization for Homepage Components #682)
The homepage design was inconsistent, with misaligned elements and strong box effects.
There was no hover effect on key elements.
New Behavior (Feature Updates)
1️⃣ About Section:
✅ Proper alignment of the logo and text.
✅ Increased paragraph width for better spacing.
✅ Hover effect on the logo for a smooth UI.
✅ Enhanced font styling for a professional look.
2️⃣ Why KubeEdge Section:
✅ Subtle borders instead of strong highlights for separation.
✅ Hover effect for a more interactive feel.
3️⃣ Recent News Section:
✅ Removed heavy box effects while keeping light separation.
✅ Hover effect on blog posts for better UX.
Screenshots
About Component
Why Component
BlogPost Component
❌ No breaking changes.
✅ Fully backward-compatible UI updates.
This PR enhances the user experience (UX) by improving layout consistency, responsiveness, and readability.