[UI/UX] Build High-Fidelity Product Details Page (Desktop & Mobile)

[Rampop01]

Issue #62

[UI/UX] Build High-Fidelity Product Details Page (Desktop & Mobile)

🟡 Priority: High
Difficulty: Medium
Estimated Effort: 2-3 days
Relevant Files: src/app/product/[id]/page.tsx, src/components/product/ImageGallery.tsx, src/components/product/SellerCard.tsx, src/components/product/BuyCTA.tsx
Labels: ui, product, priority:high, figma

Requirements

1. Implementation Details

   • Translate the Product Details Figma screen into code, including: multi-image gallery with thumbnail navigation, Condition badge, Price in USDC, and Seller's Trust Score widget.
   • Implement a sticky 'Buy Now / Start Escrow' CTA panel that remains visible as the user scrolls through the description on both desktop and mobile.
   • Display a breadcrumb trail for navigation (e.g., Marketplace > Phones > Product Title) matching the Figma layout.
   • Ensure all interactive elements meet tap target guidelines (minimum 44x44px) for mobile usability.

2. Screenshot Requirement

   • Capture and commit screenshots of the Desktop and Mobile Product Details page with a realistic device listing (name, images, price, seller info).
   • Include a screenshot demonstrating the sticky CTA panel at a mid-scroll position.
   • Place all screenshots in src/components/product/screenshots/.

3. Testing Requirements

   • Component test: Render the page with a mocked product object and assert that the gallery renders correctly and the CTA button is visible.
   • Accessibility audit: Ensure all images have descriptive alt tags and the page is navigable by keyboard.

---

[Muhamadmust]

Hi maintainer
I have reviewed this issue and would like to work on it, PR 2days