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>