CON-054 | Related Products

Screen Overview

• Type: Listing page with bottom navigation
• Purpose: Show all products similar to the one the user was viewing
• Previous: CON-050-product-detail.html (via "Related Products" section)
• Active nav: discover tab

Layout Specifications

• Background: #E9EFE7 (off-white)
• Header: White, back button + "Similar Products" title
• Subheading: "Similar to Full Cream Milk 2L" in muted text below header
• Grid: 2-column grid, 12px gap, 16px horizontal padding
• Bottom padding: 100px to clear bottom navigation
• Bottom nav: Fixed, 64px height, "Discover" tab active

Product Card Specs

• Container: White background, 12px radius, 1px border #D1D9CE
• Image: Square (1:1), #E9EFE7 placeholder
• Save badge: #C9F06B background, absolute top-left, 10px bold text
• Brand: 10px uppercase, 0.8px letter-spacing, muted
• Name: Alexandria 13px semi-bold, 2-line clamp, min-height 34px
• Price: Alexandria 16px bold; old price 12px strikethrough muted
• Unit price: 11px muted (e.g., "R 16.00/L")
• Add button: Outlined, 36px height, 8px radius, #043F2D border + text, plus icon + "Add"

Product Data

• 1. Parmalat Full Cream 2L — R 31.99 (was R 39.99, SAVE R 8.00)
• 2. Douglasdale Fresh Milk 2L — R 34.99
• 3. Fair Cape Full Cream 2L — R 29.99 (was R 39.99, SAVE R 10.00)
• 4. Clover Low Fat Milk 2L — R 30.99
• 5. Woodlands Full Cream Fresh Milk 2L — R 33.49
• 6. Clover Fat Free Milk 2L — R 28.99 (was R 33.99, SAVE R 5.00)

Behavior Notes

• Tapping a product card navigates to CON-050 for that product
• "+Add" button adds 1 unit directly to cart with confirmation toast
• Cards have press-down shadow feedback on tap
• Related products are determined by: same category, similar size, overlapping brand family
• Grid scrolls vertically with bottom nav always visible

Bottom Navigation

• Items: Home, Discover (active), Cart, Account
• Active state: #043F2D color, bold label
• Inactive state: #9CA3AF muted
• Height: 64px fixed

Accessibility

• Bottom nav has aria-label="Main navigation"
• Back button has aria-label="Go back"
• Product cards are <a> elements for keyboard navigation
• Add buttons are focusable and have descriptive context via card content