feat: add new stack

Makefile

@@ -13,4 +13,8 @@ format:
 	@bunx biome format --write 
 
 lint:
-	@bunx biome lint --write ./app ./server 
+	@bunx biome lint --write ./app ./server 
+
+update-deps:
+	@ncu -u
+	@bun i

README.md

@@ -1,11 +1,14 @@
 # Nuxt 3 Starter Template
 
-A modern Nuxt 3 starter template with Drizzle ORM, Biome, Pinia, Docker, and Bun. This template provides a robust foundation for building full-stack applications with best practices and powerful tools.
+A modern Nuxt 3 starter template with Drizzle ORM, Biome, Pinia, Docker, UnoCSS and Bun. This template provides a robust foundation for building full-stack applications with best practices and powerful tools.
 
 ## 🚀 Stack
 
+![Nuxt 3 Starter Template](app/public/images/image.png)
+
 - **[Nuxt 3](https://nuxt.com/)** - The Intuitive Vue Framework
 - **[Bun](https://bun.sh/)** - Fast JavaScript runtime & package manager
+- **[UnoCSS](https://unocss.dev/)** - Instant On-demand Atomic CSS Engine
 - **[Drizzle ORM](https://orm.drizzle.team/)** - TypeScript ORM with powerful migrations
 - **[Biome](https://biomejs.dev/)** - Fast linter and formatter
 - **[Pinia](https://pinia.vuejs.org/)** - Intuitive state management

app/app.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="font-satoshi">
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </div>
+</template>

app/components/auth/Form.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+
+const props = defineProps<{
+    isLogin: boolean;
+    text: string;
+    toggle: () => void;
+}>()
+
+const title = computed(() => props.isLogin ? 'Login' : 'Sign Up');
+
+const username = ref('');
+const email = ref('');
+const password = ref('');
+
+const submit = () => {
+    console.log({ username: username.value, email: email.value, password: password.value });
+}
+</script>
+
+<template>
+    <form
+        bg="white dark:neutral-900"
+        border="rounded neutral-300"
+        class="p-6 rounded-lg shadow-lg"
+        @submit.prevent="submit"
+        >
+        <h2 class="text-2xl font-bold mb-4">{{ title }}</h2>
+        <label class="block mb-2">
+            <span class="text-sm">Username</span>
+            <input
+                v-model="username"
+                type="text"
+                class="w-full border rounded-lg p-2"
+                placeholder="Username"
+            />
+        </label>
+        <label class="block mb-2">
+            <span class="text-sm">Email</span>
+            <input
+                v-model="email"
+                type="email"
+                class="w-full border rounded-lg p-2"
+                placeholder="Email"
+            />
+        </label>
+        <label class="block mb-2">
+            <span class="text-sm">Password</span>
+            <input
+                v-model="password"
+                type="password"
+                class="w-full border rounded-lg p-2"
+                placeholder="Password"
+            />
+        </label>
+        <button
+            bg="green-500"
+            border="rounded green-600"
+            class="w-full text-white p-2 rounded-lg"
+            type="submit"
+        >
+            {{ props.isLogin ? 'Login' : 'Sign Up' }}
+        </button>
+    </form>
+</template>

app/components/home/Counter.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const { count, increment, decrement } = useCount();
+
+const buttons = [
+  { icon: 'ic:baseline-plus', fn: increment },
+  { icon: 'ic:baseline-minus', fn: decrement },
+]
+
+</script>
+
+<template>
+  <div class="mt-8">
+    <div class="flex flex-col items-center gap-4">
+      <p class="text-gray-100 text-3xl font-medium">Counter: {{ count }}</p>
+      <div class="flex items-center gap-4">
+        <button v-for="button in buttons" @click="button.fn"
+          class="bg-neutral-800 border-none hover:bg-neutral-700 text-gray-100 px-4 py-2 rounded-lg transition-colors duration-200 flex items-center justify-center group">
+          <Icon :name="button.icon" class="w-6 h-6" />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

app/components/home/Hero.vue

@@ -0,0 +1,69 @@
+<template>
+    <section class="bg-inherit w-full h-full justify-center overflow-auto items-center flex flex-col">
+        <div class="max-w-6xl mx-auto flex flex-col items-center">
+            <div class="flex flex-col items-center gap-4 mb-8">
+                <Icon name="mdi:nuxt" class="text-green-500 w-16 h-16" />
+                <h1 class="text-gray-100 text-4xl font-bold">Nuxt Starter</h1>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 w-full max-w-4xl">
+                <div
+                    class="bg-neutral-800/50 p-6 rounded-xl backdrop-blur-sm border border-neutral-700/50 hover:border-green-500/50 transition-all group">
+                    <div class="flex flex-col items-center gap-3">
+                        <Icon name="logos:pinia"
+                            class="w-12 h-12 text-green-500 group-hover:scale-110 transition-transform" />
+                        <span class="text-gray-300 font-medium">Pinia</span>
+                    </div>
+                </div>
+                <div
+                    class="bg-neutral-800/50 p-6 rounded-xl backdrop-blur-sm border border-neutral-700/50 hover:border-blue-500/50 transition-all group">
+                    <div class="flex flex-col items-center gap-3">
+                        <Icon name="simple-icons:drizzle"
+                            class="w-12 h-12 text-blue-500 group-hover:scale-110 transition-transform" />
+                        <span class="text-gray-300 font-medium">Drizzle ORM</span>
+                    </div>
+                </div>
+                <div
+                    class="bg-neutral-800/50 p-6 rounded-xl backdrop-blur-sm border border-neutral-700/50 hover:border-purple-500/50 transition-all group">
+                    <div class="flex flex-col items-center gap-3">
+                        <Icon name="simple-icons:biome"
+                            class="w-12 h-12 text-purple-500 group-hover:scale-110 transition-transform" />
+                        <span class="text-gray-300 font-medium">Biome</span>
+                    </div>
+                </div>
+                <div
+                    class="bg-neutral-800/50 p-6 rounded-xl backdrop-blur-sm border border-neutral-700/50 hover:border-sky-500/50 transition-all group">
+                    <div class="flex flex-col items-center gap-3">
+                        <Icon name="mdi:docker"
+                            class="w-12 h-12 text-sky-500 group-hover:scale-110 transition-transform" />
+                        <span class="text-gray-300 font-medium">Docker</span>
+                    </div>
+                </div>
+                <div
+                    class="bg-neutral-800/50 p-6 rounded-xl backdrop-blur-sm border border-neutral-700/50 hover:border-amber-500/50 transition-all group">
+                    <div class="flex flex-col items-center gap-3">
+                        <Icon name="simple-icons:bun"
+                            class="w-12 h-12 text-amber-500 group-hover:scale-110 transition-transform" />
+                        <span class="text-gray-300 font-medium">Bun</span>
+                    </div>
+                </div>
+                <div
+                    class="bg-neutral-800/50 p-6 rounded-xl backdrop-blur-sm border border-neutral-700/50 hover:border-teal-500/50 transition-all group">
+                    <div class="flex flex-col items-center gap-3">
+                        <Icon name="simple-icons:unocss"
+                            class="w-12 h-12 text-teal-500 group-hover:scale-110 transition-transform" />
+                        <span class="text-gray-300 font-medium">UnoCSS</span>
+                    </div>
+                </div>
+                <div
+                    class="md:col-span-3 bg-neutral-800/50 p-6 rounded-xl backdrop-blur-sm border border-neutral-700/50 hover:border-yellow-500/50 transition-all group">
+                    <div class="flex flex-col items-center gap-3">
+                        <Icon name="mdi:nuxt"
+                            class="w-12 h-12 text-green-500 group-hover:scale-110 transition-transform" />
+                        <span class="text-gray-300 font-medium">Nuxt 3</span>
+                    </div>
+                </div>
+            </div>
+            <HomeCounter />
+        </div>
+    </section>
+</template>

app/composables/count.ts

@@ -0,0 +1,16 @@
+export const useCount = () => {
+    const count = ref(0)
+    const increment = () => {
+        count.value++
+        console.log('increment')
+    }
+    const decrement = () => {
+        count.value--
+        console.log('decrement')
+    }
+    return {
+      count,
+      increment,
+      decrement
+    }
+}

app/pages/index.vue

@@ -0,0 +1,5 @@
+<template>
+    <main class="w-screen h-screen flex flex-col bg-neutral-900">
+        <HomeHero />
+    </main>
+</template>