108 lines
3.9 KiB
HTML
108 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
<meta name="theme-color" content="#fafaff">
|
|
<title>Infinity — Catálogo</title>
|
|
<meta name="description" content="Catálogo de belleza, bolsos, canecas, termos y accesorios. Descubre tu estilo sin límites.">
|
|
<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=DM+Serif+Display:ital@0;1&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="estilos.css?v=5">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- FONDO MESH GRADIENT ANIMADO -->
|
|
<div class="mesh-bg" aria-hidden="true">
|
|
<div class="mesh-blob mesh-blob-1"></div>
|
|
<div class="mesh-blob mesh-blob-2"></div>
|
|
<div class="mesh-blob mesh-blob-3"></div>
|
|
</div>
|
|
|
|
<!-- NAVBAR -->
|
|
<nav class="navbar">
|
|
<div class="nav-container">
|
|
<a href="#inicio" class="logo">
|
|
<span class="logo-symbol">∞</span>
|
|
<span class="logo-text">Infinity</span>
|
|
</a>
|
|
<div class="nav-links" id="navLinks">
|
|
<a href="#inicio">Inicio</a>
|
|
<a href="#catalogo">Catálogo</a>
|
|
<a href="administrativo/">Admin</a>
|
|
</div>
|
|
<button class="nav-toggle" id="navToggle" aria-label="Abrir menú">
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- HERO -->
|
|
<section class="hero" id="inicio">
|
|
<div class="hero-content">
|
|
<span class="hero-badge">✨ Nueva colección disponible</span>
|
|
<h1 class="hero-title">
|
|
Descubre tu <em>estilo</em><br>
|
|
<span class="hero-gradient-text">sin límites</span>
|
|
</h1>
|
|
<p class="hero-subtitle">
|
|
Belleza, accesorios, bolsos y mucho más. Productos curados para acompañarte en tu día a día.
|
|
</p>
|
|
<div class="hero-cta">
|
|
<a href="#catalogo" class="btn btn-primary">Ver catálogo</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- PRODUCTOS -->
|
|
<section class="productos-section" id="catalogo">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Nuestro <em>catálogo</em></h2>
|
|
<p class="section-subtitle">Todos los productos en un solo lugar</p>
|
|
</div>
|
|
|
|
<div class="search-wrap">
|
|
<svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
|
</svg>
|
|
<input type="text" id="searchInput" class="search-input" placeholder="Buscar productos, categorías..." autocomplete="off">
|
|
<button class="search-clear" id="searchClear" aria-label="Limpiar búsqueda">✕</button>
|
|
</div>
|
|
|
|
<div class="filtros-tags" id="filtrosTags"></div>
|
|
|
|
<div id="contador" class="contador"></div>
|
|
<div id="productos" class="productos-grid"></div>
|
|
<div id="emptyState" class="empty-state" style="display:none">
|
|
<p>😕 No encontramos productos</p>
|
|
<button class="btn btn-ghost" id="btnLimpiar">Limpiar búsqueda</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FOOTER -->
|
|
<footer class="footer">
|
|
<div class="footer-content">
|
|
<div class="footer-brand">
|
|
<div class="logo">
|
|
<span class="logo-symbol">∞</span>
|
|
<span class="logo-text">Infinity</span>
|
|
</div>
|
|
<p>Productos para tu estilo de vida, sin límites.</p>
|
|
</div>
|
|
<div class="footer-links">
|
|
<a href="#inicio">Inicio</a>
|
|
<a href="#catalogo">Catálogo</a>
|
|
<a href="administrativo/">Admin</a>
|
|
</div>
|
|
<div class="footer-copy">
|
|
<p>© 2026 Infinity.</p>
|
|
<p>Catálogo web.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="app.js?v=5"></script>
|
|
</body>
|
|
</html>
|