Labcar es una empresa de taxis que te permite pedir un taxi cuando quieras y en donde quieras. Tenemos una gran cantidad de conductores por todo el departamento. Se ha comprobado que Labcar tiene las tarifas más bajas del mercado. Sabemos que tu tiempo es dinero, por lo que si nuestro servicio se demora en llegar más de lo establecido te daremos un 10% de descuento en tu viaje.
La web de Labcar está conformada por:
- navbar
- hero
- Información
- Conduce
- tarifa
- footer
En el navbar encontraremos el logo y la opción de: viaja, conduce e inicia sesión.
Y en la vista mobile solo se muestra el logo y las demás opciones pasan a ser parte de un menú desplegable
Tiene como fondo la imagen “taxi” y a la derecha la opción de registrarse o convertirse en conductor.
En la vista mobile se ve de la siguiente manera: Como podrás observar tanto como el texto y los botones cambian
En la parte de info está encontramos el celular y la info de la aplicación.
En la vista mobile cambia:
- El título
- El texto se esconde
- Aparece un texto debajo del contenedor del celular
En la parte de conductor encontramos la imagen “conduce” con un contenido a la derecha.
En la vista mobile cambia, la parte del contenido que solo estaba a la derecha pasa a ocupar todo el ancho.
La sección de “tarifa” cuenta con texto, dos inputs, un botón y un mapa. Por medio de la API geolocation nos mostrará en dónde nos encontramos.
Si te puedes dar cuenta en la version mobil cambia de posición los elementos.
En el footer encontramos el logo, las rede sociales, links, tiendas y nombre.
En la vista mobile desaparece un bloque de links, los íconos parecen a la derecha, las tiendas debajo de los íconos y el nombre al final.
Habrá que añadir los modales necesarios:
-
Modal de Inicia Sesión
-
Modal de Regístrate
-
Y modal de Convierte en conductor
Calculo Tarifa y Ruta.
Su funcionalidad es que se trace una ruta entre los puntos escritos en los input y que estime la tarifa en base a la distancia entre los puntos.
- En el siguiente Link Mobile podrás encontrar toda la imagen de la landing en la version movil.
- En el siguiente Link Desktop encontraras la imagen de la landing en la version Desktop.
- En el siguiente link podrás encontrar, imagenes, fuentes,iconos, colors, textos, etc. necesarios para completar este proyecto.