<template>
  <div>
    <div class="container-fluid">
      <div class="row">
        <div class="col-12   col-lg-4 bg-img" :style="{ backgroundImage: `url(${backgroundImagePath})` }" >
        </div>
        <div class="col-12  col-lg-8 pt-4 px-3 px-sm-5 px-md-5 pb-5 ">
          <div class="pb-2 text-center">
            <img src="~/assets/image/Logo.png" style="width: 200px" />
          </div>
          <div class="text-center pt-1">
            <h2 class="fw-bolder display-6 text-center" >Sign Up</h2>
            <span class="fs-5 pt-2 text-muted">Helo , <span class="fw-bolder text-dark">Beautiful!</span></span>
            <p class="text-muted  pt-2 text-center fs-5  pb-0 mb-0">Mindboost helps you block out distracting noise with concentration-boosting music, increasing your productivity by up to 35%.</p>
          </div>
          <div class="row pt-3 pb-5">
            <div class="col-12">
              <form>
                <div class="row  px-0 px-md-4 pb-2">
                  <div class="col-12 pt-2 col-md-6 col-lg-6 ">
                    <label class="form-label">First Name</label>
                    <input type="text" placeholder="First Name" class="form-control">
                  </div>
                  <div class="col-12 pt-2 col-md-6 col-lg-6 ">
                    <label class="form-label">Surname</label>
                    <input type="text" placeholder="Surname" class="form-control">
                  </div>
                </div>
                <div class="row  px-0 px-md-4  pb-2">
                  <div class="col-12 col-md-6 pt-2 col-lg-6 ">
                    <label class="form-label">Email</label>
                    <input type="text" placeholder="Email" class="form-control">
                  </div>
                  <div class="col-12 pt-2 col-md-6 col-lg-6 ">
                    <label class="form-label">Password</label>
                    <input type="password" placeholder="Password" class="form-control">
                  </div>
                </div>
                <div class="row px-4 pt-3 pb-2">
                  <div class="col-10">
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
                      <label class="form-check-label" for="flexCheckIndeterminate">
                        I agree to Mindboost's terms and conditions. You can read about how we use and protect your information in our Privacy Policy.
                      </label>
                    </div>
                  </div>
                </div>
                <div class="row px-4 pt-3">
                  <div class="col-12">
                    <button type="button" class="login-btn col-4">Signup</button>
                    <p class="pt-3">Already have an Account? <NuxtLink class="signup-link" href="login">Log In</NuxtLink></p>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import backgroundImagePath from '~/assets/image/login4.png'
export default {

  name:'LoGin',
  data(){
    return{
      backgroundImagePath:backgroundImagePath,
    }
  }
}
</script>