feat: add modern cards to how it works section

[pari-dubey1]

Related Issue

• Closes: 🚀 Feature: Add Cards Around "How It Works" Steps for Better UI #234

---

Description

Enhanced the "How It Works" section by adding modern card-style containers around each workflow step to improve UI consistency and visual hierarchy.

Changes Made

• Added responsive card layout for each step
• Added shadows, rounded corners, and spacing
• Added hover elevation effects
• Improved dark mode appearance
• Improved overall section readability and aesthetics

---

How Has This Been Tested?

• Tested in light mode and dark mode
• Verified responsiveness on different screen sizes
• Checked hover effects and spacing consistency

---

Screenshots (if applicable)

Before:

After:

Hover:

---

Type of Change

• Bug fix
• New feature
• Code style update
• Breaking change
• Documentation update

[netlify]

✅ Deploy Preview for github-spy ready!

Name	Link
🔨 Latest commit	fa9ec47
🔍 Latest deploy log	https://app.netlify.com/projects/github-spy/deploys/6a088e72cda6830008899cfa
😎 Deploy Preview	https://deploy-preview-283--github-spy.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.

[coderabbitai]

Warning

Rate limit exceeded

@pari-dubey1 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 1 minute and 4 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ddeb5e94-0869-4fb4-b113-031c13c415be

📥 Commits

Reviewing files that changed from the base of the PR and between 7a15543 and fa9ec47.

📒 Files selected for processing (1)

• src/components/HowItWorks.tsx

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}