Product Page — Hero Section (UI + Interactions)

[Alexandrbig1]

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
      • Quantity selector (+/- buttons)
      • Buttons:
        • Add to Cart: adds item to cart but stays on page
        • Buy It Now: redirects to /cart page

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

[sogoyalz]

i can work on this

[Alexandrbig1]

@SoGozo, thanks for your interest! Are you sure about this task, cause this task is not easy, it's advanced?

[inbuilt-aura]

hey @Alexandrbig1 i have multiple experience working on Product cards hero section like this, can i do this. Please assign me.

[Alexandrbig1]

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]

@SoGozo, thanks for your interest! Are you sure about this task, cause this task is not easy, it's advanced?

Yes, i will definetly able to do this task.

[Alexandrbig1]

@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/:id