create frontend directory

frontend/pages/about.vue

@@ -0,0 +1,5 @@
+<template>
+    <section>
+        <h1>/about</h1>
+    </section>
+</template>

frontend/pages/index.vue

@@ -0,0 +1,3 @@
+<template>
+    <p>/</p>
+</template>

frontend/pages/warrens/[...path].vue

@@ -0,0 +1,3 @@
+<template>
+    <DirectoryList />
+</template>

frontend/pages/warrens/index.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ScrollArea } from '@/components/ui/scroll-area';
+
+const warrens = ['Thyr', 'Serc'];
+</script>
+
+<template>
+    <ScrollArea class="w-full h-full">
+        <div class="flex flex-row gap-2">
+            <Button
+                v-for="(warren, i) in warrens"
+                :key="i"
+                class="w-36 h-12"
+                variant="outline"
+                size="lg"
+                as-child
+            >
+                <NuxtLink
+                    class="flex flex-row items-center gap-1.5"
+                    :to="`/warrens/${warren}`"
+                >
+                    <Icon name="lucide:folder-root" />
+                    {{ warren }}
+                </NuxtLink>
+            </Button>
+        </div>
+    </ScrollArea>
+</template>