Implement Most Popular section on 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?

• [ ] Display a list/grid of popular products.
• [ ] Each product should show essential information (image, name, price).
• [ ] Ensure responsiveness across different devices (mobile, tablet, desktop).
• [ ] Implement interactions such as hover effects, clickable items.
• [ ] Use Tailwind CSS for styling.
• [ ] 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 77.23577% with 112 lines in your changes missing coverage. Please review.

Project coverage is 86.58%. Comparing base (5d62524) to head (b109290). Report is 1 commits behind head on develop.

Files	Patch %	Lines
src/components/Popular/MostPopular.tsx	72.85%	19 Missing :warning:
src/components/Popular/MostRecent.tsx	73.97%	19 Missing :warning:
src/components/Popular/MostSelling.tsx	71.21%	19 Missing :warning:
src/components/Popular/Popular_section.tsx	40.00%	18 Missing :warning:
src/features/Auth/SignInSlice.ts	70.83%	14 Missing :warning:
src/components/Navbar.tsx	79.59%	10 Missing :warning:
src/features/Popular/availableProductSlice.ts	83.67%	8 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 #62 +/- ## =========================================== - Coverage 88.37% 86.58% -1.80% =========================================== Files 32 40 +8 Lines 2108 2572 +464 Branches 141 179 +38 =========================================== + Hits 1863 2227 +364 - Misses 241 341 +100 Partials 4 4 ```

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