Search box - Intro with glass card

xxxxxxxxxx
 
<template>
<section class="intro">
  <div class="bg-image vh-100" style="
          background-image: url(https://mdbootstrap.com/img/Photos/new-templates/search-box/img2.jpg);
        ">
    <div class="mask d-flex align-items-center h-100" style="background-color: rgba(61, 162, 195, 0.1);">
      <MDBContainer>
        <MDBCard class="mask-custom p-4">
          <MDBCardBody>
            <p class="h1 font-weight-bold mb-4 text-white">Discover the Amazing City</p>
            <MDBRow class="justify-content-center">
              <MDBCol md="6" class="mb-3 mb-md-0">
                <div id="basic" class="form-outline form-white">
                  <MDBAutocomplete :filter="filterBasic" label="What are you looking for?" size="lg" />
                </div>
              </MDBCol>
              <MDBCol md="4" class="mb-3 mb-md-0">
                <div id="location" class="form-outline form-white">
                  <MDBAutocomplete :filter="filterLocation" label="Location" size="lg" />
                </div>
              </MDBCol>
              <MDBCol md="2">
                <MDBBtn size="lg" color="info" class="btn-block" type="submit">Search</MDBBtn>
              </MDBCol>
            </MDBRow>
          </MDBCardBody>
        </MDBCard>
      </MDBContainer>
    </div>
  </div>
</section>
</template>

xxxxxxxxxx
 
<style>
#app {
  font-family: Roboto, Helvetica, Arial, sans-serif;
}
.fw-900 {
  font-weight: 900;
}
html,
body,
.intro {
  height: 100%;
}
​
.mask-custom {
  background: rgba(24, 24, 16, .2);
  border-radius: 2em;
  backdrop-filter: blur(15px);
  border: 2px solid rgba(255, 255, 255, 0.05);
  background-clip: padding-box;
  box-shadow: 10px 10px 10px rgba(46, 54, 68, 0.03);
}
</style>

xxxxxxxxxx
 
  <script>
      import {
          MDBContainer,
          MDBCard,
          MDBCardBody,
          MDBRow,
          MDBCol,
          MDBAutocomplete,
          MDBBtn
      } from "mdb-vue-ui-kit";
​
  import {
      ref
  } from "vue"
​
  export default {
      name: "App",
      components: {
          MDBContainer,
          MDBCard,
          MDBCardBody,
          MDBRow,
          MDBCol,
          MDBAutocomplete,
          MDBBtn
      },
    setup() {
      const basicAutocomplete = ref(['Museum', 'Party', 'Restaurant', 'Concert', 'Architecture'])
      const locationAutocomplete = ref(['Madrid', 'Rome', 'Lisbon', 'Paris', 'London'])
​
      const filterBasic = value => {
        return basicAutocomplete.value.filter(item => {
          return item.toLowerCase().startsWith(value.toLowerCase());
        });
      };    
      
      const filterLocation = value => {
        return locationAutocomplete.value.filter(item => {
          return item.toLowerCase().startsWith(value.toLowerCase());
        });
      };      
      
      return { filterBasic, filterLocation }
      }
    
  }; 
</script>

Console errors: 0