pleno-vue/src/views/auth/Login.vue

<script setup>

import LoginForm from "@/components/forms/auth/LoginForm.vue";
import PageTitle from "@/components/global/PageTitle.vue";
import AuthPageWrapper from "@/components/page/wrappers/AuthPageWrapper.vue";
import GuestDashboardPageWrapper from "@/views/guest/GuestDashboardPageWrapper.vue";
import Viewport from "@/components/viewport/Viewport.vue";
import logo from "@/assets/img/truckwash-banner.png";
</script>

<template>
  <section class="login-section">
    <div class="wrapper">
      <div class="sidebar">
        <h1>{{ $t('auth.customer_login_title') }}</h1>
      </div>
      <div class="main">
        <router-link :to="{ name: 'landing' }" class="logo">
          <img :src="logo" alt="Truck Wash">
        </router-link>
        <LoginForm />
        <p>{{ $t('auth.terms_acceptance') }}</p>
      </div>
    </div>
  </section>
</template>

<style scoped>
/*login-section*/

.login-section .wrapper{
  display: flex;
  align-items: stretch;
  min-height: calc(100vh)
}

.login-section .wrapper .sidebar{
  width: 33%;
  background-color: #13324C;
  display: flex;
  flex-direction: column;
  padding: 70px 20px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.login-section .wrapper .sidebar h1{
  color: #fff;
  margin-top: auto;
  margin-bottom: auto;
  font-size: 3.8em;
  font-weight: 600;
  text-align: center;
  line-height: 1;
}

.login-section .wrapper .sidebar p{
  color: #fff;
  font-size: 2em;
  font-weight: 600;
  text-align: center;
  line-height: 1;
}

.login-section .wrapper .main{
  width: 67%;
  padding: 70px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.login-section .wrapper .main .logo{
  display: flex;
  max-width: 230px;
  margin-bottom: 40px;
}

.login-section .wrapper .main .logo img{
  width: 100%;
  height: auto;
  aspect-ratio: 183/32;
  object-fit: contain;
}

.login-section .wrapper .main form{
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 400px;
  margin-bottom: 40px;
  width: 100%;
}

.login-section .wrapper .main form .form-field{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.login-section .wrapper .main form .form-field label{
  color: #13324C;
  font-size: 16px;
  line-height: 1;
  display: flex;
  gap: 16px;
}

.login-section .wrapper .main form input{
  border: 1.5px solid #333;
  border-radius: 8px;
  margin-top: 4px;
  font-size: 16px;
  line-height: 1;
}

.login-section .wrapper .main form input:not([type="checkbox"]) {
  min-height: 40px;
}

.login-section .wrapper .main p{
  max-width: 400px;
  text-align: center;
  font-size: 16px;
  color: #13324C;
}

.login-section .wrapper .main a{
  text-decoration: underline;
  color: inherit;
}

.login-section .wrapper .main .submit{
  width: 100%;
  border-radius: 30px;
  background-color: #13324C;
  border: 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  min-height: 43px;
  margin: 20px 0;
  text-decoration: none;
}

@media (max-width: 1250px) {
  .login-section .wrapper .sidebar h1{
    font-size: 2.3em;
  }

  .login-section .wrapper .sidebar p{
    font-size: 1.5em;
  }
}

@media (max-width: 991px) {
  .login-section .wrapper{
    flex-direction: column;
    min-height: calc(100vh - 96px)
  }

  .login-section .wrapper .sidebar{
    width: 100%;
    padding: 70px 10px;
    position: relative;
    top: 0;
    height: max-content;
  }

  .login-section .wrapper .main{
    width: 100%;
    padding: 70px 10px;
  }
}
/*end login-section*/
</style>