28 implement UI for landing page categories section

[niyobern]

Pull Request Title: Implement Landing Page UI with Product Display

This pull request introduces the initial UI structure for our landing page, Categories Section. The core components have been developed using React, styled with TailwindCSS, and integrated with Redux for state management.

Key Changes:

• Components:

  • ProductCard: Displays individual product information (image, title, price).
  • ProductsList: Renders a dynamic list of ProductCard components based on Redux data.
  • Sidebar: Lists available product categories in the sidebar or as a dropdown on mobile.
  • Header: Presents static information (delivery, support, discounts).
  • CategoriesSection: Structures the page with sidebar and main content areas.

• Redux Integration:

  • Product data is fetched from the Redux store in ProductsList.
  • ProductCard renders dynamically based on the Redux state.

• Styling:

  • TailwindCSS classes applied for visual consistency with the provided design.
  • Responsive design ensures a seamless experience across devices.

• Testing:

  • Thorough component testing to verify rendering and data flow.

Screenshots:

Tests Screenshot

UI Mobile

UI Desktop

How to Review:

1. Checkout this branch and run the application.
2. Verify that the landing page matches the provided design.
3. Test product display on different screen sizes (responsiveness).
4. Check that product data is fetched correctly from the Redux store.
5. Review code for clarity, best practices, and adherence to project guidelines.

Next Steps:

Once this PR is merged, we can focus on enhancing the UI with additional features and refining the overall user experience.

Let me know if you have any other questions or requests!

28

[vercel[bot]]

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

Name	Status	Preview	Comments	Updated (UTC)
dynamites-ecomm-fe	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 28, 2024 1:14pm

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 91.12903% with 66 lines in your changes missing coverage. Please review.

Project coverage is 89.54%. Comparing base (b9b7d7f) to head (132b375).

Files	Patch %	Lines
src/app/slices/ProductSlice.ts	75.00%	29 Missing :warning:
src/app/slices/categorySlice.ts	81.25%	15 Missing :warning:
src/components/home/categories.tsx	93.57%	9 Missing :warning:
src/components/home/productList.tsx	86.48%	5 Missing :warning:
src/components/home/sidebar.tsx	96.33%	4 Missing :warning:
src/pages/Home.tsx	25.00%	3 Missing :warning:
src/components/home/Category.tsx	95.65%	1 Missing :warning:

Additional details and impacted files

```diff @@ Coverage Diff @@ ## develop #48 +/- ## =========================================== + Coverage 88.52% 89.54% +1.02% =========================================== Files 19 29 +10 Lines 1237 1980 +743 Branches 89 136 +47 =========================================== + Hits 1095 1773 +678 - Misses 138 203 +65 Partials 4 4 ```

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

[netlify[bot]]

✅ Deploy Preview for dynamites-ecomm-fe ready!

Name	Link
🔨 Latest commit	132b375d3603031e65d8c0e572b5879b003cd5a9
🔍 Latest deploy log	https://app.netlify.com/sites/dynamites-ecomm-fe/deploys/667eb72637b431000814a578
😎 Deploy Preview	https://deploy-preview-48--dynamites-ecomm-fe.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.