Glovo P W a Homepage - Copy this Html, Tailwind Component to your project
Quiero-que-desarrolles-una-Progressive-Web-App-(PWA)-en-HTML,-CSS-y-JavaScript-que-cumpla-con-los-siguientes-requisitos-basados-en-el-diseño-proporcionado-(detallado-a-continuación).-El-diseño-debe-ser-funcionalmente-igual-al-mostrado,-con-la-navegación-y-comportamientos-que-se-describen.-Descripción-del-diseño-y-flujo-de-navegación:-Pantalla-inicial:-Cabecera:-Fondo-amarillo-sólido.-Logotipo-de-"Glovo"-en-la-parte-superior-izquierda.-Un-campo-de-entrada-para-capturar-la-dirección-del-usuario-con-el-texto-"¿Cuál-es-tu-dirección?"-y-un-botón-funcional-para-"Utilizar-la-ubicación-actual".-Categorías-principales:-Una-serie-de-iconos-circulares-que-representan-categorías-como:-"Comida",-"Envío-de-Paquetes",-"Parafarmacia-y-Belleza",-etc.-Al-hacer-clic-en-"Comida",-debe-abrirse-una-nueva-pestaña-que-muestra-la-página-de-"Comida-a-domicilio-en-Madrid"-(descripta-en-el-punto-2).-Página-de-"Comida-a-domicilio":-Cabecera:-Logotipo-de-Glovo.-Un-mensaje-destacado-en-una-franja-beige-que-dice:-"Estos-establecimientos-se-encuentran-en-el-centro-de-Madrid.-Añade-tu-dirección-para-consultar-a-cuáles-puedes-hacer-un-pedido."-Filtros-laterales:-Una-columna-izquierda-con-filtros-categorizados-como:-"Ordenar-por":-Cerca-de-mí,-Valoraciones,-Precio-de-entrega.-"Filtros-populares":-Americana,-Hamburguesas,-Snacks.-"Más-filtros":-Alcohol,-Alta-Cocina,-Árabe,-etc.-Promociones:-Tarjetas-horizontales-que-representan-ofertas,-como:-"Telepizza":-Con-una-imagen-destacada,-texto-que-dice-"2x1-en-algunos-productos"-y-un-porcentaje-de-calificación-(ej.-94%).-"JUNK"-o-"Burger-King",-con-imágenes-de-comida-y-descuentos-destacados.-Listado-de-establecimientos:-Una-cuadrícula-con-tarjetas-de-negocios-como-"VICIO",-"McDonald's",-"Five-Guys",-etc.-Cada-tarjeta-incluye:-Nombre-del-negocio.-Una-imagen-representativa.-Porcentaje-de-calificación.-Una-etiqueta-de-categoría-(ej.:-Americana).-Función-de-navegación-entre-páginas:-El-ícono-de-"Comida"-en-la-pantalla-inicial-debe-redirigir-a-la-página-descrita-como-"Comida-a-domicilio-en-Madrid".-El-diseño-de-navegación-debe-abrir-una-nueva-pestaña-o-un-nuevo-contenedor-para-que-el-usuario-pueda-visualizar-los-restaurantes-disponibles.-Requisitos-técnicos:-Diseño:-Reproduce-el-diseño-descrito-al-100%,-incluyendo-colores,-tipografías,-y-layouts.-Garantiza-que-la-página-sea-completamente-responsive-y-funcione-bien-en-dispositivos-móviles.-Funcionalidades-PWA:-Añade-un-manifest.json-con-los-parámetros-necesarios-para-la-instalación-de-la-PWA-(nombre,-íconos,-colores).-Incluye-un-service-worker-para-garantizar-que-funcione-offline.-Implementa-soporte-para-notificaciones-push-(avisos-sobre-promociones,-etc.).-Optimización-SEO:-Usa-una-estructura-semántica-adecuada-(con-etiquetas-<header>,-<section>,-<footer>,-etc.).-Asegúrate-de-que-las-imágenes-tengan-etiquetas-alt-descriptivas-y-optimiza-los-tiempos-de-carga.-Interactividad-y-navegación:-Botón-de-ubicación:-Usa-la-API-de-Geolocalización-para-detectar-la-ubicación-del-usuario.-Navegación-fluida:-Los-íconos-de-categorías-deben-redirigir-a-páginas-específicas.-Asegúrate-de-que-el-botón-"Comida"-lleve-a-la-vista-detallada-de-"Comida-a-domicilio".-Filtros:-Haz-que-los-botones-y-categorías-laterales-sean-interactivos.-Otras-consideraciones:-Archivos-modulares:-Separa-el-código-en-HTML,-CSS-y-JavaScript.-Usa-Flexbox-o-CSS-Grid-para-crear-un-diseño-escalable-y-ordenado.-Garantiza-la-accesibilidad-(contrastes-adecuados,-soporte-para-teclado,-etc.).-Entregables-esperados:-HTML:-Estructura-de-ambas-pantallas.-Enlaces-funcionales-entre-la-pantalla-inicial-y-la-página-de-"Comida-a-domicilio".-CSS:-Diseño-que-replica-fielmente-los-colores,-tipografías-y-estilos-observados.-JavaScript:-Lógica-para-la-navegación-y-funcionalidad-interactiva.-Manifest.json:-Parámetros-de-la-PWA-para-instalación-en-dispositivos.-Service-Worker:-Para-funcionalidades-offline.
