feat(ecommerce): release Ari Shopping Frontend v2.1 real catalog

2026-07-19 13:41:37 -05:00
parent 6700166821
commit 1c74220c88
33 changed files with 547 additions and 261 deletions
@@ -1,11 +1,76 @@
-<!doctype html><html lang="es"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="theme-color" content="#ff3f7f"><meta name="description" content="Ari Shopping, productos seleccionados y compras fáciles desde Colombia."><title>Ari Shopping</title><link rel="icon" href="assets/img/brand/favicon.svg"><link rel="stylesheet" href="assets/css/styles.css"><script defer src="assets/js/app.js"></script></head><body>
-<div class="announcement">Envíos nacionales · Atención personalizada · Precios en COP</div>
-<header><div class="shell head"><a href="#inicio"><img src="assets/img/brand/logo.svg" alt="Ari Shopping"></a><label class="search"><span>⌕</span><input id="search" type="search" placeholder="Busca productos o categorías"></label><a class="ig" href="https://www.instagram.com/ari_shopping1/" target="_blank" rel="noopener">Instagram</a><button id="cartOpen" class="cart">Carrito <b id="cartCount">0</b></button></div></header>
-<main id="inicio"><section class="hero shell"><div><span class="eyebrow">Ari Shopping · Colección destacada</span><h1>Detalles que hacen tu día más especial.</h1><p>Una experiencia de compra moderna, cercana y rápida. Descubre novedades, favoritos y productos seleccionados para ti.</p><div class="heroActions"><a class="btn primary" href="#catalogo">Ver productos</a><a class="btn ghost" href="https://www.instagram.com/ari_shopping1/" target="_blank" rel="noopener">Seguir en Instagram</a></div></div><div class="art"><div><small>Nuevos favoritos</small><strong>Estilo para cada momento</strong><span>Desde $59.900</span></div></div></section>
-<section class="benefits shell"><article><b>01</b><span><strong>Compra simple</strong><small>Agrega y envía tu pedido.</small></span></article><article><b>02</b><span><strong>Catálogo dinámico</strong><small>Productos desde una fuente central.</small></span></article><article><b>03</b><span><strong>Atención directa</strong><small>Confirma disponibilidad antes de pagar.</small></span></article></section>
-<section id="catalogo" class="catalog shell"><div class="sectionTitle"><div><span class="eyebrow">Catálogo dinámico</span><h2>Productos para descubrir</h2><p id="summary">Cargando catálogo...</p></div><select id="sort"><option value="featured">Destacados</option><option value="new">Nuevos</option><option value="asc">Precio: menor</option><option value="desc">Precio: mayor</option></select></div><div id="categories" class="categories"></div><div id="grid" class="grid"></div><div id="empty" class="empty" hidden>No encontramos productos.</div></section>
-<section class="instagram"><div class="shell"><div><span class="eyebrow">Comunidad Ari Shopping</span><h2>Novedades y promociones en Instagram.</h2></div><a class="btn light" href="https://www.instagram.com/ari_shopping1/" target="_blank" rel="noopener">@ari_shopping1</a></div></section></main>
-<footer><div class="shell foot"><img src="assets/img/brand/logo.svg" alt="Ari Shopping"><p>Detalles que enamoran, compras que disfrutas.</p><span>Frontend v2.0.0</span></div></footer>
-<div id="overlay" class="overlay" hidden></div><aside id="drawer" class="drawer" aria-hidden="true"><div class="drawerHead"><div><small>Tu selección</small><h2>Carrito</h2></div><button id="cartClose">×</button></div><div id="cartItems" class="drawerBody"></div><div class="drawerFoot"><div><span>Total estimado</span><strong id="cartTotal">$0</strong></div><button id="checkout" class="btn primary full">Enviar pedido</button><button id="clearCart" class="link">Vaciar carrito</button><small>Precio y disponibilidad se confirman antes del pago.</small></div></aside><div id="toast" class="toast" hidden></div>
-<template id="card"><article class="card"><div class="media"><div class="badges"></div><button class="wish" aria-label="Favorito">♡</button><img loading="lazy"></div><div class="body"><small class="category"></small><h3></h3><div class="price"><strong></strong><del></del></div><p></p><button class="btn primary add">Agregar</button></div></article></template>
-</body></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>