List Files | Just Commands | Repo | Logs

← back | Copy

<template>
  <BaseLayout title="Not Found">
    <div class="not-found-container">
      <h1 class="page-title">Page Not Found</h1>
      <p class="message">The page you're looking for doesn't exist or has been moved.</p>
      <ion-button fill="solid" color="primary" @click="router.push('/cart')">
        Go to Cart
      </ion-button>
    </div>
  </BaseLayout>
</template>

<script setup lang="ts">
import { IonButton } from "@ionic/vue";
import { useRouter } from "vue-router";
import BaseLayout from "@/components/BaseLayout.vue";

const router = useRouter();
</script>

<style scoped>
.not-found-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  text-align: center;
}

.page-title {
  margin: 0 0 24px 0;
  color: var(--ion-text-color);
  font-size: 32px;
  font-weight: 700;
  font-variant: small-caps;
}

.message {
  margin: 0 0 32px 0;
  color: var(--ion-color-medium);
  font-size: 16px;
  line-height: 1.6;
  max-width: 400px;
}

@media (max-width: 767px) {
  .not-found-container {
    padding: 16px;
  }

  .page-title {
    font-size: 28px;
  }
}
</style>