Description

This PR fixes the extra white space issue and improves the layout by redesigning the contribution section to better accommodate two cards per row.

Changes Introduced

• Redesigned layout → two cards per row (eliminating unwanted white space).
• Updated sidebar navigation:
  • When a row has two cards, both links are highlighted when in view.
  • Clicking on a nav link highlights the respective card.
  • Highlight is cleared when scrolling back (no sticky highlight).
• Improved scroll tracking logic to ensure smoother synchronization between nav and content cards.

Before / After

Implementation Video

Related Issue

Fixes: #394

Checklist

• Layout redesigned to remove white space
• Sidebar highlights both cards in a row
• Clicking a link highlights only its card
• Highlight clears correctly on scroll back
• Tested responsiveness and smooth scrolling

✅ This resolves the white space issue and ensures the sidebar + card highlights work as expected with the new two-cards-per-row design.

Type of Change

• New feature (e.g., new page, component, or functionality)
• Bug fix (non-breaking change that fixes an issue)
• UI/UX improvement (design, layout, or styling updates)
• Performance optimization (e.g., code splitting, caching)
• Documentation update (README, contribution guidelines, etc.)
• Other (please specify):

Checklist

• My code follows the style guidelines of this project.
• I have tested my changes across major browsers/devices
• My changes do not generate new console warnings or errors , I ran npm run build and attached scrrenshot in this PR.
• This is already assigned Issue to me, not an unassigned issue.