refactor: everything to nuxt.js

app/components/CertificationComponent.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const certifications = [
+  { title: 'J/27 Skipper', badgeText: 'J/27', description: 'Certified to be a skipper on a J/27 class boat.' },
+  { title: 'Capri 25 Skipper', badgeText: 'Capri25', description: 'Certified to be a skipper on a Capri 25 class boat.' },
+  { title: 'Night', badgeText: 'Night', description: 'Certified to operate boats at night' },
+  { title: 'Navigation', badgeText: 'Nav', description: 'Advanced Navigation' },
+  { title: 'Crew', badgeText: 'crew', description: 'Crew certification.' },
+];
+</script>
+
+<template>
+  <div>Certification</div>
+  <q-item
+    v-for="cert in certifications"
+    :key="cert.title"
+    clickable
+    v-ripple
+    class="rounded-borders"
+    :class="$q.dark.isActive ? 'bg-grey-9 text-white' : 'bg-grey-2'">
+    <q-item-section avatar>
+      <q-avatar rounded>
+        <q-icon :name="`check`" />
+      </q-avatar>
+    </q-item-section>
+    <q-item-section>
+      <q-item-label>{{ cert.title }}</q-item-label>
+      <q-item-label caption>
+        <q-badge color="green-4" text-color="black">{{ cert.badgeText }}</q-badge>
+      </q-item-label>
+    </q-item-section>
+    <q-item-section>
+      <span>{{ cert.description }}</span>
+    </q-item-section>
+  </q-item>
+</template>