<template> <div class="error-wrapper"> <slot name="title"> <span class="error-title">Error 404</span> </slot> <slot name="description"> <span class="error-description">Sorry, we couldn't find this page.</span> </slot> <slot name="subdescription"> <span class="error-sub-description">But dont worry, you can find plenty of other things on the homepage..</span> </slot> <div class="mt-5"> <router-link to="/" class="btn btn-sm btn-primary"> <i class="fas fa-arrow-left fa-fw me-1"></i> <span>Back to Home</span> </router-link> </div> </div> </template> <script setup></script> <style scoped> .error-wrapper { text-align: center; } .error-title { font-weight: bold; font-size: 8rem; display: block; } .error-description { font-size: 2rem; display: block; font-weight: bold; } </style>