77 lines
7.0 KiB
HTML
77 lines
7.0 KiB
HTML
<!doctype html>
|
||
<html lang="es">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
|
||
<meta name="theme-color" content="#ff3f86">
|
||
<meta name="description" content="Ari Shopping: juguetes, peluches, mochilas y regalos con atención personalizada.">
|
||
<title>Ari Shopping</title>
|
||
<link rel="icon" href="assets/img/brand/favicon.svg" type="image/svg+xml">
|
||
<link rel="stylesheet" href="assets/css/styles.css">
|
||
<script defer src="assets/js/app.js"></script>
|
||
</head>
|
||
<body>
|
||
<a class="skip-link" href="#productos">Ir a productos</a>
|
||
<div class="announcement"><span>Envíos seguros</span><strong>Atención personalizada</strong><span>Pedidos por WhatsApp</span></div>
|
||
<header class="site-header">
|
||
<div class="header-shell shell">
|
||
<a class="brand" href="#inicio"><img src="assets/img/brand/logo.svg" alt="Ari Shopping"></a>
|
||
<nav class="main-nav" aria-label="Categorías">
|
||
<button type="button" data-nav-category="Todos">Todos</button>
|
||
<button type="button" data-nav-category="Figuras">Lo nuevo</button>
|
||
<button type="button" data-nav-collection="Toy Story">Toy Story</button>
|
||
<button type="button" data-nav-category="Peluches">Peluches</button>
|
||
<button type="button" data-nav-category="Mochilas">Mochilas</button>
|
||
<button type="button" data-nav-collection="Marvel">Marvel</button>
|
||
</nav>
|
||
<div class="header-actions">
|
||
<button class="search-open" id="searchOpen" type="button" aria-label="Buscar"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/></svg></button>
|
||
<button class="cart-button" id="cartButton" type="button"><span>Carrito</span><strong id="cartCount">0</strong></button>
|
||
</div>
|
||
</div>
|
||
<form class="search-panel shell" id="searchPanel" hidden>
|
||
<label for="searchInput">¿Qué estás buscando?</label>
|
||
<div><input id="searchInput" type="search" placeholder="Rex, Stitch, mochila Marvel..."><button type="button" id="searchClose">Cerrar</button></div>
|
||
</form>
|
||
</header>
|
||
<main id="inicio">
|
||
<section class="hero shell">
|
||
<div class="hero-copy">
|
||
<span class="eyebrow">Nueva colección</span>
|
||
<h1>Encuentra ese detalle que hace el día más <em>especial.</em></h1>
|
||
<p>Juguetes, personajes, peluches y mochilas seleccionados para sorprender. Compra fácil y recibe atención personalizada.</p>
|
||
<div class="hero-actions"><a class="button primary" href="#productos">Explorar productos</a><a class="button text" href="https://www.instagram.com/ari_shopping1/" target="_blank" rel="noopener">Ver Instagram</a></div>
|
||
</div>
|
||
<div class="hero-image"><img src="assets/img/hero/hero-products.webp" alt="Productos Toy Story de Ari Shopping"><span class="hero-note">Productos reales de Ari Shopping</span></div>
|
||
</section>
|
||
<section class="service-strip shell">
|
||
<article><i>↗</i><div><strong>Envíos seguros</strong><span>Coordina tu entrega con nosotros.</span></div></article>
|
||
<article><i>▣</i><div><strong>Pagos fáciles</strong><span>Confirma disponibilidad antes de pagar.</span></div></article>
|
||
<article><i>♥</i><div><strong>Atención cercana</strong><span>Te ayudamos a elegir el producto ideal.</span></div></article>
|
||
</section>
|
||
<section class="category-section shell">
|
||
<div class="section-heading"><div><span class="eyebrow">Explora la tienda</span><h2>Compra por categoría</h2><p>Encuentra rápidamente lo que estás buscando.</p></div><a href="#productos">Ver todo →</a></div>
|
||
<div class="category-grid">
|
||
<button class="category-card" data-category="Figuras" style="--image:url('../img/categories/figuras.webp')"><span>Figuras</span><small>Toy Story y personajes</small></button>
|
||
<button class="category-card" data-category="Peluches" style="--image:url('../img/categories/peluches.webp')"><span>Peluches</span><small>Personajes para regalar</small></button>
|
||
<button class="category-card" data-category="Mochilas" style="--image:url('../img/categories/mochilas.webp')"><span>Mochilas</span><small>Escolares y casuales</small></button>
|
||
<button class="category-card" data-collection="Marvel" style="--image:url('../img/categories/marvel.webp')"><span>Marvel</span><small>Diseños con personalidad</small></button>
|
||
</div>
|
||
</section>
|
||
<section class="products-section shell" id="productos">
|
||
<div class="section-heading products-heading"><div><span class="eyebrow">Catálogo real</span><h2>Productos destacados</h2><p id="catalogSummary">Cargando productos...</p></div><a id="availabilityLink" href="https://wa.link/rvcqqc" target="_blank" rel="noopener">Consultar disponibilidad →</a></div>
|
||
<div class="product-toolbar"><div class="filter-chips" id="filterChips"></div><select id="sortSelect"><option value="featured">Destacados</option><option value="newest">Más recientes</option><option value="name">Nombre</option></select></div>
|
||
<div class="product-grid" id="productGrid" aria-live="polite"></div>
|
||
<div class="empty-state" id="emptyState" hidden><strong>No encontramos productos</strong><p>Prueba con otra categoría o búsqueda.</p><button class="button primary" id="resetButton" type="button">Ver todos</button></div>
|
||
</section>
|
||
<section class="social-band"><div class="shell"><div><span class="eyebrow">Comunidad Ari Shopping</span><h2>Novedades y promociones en Instagram.</h2></div><a class="button white" href="https://www.instagram.com/ari_shopping1/" target="_blank" rel="noopener">@ari_shopping1</a></div></section>
|
||
</main>
|
||
<footer><div class="shell footer-main"><img src="assets/img/brand/logo.svg" alt="Ari Shopping"><p>Detalles que emocionan, compras que disfrutas.</p><span>Frontend v2.1.0</span></div></footer>
|
||
<div class="overlay" id="overlay" hidden></div>
|
||
<aside class="cart-drawer" id="cartDrawer" aria-hidden="true"><header><div><span class="eyebrow">Tu selección</span><h2>Pedido</h2></div><button id="cartClose">×</button></header><div class="cart-items" id="cartItems"></div><footer class="cart-footer"><button class="button primary full" id="checkoutButton">Enviar por WhatsApp</button><button class="clear-cart" id="clearCart">Vaciar selección</button><small>Precio y disponibilidad se confirman directamente con Ari Shopping.</small></footer></aside>
|
||
<dialog id="productDialog"><button class="dialog-close" id="dialogClose">×</button><div id="dialogContent"></div></dialog>
|
||
<div class="toast-region" id="toastRegion" aria-live="polite"></div>
|
||
<template id="productTemplate"><article class="product-card"><button class="product-image product-open" type="button"><img loading="lazy" alt=""></button><div class="product-info"><div class="product-meta"><span class="product-category"></span><span class="product-collection"></span></div><button class="product-name product-open" type="button"></button><p class="product-description"></p><div class="product-bottom"><strong>Consultar</strong><button class="add-button" type="button">Agregar</button></div></div></article></template>
|
||
</body>
|
||
</html>
|