docs: update ui

docs/content/0.index.md

@@ -12,7 +12,7 @@ main:
 ---
 cta:
   - Get started
-  - /getting-started/setup
+  - /docs/getting-started/setup
 secondary:
   - Open on GitHub →
   - https://github.com/arashsheyda/nuxt-mongoose
@@ -25,12 +25,54 @@ Nuxt [Mongoose]{style="color: var(--color-primary-500)"}
 A Nuxt module for simplifying the use of [Mongoose](https://mongoosejs.com/) in your project.
 
 #support
-  ::terminal
-  ---
-  content:
-  - npm i nuxt-mongoose -D
-  ---
-  ::
+  :illustration
 ::
 
-<!-- TODO: features -->
+::card-grid
+#title
+<h1 class="center">Elevate Your <br/> <span class=highlight> Developer Experience</span></h1>
+
+#root
+:ellipsis{left=15rem width=40rem top=10rem blur=140px}
+
+#default
+  ::card{icon=tabler:code}
+  #title
+  Nuxt DevTools Support
+  #description
+  Dive into your database with confidence. Benefit from Nuxt Devtools support, allowing you to inspect and debug your DB operations seamlessly.
+  ::
+
+  ::card{icon=tabler:cloud-bolt}
+  #title
+  Auto Connection
+  #description
+  Forget about manual connection hassles. This module seamlessly handles the connection to your Mongoose database, making setup a breeze.
+  ::
+
+  ::card{icon=tabler:plug}
+  #title
+  Extendable & hackable
+  #description
+  This module grants you access to the full spectrum of Mongoose functionalities. Leverage the power of Mongoose in your project.
+  ::
+
+::
+
+<style>
+  .highlight {
+    color: #00dc82
+  }
+
+  .center {
+    text-align: center;
+  }
+  .card svg {
+    height: 3rem!important;
+    width: 3rem!important;
+  }
+  .support {
+    display: flex;
+    justify-content: center;
+  }
+</style>

docs/content/1.docs/2.api/3.examples.md

@@ -0,0 +1,5 @@
+# Examples
+
+Here are a few examples:
+
+- Nuxt Mongoose Minimal: [:icon{name="tabler:brand-github"} Github](https://github.com/arashsheyda/nuxt-mongoose-minimal) [:icon{name="tabler:world"} Website](https://nuxt-mongoose-minimal.vercel.app/)

docs/content/1.docs/_dir.yml

@@ -0,0 +1 @@
+icon: tabler:file-description

docs/content/2.playground/1.index.md

@@ -0,0 +1,5 @@
+# Playground
+
+:ellipsis{right=0px width=75% blur=150px}
+
+:sandbox{src="https://stackblitz.com/github/arashsheyda/nuxt-mongoose/tree/main/.stackblitz?embed=1&file=nuxt.config.ts"}

docs/content/2.playground/_dir.yml

@@ -0,0 +1 @@
+icon: tabler:play-volleyball

docs/content/3.releases/_dir.yml

@@ -0,0 +1,3 @@
+title: Releases
+icon: tabler:clipboard-text
+navigation.redirect: https://github.com/arashsheyda/nuxt-mongoose/releases