<template>
 <q-layout class="bg-white shadow-24">
  <div class="flex flex-center  text-center full-width">
    <q-card class="no-shadow"> 
      <div class="row q-pa-xl">
        <div class="col-6 col-md-6 col-sm-12 col-xs-12">
          <img src="statics/oops-character.png" style="width:30vw;max-width:150px;" />
        </div>
        <div class="col-6 col-md-6 col-sm-12 col-xs-12 q-gutter-md">
          <div class="text-h2 text-grey-9 text-weight-regular">Oops!</div>
          <div class="text-h3 q-pa-lg text-shadow text-blue-9 text-weight-regular">404</div>
          <div class="text-h5 text-grey-9 text-weight-regular">PAGE NOT FOUND</div>
          <div class="text-body1 text-grey-9 text-weight-regular">Sorry, the page not found</div>
          <div class="text-caption text-grey-9 text-weight-regular">The link you followed probably broken or the page has been removed.</div>
         
          <div class="q-gutter-sm">
            <q-btn class="text-capitalize" color="secondary" to="/" label="Home" />
            <q-btn class="text-capitalize" color="primary" to="/faqs" label="help center" />
          </div>
        </div>
      </div>
    </q-card>
   <!-- <q-page-container>
        <keep-alive>
          <router-view />
        </keep-alive>
      </q-page-container> -->
  </div>
    
 </q-layout>
</template>

<script>
export default {
  name: "Error404"
};
</script>
<style lang="css" scoped>
.text-shadow {
  text-shadow: 2px 2px 3px #333;
}
</style>
