Un catálogo fácil de recorrer
Páginas por marca y tipo de equipo, navegación por familias, carrusel de marcas y enlaces de contacto que conservan el contexto del servicio.
← Todos los proyectos
02 / Sitio de negocio · Servicios técnicos
Del problema con un equipo al contacto con un especialista.
Una mirada al proyecto02 / 03
Interfaz públicaAstro / TypeScript
El contexto
Una necesidad real.
Multiservicios CRA ofrece reparación, mantenimiento e instalación de electrodomésticos. El sitio organiza los servicios para que una persona pueda encontrar su equipo, consultar la cobertura y explicar qué necesita antes de iniciar una conversación.
Una web estática en Astro, con contenido organizado por marca, familia y equipo. La identidad visual y los componentes compartidos mantienen una experiencia consistente. El contacto se concentra en un formulario que prepara la solicitud para WhatsApp.
Alcance del proyecto
Lo que hace
Solicitudes con contexto
Formulario con validación de nombre, teléfono, equipo, municipio y descripción de la falla. Genera un mensaje para WhatsApp, con resumen editable y alternativa por correo.
Cobertura a la vista
Mapa interactivo de Guadalajara, Tlaquepaque, Zapopan y Tonalá con Leaflet y OpenStreetMap. La lista de municipios sigue disponible si el mapa no carga.
Una identidad consistente
Logo y recursos SVG, paleta de color, tipografía local y página de presentación de marca. Componentes reutilizables para las distintas páginas del sitio.
Pensado para el teléfono
Diseño adaptable, imágenes optimizadas, navegación por teclado y soporte para movimiento reducido. Contacto visible desde la portada y las páginas de servicio.
Una base ligera
Generación estática a partir de datos tipados, metadatos por página y pruebas de navegación, formularios y accesibilidad con Playwright y axe-core.
Tecnologías y arquitectura
La base detrás
Explora las herramientas del proyecto,
organizadas por lo que hacen posible.
Áreas del proyecto05
Selecciona un área para explorar sus herramientas.
01 / 05
Web
La parte del proyecto con la que interactúan sus usuarios.
- Astro
- TypeScript
- HTML
- CSS
Multiservicios CRA
02 / 05
Mapas
Servicios que amplían la experiencia del sitio.
- Leaflet
- OpenStreetMap
Multiservicios CRA
03 / 05
Identidad
Recursos que dan consistencia a la identidad visual.
- SVG
- Manrope Variable
- Fontkit
Multiservicios CRA
04 / 05
Calidad
Herramientas para revisar y cuidar la implementación.
- Astro Check
- Playwright
- axe-core
- Prettier
Multiservicios CRA
05 / 05
Arquitectura
La organización que sostiene las páginas y sus componentes.
- Páginas estáticas
- Catálogo tipado
- Componentes reutilizables
Multiservicios CRA
La solución en conjunto
Una presencia digital que presenta los servicios de CRA y prepara solicitudes con la información necesaria para iniciar la atención por WhatsApp o correo.
Proyecto preparado para publicación. El envío final lo realiza el visitante en WhatsApp o correo; el sitio no confirma citas automáticamente.
Tu proyecto puede ser el siguiente