La pantalla principal deberá tener los siguientes elementos

[x] #2
[x] #3
[x] #4
[x] #5
[x] #6
[x] #7
[x] #8
[x] #9

Fondo

background: linear-gradient(180deg, #D2FDFD 42.74%, #ECFFEF 93.06%);
box-shadow: 0px 4px 31px rgba(227, 227, 227, 0.25);

Rectángulo contenedor

Utiliza un flexbox con items-center

https://quasar.dev/layout/grid/introduction-to-flexbox#alignment

background: #FFFFFF;
border-radius: 23.76px;
margin: 5px 0px;
height: 542.48px; // deseable que sea 60% de la altura de la pantalla

Figuras voladoras

Encontrarás las 3 figuras en \src\assets\img

Puedes utilizar posición absoluta con porcentajes para su correcto posicionamiento

Nubes

Así como el rectángulo contenedor, con flexbox items-center consigue colocar las nubes arriba y abajo

Las nubes se encuentran por detrás del rectángulo. Puedes usar z-index: 1 en las nubes y z-index: 2 en los rectángulos si las nubes quedan por encima del rectángulo

Si la posición de las nubes es absoluta, puedes hacer algo como esto:

top: -50px

Para solapar elementos

Botones para redes sociales

Utiliza un elemento nativo de Quasar para los botones

https://quasar.dev/vue-components/button#custom-colors

Los íconos para redes sociales los encontrarás en \src\assets\logos y los estilos de los botones serán estos:

background: rgba(255, 255, 255, 0.85);
box-shadow: 0px 4px 12px rgba(194, 194, 194, 0.25);
border-radius: 23.76px;

El texto dentro de los botones tendrán estos estilos:

font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-size: 12.96px;
line-height: 19px;
text-align: center;
color: #657674;

Nota: el botón está alejado de la orilla del rectángulo por unos 50px de cada lado

El texto "Crear una cuenta" tendrá estos estilos

font-family: 'Poppins'; // Si no existe crea un issue
font-style: normal;
font-weight: 500;
font-size: 21.6px;
line-height: 32px;
text-align: center;
color: #1A5951;

Formulario

Utiliza un elemento nativo input de Quasar, en su forma Standard

https://quasar.dev/vue-components/input#example--design-overview

La linea de abajo en cada input, así como el color del label es:

#1A5951;

El texto dentro de cada input tiene estos estilos:

font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 11.52px;
line-height: 17px;
text-align: center;
color: #1A5951;

Nota: El width de los input es exactamente el mismo que los botones de redes sociales.

Y el texto "- OR -" tiene los mismos estilos que el texto "Crear una cuenta", con estas diferencias:

font-weight: 600;
font-size: 14px;
line-height: 21px;

Botón para enviar

El botón de enviar debe ser también un elemento nativo de Quasar, con estos estilos:

background: #003F54;
box-shadow: 0px 4px 31px rgba(227, 227, 227, 0.25);
border-radius: 53px;

El texto interno del botón tiene estos estilos

font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-size: 12.96px;
line-height: 19px;
text-align: center;
color: #FFFFFF;

Ojo, debe tener el mismo width que los inputs y los botones de redes suciales

Texto para iniciar sesión

Debajo del botón para crear cuenta existirá un pequeño texto con estos estilos que dirá "¿Ya tienes una cuenta?"

font-family: 'Poppins';
font-style: normal;
font-weight: 300;
font-size: 9.36px;
line-height: 14px;
text-align: center;
color: #1A5951;

Seguido de ese texto vendrá otro, con fuente más gruesa que dirá "Inicia sesión"

font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-size: 9.36px;
line-height: 14px;
text-align: center;
color: #1A5951;

OMRI-Tech / FE-omri-app

Crear una cuenta #1