Skip to content

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

Description

@Pranav-IIITM

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

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions