Product Comparison Page

Build a clean, conversion-focused product comparison page for an electronics retailer called "TechVault" — a premium consumer electronics store. This page compares 3 wireless noise-cancelling headphones side-by-side. The design should make complex spec data easy to scan, highlight differences clearly, and guide the user toward a purchase decision.

1. NAVIGATION BAR
- Logo: "TechVault" in bold sans-serif with a vault-door icon, dark charcoal (#1A1A2E)
- Links: Shop, Deals, Compare, Reviews, Support
- Right side: search icon, wishlist heart with count badge, cart icon with item count, "Account" dropdown
- White background, subtle bottom shadow, sticky on scroll
- Mobile: logo + search icon + cart icon + hamburger

2. BREADCRUMB & PAGE HEADER
- Breadcrumb: Home > Headphones > Compare
- Title: "Compare Wireless Noise-Cancelling Headphones"
- Subtitle: "Side-by-side comparison of the top 3 premium headphones to help you pick the right one"
- "Edit comparison" text link to add/remove products from the comparison
- Share icon to copy comparison URL

3. PRODUCT HEADER ROW (sticky on scroll)
- 4-column layout: label column (200px) + 3 product columns (equal width)
- Each product column contains:
  - Product image (200px square, white background, centered)
  - Product name (bold): "Sony WH-1000XM5", "Bose QuietComfort Ultra", "Apple AirPods Max"
  - Star rating with count: "★★★★★ 4.7 (2,341 reviews)", "★★★★★ 4.6 (1,892 reviews)", "★★★★☆ 4.5 (3,104 reviews)"
  - Price: "$348", "$379", "$549"
  - Original prices with strikethrough where applicable: "$399" for Sony, "$429" for Bose
  - "Add to Cart" button per product (solid #7C3AED purple-600, white text, 8px radius)
  - Color swatches below button: Sony (Black, Silver, Midnight Blue), Bose (Black, White Smoke, Lunar Blue), Apple (Space Gray, Silver, Sky Blue, Midnight, Starlight)
- Sticky behavior: on scroll, header row compresses to product name + price + "Add to Cart" mini bar
- Label column stays empty in header row (aligns with spec rows below)

4. QUICK VERDICT BANNER
- Full-width card below header, light purple background (#F5F3FF)
- "🏆 Our Pick: Sony WH-1000XM5" in bold
- "Best overall value with top-tier noise cancellation, 30-hour battery, and the lightest build at 250g. Save $51 vs retail."
- "Read full review →" link
- Small print: "Verdict based on TechVault editorial testing, not influenced by brand partnerships"

5. KEY SPECS COMPARISON TABLE
- Alternating row backgrounds: white and #F8FAFC
- Label column (left): spec name in medium-weight text
- Value cells: centered text, with green checkmark ✓ or red ✗ for boolean features
- **Highlight differences**: when values differ across products, the best value gets a subtle green background (#F0FDF4) with a small "Best" badge

  Rows:
  - **Price**: $348, $379, $549
  - **Noise Cancellation**: Adaptive ANC, Adaptive ANC, Active ANC — all ✓
  - **Battery Life**: 30 hours (Best ✓), 24 hours, 20 hours
  - **Weight**: 250g (Best ✓), 250g (Best ✓), 384g
  - **Driver Size**: 30mm, 35mm (Best ✓), 40mm (Best ✓)
  - **Bluetooth Version**: 5.3, 5.3, 5.0
  - **Codec Support**: LDAC, SBC, AAC | aptX Adaptive, SBC, AAC | AAC only
  - **Multipoint Connection**: ✓, ✓, ✗
  - **Wired Option**: 3.5mm included, 3.5mm included, Lightning cable (adapter needed)
  - **Foldable**: ✓, ✓, ✗
  - **Carrying Case**: Included (slim), Included (hard shell), Smart Case (included)
  - **Water/Sweat Resistance**: IPX4 (Best ✓), None ✗, None ✗
  - **Transparency Mode**: ✓, ✓, ✓
  - **Spatial Audio**: ✓ (360 Reality Audio), ✓ (Immersive Audio), ✓ (Dolby Atmos, Best ✓)
  - **Voice Assistant**: Google, Alexa, Siri | Google, Alexa | Siri only
  - **App Support**: Sony Headphones Connect, Bose Music, Apple Settings (limited)
  - **Warranty**: 1 year, 1 year, 1 year

6. RATING BREAKDOWN COMPARISON
- Headline: "How They Rate"
- Side-by-side horizontal bar charts for each category (5-star scale):
  - Sound Quality: Sony 4.8, Bose 4.7, Apple 4.8
  - Noise Cancellation: Sony 4.9, Bose 4.8, Apple 4.6
  - Comfort: Sony 4.7, Bose 4.6, Apple 4.3
  - Battery Life: Sony 4.8, Bose 4.5, Apple 4.2
  - Build Quality: Sony 4.5, Bose 4.6, Apple 4.9
  - Value for Money: Sony 4.7, Bose 4.4, Apple 3.8
- Bar colors: Sony (#2563EB blue), Bose (#059669 emerald), Apple (#6B7280 gray)
- Winner badge on highest bar per category

7. PROS & CONS SECTION
- 3 columns, one per product
- Each column:
  - Product image (small, 60px) + name
  - Pros list (green ✓ prefix):
    - Sony: "Industry-leading ANC", "30-hour battery", "Lightweight (250g)", "LDAC hi-res audio", "Multipoint Bluetooth"
    - Bose: "Best-in-class comfort", "aptX Adaptive codec", "CustomTune sound calibration", "Excellent call quality", "Premium carrying case"
    - Apple: "Seamless Apple ecosystem", "Best build quality", "Dolby Atmos spatial audio", "Computational audio processing", "Premium materials (aluminum, steel)"
  - Cons list (red ✗ prefix):
    - Sony: "Plastic build feels less premium", "Touch controls can be finicky", "Call quality just average"
    - Bose: "No water resistance", "Shorter battery (24h)", "Heavier than Sony"
    - Apple: "Heaviest option (384g)", "No multipoint", "Expensive at $549", "Lightning connector (adapter needed)", "Limited EQ controls"
- Cards with 12px radius, 1px border

8. EXPERT MINI-REVIEWS
- 3 review cards (one per product) in a horizontal row
- Each card:
  - Product name + score badge (e.g., "9.2/10")
  - 3-line expert summary: "The XM5 continues Sony's dominance in the ANC space. It's lighter, quieter, and longer-lasting than the competition — and at $348, it's the best value in premium wireless headphones."
  - "Read Full Review →" link
  - Reviewer avatar + name: "Alex Chen, Audio Editor"
- White cards, subtle shadow, 12px radius

9. USER REVIEW HIGHLIGHTS
- Headline: "What Buyers Say"
- One featured review per product (horizontal cards):
  - Sony: "Upgraded from XM4 — the difference in noise cancellation on my daily commute is night and day. Battery lasts my entire work week." — ★★★★★ Michael R., verified buyer
  - Bose: "Most comfortable headphones I've ever worn. The immersive audio mode makes movies feel like a theater." — ★★★★★ Sarah T., verified buyer
  - Apple: "If you're all-in on Apple, these are magical. The seamless switching between my iPhone, iPad, and MacBook is worth the premium." — ★★★★☆ David L., verified buyer

10. "BEST FOR" RECOMMENDATION CARDS
- 3 cards side by side:
  - "Best Overall" → Sony WH-1000XM5 — "Top noise cancellation, longest battery, best price" — "Add to Cart" CTA
  - "Best for Comfort" → Bose QuietComfort Ultra — "Plush fit for all-day wear, excellent sound" — "Add to Cart" CTA
  - "Best for Apple Users" → Apple AirPods Max — "Seamless ecosystem integration, premium build" — "Add to Cart" CTA
- Each card: product icon, award badge, headline, one-liner, CTA
- Light purple background (#F5F3FF), 12px radius, purple left border accent (4px, #7C3AED)

11. FAQ SECTION
- Headline: "Common Questions"
- Accordion items:
  - "Which headphones have the best noise cancellation?" → "In our testing, the Sony WH-1000XM5 edges out the competition with its Integrated Processor V2 and 8 microphones..."
  - "Are these headphones good for working out?" → "Only the Sony WH-1000XM5 has IPX4 water/sweat resistance..."
  - "Can I use these headphones wired?" → "Yes — Sony and Bose include 3.5mm cables. Apple uses Lightning..."
  - "Which headphones are best for phone calls?" → "The Bose QuietComfort Ultra leads in call quality..."
  - "Do any of these support lossless audio?" → "The Sony XM5 supports LDAC for near-lossless streaming..."

12. RECENTLY VIEWED & CROSS-SELLS
- Headline: "You May Also Like"
- 4 product cards (horizontal scroll):
  - "Sony WF-1000XM5 Earbuds" — $278 — ★ 4.6 — "In-ear alternative"
  - "Bose QuietComfort Earbuds II" — $249 — ★ 4.5
  - "Sennheiser Momentum 4" — $299 — ★ 4.4
  - "Audio-Technica ATH-M50xBT2" — $179 — ★ 4.3
- Each card: image, name, price, rating, "Add to Cart" outline button

13. FOOTER
- 4 columns on #F8FAFC:
  - Shop: All Categories, New Arrivals, Best Sellers, Sale, Gift Cards
  - Help: Customer Service, Shipping & Returns, Warranty Info, Order Tracking, FAQs
  - About: Our Story, Reviews Policy, Affiliate Program, Blog, Careers
  - Connect: Newsletter signup input + button, social icons (Instagram, YouTube, Twitter, TikTok)
- Payment icons: Visa, Mastercard, Amex, PayPal, Apple Pay, Google Pay, Klarna
- "© 2026 TechVault. All rights reserved." + Privacy · Terms · Accessibility

Design: Clean, data-forward, scannable. Primary: #7C3AED (purple-600 for CTAs and accents), secondary: #1A1A2E (near-black for headings), body text: #475569 (slate-600). Success green: #10B981 for "Best" badges and pros. Error red: #EF4444 for cons. Backgrounds: white for comparison table rows, #F8FAFC for alternating rows. Typography: Inter for everything — weights 400 (body), 500 (specs), 600 (product names, prices), 700 (headings). Table cells vertically centered, generous padding (16px). Green highlight cells (#F0FDF4) for best-in-category values. Sticky product header with z-index layering for smooth scroll experience.

Responsive: Mobile-first. On screens under 768px, the comparison table switches to a horizontal-scroll layout with the first product column visible and swipe to see others. Sticky header shows 1 product at a time with left/right arrows to switch. "Best For" cards stack vertically. Pros/cons stack vertically. Add "Compare at a glance" toggle that shows only rows where products differ. Filter sidebar for mobile: chips to toggle which specs to show. All touch targets 44px minimum. Bottom sticky bar with "Add to Cart" for the currently viewed product.