Integrates the "Most Popular" section on the landing page

[niyibi250]

What does this PR do?

Integrates the "Most Popular" section on the landing page of our e-commerce website, displaying the most popular products based on predefined criteria.

Description of Task to be completed?

• [x] Display a list/grid of popular products.
• [x] Each product should show essential information (image, name, price).
• [x] Ensure responsiveness across different devices (mobile, tablet, desktop).
• [x] Implement interactions such as hover effects, clickable items.
• [x] Use Tailwind CSS for styling.
• [x] Manage state using Redux Toolkit to handle the products' data.

How should this be manually tested?

• Navigate to the landing page of the e-commerce website.
• Verify the presence of the "Most Popular" section.
• Check if the popular products are displayed with their images, names, and prices.
• Ensure the section is responsive on mobile, tablet, and desktop devices.
• Interact with the products to check for hover effects and clickable functionality.
• Inspect the Redux store to confirm the state management for popular products.

Any background context you want to provide?

The "Most Popular" section is feature aimed at enhancing user engagement by showcasing trending products. This integration involves setting up Redux for state management, fetching data from an API, and implementing responsive and interactive UI components using Tailwind CSS.

What are the relevant pivotal tracker/Trello stories?

Screenshots

• test with coverage:

• test :

• Delopment:

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 88.65741% with 49 lines in your changes missing coverage. Please review.

Project coverage is 88.35%. Comparing base (3d5348b) to head (0622498).

Files	Patch %	Lines
src/components/Popular/Popular_section.tsx	40.00%	18 Missing :warning:
src/features/Popular/availableProductSlice.ts	77.55%	11 Missing :warning:
src/components/Popular/MostPopular.tsx	93.97%	5 Missing :warning:
src/components/Popular/MostRecent.tsx	94.18%	5 Missing :warning:
src/components/Popular/MostSelling.tsx	93.67%	5 Missing :warning:
src/pages/Home.tsx	25.00%	3 Missing :warning:
tailwind.config.js	0.00%	2 Missing :warning:

Additional details and impacted files

```diff @@ Coverage Diff @@ ## develop #64 +/- ## =========================================== + Coverage 88.29% 88.35% +0.05% =========================================== Files 32 40 +8 Lines 2179 2611 +432 Branches 148 188 +40 =========================================== + Hits 1924 2307 +383 - Misses 251 300 +49 Partials 4 4 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.