Rediseño de la Tienda: Aspecto Premium con Profundidad y Pulido
NUEVOLa tienda del juego ha recibido una renovación visual completa. Cada elemento — desde las tarjetas de producto hasta la barra lateral del carrito, desde las pestañas de canal hasta los botones de pago — ha sido rediseñado con profundidad, pulido y animaciones suaves.
Qué Cambió
Tarjetas de Producto
El corazón de la tienda recibió la mayor mejora:
- Efecto de cristal con gradientes en capas y sombras profundas
- Hover suave — las tarjetas se elevan, las imágenes escalan a 1.08x, aparece un resplandor
- Imágenes más grandes (170px de alto, antes 150px)
- Carga diferida — las imágenes se cargan solo al entrar en vista, ahorrando ancho de banda
- Separador de borde entre la información del producto y la zona de precio/botón
- Precios más grandes (16px) con resplandor más intenso para las monedas CC y KC
Nuevo Encabezado de Tienda
Una nueva barra de identidad aparece sobre la cuadrícula de productos, mostrando:
- El icono de tipo de la tienda en un contenedor redondeado de color
- El nombre de la tienda en texto grande y en negrita
- Una insignia de tipo (p. ej., “Hardware”, “Comida”, “Servicios”) con el color del tipo
- Conteo de productos y moneda
Esto le da a cada tienda una identidad visual clara antes de que te desplaces hasta los productos.
Pestañas de Canal
Las pestañas para cambiar entre tiendas tienen un aspecto más limpio:
- Estilo píldora con esquinas redondeadas
- El hover cambia el fondo de forma sutil
- La pestaña activa brilla con un degradado azul-cian y sombra interior
- Se eliminó el efecto complejo de máscara de borde para mejorar el rendimiento
Barra de Filtros
Los controles de búsqueda y filtro ahora están más pulidos:
- Campos redondeados (10px de border-radius) con anillos de foco
- Selectores estilo píldora que se resaltan al pasar el cursor
- Conteo de filtros mostrado como insignia con fondo
- Botón de limpiar con acento rojo y elevación al hacer hover
Barra Lateral del Carrito
El panel del carrito y los pedidos en el lado derecho:
- Posicionamiento fijo — permanece visible mientras te desplazas por los productos
- Barra de desplazamiento personalizada — barra azul fina en lugar del valor predeterminado del navegador
- Fondos degradados con sombras sutiles
- Botones más grandes con efectos de elevación al hacer hover
- Botones de pago con relleno degradado y resplandor al hacer hover
Reseñas
La sección de reseñas en la parte inferior de cada tienda:
- Mejor jerarquía visual con una línea divisoria bajo el resumen
- Efecto hover en las tarjetas de reseña individuales (el borde izquierdo se ilumina)
- Estrellas más grandes y mejor espaciado
- Botón de envío con degradado y sombra al hacer hover
Búsqueda Cercana y Búsqueda de Tiendas
Ambas funciones de búsqueda recibieron diseños de tarjetas premium:
- Profundidad con sombras en capas
- Animación de desplazamiento al hacer hover (las tarjetas cercanas se deslizan a la derecha)
- Efecto de elevación en las tarjetas de búsqueda de tiendas con resplandor púrpura
- Iconos más grandes (40px) con sus propias sombras
Estados Vacíos
Cuando no hay productos que mostrar, en lugar de un simple mensaje de texto, ahora ves:
- Un icono grande (📦)
- Un mensaje claro (“Ningún producto coincide con tus filtros” o “Aún no hay productos”)
- Una sugerencia útil (“Prueba a ajustar tu búsqueda o vuelve más tarde”)
Animaciones
Las tarjetas de producto ahora aparecen con una entrada escalonada — cada tarjeta se desvanece y escala ligeramente, con un pequeño retraso entre tarjetas. La animación usa una curva de easing cubic-bezier suave para una sensación premium.
Exclusión Voluntaria del Pin en el Mapa
Esta versión también incluye una nueva función de privacidad para los propietarios de tiendas:
Los proveedores de servicios que no deseen revelar su ubicación física ahora pueden desmarcar “Mostrar mi tienda en el mapa mundial” en la configuración de su tienda. La tienda sigue siendo completamente funcional — simplemente no aparece como un pin en el mapa.
Esto es especialmente útil para consultores, proveedores de servicios digitales y cualquier persona cuyo negocio no tenga un establecimiento público.
Rendimiento
A pesar de los elementos visuales más ricos, la tienda es en realidad más rápida gracias a:
loading="lazy"en las imágenes de producto — el navegador solo carga las imágenes que son visibles- CSS simplificado (se eliminaron las máscaras complejas
::beforeen las pestañas de canal) - Transformaciones aceleradas por GPU para las animaciones de hover
Qué Viene Después
El rediseño de la tienda sienta las bases visuales para las próximas funciones:
- Superposiciones de detalle de producto con imágenes a tamaño completo y especificaciones
- Lista de deseos / favoritos — guarda productos para más adelante
- Colecciones de tienda — grupos de productos curados
- Códigos de descuento — precios promocionales
- Analíticas de tienda para propietarios — vistas, clics, conversión
ENLIGHTENMENT es un juego basado en blockchain de crecimiento personal, exploración arquetípica y resonancia colectiva. Únete a nosotros en getplasma.org.