Prompt: ECommerce Product Page With Image Zoom and Reviews (FPC004)

Prompt Description

Develop a detailed product page for an e-commerce site (e.g., for a 'High-Performance Laptop').

**Page Structure & Features:**
1.  **Product Gallery:** 
    *   Main product image (identifiable as `data-testid='main-product-image'`).
    *   Several thumbnail images below it. Clicking a thumbnail updates the main product image.
    *   **Image Zoom:** Hovering over the main product image should display a magnified version of that portion of the image, typically in an adjacent container or as an overlay (identifiable as `data-testid='image-zoom-view'`).
2.  **Product Information:**
    *   Product Name (H1).
    *   Short Description.
    *   Price (identifiable as `data-testid='product-price'`).
    *   Variant Selection (e.g., Color, Storage Size - use `<select>` dropdowns or radio button groups). Changes here might update the price or image (optional complexity, but good to handle basic selection).
    *   Quantity Selector (input type number, identifiable as `data-testid='quantity-input'`).
    *   'Add to Cart' button (identifiable as `data-testid='add-to-cart-button'`).
3.  **Product Details Tabs:**
    *   An accessible tabbed interface (`role='tablist'`) with sections for 'Full Description', 'Specifications', and 'Customer Reviews'. Each tab and panel should follow ARIA best practices. The tab list should be `data-testid='product-tabs'`. Tab panels should be `data-testid='tab-panel-description'`, etc.
4.  **Customer Reviews Tab Content:**
    *   Display a few sample reviews (reviewer name, rating as stars, review text).
    *   A form to submit a new review (similar to FPC002 but integrated here).

**Technical & Accessibility Requirements:**
*   Semantic HTML for the entire page. Logical heading structure.
*   Responsive design. The image gallery, zoom feature, and tabs must work well on mobile.
*   **Image Zoom Accessibility:** Ensure the zoom feature is usable with a keyboard if possible, or can be easily bypassed. Magnified content should be announced if it appears off-screen or significantly changes context.
*   **Tab Interface Accessibility:** Must be fully keyboard navigable (arrow keys for tabs, Tab to panel content) and use correct ARIA attributes (`aria-selected`, `aria-controls`, etc.).
*   All interactive elements must be accessible.
*   Styling: Tailwind CSS primarily. Custom CSS/JS will be essential for the image zoom, thumbnail gallery logic, and potentially the tab interface if advanced styling/animation is desired.

**Testing Identifiers:**
*   Main Product Image: `data-testid='main-product-image'`
*   Image Zoom View Area: `data-testid='image-zoom-view'`
*   A Thumbnail Image (example): `data-testid='thumbnail-1'`
*   Product Price Display: `data-testid='product-price'`
*   Quantity Input: `data-testid='quantity-input'`
*   Add to Cart Button: `data-testid='add-to-cart-button'`
*   Product Tabs Container: `data-testid='product-tabs'`
*   Description Tab Panel: `data-testid='tab-panel-description'`

Key Links & Info