shop ecommerce product-page standard conventional modern
Shop Product Standard
Conventional ecommerce product page with image gallery, specs tabs, reviews, and trust badges — the industry standard layout.
modern Responsive Vanilla JS
Live Preview
Sections
breadcrumbproduct-detailtabsrelated-productsfooter
Patterns used
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SoundPeak Pro Max — AudioTech</title>
<meta name="description" content="SoundPeak Pro Max wireless headphones by AudioTech. Premium noise-cancelling, 40h battery, Hi-Res Audio. €179.99 with free shipping." />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://webspire.de/webspire-tokens.css">
<link rel="stylesheet" href="https://webspire.de/webspire-components.css">
<style>
html { scroll-behavior: smooth; }
/* Brand tokens — AudioTech (clean blue/white) */
:root {
--ws-color-primary: #2563eb;
--ws-color-primary-hover: #1d4ed8;
--ws-color-primary-soft: #eff6ff;
--ws-color-surface: #ffffff;
--ws-color-surface-alt: #f8fafc;
--ws-color-text: #0f172a;
--ws-color-text-soft: #1e293b;
--ws-color-text-muted: #64748b;
--ws-color-border: #e2e8f0;
--ws-color-success: #16a34a;
--ws-color-warning: #f59e0b;
}
/* interactions/hover-lift */
.hover-lift {
--lift-distance: -3px;
--lift-shadow: 0 6px 20px oklch(0 0 0 / 0.12);
--lift-duration: 0.25s;
transition:
transform var(--lift-duration) cubic-bezier(0.16, 1, 0.3, 1),
box-shadow var(--lift-duration) cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-lift:hover {
transform: translateY(var(--lift-distance));
box-shadow: var(--lift-shadow);
}
@media (prefers-reduced-motion: reduce) {
.hover-lift { transition: none; }
}
/* Template helpers */
.tab-btn.active { color: #2563eb; border-color: #2563eb; }
.tab-btn { border-bottom: 2px solid transparent; }
.thumb.active { box-shadow: 0 0 0 2px #2563eb; }
.color-opt.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2563eb; }
.star-filled { color: #f59e0b; }
.star-empty { color: #d1d5db; }
</style>
</head>
<body class="bg-white text-slate-800 antialiased">
<!-- Breadcrumb -->
<nav class="ws-breadcrumb max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3" aria-label="Breadcrumb">
<ol class="flex items-center gap-1.5 text-sm text-slate-500">
<li><a href="#" class="hover:text-blue-600 transition-colors">Home</a></li>
<li aria-hidden="true">
<svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/></svg>
</li>
<li><a href="#" class="hover:text-blue-600 transition-colors">Electronics</a></li>
<li aria-hidden="true">
<svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/></svg>
</li>
<li><a href="#" class="hover:text-blue-600 transition-colors">Headphones</a></li>
<li aria-hidden="true">
<svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/></svg>
</li>
<li class="text-slate-800 font-medium" aria-current="page">SoundPeak Pro Max</li>
</ol>
</nav>
<!-- Product Section -->
<section class="ws-product-card max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-14">
<!-- Left: Image Gallery -->
<div>
<!-- Main Image -->
<div id="main-image" class="aspect-square bg-slate-100 rounded-xl border border-slate-200 flex items-center justify-center mb-4">
<div class="text-center text-slate-400">
<svg class="w-16 h-16 mx-auto mb-2" fill="none" stroke="currentColor" stroke-width="1" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z"/><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z"/></svg>
<span class="text-sm font-medium" id="main-image-label">Front View</span>
</div>
</div>
<!-- Thumbnails -->
<div class="grid grid-cols-4 gap-3" role="list" aria-label="Product image thumbnails">
<button class="thumb active aspect-square bg-slate-100 rounded-lg border border-slate-200 flex items-center justify-center text-xs text-slate-400 hover:border-blue-300 transition-colors cursor-pointer" data-view="Front View" aria-label="View front image" aria-pressed="true">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z"/><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z"/></svg>
</button>
<button class="thumb aspect-square bg-slate-50 rounded-lg border border-slate-200 flex items-center justify-center text-xs text-slate-400 hover:border-blue-300 transition-colors cursor-pointer" data-view="Side View" aria-label="View side image" aria-pressed="false">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z"/><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z"/></svg>
</button>
<button class="thumb aspect-square bg-slate-50 rounded-lg border border-slate-200 flex items-center justify-center text-xs text-slate-400 hover:border-blue-300 transition-colors cursor-pointer" data-view="Detail View" aria-label="View detail image" aria-pressed="false">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z"/><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z"/></svg>
</button>
<button class="thumb aspect-square bg-slate-50 rounded-lg border border-slate-200 flex items-center justify-center text-xs text-slate-400 hover:border-blue-300 transition-colors cursor-pointer" data-view="Lifestyle View" aria-label="View lifestyle image" aria-pressed="false">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z"/><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z"/></svg>
</button>
</div>
</div>
<!-- Right: Product Info -->
<div class="lg:pt-2">
<!-- Brand -->
<a href="#" class="text-sm font-medium text-blue-600 hover:underline">AudioTech</a>
<!-- Title -->
<h1 class="text-2xl sm:text-3xl font-bold text-slate-900 mt-1 leading-tight">SoundPeak Pro Max Wireless Noise-Cancelling Headphones</h1>
<!-- Rating -->
<div class="flex items-center gap-2 mt-3">
<div class="flex items-center" aria-label="Rating: 4.7 out of 5 stars">
<svg class="w-5 h-5 star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5 star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5 star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5 star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5 star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
<span class="text-sm font-medium text-slate-700">4.7</span>
<a href="#reviews-tab" class="text-sm text-blue-600 hover:underline">(2,341 reviews)</a>
</div>
<!-- Price -->
<div class="flex items-baseline gap-3 mt-4">
<span class="text-3xl font-bold text-slate-900">€179.99</span>
<span class="text-lg text-slate-400 line-through">€229.99</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-red-100 text-red-700">-22%</span>
</div>
<p class="text-sm text-green-600 font-medium mt-1">In stock — ships within 24h</p>
<!-- Divider -->
<hr class="my-5 border-slate-200" />
<!-- Key Features -->
<ul class="space-y-2 text-sm text-slate-600">
<li class="flex items-start gap-2">
<svg class="w-5 h-5 text-blue-600 shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Adaptive noise cancellation with Transparency mode
</li>
<li class="flex items-start gap-2">
<svg class="w-5 h-5 text-blue-600 shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
40-hour battery life — 5 min charge = 3 hours playback
</li>
<li class="flex items-start gap-2">
<svg class="w-5 h-5 text-blue-600 shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Hi-Res Audio with LDAC and aptX Adaptive support
</li>
<li class="flex items-start gap-2">
<svg class="w-5 h-5 text-blue-600 shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Multipoint connection — pair 2 devices simultaneously
</li>
</ul>
<!-- Divider -->
<hr class="my-5 border-slate-200" />
<!-- Color Selector -->
<div>
<span class="text-sm font-medium text-slate-700">Color: <span id="color-label" class="font-normal text-slate-500">Matte Black</span></span>
<div class="flex items-center gap-3 mt-2" role="radiogroup" aria-label="Select color">
<button class="color-opt active w-8 h-8 rounded-full bg-slate-900 cursor-pointer border-0" role="radio" aria-checked="true" aria-label="Matte Black" data-color="Matte Black"></button>
<button class="color-opt w-8 h-8 rounded-full bg-slate-300 cursor-pointer border-0" role="radio" aria-checked="false" aria-label="Silver Frost" data-color="Silver Frost"></button>
<button class="color-opt w-8 h-8 rounded-full bg-blue-900 cursor-pointer border-0" role="radio" aria-checked="false" aria-label="Midnight Blue" data-color="Midnight Blue"></button>
</div>
</div>
<!-- Quantity Selector -->
<div class="mt-5">
<span class="text-sm font-medium text-slate-700">Quantity</span>
<div class="flex items-center gap-0 mt-2 w-fit border border-slate-300 rounded-lg overflow-hidden">
<button id="qty-minus" class="px-3 py-2 text-slate-600 hover:bg-slate-50 transition-colors text-lg font-medium" aria-label="Decrease quantity">−</button>
<span id="qty-value" class="px-4 py-2 text-sm font-medium text-slate-800 min-w-[3rem] text-center border-x border-slate-300 bg-white" aria-live="polite" aria-label="Quantity">1</span>
<button id="qty-plus" class="px-3 py-2 text-slate-600 hover:bg-slate-50 transition-colors text-lg font-medium" aria-label="Increase quantity">+</button>
</div>
</div>
<!-- CTA Buttons -->
<div class="flex flex-col sm:flex-row gap-3 mt-6">
<button class="flex-1 bg-blue-600 text-white font-semibold py-3 px-6 rounded-lg hover:bg-blue-700 transition-colors text-sm cursor-pointer">
<span class="flex items-center justify-center gap-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"/></svg>
Add to Cart
</span>
</button>
<button class="flex-1 bg-slate-900 text-white font-semibold py-3 px-6 rounded-lg hover:bg-slate-800 transition-colors text-sm cursor-pointer">
Buy Now
</button>
</div>
<!-- Delivery Info -->
<div class="mt-6 space-y-2">
<div class="flex items-center gap-2 text-sm text-slate-600">
<svg class="w-5 h-5 text-green-600 shrink-0" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 00-10.026 0 1.106 1.106 0 00-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12"/></svg>
<span><strong>Free shipping</strong> — Express delivery available</span>
</div>
<div class="flex items-center gap-2 text-sm text-slate-600">
<svg class="w-5 h-5 text-slate-400 shrink-0" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5"/></svg>
<span>Estimated delivery: <strong>March 24 – 26</strong></span>
</div>
</div>
<!-- Trust Badges -->
<div class="grid grid-cols-3 gap-3 mt-6 pt-5 border-t border-slate-200">
<div class="text-center">
<svg class="w-6 h-6 mx-auto text-slate-500 mb-1" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
<span class="text-xs text-slate-500 font-medium">Secure Payment</span>
</div>
<div class="text-center">
<svg class="w-6 h-6 mx-auto text-slate-500 mb-1" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182"/></svg>
<span class="text-xs text-slate-500 font-medium">30-Day Returns</span>
</div>
<div class="text-center">
<svg class="w-6 h-6 mx-auto text-slate-500 mb-1" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17l-5.1-5.1m0 0L11.42 4.97m-5.1 5.1H21m-5.58 5.1l5.1-5.1m0 0l-5.1-5.1m5.1 5.1H3"/></svg>
<span class="text-xs text-slate-500 font-medium">2-Year Warranty</span>
</div>
</div>
</div>
</div>
</section>
<!-- Tabs Section -->
<section class="ws-tabs max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-20" id="reviews-tab">
<!-- Tab Navigation -->
<div class="border-b border-slate-200" role="tablist" aria-label="Product information tabs">
<div class="flex gap-8">
<button class="tab-btn active py-3 text-sm font-medium transition-colors" role="tab" aria-selected="true" aria-controls="tab-description" id="btn-description">Description</button>
<button class="tab-btn py-3 text-sm font-medium text-slate-500 hover:text-slate-700 transition-colors" role="tab" aria-selected="false" aria-controls="tab-specifications" id="btn-specifications">Specifications</button>
<button class="tab-btn py-3 text-sm font-medium text-slate-500 hover:text-slate-700 transition-colors" role="tab" aria-selected="false" aria-controls="tab-reviews" id="btn-reviews">Reviews (2,341)</button>
</div>
</div>
<!-- Tab: Description -->
<div id="tab-description" class="py-8" role="tabpanel" aria-labelledby="btn-description">
<div class="max-w-3xl prose prose-slate">
<p class="text-slate-600 leading-relaxed">The SoundPeak Pro Max represents a new benchmark in wireless audio. Featuring AudioTech's proprietary NoiseSense technology, these headphones deliver industry-leading noise cancellation that adapts to your environment in real time. Whether you're on a crowded train, in a busy office, or enjoying music at home, the Pro Max creates your perfect listening space.</p>
<p class="text-slate-600 leading-relaxed mt-4">Engineered with custom 40mm dynamic drivers and support for Hi-Res Audio codecs including LDAC and aptX Adaptive, every note is reproduced with stunning clarity and depth. The premium memory foam ear cushions wrapped in protein leather provide exceptional comfort for extended listening sessions, while the foldable design makes them the ideal travel companion. With 40 hours of battery life and fast charging that delivers 3 hours of playback from just 5 minutes of charging, the Pro Max keeps up with your life.</p>
</div>
</div>
<!-- Tab: Specifications -->
<div id="tab-specifications" class="py-8 hidden" role="tabpanel" aria-labelledby="btn-specifications">
<div class="max-w-2xl">
<table class="w-full text-sm">
<caption class="sr-only">Product specifications</caption>
<tbody>
<tr class="border-b border-slate-100">
<th scope="row" class="py-3 pr-4 text-left font-medium text-slate-500 w-1/3">Brand</th>
<td class="py-3 text-slate-800">AudioTech</td>
</tr>
<tr class="border-b border-slate-100">
<th scope="row" class="py-3 pr-4 text-left font-medium text-slate-500">Model</th>
<td class="py-3 text-slate-800">SoundPeak Pro Max</td>
</tr>
<tr class="border-b border-slate-100">
<th scope="row" class="py-3 pr-4 text-left font-medium text-slate-500">Weight</th>
<td class="py-3 text-slate-800">254 g</td>
</tr>
<tr class="border-b border-slate-100">
<th scope="row" class="py-3 pr-4 text-left font-medium text-slate-500">Battery Life</th>
<td class="py-3 text-slate-800">Up to 40 hours (ANC on)</td>
</tr>
<tr class="border-b border-slate-100">
<th scope="row" class="py-3 pr-4 text-left font-medium text-slate-500">Driver Size</th>
<td class="py-3 text-slate-800">40 mm dynamic</td>
</tr>
<tr class="border-b border-slate-100">
<th scope="row" class="py-3 pr-4 text-left font-medium text-slate-500">Connectivity</th>
<td class="py-3 text-slate-800">Bluetooth 5.3, USB-C, 3.5 mm</td>
</tr>
<tr class="border-b border-slate-100">
<th scope="row" class="py-3 pr-4 text-left font-medium text-slate-500">Codecs</th>
<td class="py-3 text-slate-800">SBC, AAC, LDAC, aptX Adaptive</td>
</tr>
<tr>
<th scope="row" class="py-3 pr-4 text-left font-medium text-slate-500">In the Box</th>
<td class="py-3 text-slate-800">Headphones, USB-C cable, 3.5 mm cable, carry case, quick start guide</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Tab: Reviews -->
<div id="tab-reviews" class="py-8 hidden" role="tabpanel" aria-labelledby="btn-reviews">
<div class="max-w-3xl">
<!-- Star Distribution -->
<div class="flex flex-col sm:flex-row gap-8 mb-10">
<div class="text-center sm:text-left shrink-0">
<div class="text-5xl font-bold text-slate-900">4.7</div>
<div class="flex items-center justify-center sm:justify-start mt-1" aria-hidden="true">
<svg class="w-5 h-5 star-filled" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5 star-filled" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5 star-filled" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5 star-filled" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5 star-filled" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
<p class="text-sm text-slate-500 mt-1">2,341 reviews</p>
</div>
<div class="flex-1 space-y-2">
<div class="flex items-center gap-3">
<span class="text-sm text-slate-600 w-8">5 <span class="sr-only">stars</span></span>
<div class="flex-1 h-2.5 bg-slate-100 rounded-full overflow-hidden"><div class="h-full bg-amber-400 rounded-full" style="width: 68%"></div></div>
<span class="text-sm text-slate-500 w-10 text-right">68%</span>
</div>
<div class="flex items-center gap-3">
<span class="text-sm text-slate-600 w-8">4 <span class="sr-only">stars</span></span>
<div class="flex-1 h-2.5 bg-slate-100 rounded-full overflow-hidden"><div class="h-full bg-amber-400 rounded-full" style="width: 21%"></div></div>
<span class="text-sm text-slate-500 w-10 text-right">21%</span>
</div>
<div class="flex items-center gap-3">
<span class="text-sm text-slate-600 w-8">3 <span class="sr-only">stars</span></span>
<div class="flex-1 h-2.5 bg-slate-100 rounded-full overflow-hidden"><div class="h-full bg-amber-400 rounded-full" style="width: 7%"></div></div>
<span class="text-sm text-slate-500 w-10 text-right">7%</span>
</div>
<div class="flex items-center gap-3">
<span class="text-sm text-slate-600 w-8">2 <span class="sr-only">stars</span></span>
<div class="flex-1 h-2.5 bg-slate-100 rounded-full overflow-hidden"><div class="h-full bg-amber-400 rounded-full" style="width: 3%"></div></div>
<span class="text-sm text-slate-500 w-10 text-right">3%</span>
</div>
<div class="flex items-center gap-3">
<span class="text-sm text-slate-600 w-8">1 <span class="sr-only">star</span></span>
<div class="flex-1 h-2.5 bg-slate-100 rounded-full overflow-hidden"><div class="h-full bg-amber-400 rounded-full" style="width: 1%"></div></div>
<span class="text-sm text-slate-500 w-10 text-right">1%</span>
</div>
</div>
</div>
<!-- Individual Reviews -->
<div class="space-y-6">
<!-- Review 1 -->
<article class="border-b border-slate-100 pb-6">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-sm font-semibold text-blue-700">M</div>
<div>
<span class="text-sm font-medium text-slate-800">Markus T.</span>
<span class="ml-2 inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-green-50 text-green-700">Verified Purchase</span>
</div>
</div>
<time class="text-xs text-slate-400" datetime="2026-03-12">March 12, 2026</time>
</div>
<div class="flex items-center mb-2" aria-label="5 out of 5 stars">
<svg class="w-4 h-4 star-filled" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 star-filled" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 star-filled" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 star-filled" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 star-filled" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
<h3 class="text-sm font-semibold text-slate-800 mb-1">Best headphones I've ever owned</h3>
<p class="text-sm text-slate-600 leading-relaxed">The noise cancellation is on another level. I use these daily on my commute and in the office. Battery easily lasts the whole week with moderate use. Sound quality is exceptional — crisp highs and deep, controlled bass. Worth every cent.</p>
</article>
<!-- Review 2 -->
<article class="border-b border-slate-100 pb-6">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center text-sm font-semibold text-purple-700">S</div>
<div>
<span class="text-sm font-medium text-slate-800">Sarah K.</span>
<span class="ml-2 inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-green-50 text-green-700">Verified Purchase</span>
</div>
</div>
<time class="text-xs text-slate-400" datetime="2026-03-05">March 5, 2026</time>
</div>
<div class="flex items-center mb-2" aria-label="4 out of 5 stars">
<svg class="w-4 h-4 star-filled" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 star-filled" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 star-filled" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 star-filled" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 star-empty" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
<h3 class="text-sm font-semibold text-slate-800 mb-1">Great sound, slightly tight fit</h3>
<p class="text-sm text-slate-600 leading-relaxed">Sound quality and ANC are outstanding. The multipoint feature is a game-changer for switching between laptop and phone. Only minor complaint: they feel a bit snug at first, but they loosen up after a week of use. The carry case is a nice premium touch.</p>
</article>
<!-- Review 3 -->
<article class="pb-6">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-amber-100 flex items-center justify-center text-sm font-semibold text-amber-700">J</div>
<div>
<span class="text-sm font-medium text-slate-800">Jan P.</span>
<span class="ml-2 inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-green-50 text-green-700">Verified Purchase</span>
</div>
</div>
<time class="text-xs text-slate-400" datetime="2026-02-28">February 28, 2026</time>
</div>
<div class="flex items-center mb-2" aria-label="5 out of 5 stars">
<svg class="w-4 h-4 star-filled" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 star-filled" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 star-filled" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 star-filled" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-4 h-4 star-filled" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
<h3 class="text-sm font-semibold text-slate-800 mb-1">Replaced my expensive brand-name pair</h3>
<p class="text-sm text-slate-600 leading-relaxed">I was skeptical switching from a well-known premium brand, but these are genuinely better in every way. The ANC is more effective, the battery lasts significantly longer, and the app gives you great EQ customization. The fast charging is incredibly convenient — plug in during a coffee break and you're set for the rest of the day.</p>
</article>
</div>
</div>
</div>
</section>
<!-- Related Products -->
<section class="ws-related-articles bg-slate-50 py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-xl font-bold text-slate-900 mb-8">You might also like</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Related Product 1 -->
<article class="bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-md transition-shadow">
<div class="aspect-square bg-slate-100 flex items-center justify-center">
<svg class="w-10 h-10 text-slate-300" fill="none" stroke="currentColor" stroke-width="1" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z"/><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z"/></svg>
</div>
<div class="p-4">
<p class="text-xs text-slate-500">AudioTech</p>
<h3 class="text-sm font-medium text-slate-800 mt-0.5 line-clamp-2">SoundPeak Lite Wireless Earbuds</h3>
<div class="flex items-center gap-1 mt-1.5">
<svg class="w-3.5 h-3.5 star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<span class="text-xs text-slate-500">4.5 (892)</span>
</div>
<p class="text-base font-bold text-slate-900 mt-2">€79.99</p>
</div>
</article>
<!-- Related Product 2 -->
<article class="bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-md transition-shadow">
<div class="aspect-square bg-slate-100 flex items-center justify-center">
<svg class="w-10 h-10 text-slate-300" fill="none" stroke="currentColor" stroke-width="1" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z"/><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z"/></svg>
</div>
<div class="p-4">
<p class="text-xs text-slate-500">AudioTech</p>
<h3 class="text-sm font-medium text-slate-800 mt-0.5 line-clamp-2">SoundPeak Travel Case Premium</h3>
<div class="flex items-center gap-1 mt-1.5">
<svg class="w-3.5 h-3.5 star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<span class="text-xs text-slate-500">4.8 (345)</span>
</div>
<p class="text-base font-bold text-slate-900 mt-2">€34.99</p>
</div>
</article>
<!-- Related Product 3 -->
<article class="bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-md transition-shadow">
<div class="aspect-square bg-slate-100 flex items-center justify-center">
<svg class="w-10 h-10 text-slate-300" fill="none" stroke="currentColor" stroke-width="1" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z"/><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z"/></svg>
</div>
<div class="p-4">
<p class="text-xs text-slate-500">AudioTech</p>
<h3 class="text-sm font-medium text-slate-800 mt-0.5 line-clamp-2">SoundPeak Pro Replacement Ear Cushions</h3>
<div class="flex items-center gap-1 mt-1.5">
<svg class="w-3.5 h-3.5 star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<span class="text-xs text-slate-500">4.3 (128)</span>
</div>
<p class="text-base font-bold text-slate-900 mt-2">€24.99</p>
</div>
</article>
<!-- Related Product 4 -->
<article class="bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-md transition-shadow">
<div class="aspect-square bg-slate-100 flex items-center justify-center">
<svg class="w-10 h-10 text-slate-300" fill="none" stroke="currentColor" stroke-width="1" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z"/><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z"/></svg>
</div>
<div class="p-4">
<p class="text-xs text-slate-500">SoundWave</p>
<h3 class="text-sm font-medium text-slate-800 mt-0.5 line-clamp-2">StudioMax Over-Ear Monitor Headphones</h3>
<div class="flex items-center gap-1 mt-1.5">
<svg class="w-3.5 h-3.5 star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<span class="text-xs text-slate-500">4.6 (1,204)</span>
</div>
<p class="text-base font-bold text-slate-900 mt-2">€149.99</p>
</div>
</article>
</div>
</div>
</section>
<!-- Footer -->
<footer class="ws-footer bg-slate-900 text-slate-400 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
<div>
<h3 class="text-sm font-semibold text-white mb-4">Shop</h3>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">Headphones</a></li>
<li><a href="#" class="hover:text-white transition-colors">Earbuds</a></li>
<li><a href="#" class="hover:text-white transition-colors">Speakers</a></li>
<li><a href="#" class="hover:text-white transition-colors">Accessories</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold text-white mb-4">Support</h3>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">Help Center</a></li>
<li><a href="#" class="hover:text-white transition-colors">Shipping Info</a></li>
<li><a href="#" class="hover:text-white transition-colors">Returns</a></li>
<li><a href="#" class="hover:text-white transition-colors">Warranty</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold text-white mb-4">Company</h3>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">About Us</a></li>
<li><a href="#" class="hover:text-white transition-colors">Careers</a></li>
<li><a href="#" class="hover:text-white transition-colors">Press</a></li>
<li><a href="#" class="hover:text-white transition-colors">Blog</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">Privacy Policy</a></li>
<li><a href="#" class="hover:text-white transition-colors">Terms of Service</a></li>
<li><a href="#" class="hover:text-white transition-colors">Cookie Policy</a></li>
<li><a href="#" class="hover:text-white transition-colors">Imprint</a></li>
</ul>
</div>
</div>
<div class="border-t border-slate-800 mt-10 pt-8 flex flex-col sm:flex-row items-center justify-between gap-4">
<p class="text-sm">© 2026 AudioTech. All rights reserved.</p>
<div class="flex items-center gap-4">
<a href="#" class="hover:text-white transition-colors" aria-label="AudioTech on Twitter">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
</a>
<a href="#" class="hover:text-white transition-colors" aria-label="AudioTech on Instagram">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"/></svg>
</a>
<a href="#" class="hover:text-white transition-colors" aria-label="AudioTech on YouTube">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z" clip-rule="evenodd"/></svg>
</a>
</div>
</div>
</div>
</footer>
<!-- JavaScript -->
<script>
// Tabs
const tabBtns = document.querySelectorAll('.tab-btn');
const tabPanels = document.querySelectorAll('[role="tabpanel"]');
tabBtns.forEach(btn => {
btn.addEventListener('click', () => {
tabBtns.forEach(b => {
b.classList.remove('active');
b.setAttribute('aria-selected', 'false');
});
tabPanels.forEach(p => p.classList.add('hidden'));
btn.classList.add('active');
btn.setAttribute('aria-selected', 'true');
const target = document.getElementById(btn.getAttribute('aria-controls'));
if (target) target.classList.remove('hidden');
});
});
// Quantity selector
const qtyValue = document.getElementById('qty-value');
let qty = 1;
document.getElementById('qty-minus').addEventListener('click', () => {
if (qty > 1) {
qty--;
qtyValue.textContent = qty;
}
});
document.getElementById('qty-plus').addEventListener('click', () => {
if (qty < 10) {
qty++;
qtyValue.textContent = qty;
}
});
// Thumbnail selection
const thumbs = document.querySelectorAll('.thumb');
const mainImageLabel = document.getElementById('main-image-label');
thumbs.forEach(thumb => {
thumb.addEventListener('click', () => {
thumbs.forEach(t => {
t.classList.remove('active');
t.setAttribute('aria-pressed', 'false');
});
thumb.classList.add('active');
thumb.setAttribute('aria-pressed', 'true');
if (mainImageLabel) {
mainImageLabel.textContent = thumb.dataset.view;
}
});
});
// Color selector
const colorOpts = document.querySelectorAll('.color-opt');
const colorLabel = document.getElementById('color-label');
colorOpts.forEach(opt => {
opt.addEventListener('click', () => {
colorOpts.forEach(o => {
o.classList.remove('active');
o.setAttribute('aria-checked', 'false');
});
opt.classList.add('active');
opt.setAttribute('aria-checked', 'true');
if (colorLabel) {
colorLabel.textContent = opt.dataset.color;
}
});
});
</script>
</body>
</html>Industry-standard product page layout that users immediately understand. Blue CTAs, structured specs, star ratings, and trust badges create a familiar shopping experience.