enhance the chapter card component with thumbnail perpective

[DevxNadeem]

🔍 Description

Enhanced simulation cards with thumbnail images for better visual identification, and improved the chapter component UI with refined layout, spacing, and responsiveness.

Closes #330

---

✅ Checklist

• Verified that the project builds and runs locally (npm run dev)
• Ensured no ESLint or TypeScript warnings/errors remain
• Updated documentation, comments, or in-code explanations where needed
• Verified responsiveness across devices (desktop, tablet, mobile)
• Followed the CONTRIBUTING.md guidelines

---

🎨 Visual Changes

Before

After

Thumbnails improve visual scannability of simulation cards. Chapter component updated for tighter spacing and cleaner hierarchy.

---

📂 Type of Change

• 🐛 Bug fix (non-breaking change that fixes an issue)
• ✨ New feature (non-breaking change that adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to change)
• 📝 Documentation update
• ♻️ Refactor / code quality improvement
• 🎨 UI/UX enhancement
• 🔒 Security improvement

---

🧩 Additional Notes for Reviewers

• Thumbnail images added to simulation cards — verify correct path mapping per simulation ID.
• Chapter component refactored for improved visual hierarchy and spacing consistency.
• No breaking changes; existing simulation data structure remains intact.
• Please review across breakpoints — desktop, tablet, and mobile all tested locally.

[vercel]

@DevxNadeem is attempting to deploy a commit to the PhysicsHub's projects Team on Vercel.

A member of the Team first needs to authorize it.

[mattqdev]

Hey, can I see the new design how it looks! I mean the one after the fix

[DevxNadeem]

yeah sure

---

[mattqdev]

why is the theme green?

[DevxNadeem]

What exactly do you want and if there is any issue can u more specify ?

[mattqdev]

I mean, the layout and the theme are completely different from the website's style. But the main issue is that on the CSS file you don't use all the HEX color as variables, please use the default ones (for example --accent-color, like these). Keep a uniform style identity with the rest of the site

[DevxNadeem]

what about this ?

[mattqdev]

Alright thank you!

[DevxNadeem]

"Thanks for the thorough review — learned a lot about maintaining design system consistency. Happy to contribute more if there are open issues that fit my stack."

[physicshub]

🎉 This PR is included in version 3.29.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀