<template>
  <div class="container">
    <h1>404</h1>
    <p>Oops! The page you're looking for cannot be found.</p>
    <a href="/">Go Home</a>
  </div>
</template>
<script lang="ts">
export default {
  name: 'Page404'
};
</script>
<style scoped>
.container {
  text-align: center;
  padding-top: 100px;
}

h1 {
  font-size: 72px;
  margin-bottom: 10px;
}

p {
  font-size: 24px;
  margin-bottom: 20px;
}

a {
  display: inline-block;
  padding: 10px 20px;
  font-size: 18px;
  color: #fff;
  background-color: #007bff;
  text-decoration: none;
  border-radius: 5px;
}

a:hover {
  background-color: #0056b3;
}
</style>
