[Feat] Implement Product Page for Categories and Add Dark/Light Mode to Product Pages

[kavya410004]

Description:

Currently, there is an inconsistency in the way products are displayed for categories and shops:

1. Product Page for Categories: When a user clicks on the 'Shop Now' button for a category, it does not lead to a product page displaying the products of that specific category.

2. Product Page for Shops: There is an existing products page that is displayed when the 'Products' button is clicked for shops. However, this page does not have dark and light mode implemented, which leads to an inconsistent user experience.

Proposed Solution:

• Create a Product Page for Categories:

  • Develop a similar product page to display the products of a category when the user clicks on the 'Shop Now' button from the category view.
  • Ensure that the new product page aligns visually and functionally with the existing products page for shops.

• Enhance Product Page for Shops and Categories:

• Implement dark and light mode support for both the existing product page (shops) and the new product page (categories).

• Ensure smooth transition between light and dark modes for a consistent user experience.

  Benefits:

• Improves User Experience: Users will be able to browse products within a category directly, making the navigation more intuitive.

• Consistency Across Pages: Implementing dark and light mode will provide a cohesive look across all product pages, improving accessibility and readability for users in different environments.

Please let me know if there are any guidelines that I should follow while working on these changes.

Screenshots

Screenshot 1: Categories view with 'Shop Now' button

Screenshot 2: Existing product page for shops with no dark/light mode

---

Checklist

• [X] I have checked the existing issues
• [X] I have read the Contributing Guidelines
• [X] I'm a GSSoC'24-Extd contributor
• [X] I'm a Hacktoberfest'24 contributor
• [X] I am willing to work on this issue (optional)

[github-actions[bot]]

Hello kavya410004! Thanks for opening an issue in Ezyshop! 🚀

• We'll get back to you as soon as possible.

• Hope you star our Repo.

• Join our Discord Server to collaborate and discuss further.

[mdazfar2]

@kavya410004 Issue acknowledged! You are going to be assigned.

Hope you know that our website is fully converted to the Next.js and Tailwind CSS framework, so you have to work accordingly.

• Read our [Contributing guidelines](https://github.com/mdazfar2/Ezyshop/blob/main/CONTRIBUTING.md] and make sure to contribute accordingly.

Thank you

[kavya410004]

Hello @mdazfar2 There have been some issues with the database connection, so my work on the product pages might be delayed a bit. I’m working on it and will keep you updated!

[mdazfar2]

Alright! @kavya410004

[Shalinis19137]

I really like your app and want to work on your project ,please assign this issue to me under gssoc-ext 2024

[mdazfar2]

Sorry @Shalinis19137, please don't be discouraged, but this issue is already assigned to someone. Only one person can work on a single issue at a time. You can raise another issue, and I will be happy to assign it to you, but make sure that the issue you raise is valid and really needs to be addressed on our website; otherwise, invalid issues will be closed. Thank you!

[inkerton]

hey @mdazfar2 Their is s time limit of 3 days where if the contributor doen not work on the issue another person shall be assigned the issue I would like to work on it can you assign it to me.

[mdazfar2]

@kavya410004, are you working on this issue, or should I assign it to @inkerton? Kavya Ping me here for confirmation; otherwise, I will assign it to Janvi.

[kavya410004]

Hey @mdazfar2 , I’m currently tied up with another issue that might take a while. Feel free to assign this to someone else so they can start working on it right away.

[mdazfar2]

@inkerton You are going to be assigned.