[Enhancement]: Add animated card components to "Why Kmesh" section
- Dominant language
- JavaScript
- Stars
- 12
- Forks
- 75
- PR merge metrics
- No merged PRs in 30d
Description
## Description
The "Why Kmesh" section on the landing page currently displays feature points in a plain, unstyled text layout. Wrapping each feature into a card component and adding smooth animations will give the section a **cleaner, more modern look** — making it visually engaging for visitors and consistent with the standards of modern landing pages. This change will significantly improve the overall aesthetic and first impression of the site.
## Current State
The 6 features are displayed in a plain 3x2 grid layout:
- Smooth compatibility
- High performance
- Low overhead
- Security Isolation
- Full Stack Visualization
- Open Ecosystem
## Proposed Changes
1. **Card Wrapper** — Enclose each feature in a card component with:
- Consistent padding and spacing
- Subtle border/shadow for depth
- Rounded corners
2. **Animations** — Add:
- Entrance animations (fade-in + scale) with staggered timing
- Hover effects (lift effect with shadow enhancement)
- Smooth transitions across all interactions
3. **Responsive Design** — Ensure cards adapt to:
- 3x2 grid on desktop
- 2 columns on tablet
- 1 column on mobile
## References
- Current "Why Kmesh" section screenshot provided above
Contributor guide
Assessment
This issue has not been assessed yet.