Building phase one

template/app/components/Alert.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="alert" :style="{ 'border-color': color }">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { color } = defineProps({
+  color: {
+    type: String,
+    default: 'orange'
+  }
+})
+</script>
+
+<style scoped>
+.alert {
+  display: flex;
+  align-items: center;
+  padding: 1rem;
+  border: 2px solid;
+  border-radius: 0.5rem;
+  background-color: var(--bg-elevated);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.alert:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
+}
+
+@media (prefers-color-scheme: dark) {
+  .alert {
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
+  }
+
+  .alert:hover {
+    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.5);
+  }
+}
+</style>

template/app/components/Counter.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <h3>Counter: {{ count }}</h3>
+    <button @click="increment">
+      Increment
+    </button>
+    <button @click="decrement">
+      Decrement
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+const count = ref(0)
+
+const increment = () => {
+  count.value++
+}
+
+const decrement = () => {
+  count.value--
+}
+</script>
+
+<style scoped>
+button {
+  margin: 5px;
+}
+</style>

template/app/components/NotFound.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="prose-wrapper">
+    <h1>Page not found dskldksla</h1>
+  </div>
+</template>
+
+<style scoped>
+</style>