Repository navigation
Product Page — Hero Section (UI + Interactions) #44
Description
Difficulty: Advanced — please only pick this up if you are comfortable with complex UI + interactive components.
Description:
Implement the Hero Section for the Product Detail Page.
This section is the first thing the user sees when they open a specific product. It contains product images, description, reviews, flavors, sizes, and purchase actions.
Requirements:
- Layout:
- Two-column layout:
- Left side:
- Large product image (main image)
- 5 small thumbnails below/side (on hover or click → update the main image)
- Left/right arrows → cycle through product images
- Right side:
- Product stars + number of reviews
- Product name
- Product description
- Flavors:
- Show all flavors with thumbnail images
- On hover → show flavor name
- On click → update main image and mark flavor as selected
- Sizes:
- Options like
2lb,4lb - On click → highlight selected size
- Options like
- Quantity selector (+/- buttons)
- Buttons:
Add to Cart: adds item to cart but stays on pageBuy It Now: redirects to/cartpage
- Left side:
- Two-column layout:
Assets:
Acceptance Criteria:
- Layout matches the Figma design
- User can click thumbnails to switch main image
- Arrows correctly cycle through images
- Hover over flavors shows flavor name; clicking updates the displayed product
- User can select size, only one size at a time
- Quantity can increase/decrease without page reload
- Clicking Add to Cart → adds item to cart, but keeps user on product page
- Clicking Buy It Now → redirects user to cart page with product added
- All interactions are smooth and responsive (basic desktop-first, mobile later task)
⚠️ Note:
- This is a core feature of the products page — only skilled contributors with React/Tailwind experience should pick it up.
- Fetch product data from
https://corexshoptest.onrender.com/api/products/:id
Activity
sogoyalz commentedon Oct 3, 2025
i can work on this
Alexandrbig1 commentedon Oct 3, 2025
@SoGozo, thanks for your interest! Are you sure about this task, cause this task is not easy, it's advanced?
inbuilt-aura commentedon Oct 3, 2025
hey @Alexandrbig1 i have multiple experience working on Product cards hero section like this, can i do this. Please assign me.
Alexandrbig1 commentedon Oct 3, 2025
Hi @inbuilt-aura, thanks for your interest and experience! Since you’re already assigned to another task, let’s focus on finishing that one first. Once it’s complete, you’re very welcome to request this task as well. Looking forward to your contributions!
sogoyalz commentedon Oct 3, 2025
Yes, i will definetly able to do this task.
Alexandrbig1 commentedon Oct 3, 2025
@SoGozo, great! I've assigned you to this task. Looking forward to your PR's.
Fetch product data from
https://corexshoptest.onrender.com/api/products/:id39 remaining items
Alexandrbig1 commentedon Nov 5, 2025
@Ankit-Kum-ar, would you like to improve this section?
Ankit-Kum-ar commentedon Nov 6, 2025
@Alexandrbig1, Have this page already implemented in the code ??
Alexandrbig1 commentedon Nov 6, 2025
@Ankit-Kum-ar, we have everything implemented. But not everything is working as expected. In this section as well, there are a few improvements that could be made. If you want this section, or any other task, let me know. I'll tell you what needs to be improved here. Or you can test out the app, functionality, and verify with design by yourself, and if you find any errors, you can open a new issue. Let me know.
sing-deep commentedon Dec 18, 2025
Hi I am interested to improve this section, as I can see clearly the layout is not same as in figma design also some functionality missing as in the "tool tip" etc.
Kindly assign me.
Thank you
Alexandrbig1 commentedon Dec 19, 2025
@sing-deep, thanks for your interest. Of course, you can improve it as you see some issue within this section. Please, it'll be great, feel free.
sing-deep commentedon Dec 22, 2025
Hi @Alexandrbig1 showing error 503 error on product loading, Do I use dummy data for UI improvement or something else? please guide me what to do?
Thank you
Alexandrbig1 commentedon Dec 22, 2025
Hi @sing-deep, give me a little bit of time, cause right now the backend is migrating from one service to another. It will be finished soon, give me a little bit of time, I'll let you know once everything will work well.
sing-deep commentedon Dec 23, 2025
Ok, thanks for letting me know.
Alexandrbig1 commentedon Jan 1, 2026
Hi @sing-deep. Backend is working again. Please, check it out, and let me know how it going.
sing-deep commentedon Jan 2, 2026
@Alexandrbig1 Hi I sent screenshots of errors on discord, kindly check. showing '500' errors
sing-deep commentedon Jan 4, 2026
@Alexandrbig1 please reply.
Alexandrbig1 commentedon Jan 5, 2026
@sing-deep, hi. Everything is working. Check once more, and be sure you pulled latest updates.