E-commerce Product Gallery - Copy this Html, Bootstrap Component to your project

Desarrolla una tienda en línea funcional con dos interfaces principales: la galería de productos y el carrito de compras. Define el diseño, la lógica, y las interacciones necesarias para cada sección. Aquí están los detalles que deben abordarse: 1. Galería de productos Muestra una lista de productos con las siguientes características: Imagen del producto (en alta resolución). Nombre del producto. Descripción breve (máximo 150 caracteres). Precio (formato ajustable a diferentes monedas). Etiqueta de disponibilidad (en stock / agotado). Incluye filtros y categorías para facilitar la navegación: Por precio (ejemplo: de menor a mayor). Por categoría (ejemplo: electrónicos, ropa, accesorios). Por popularidad o productos más vendidos. Implementa un sistema de búsqueda para encontrar productos por nombre o palabra clave. Cada producto debe tener un botón para "Agregar al carrito". 2. Carrito de compras Muestra los productos agregados con: Nombre del producto. Cantidad seleccionada (editable). Precio individual y subtotal. Botón para "Eliminar del carrito". Calcula automáticamente: Subtotal general. Impuestos (personalizables según región). Total a pagar. Incluye botones para: "Seguir comprando", que redirige a la galería de productos. "Finalizar compra", que simula el proceso de pago. Agrega una notificación visual cuando se agrega un producto al carrito o cuando este está vacío. Diseño y experiencia del usuario La interfaz debe ser clara, moderna, y fácil de usar. Debe ser adaptable a dispositivos móviles (diseño responsivo). Usa colores y tipografías que sean agradables y profesionales. Funcionalidades técnicas Implementa la lógica del carrito de compras, asegurando: Persistencia de datos (los productos en el carrito deben conservarse si el usuario recarga la página). Validaciones al agregar productos (no permitir más cantidad que el stock disponible). Agrega opciones para personalizar la experiencia: Cambio de idioma (mínimo español e inglés). Ajuste de moneda según región del usuario. Requisitos adicionales La IA debe ser capaz de: Diseñar un prototipo funcional o simular las interfaces visualmente. Crear código para las funcionalidades descritas (ejemplo: en HTML, CSS, y JavaScript). Explicar las decisiones tomadas en el diseño y la lógica. Por favor, implementa o simula este sistema paso a paso, asegurando que sea intuitivo, funcional y profesiona