kmesh-net / kmesh-net/website

[Enhancement]: Add animated card components to "Why Kmesh" section

Open
#319 1 comment 0 reactions 1 assignee Claimed by @Pranav-IIITM View on GitHub
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

Image

## 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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.