style: enhance Why Kmesh section with animated cards

[Pranav-IIITM]

Summary

This PR enhances the "Why Kmesh" section on the landing page by wrapping each feature into a styled card component with smooth animations, improving the overall visual appeal and modern feel of the site.

Closes #319

Changes Made

src/components/Why/index.js

• Wrapped each feature's content inside a div.reasonCard component

src/components/Why/index.scss

• Added card styling with border, background surface color, border-radius, and box-shadow
• Created a fadeUp entrance animation (fade-in + scale from 0.95 to 1)
• Applied staggered animation delays using an SCSS @for loop with :nth-child
• Added hover effect — card lifts with translateY(-4px) and enhanced shadow
• Added responsive breakpoints:
  • 3 columns on desktop
  • 2 columns on tablet (<= 996px)
  • 1 column on mobile (<= 576px)
• Added @media (prefers-reduced-motion: reduce) block for accessibility

Before & After

Before

After

why.kmesh.video.1.mp4

Checklist

• All 6 features are wrapped in individual cards
• Cards have consistent styling and spacing
• Entrance animations are smooth and staggered
• Hover effects work across browsers
• Mobile responsive (tested on common breakpoints)
• No layout shift or jank during animations
• Respects prefers-reduced-motion for accessibility
• Code is clean and well-commented

[netlify]

✅ Deploy Preview for kmesh-net ready!

Name	Link
🔨 Latest commit	514a34a
🔍 Latest deploy log	https://app.netlify.com/projects/kmesh-net/deploys/6a40e9182e6738000894ac8f
😎 Deploy Preview	https://deploy-preview-320--kmesh-net.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[kmesh-bot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign lizhencheng9527 for approval. For more information see the Kubernetes Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[kmesh-bot]

Welcome @Pranav-IIITM! It looks like this is your first PR to kmesh-net/website 🎉

[gemini-code-assist]

Code Review

This pull request introduces a new .reasonCard wrapper inside the Why component, adding card styling, hover transitions, and a fade-up entry animation. It also updates the responsive media query breakpoints. The review feedback suggests replacing the hardcoded SCSS @for loop (which limits the animation delay to 6 items) with a dynamic CSS custom property passed directly from React, making the component more scalable and maintainable.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[Copilot]

Pull request overview

This PR updates the landing page’s “Why Kmesh” section to present each feature as a styled “card” with entrance and hover animations, improving visual hierarchy and modernizing the section layout.

Changes:

• Wrap each “Why Kmesh” feature item in a new .reasonCard container in the React component.
• Add card styling (surface background, border, radius, shadow) plus hover lift/shadow enhancement.
• Add staggered entrance animations and update responsive breakpoints (3→2→1 columns), including prefers-reduced-motion handling.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
src/components/Why/index.js	Wraps each feature’s title/content in a new .reasonCard element.
src/components/Why/index.scss	Adds card visuals, entrance/hover animations, stagger delays, and responsive breakpoints.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Pranav-IIITM]

@YaoZengzeng @LiZhenCheng9527 Please review the PR !!