shop ecommerce product single-product landing-page elegant
Shop Single Product
Premium single-product landing page with image gallery, variant selector, reviews, and related products section.
elegant Responsive Vanilla JS
Live Preview
Sections
navbarproduct-herofeaturesreviewsrelated-productsfaqfooter
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>The Voyager — Atelier Craft</title>
<meta name="description" content="The Voyager by Atelier Craft. Full-grain Italian leather, hand-stitched details, and timeless silhouette. Designed to age beautifully." />
<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 — Atelier Craft (warm amber/leather) */
:root {
--ws-color-primary: #d97706;
--ws-color-primary-hover: #b45309;
--ws-color-primary-soft: #fef3c7;
--ws-color-surface: #ffffff;
--ws-color-surface-alt: #fafaf9;
--ws-color-surface-muted: #f5f5f4;
--ws-color-text: #1c1917;
--ws-color-text-soft: #292524;
--ws-color-text-muted: #78716c;
--ws-color-border: #e7e5e4;
--ws-color-accent: #d97706;
--ws-color-accent-hover: #b45309;
}
/* interactions/hover-lift */
.hover-lift {
--lift-distance: -4px;
--lift-shadow: 0 8px 24px 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 */
details[open] summary svg { transform: rotate(180deg); }
.size-btn.active { background-color: #1e293b; color: #fff; }
.color-swatch.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1e293b; }
</style>
</head>
<body class="bg-white text-slate-800 antialiased">
<!-- Navbar -->
<nav class="ws-navbar sticky top-0 z-50 bg-white/90 backdrop-blur-md border-b border-slate-100" aria-label="Main navigation">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
<a href="#" class="text-lg font-semibold tracking-tight text-slate-900" aria-label="Atelier Craft home">
Atelier Craft
</a>
<div class="hidden md:flex items-center gap-8 text-sm font-medium text-slate-500">
<a href="#product" class="hover:text-slate-900 transition-colors">Shop</a>
<a href="#features" class="hover:text-slate-900 transition-colors">Details</a>
<a href="#reviews" class="hover:text-slate-900 transition-colors">Reviews</a>
<a href="#faq" class="hover:text-slate-900 transition-colors">FAQ</a>
</div>
<div class="flex items-center gap-4">
<button aria-label="Shopping cart, 0 items" class="relative p-2 rounded-lg hover:bg-slate-50 transition-colors">
<svg class="w-5 h-5 text-slate-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007z"/></svg>
</button>
<button id="mobile-menu-btn" class="md:hidden p-2 rounded-lg hover:bg-slate-50" aria-label="Toggle menu" aria-expanded="false">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/></svg>
</button>
</div>
</div>
<div id="mobile-menu" class="hidden md:hidden border-t border-slate-100 bg-white px-4 pb-4 pt-2 space-y-1">
<a href="#product" class="block py-2.5 text-sm font-medium text-slate-600 hover:text-slate-900">Shop</a>
<a href="#features" class="block py-2.5 text-sm font-medium text-slate-600 hover:text-slate-900">Details</a>
<a href="#reviews" class="block py-2.5 text-sm font-medium text-slate-600 hover:text-slate-900">Reviews</a>
<a href="#faq" class="block py-2.5 text-sm font-medium text-slate-600 hover:text-slate-900">FAQ</a>
</div>
</nav>
<!-- Product Hero -->
<section id="product" class="ws-product-card max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-20">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16 items-start">
<!-- Product Image -->
<div class="space-y-4">
<div class="aspect-[4/5] rounded-2xl bg-stone-200 flex items-center justify-center">
<span class="text-stone-400 text-lg font-medium tracking-wide">Product Image</span>
</div>
<div class="grid grid-cols-3 gap-3">
<div class="aspect-square rounded-xl bg-stone-200 flex items-center justify-center cursor-pointer ring-2 ring-slate-900 ring-offset-2">
<span class="text-stone-400 text-xs">Front</span>
</div>
<div class="aspect-square rounded-xl bg-stone-100 flex items-center justify-center cursor-pointer hover:ring-2 hover:ring-slate-300 hover:ring-offset-2 transition-shadow">
<span class="text-stone-400 text-xs">Side</span>
</div>
<div class="aspect-square rounded-xl bg-stone-100 flex items-center justify-center cursor-pointer hover:ring-2 hover:ring-slate-300 hover:ring-offset-2 transition-shadow">
<span class="text-stone-400 text-xs">Detail</span>
</div>
</div>
</div>
<!-- Product Details -->
<div class="lg:sticky lg:top-24 space-y-6">
<div>
<p class="text-sm font-medium text-amber-600 tracking-wide uppercase">Atelier Craft</p>
<h1 class="mt-2 text-3xl sm:text-4xl font-bold text-slate-900 tracking-tight">The Voyager</h1>
<p class="mt-3 text-2xl font-semibold text-slate-900">$289</p>
<p class="mt-1 text-sm text-slate-500">Free shipping on orders over $150</p>
</div>
<p class="text-slate-600 leading-relaxed">
Full-grain Italian leather, hand-stitched by artisans in Florence. The Voyager is built to carry your essentials with quiet confidence — a bag designed not to impress, but to last. Vegetable-tanned hide develops a rich patina unique to you.
</p>
<!-- Color Selector -->
<fieldset>
<legend class="text-sm font-medium text-slate-900 mb-3">Color — <span id="color-label">Natural Tan</span></legend>
<div class="flex items-center gap-3" role="radiogroup" aria-label="Select color">
<button type="button" role="radio" aria-checked="true" aria-label="Natural Tan" data-color="Natural Tan" class="color-swatch active w-8 h-8 rounded-full bg-[#c4a882] cursor-pointer transition-shadow"></button>
<button type="button" role="radio" aria-checked="false" aria-label="Black" data-color="Black" class="color-swatch w-8 h-8 rounded-full bg-slate-900 cursor-pointer transition-shadow"></button>
<button type="button" role="radio" aria-checked="false" aria-label="Cognac" data-color="Cognac" class="color-swatch w-8 h-8 rounded-full bg-[#8b4513] cursor-pointer transition-shadow"></button>
</div>
</fieldset>
<!-- Size Selector -->
<fieldset>
<legend class="text-sm font-medium text-slate-900 mb-3">Size</legend>
<div class="flex items-center gap-2" role="radiogroup" aria-label="Select size">
<button type="button" role="radio" aria-checked="false" data-size="S" class="size-btn px-5 py-2.5 text-sm font-medium rounded-lg border border-slate-200 text-slate-700 hover:border-slate-400 transition-colors cursor-pointer">S</button>
<button type="button" role="radio" aria-checked="true" data-size="M" class="size-btn active px-5 py-2.5 text-sm font-medium rounded-lg border border-slate-200 text-slate-700 hover:border-slate-400 transition-colors cursor-pointer">M</button>
<button type="button" role="radio" aria-checked="false" data-size="L" class="size-btn px-5 py-2.5 text-sm font-medium rounded-lg border border-slate-200 text-slate-700 hover:border-slate-400 transition-colors cursor-pointer">L</button>
</div>
</fieldset>
<!-- Add to Cart -->
<button type="button" class="w-full py-3.5 px-6 text-base font-semibold rounded-xl bg-amber-600 text-white hover:bg-amber-700 active:bg-amber-800 transition-colors shadow-sm shadow-amber-600/20">
Add to Cart — $289
</button>
<!-- Trust Signals -->
<div class="grid grid-cols-3 gap-4 pt-2">
<div class="text-center">
<svg class="w-5 h-5 mx-auto text-slate-400 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="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 0H6.375c-.621 0-1.125-.504-1.125-1.125V14.25m17.25 0V6.375c0-.621-.504-1.125-1.125-1.125H15M2.25 14.25h20.25M2.25 14.25V7.5a2.25 2.25 0 012.25-2.25h3"/></svg>
<p class="text-xs text-slate-500">Free Shipping</p>
</div>
<div class="text-center">
<svg class="w-5 h-5 mx-auto text-slate-400 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>
<p class="text-xs text-slate-500">2-Year Warranty</p>
</div>
<div class="text-center">
<svg class="w-5 h-5 mx-auto text-slate-400 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>
<p class="text-xs text-slate-500">30-Day Returns</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="ws-features bg-stone-50 border-y border-stone-100">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24">
<h2 class="text-center text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight">Crafted With Intention</h2>
<p class="mt-3 text-center text-slate-500 max-w-xl mx-auto">Every detail of The Voyager serves a purpose. No superfluous hardware, no trend-driven embellishments.</p>
<div class="mt-14 grid grid-cols-1 md:grid-cols-3 gap-10 md:gap-12">
<div class="text-center">
<div class="w-12 h-12 mx-auto rounded-xl bg-amber-100 text-amber-700 flex items-center justify-center">
<svg class="w-6 h-6" 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.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z"/></svg>
</div>
<h3 class="mt-5 text-base font-semibold text-slate-900">Full-Grain Italian Leather</h3>
<p class="mt-2 text-sm text-slate-500 leading-relaxed">Sourced from a family-run tannery in Tuscany. Vegetable-tanned for 30 days to develop its signature suppleness and rich aroma.</p>
</div>
<div class="text-center">
<div class="w-12 h-12 mx-auto rounded-xl bg-amber-100 text-amber-700 flex items-center justify-center">
<svg class="w-6 h-6" 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.1a1.5 1.5 0 010-2.12l.88-.88a1.5 1.5 0 012.12 0l2.1 2.1 5.1-5.1a1.5 1.5 0 012.12 0l.88.88a1.5 1.5 0 010 2.12l-7.98 7.98a1.5 1.5 0 01-2.12 0z"/></svg>
</div>
<h3 class="mt-5 text-base font-semibold text-slate-900">Hand-Stitched Saddle Seams</h3>
<p class="mt-2 text-sm text-slate-500 leading-relaxed">Double-needle saddle stitching with waxed linen thread. If one stitch breaks, the others hold — built to outlast machine-sewn alternatives.</p>
</div>
<div class="text-center">
<div class="w-12 h-12 mx-auto rounded-xl bg-amber-100 text-amber-700 flex items-center justify-center">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"/></svg>
</div>
<h3 class="mt-5 text-base font-semibold text-slate-900">Ages Beautifully</h3>
<p class="mt-2 text-sm text-slate-500 leading-relaxed">No two Voyagers are alike after a year. The leather develops a unique patina from sunlight, oils, and use — a journal of where you've been.</p>
</div>
</div>
</div>
</section>
<!-- Reviews -->
<section id="reviews" class="ws-testimonials max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24">
<div class="text-center">
<h2 class="text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight">What Owners Say</h2>
<div class="mt-3 flex items-center justify-center gap-2">
<div class="flex" aria-label="4.9 out of 5 stars">
<svg class="w-5 h-5 text-amber-400" 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 text-amber-400" 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 text-amber-400" 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 text-amber-400" 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 text-amber-400" 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 text-slate-500">4.9 / 5 from 127 reviews</span>
</div>
</div>
<div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Review 1 -->
<article class="rounded-2xl border border-slate-100 bg-white p-6 shadow-sm">
<div class="flex items-center gap-1 mb-1" aria-label="5 out of 5 stars">
<svg class="w-4 h-4 text-amber-400" 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-4 h-4 text-amber-400" 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-4 h-4 text-amber-400" 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-4 h-4 text-amber-400" 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-4 h-4 text-amber-400" 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>
<h3 class="mt-3 text-sm font-semibold text-slate-900">Worth every penny</h3>
<p class="mt-2 text-sm text-slate-500 leading-relaxed">Six months in and the patina is gorgeous. I've traveled through three countries with it and the leather just gets better. The craftsmanship is immediately obvious when you hold it.</p>
<p class="mt-4 text-xs font-medium text-slate-400">Marcus T. — Verified Buyer</p>
</article>
<!-- Review 2 -->
<article class="rounded-2xl border border-slate-100 bg-white p-6 shadow-sm">
<div class="flex items-center gap-1 mb-1" aria-label="5 out of 5 stars">
<svg class="w-4 h-4 text-amber-400" 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-4 h-4 text-amber-400" 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-4 h-4 text-amber-400" 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-4 h-4 text-amber-400" 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-4 h-4 text-amber-400" 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>
<h3 class="mt-3 text-sm font-semibold text-slate-900">Replaced my entire collection</h3>
<p class="mt-2 text-sm text-slate-500 leading-relaxed">I used to rotate between five cheaper bags. Now I only carry The Voyager. The cognac color deepens beautifully over time. My partner loved it so much I ordered a second in black.</p>
<p class="mt-4 text-xs font-medium text-slate-400">Elena R. — Verified Buyer</p>
</article>
<!-- Review 3 -->
<article class="rounded-2xl border border-slate-100 bg-white p-6 shadow-sm">
<div class="flex items-center gap-1 mb-1" aria-label="5 out of 5 stars">
<svg class="w-4 h-4 text-amber-400" 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-4 h-4 text-amber-400" 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-4 h-4 text-amber-400" 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-4 h-4 text-amber-400" 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-4 h-4 text-amber-400" 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>
<h3 class="mt-3 text-sm font-semibold text-slate-900">The smell alone is worth it</h3>
<p class="mt-2 text-sm text-slate-500 leading-relaxed">You know that real leather smell? This is it. The size M fits my 14" laptop perfectly with room for notebooks and cables. Brass hardware is a nice touch — no cheap zippers.</p>
<p class="mt-4 text-xs font-medium text-slate-400">James K. — Verified Buyer</p>
</article>
</div>
</section>
<!-- Related Products -->
<section class="ws-related-articles bg-stone-50 border-y border-stone-100">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24">
<h2 class="text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight">Complete the Collection</h2>
<p class="mt-2 text-slate-500">Pieces designed to pair with The Voyager.</p>
<div class="mt-10 grid grid-cols-1 sm:grid-cols-3 gap-6">
<article class="group rounded-2xl bg-white border border-stone-100 overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="aspect-[4/3] bg-stone-200 flex items-center justify-center">
<span class="text-stone-400 text-sm">Product Image</span>
</div>
<div class="p-5">
<h3 class="text-sm font-semibold text-slate-900 group-hover:text-amber-700 transition-colors">The Passport Wallet</h3>
<p class="mt-1 text-sm text-slate-500">Slim bifold, 6 card slots</p>
<p class="mt-2 text-base font-semibold text-slate-900">$89</p>
</div>
</article>
<article class="group rounded-2xl bg-white border border-stone-100 overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="aspect-[4/3] bg-stone-200 flex items-center justify-center">
<span class="text-stone-400 text-sm">Product Image</span>
</div>
<div class="p-5">
<h3 class="text-sm font-semibold text-slate-900 group-hover:text-amber-700 transition-colors">The Weekend Belt</h3>
<p class="mt-1 text-sm text-slate-500">32mm, solid brass buckle</p>
<p class="mt-2 text-base font-semibold text-slate-900">$125</p>
</div>
</article>
<article class="group rounded-2xl bg-white border border-stone-100 overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="aspect-[4/3] bg-stone-200 flex items-center justify-center">
<span class="text-stone-400 text-sm">Product Image</span>
</div>
<div class="p-5">
<h3 class="text-sm font-semibold text-slate-900 group-hover:text-amber-700 transition-colors">Leather Care Kit</h3>
<p class="mt-1 text-sm text-slate-500">Conditioner, cloth, brush</p>
<p class="mt-2 text-base font-semibold text-slate-900">$45</p>
</div>
</article>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="ws-faq max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24">
<h2 class="text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight text-center">Frequently Asked Questions</h2>
<div class="mt-10 space-y-3">
<details class="group rounded-xl border border-slate-100 bg-white">
<summary class="flex items-center justify-between px-6 py-4 cursor-pointer text-sm font-semibold text-slate-900 select-none">
What size should I choose?
<svg class="w-4 h-4 text-slate-400 transition-transform duration-200" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</summary>
<div class="px-6 pb-4 text-sm text-slate-500 leading-relaxed">
<strong class="text-slate-700">Small</strong> fits essentials (phone, wallet, keys, small notebook). <strong class="text-slate-700">Medium</strong> fits a 14" laptop plus daily carry. <strong class="text-slate-700">Large</strong> is our weekender size for overnight trips. When in doubt, Medium is our most popular choice.
</div>
</details>
<details class="group rounded-xl border border-slate-100 bg-white">
<summary class="flex items-center justify-between px-6 py-4 cursor-pointer text-sm font-semibold text-slate-900 select-none">
How do I care for the leather?
<svg class="w-4 h-4 text-slate-400 transition-transform duration-200" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</summary>
<div class="px-6 pb-4 text-sm text-slate-500 leading-relaxed">
Wipe with a dry cloth after use. Apply leather conditioner every 3-6 months. Avoid prolonged exposure to direct sunlight or heavy rain. If it gets wet, let it air dry naturally — never use heat. The leather will develop character and patina over time; that's a feature, not a flaw.
</div>
</details>
<details class="group rounded-xl border border-slate-100 bg-white">
<summary class="flex items-center justify-between px-6 py-4 cursor-pointer text-sm font-semibold text-slate-900 select-none">
What is your return policy?
<svg class="w-4 h-4 text-slate-400 transition-transform duration-200" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</summary>
<div class="px-6 pb-4 text-sm text-slate-500 leading-relaxed">
30-day no-questions-asked returns for unused items in original packaging. We cover return shipping within the US. For international orders, return shipping is the buyer's responsibility. Refunds are processed within 5 business days of receiving the return.
</div>
</details>
<details class="group rounded-xl border border-slate-100 bg-white">
<summary class="flex items-center justify-between px-6 py-4 cursor-pointer text-sm font-semibold text-slate-900 select-none">
How long does shipping take?
<svg class="w-4 h-4 text-slate-400 transition-transform duration-200" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</summary>
<div class="px-6 pb-4 text-sm text-slate-500 leading-relaxed">
US orders ship within 1-2 business days via USPS Priority (2-3 day delivery). International orders ship via DHL Express (5-7 business days). Free shipping on all orders over $150.
</div>
</details>
<details class="group rounded-xl border border-slate-100 bg-white">
<summary class="flex items-center justify-between px-6 py-4 cursor-pointer text-sm font-semibold text-slate-900 select-none">
Is the leather ethically sourced?
<svg class="w-4 h-4 text-slate-400 transition-transform duration-200" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</summary>
<div class="px-6 pb-4 text-sm text-slate-500 leading-relaxed">
Yes. Our leather is a byproduct of the Italian food industry — no animals are raised specifically for their hides. Our tannery partner uses vegetable-based tanning agents instead of chromium, and their wastewater treatment exceeds EU standards.
</div>
</details>
</div>
</section>
<!-- Footer -->
<footer class="ws-footer border-t border-slate-100 bg-slate-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
<div class="col-span-2 md:col-span-1">
<p class="text-base font-semibold text-slate-900 tracking-tight">Atelier Craft</p>
<p class="mt-2 text-sm text-slate-500 leading-relaxed">Leather goods designed to outlast trends. Made in Florence, shipped worldwide.</p>
</div>
<div>
<h3 class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Shop</h3>
<ul class="mt-3 space-y-2">
<li><a href="#" class="text-sm text-slate-500 hover:text-slate-900 transition-colors">All Products</a></li>
<li><a href="#" class="text-sm text-slate-500 hover:text-slate-900 transition-colors">Gift Cards</a></li>
<li><a href="#" class="text-sm text-slate-500 hover:text-slate-900 transition-colors">Care Products</a></li>
</ul>
</div>
<div>
<h3 class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Company</h3>
<ul class="mt-3 space-y-2">
<li><a href="#" class="text-sm text-slate-500 hover:text-slate-900 transition-colors">Our Story</a></li>
<li><a href="#" class="text-sm text-slate-500 hover:text-slate-900 transition-colors">Craftsmanship</a></li>
<li><a href="#" class="text-sm text-slate-500 hover:text-slate-900 transition-colors">Sustainability</a></li>
</ul>
</div>
<div>
<h3 class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Support</h3>
<ul class="mt-3 space-y-2">
<li><a href="#" class="text-sm text-slate-500 hover:text-slate-900 transition-colors">Contact</a></li>
<li><a href="#" class="text-sm text-slate-500 hover:text-slate-900 transition-colors">Shipping & Returns</a></li>
<li><a href="#" class="text-sm text-slate-500 hover:text-slate-900 transition-colors">Warranty</a></li>
</ul>
</div>
</div>
<div class="mt-10 pt-6 border-t border-slate-200 flex flex-col sm:flex-row items-center justify-between gap-4">
<p class="text-xs text-slate-400">© 2026 Atelier Craft. All rights reserved.</p>
<div class="flex items-center gap-4">
<a href="#" class="text-slate-400 hover:text-slate-600 transition-colors" aria-label="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="text-slate-400 hover:text-slate-600 transition-colors" aria-label="Pinterest">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 01.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z"/></svg>
</a>
</div>
</div>
</div>
</footer>
<!-- Minimal JS for interactivity -->
<script>
// Mobile menu toggle
const menuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
menuBtn.addEventListener('click', () => {
const isOpen = !mobileMenu.classList.contains('hidden');
mobileMenu.classList.toggle('hidden');
menuBtn.setAttribute('aria-expanded', String(!isOpen));
});
// Size selector
document.querySelectorAll('.size-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.size-btn').forEach(b => {
b.classList.remove('active');
b.setAttribute('aria-checked', 'false');
});
btn.classList.add('active');
btn.setAttribute('aria-checked', 'true');
});
});
// Color selector
document.querySelectorAll('.color-swatch').forEach(swatch => {
swatch.addEventListener('click', () => {
document.querySelectorAll('.color-swatch').forEach(s => {
s.classList.remove('active');
s.setAttribute('aria-checked', 'false');
});
swatch.classList.add('active');
swatch.setAttribute('aria-checked', 'true');
document.getElementById('color-label').textContent = swatch.dataset.color;
});
});
</script>
</body>
</html>Premium single-product page designed for artisanal and luxury goods. Warm amber accents and elegant typography create a premium shopping experience.