PFP collections page - Add the left column

[Kevils]

Description 📹

Current :

New design :

Figma file : https://www.figma.com/design/S1UKYgWewNqNHZFAaBUilG/%F0%9F%8F%9D%EF%B8%8F-Starknet-ID?node-id=4207-25450&t=voihEFkmKVAooepr-1

We will redesign the 'PFP Collections' page with the same structure as the 'edit' profile picture page in the user's identity. Add the left column with two categories: Starknet ID Ecosystem & Overall Starknet Ecosystem.

Proposed Actions 🛠️

Here’s a checklist of actions to follow for resolving this issue:

1. Fork and Create Branch:
   Fork the repository and create a new branch using the issue number:

   git checkout -b fix-[issue-number]

2. Implement Changes:
   [Insert Code snippet if needed with a mardown todo list]

3. Run Tests and Commit Changes:
   Make sure your changes don't break existing functionality and commit with a clear message:

   git commit -m "Fix: [Short description of the fix]"

Required 📋

To keep our workflow smooth, please make sure you follow these guidelines:

• Assignment: Don't create a pull request if you weren’t assigned to this issue.
• Timeframe: Complete the task within 3 business days.
• Closing the Issue: In your PR description, close the issue by writing Close #[issue_id].
• Review Process:
  • Once you've submitted your PR, change the label to "ready for review".
  • If changes are requested, address them and then update the label back to "ready for review" once done.
• Testing: Test your PR locally before pushing, and verify that tests and build are working after pushing.

Thank you for your contribution 🙏

⚠️ WARNING: Failure to follow the requirements above may result in being added to the OnlyDust blacklist, affecting your ability to receive future rewards.

[SudiptaPaul-31]

@Kevils I think I can solve this issue

My approach to tackle this:

Will go to the actual page on the codebase and make the changes accordingly from the figma design and making it responsive for all devices.

ETA - 1DAY