> ## Documentation Index
> Fetch the complete documentation index at: https://docs.grupocolorines.mx/llms.txt
> Use this file to discover all available pages before exploring further.

# Home

<Check>Pantalla Principal de Home, esta pantalla aparece una vez que hemos iniciado sesión correctamente</Check>
Se divide en secciones como: Actividades pendientes y noticias.

<Card title="Actividades Pendientes" icon="pen-to-square">
  Puedes seleccionar en "ver mas" y te enviara a una vista con todas tus
  actividades Pendientes. De igual forma puedes tocar cada una de las tarjetas
  y te enviara a su respectiva pantalla.
</Card>

<Card title="Noticias" icon="newspaper">
  Esta es la sección de noticias, puedes darle en ver mas y te aparecerán todas las noticias
</Card>

<Tabs>
  <Tab title="Actividades Pendientes">
    Puedes seleccionar en "ver mas" y te enviara a una vista con todas tus
    actividades Pendientes. De igual forma puedes tocar cada una de las tarjetas
    y te enviara a su respectiva pantalla.

    <img className="rounded-xl w-full max-w-sm mx-auto" src="https://mintcdn.com/develop-pai/LzBOBMYUIkegRkVg/images/clientes/newMas.png?fit=max&auto=format&n=LzBOBMYUIkegRkVg&q=85&s=4dce437d1e3a4fa6ebc2797dfaba9c93" alt="Vista general de actividades pendientes en la pantalla principal" width="778" height="946" data-path="images/clientes/newMas.png" />

    <Tabs>
      <Tab title="Pagos Vencidos">
        Esta card te lleva a la pagina de mis lotes, donde solo se mostraran los lotes que tengan pagos vencidos.

        <img className="rounded-xl w-full max-w-sm mx-auto" src="https://mintcdn.com/develop-pai/LzBOBMYUIkegRkVg/images/clientes/pagosVencidos.png?fit=max&auto=format&n=LzBOBMYUIkegRkVg&q=85&s=385769875ed29434db1a6a6d34069147" alt="Vista de pagos vencidos en la sección de lotes" width="1206" height="2622" data-path="images/clientes/pagosVencidos.png" />
      </Tab>

      <Tab title="Verifica tu telefono">
        Esta card te lleva a la pagina de verifica tu telefono, donde podras verificar tu telefono y actualizarlo.

        <CardGroup cols={2}>
          <Card title="Enviar Mensaje de Verificacion">
            <img className="rounded-xl w-full max-w-sm mx-auto" src="https://mintcdn.com/develop-pai/LzBOBMYUIkegRkVg/images/clientes/send.png?fit=max&auto=format&n=LzBOBMYUIkegRkVg&q=85&s=c9fd505223ff8ac16983cc7fcd43fc10" alt="Pantalla para enviar código de verificación por teléfono" width="1206" height="2622" data-path="images/clientes/send.png" />

            <p>En esta pantalla solo debes darle enviar codigo de verificacion</p>
          </Card>

          <Card title="Con el mensaje enviado">
            <img className="rounded-xl w-full max-w-sm mx-auto" src="https://mintcdn.com/develop-pai/LzBOBMYUIkegRkVg/images/clientes/sent.png?fit=max&auto=format&n=LzBOBMYUIkegRkVg&q=85&s=8b4577f866eaf8131f1c8f2b644b0168" alt="Pantalla confirmando que el código de verificación fue enviado" width="1206" height="2622" data-path="images/clientes/sent.png" />

            <p>una vez que recibas en tu whatsapp el codigo de verificacion, solo debes escribirlo y darle verificar</p>
          </Card>

          <Card title="Verificación exitosa">
            <img className="rounded-xl w-full max-w-sm mx-auto" src="https://mintcdn.com/develop-pai/LzBOBMYUIkegRkVg/images/clientes/verifyOk.png?fit=max&auto=format&n=LzBOBMYUIkegRkVg&q=85&s=72547e37e9caf2477348b8b69306c9c3" alt="Pantalla confirmando verificación exitosa de teléfono" width="1206" height="2622" data-path="images/clientes/verifyOk.png" />

            <p>SI el codigo ingresado es correcto, aparecera esta pantalla indicando que la verificacion fue exitosa, presionas salir y regresaras al home</p>
          </Card>
        </CardGroup>
      </Tab>

      <Tab title="Verifica tu correo">
        Esta card te lleva a la pagina de verifica tu correo, donde podras verificar tu correo y actualizarlo.

        <CardGroup cols={2}>
          <Card title="Enviar Mensaje de Verificacion">
            <img className="rounded-xl w-full max-w-sm mx-auto" src="https://mintcdn.com/develop-pai/LzBOBMYUIkegRkVg/images/clientes/sendLink.png?fit=max&auto=format&n=LzBOBMYUIkegRkVg&q=85&s=ca2eb83fa5731b2378055e34389416b0" alt="Pantalla para enviar enlace de verificación por correo" width="1206" height="2622" data-path="images/clientes/sendLink.png" />

            <p>En esta pantalla solo debes darle enviar correo de verificacion y debera llegar un mail en tu bandeja de entrada con el link de verificación</p>
          </Card>

          <Card title="Con el mensaje enviado">
            <img className="rounded-xl w-full max-w-sm mx-auto" src="https://mintcdn.com/develop-pai/LzBOBMYUIkegRkVg/images/clientes/sentLink.png?fit=max&auto=format&n=LzBOBMYUIkegRkVg&q=85&s=c9d46de1a6ada3d3f2a719cd031321b1" alt="Pantalla confirmando que el enlace de verificación por correo fue enviado" width="1206" height="2622" data-path="images/clientes/sentLink.png" />

            <p>una vez que recibas en tu correo el enlace de verificacion, solo debes darle verificar y hacer el proceso de verificacion en un portal web el cual una vez finalizado te retorna a la app</p>
          </Card>
        </CardGroup>
      </Tab>
    </Tabs>
  </Tab>

  <Tab title="Noticias">
    Esta es la sección de noticias, puedes darle en ver mas y te aparecerán todas las noticias

    <CardGroup cols={2}>
      <Card title="Noticias">
        <img className="rounded-xl w-full max-w-sm mx-auto" src="https://mintcdn.com/develop-pai/LzBOBMYUIkegRkVg/images/clientes/news.png?fit=max&auto=format&n=LzBOBMYUIkegRkVg&q=85&s=953eb9ea0517e3afb6b19342c60fcbd7" alt="Sección de noticias en la pantalla principal" width="774" height="872" data-path="images/clientes/news.png" />

        <p>
          Esta es la sección de noticias, puedes darle en ver mas y te aparecerán todas las noticias
        </p>
      </Card>

      <Card title="Pantalla de noticias">
        <img className="rounded-xl w-full max-w-sm mx-auto" src="https://mintcdn.com/develop-pai/LzBOBMYUIkegRkVg/images/clientes/newsScreen.png?fit=max&auto=format&n=LzBOBMYUIkegRkVg&q=85&s=768e175c8dd47c186cefec33508befce" alt="Pantalla completa de noticias con opciones de interacción" width="1206" height="2622" data-path="images/clientes/newsScreen.png" />

        <p>
          En esta pantalla aparecerán todas las noticias, de igual forma puedes darle like o agregar comentarios sobre las noticias.
        </p>
      </Card>
    </CardGroup>
  </Tab>
</Tabs>