first commit

src/pages/MainPage.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import MenuItem from 'components/home/MenuItem.vue';
+import PersonCard from 'src/components/home/PersonCard.vue';
+import UsersDetailCardComponent from 'components/UsersDetailCardComponent.vue';
+
+const menu = [
+  {
+    icon: 'mdi-home',
+    color: 'green',
+    title: 'Home',
+    caption: 'Home Caption',
+  },
+  {
+    icon: 'mdi-home',
+    color: 'red',
+    title: 'Home',
+    caption: 'Home Caption',
+  },
+  {
+    icon: 'mdi-home',
+    color: 'orange',
+    title: 'Home',
+    caption: 'Home Caption',
+  },
+  {
+    icon: 'mdi-home',
+    color: 'cyan',
+    title: 'Home',
+    caption: 'Home Caption',
+  },
+  {
+    icon: 'mdi-home',
+    color: 'camo',
+    title: 'Home',
+    caption: 'Home Caption',
+  },
+  {
+    icon: 'mdi-home',
+    color: 'purple',
+    title: 'Home',
+    caption: 'Home Caption',
+  },
+  {
+    icon: 'mdi-home',
+    color: 'violet',
+    title: 'Home',
+    caption: 'Home Caption',
+  },
+  {
+    icon: 'mdi-home',
+    color: 'indigo',
+    title: 'Home',
+    caption: 'Home Caption',
+  },
+  {
+    icon: 'mdi-home',
+    color: 'lime',
+    title: 'Home',
+    caption: 'Home Caption',
+  },
+] satisfies InstanceType<typeof MenuItem>['$props']['list'];
+
+const person = [
+  {
+    name: 'Person 1',
+    badge: 'Badge 1',
+    detail: [
+      { label: 'Label 1', value: 'Detail 1' },
+      { label: 'Label 2', value: 'Detail 2' },
+    ],
+    male: true,
+  },
+  {
+    name: 'Person 1',
+    badge: 'Badge 1',
+    detail: [
+      { label: 'Label 1', value: 'Detail 1' },
+      { label: 'Label 2', value: 'Detail 2' },
+      { label: 'Label 3', value: 'Detail 3' },
+    ],
+    female: true,
+  },
+] satisfies InstanceType<typeof PersonCard>['$props']['list'];
+
+const input = ref('');
+</script>
+
+<template>
+  <q-input
+    label="test"
+    v-model="input"
+    :rules="[(v) => (!!v && v.length > 3) || 'Required']"
+    outlined
+  ></q-input>
+
+  <PersonCard :list="person" class="q-mb-md" />
+
+  <MenuItem :list="menu" />
+
+  <div class="row">
+    <users-detail-card-component class="q-pa-md" v-for="v in [1, 2]" :key="v" />
+  </div>
+</template>
+
+<style scoped>
+.person {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--size-6);
+}
+</style>

src/pages/error/NotFound.vue

@@ -0,0 +1,23 @@
+<template>
+  <div
+    class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center"
+  >
+    <div>
+      <div style="font-size: 30vh">404</div>
+
+      <div class="text-h2" style="opacity: 0.4">Oops. Nothing here...</div>
+
+      <q-btn
+        class="q-mt-xl"
+        color="white"
+        text-color="blue"
+        unelevated
+        to="/"
+        label="Go Home"
+        no-caps
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>