<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,700&display=swap" rel="stylesheet">
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<body class="bg-slate-100 min-h-screen flex items-center justify-center p-4 sm:p-6 lg:p-12 font-sans text-slate-800 antialiased">
<div class="group relative w-full max-w-sm sm:max-w-md md:max-w-2xl lg:max-w-3xl bg-white border border-slate-200/80 rounded-3xl shadow-xl shadow-slate-200/60 overflow-hidden transition-all duration-300 hover:shadow-2xl hover:shadow-slate-300/50 flex flex-col md:flex-row">
<div class="relative w-full md:w-1/2 h-64 sm:h-72 md:h-auto bg-slate-50 overflow-hidden">
<button class="absolute top-4 right-4 z-10 w-10 h-10 rounded-full bg-white/80 border border-slate-200/80 text-slate-500 hover:text-rose-500 hover:bg-white active:scale-90 transition-all duration-200 flex items-center justify-center backdrop-blur-md cursor-pointer shadow-sm">
<iconify-icon icon="ph:heart-bold" class="text-xl"></iconify-icon>
</button>
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80&w=800&auto=format&fit=crop"
alt="Smartwatch Minimalist"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 ease-out" />
</div>
<div class="w-full md:w-1/2 p-6 sm:p-8 flex flex-col justify-between space-y-6">
<div>
<div class="flex items-center justify-between mb-2">
<span class="text-xs font-semibold uppercase tracking-wider text-emerald-600">Acessórios</span>
<div class="flex items-center gap-1 text-amber-500 text-sm">
<iconify-icon icon="ph:star-fill"></iconify-icon>
<span class="font-bold text-slate-800 text-xs">4.8</span>
<span class="text-slate-400 text-xs">(94)</span>
</div>
</div>
<h2 class="text-xl sm:text-2xl font-bold text-slate-900 tracking-tight mb-2">
Smartwatch
</h2>
<p class="text-slate-500 text-xs sm:text-sm line-clamp-2 leading-relaxed">
Monitoramento de saúde avançado, tela OLED de alta definição e resistência à água com acabamento em
alumínio.
</p>
</div>
<div>
<span class="text-xs font-medium text-slate-500 block mb-2">Cores:</span>
<div class="flex items-center gap-3">
<button
class="w-7 h-7 rounded-full bg-slate-100 border-2 border-emerald-600 ring-2 ring-emerald-600/20 active:scale-90 transition-all cursor-pointer"
title="Branco"></button>
<button
class="w-7 h-7 rounded-full bg-slate-800 hover:scale-110 active:scale-90 transition-all cursor-pointer"
title="Preto"></button>
<button
class="w-7 h-7 rounded-full bg-rose-200 hover:scale-110 active:scale-90 transition-all cursor-pointer"
title="Rosa"></button>
</div>
</div>
<div class="pt-4 border-t border-slate-100 flex items-center justify-between gap-4">
<div class="flex flex-col justify-center">
<span class="text-xs font-medium text-slate-400 line-through">R$ 1.599</span>
<span class="text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight leading-tight">R$
1.299</span>
</div>
<button class="bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 text-white font-semibold text-sm px-4 py-3 rounded-xl shadow-lg shadow-emerald-600/20 active:scale-95 transition-all duration-200 flex items-center justify-center gap-2 shrink-0 cursor-pointer">
<iconify-icon icon="ph:shopping-bag-open-bold" class="text-lg"></iconify-icon>
<span>Adicionar</span>
</button>
</div>
</div>
</div>
</body>