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?

[Link to the relevant story on Pivotal Tracker/Trello]

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
dynamites-ecomm-fe	❌ Failed (Inspect)			Jun 28, 2024 1:11pm

[netlify[bot]]

❌ Deploy Preview for dynamites-ecomm-fe failed.

Name	Link
🔨 Latest commit	8a67ed442076617e40cc53fdbcf4a5cd9f25fbc8
🔍 Latest deploy log	https://app.netlify.com/sites/dynamites-ecomm-fe/deploys/667eb66e906a530008e775cd