feat: update styling and layout in main-content.tsx

[te19oishi]

Description of change

Purpose

• Implement responsive design for templates
• Enable dynamic category fetching and selection from the top menu

Why is this change needed?

• To fix layout problems on narrow screen widths
• To increase flexibility by dynamically fetching categories

How was it verified?

• Tested the layout responsiveness using DevTools with various screen widths
• Verified category filtering functionality in multiple scenarios

Differences between current and new behavior

• New: Articles can be filtered by clicking category buttons
• New: Categories are automatically loaded from the Notion database
• Previous: Static categories with a fixed layout

Technical Details

• Implemented responsive design using CSS media queries
• Added dynamic category fetching from Notion API
• Improved state management for category filtering
• Enhanced component reusability

Pull-Request Checklist

• Code is up-to-date with the main branch
• npm run lint passes with this change N/A
• npm run test passes with this change N/A
• pnpm check passes with this change
• This pull request links relevant issues as Fixes #0000 N/A
• There are new or updated unit tests validating the change N/A
• Documentation has been updated to reflect this change N/A
• The new commits follow conventions outlined in the conventional commit spec

[vercel]

@te19oishi is attempting to deploy a commit to the Qiushi Pan's projects Team on Vercel.

A member of the Team first needs to authorize it.

[qqpann]

@te19oishi Hi! Sorry I overlooked this PR.
Could you resolve the conflicts? Sorry for the trouble 🥹