docs(app): introduction

docs/docs/.vitepress/cache/deps/_metadata.json

@@ -1,17 +1,17 @@
 {
-  "hash": "a89adac0",
-  "browserHash": "84b44747",
+  "hash": "f13b7c85",
+  "browserHash": "5f00c4af",
   "optimized": {
     "vue": {
       "src": "../../../../../node_modules/.pnpm/vue@3.3.4/node_modules/vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "6df61bde",
+      "fileHash": "899fca28",
       "needsInterop": false
     },
     "vitepress > @vue/devtools-api": {
       "src": "../../../../../node_modules/.pnpm/@vue+devtools-api@6.5.0/node_modules/@vue/devtools-api/lib/esm/index.js",
       "file": "vitepress___@vue_devtools-api.js",
-      "fileHash": "9178e95c",
+      "fileHash": "b69dbf2e",
       "needsInterop": false
     }
   },

docs/docs/.vitepress/config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from 'vitepress'
-import { version } from '../../../packages/windi-ui/package.json'
+import { version } from '../../../package.json'
 import { SearchPlugin } from "vitepress-plugin-search";
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -12,7 +12,7 @@ export default defineConfig({
       {
         rel: "icon",
         type: "image/svg+xml",
-        href: "../public/windi.png",
+        href: "/windi.png",
       },
     ],
     ["meta", { property: "og:type", content: "website" }],
@@ -29,15 +29,18 @@ export default defineConfig({
       { text: `v${version}`, link: ''}
     ],
 
-    sidebar: [
-      {
-        text: 'Examples',
-        items: [
-          { text: 'Markdown Examples', link: '/markdown-examples' },
-          { text: 'Runtime API Examples', link: '/api-examples' }
-        ]
-      }
-    ],
+    sidebar: {
+      '/guide/':[
+        {
+          text: 'Getting Started',
+          collapsed: true,
+          items: [
+            { text: 'Introduction', link: '/guide/getting-started/index.md' },
+            { text: 'Installation', link: '/api-examples' }
+          ]
+        }
+      ],
+    },
 
     socialLinks: [
       { icon: 'github', link: 'https://github.com/selemondev/windi-ui' }

docs/docs/guide/getting-started/index.md

@@ -0,0 +1,34 @@
+# Introduction
+
+Windi UI is a Vue.js based TailwindCss UI library that offers a collection of prebuilt UI components to enable you to build your web applications with ease.
+
+It comes with a comprehensive collection of prebuilt components that are ready for use right out of the box.
+
+Windi UI is built on top of powerful tools such as [TailwindCss](https://tailwindcss.com/), [Vueuse](https://vueuse.org) and [Headless UI](https://headlessui.com/) so rest assured that the components are really good and fully customizable.
+
+Windi UI is fully customizable thus meaning you can either choose to modify the existing theme or create your own theme and shape the UI components according to your needs. 
+
+Check out the [features]() section to learn more about the [theming]() options.
+
+
+## Why Windi UI
+
+- **Time-Saving**: With Windi UI's vast selection of ready-to-use components, you'll save time on development without compromising on quality.
+
+- **Developer-Friendly**: Windi UI's intuitive design and documentation makes it a breeze for developers of all skill levels to integrate and modify the components.
+
+- **Fully Configurable**: Windi UI components come with various configuration options, enabling you to adjust their behavior and appearance to match your personal aesthetics.
+
+- **Themes**: Windi UI provides theming support, making it easy to bring your own theme or customize the existing default theme.
+
+- **Lightweight and Fast**: Despite being highly customizable, Windi UI is optimized for performance, ensuring that your customizations don't come at the cost of slow loading times or sluggish interactions.
+
+
+## Features
+
+- 🦾 **TypeScript Support** - The components are fully written in TypeScript from the ground up. We do recommend using TypeScript for your project as well.
+- 🛠️ **On demand Import**  - Windi UI comes with an intelligent resolver that automatically imports only used components.
+- 🔥 **[Icons](https://icones.js.org/)** - Use any icon in your project from your favourite icon set.
+- 📦 **Diverse Component Selection** - Create your application effortlessly with our expansive collection of 50+ UI components.
+- ⚡️ **Powerful Tools** - Windi UI is built on top of powerful tools such as [TailwindCss](https://tailwindcss.com/), [Vueuse](https://vueuse.org) and [Headless UI](https://headlessui.com/).
+- 🎨 **Themeable** - Customize any part of our beautiful components to match your style.

docs/docs/guide/getting-started/installation.md

@@ -0,0 +1,19 @@
+# Installation
+
+Add `Windi UI` to your project by running one of the following commands:
+
+```bash
+
+#npm
+
+npm install @windi-ui/vue
+
+#yarn
+
+yarn add @windi-ui/vue
+
+#pnpm 
+
+
+
+```

docs/docs/index.md

@@ -14,7 +14,7 @@ hero:
       link: /markdown-examples
     - theme: alt
       text: Why Windi?
-      link: /api-examples
+      link: /guide/getting-started/index.md
     - theme: alt
       text: Playground
       link: http://localhost:5173/play/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cCBsYW5nPSd0cyc+XG4gIFxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGRpdj5cblxuICA8L2Rpdj5cbjwvdGVtcGxhdGU+IiwiUGxheWdyb3VuZE1haW4udnVlIjoiPHNjcmlwdCBzZXR1cCBsYW5nPVwidHNcIj5cbmltcG9ydCB7IG9uTW91bnRlZCB9IGZyb20gJ3Z1ZSdcbi8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvYmFuLXRzLWNvbW1lbnRcbi8vIEB0cy1leHBlY3QtZXJyb3JcbmltcG9ydCBBcHAgZnJvbSAnLi9BcHAudnVlJ1xuaW1wb3J0IHsgZ2V0VW5vY3NzQ29tcGlsZVJlcywgaW5pdCwgbGliSW5zdGFsbCwgc2VuZEh0bWwgfSBmcm9tICcuL2xpYi1pbnN0YWxsLmpzJ1xuXG5saWJJbnN0YWxsKClcbm9uTW91bnRlZChhc3luYyAoKSA9PiB7XG4gIGF3YWl0IGluaXQoKVxuICBzZW5kSHRtbCgpXG4gIGdldFVub2Nzc0NvbXBpbGVSZXMoKVxufSlcbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIDxBcHAgLz5cbjwvdGVtcGxhdGU+IiwiaW1wb3J0X21hcC5qc29uIjoie1xuICBcImltcG9ydHNcIjoge31cbn0iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwOi8vbG9jYWxob3N0OjUxNzMvcGxheS9zcmMvdnVlLWRldi1wcm94eVwiLFxuICAgIFwiQHZ1ZS9jb21waWxlci1zZmNcIjogXCJodHRwOi8vbG9jYWxob3N0OjUxNzMvcGxheS9zcmMvdnVlLXNmYy1kZXYtcHJveHlcIixcbiAgICBcIkB2dWUvc2hhcmVkXCI6IFwiaHR0cDovL2xvY2FsaG9zdDo1MTczL3BsYXkvc3JjL3Z1ZS1zaGFyZWQtZGV2LXByb3h5XCIsXG4gICAgXCJ2dWUtdWktbmV4dFwiOiBcImh0dHA6Ly9sb2NhbGhvc3Q6NTE3My9wbGF5L3NyYy92dWUtdWktbmV4dC1kZXYtcHJveHlcIlxuICB9LFxuICBcInNjb3Blc1wiOiB7fVxufSIsImxpYi1pbnN0YWxsLmpzIjoiaW1wb3J0IHsgZ2V0Q3VycmVudEluc3RhbmNlIH0gZnJvbSAndnVlJ1xuLy8gaW1wb3J0IFVub1VJIGZyb20gJ29udS11aSdcbmltcG9ydCB7IHVpIH0gZnJvbSBcInZ1ZS11aS1uZXh0XCI7XG5cbmxldCBpbnN0YWxsZWQgPSBmYWxzZVxuXG5leHBvcnQgZnVuY3Rpb24gbGliSW5zdGFsbCgpIHtcbiAgaWYgKGluc3RhbGxlZClcbiAgICByZXR1cm5cbiAgY29uc3QgaW5zdGFuY2UgPSBnZXRDdXJyZW50SW5zdGFuY2UoKVxuICBcbiAgLy8gaW5zdGFuY2UuYXBwQ29udGV4dC5hcHAudXNlKHVpKVxuICBpbnN0YWxsZWQgPSB0cnVlXG59XG5cbmV4cG9ydCBhc3luYyBmdW5jdGlvbiBpbml0KCkge1xuICBhd2FpdCBsb2FkU3R5bGUoKVxuICBhd2FpdCBjcmVhdGVJbmplY3RVbm9jc3MoKVxufVxuXG5leHBvcnQgZnVuY3Rpb24gbG9hZFN0eWxlKCkge1xuICByZXR1cm4gbmV3IFByb21pc2UoKHJlc29sdmUsIHJlamVjdCkgPT4ge1xuICAgIGNvbnN0IGxpbmsgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdsaW5rJylcbiAgICBsaW5rLnJlbCA9ICdzdHlsZXNoZWV0J1xuICAgIGxpbmsuaHJlZiA9ICd1bmRlZmluZWQnXG4gICAgbGluay5pZCA9ICdsaWJfc3R5bGUnXG4gICAgbGluay5hZGRFdmVudExpc3RlbmVyKCdsb2FkJywgcmVzb2x2ZSlcbiAgICBsaW5rLmFkZEV2ZW50TGlzdGVuZXIoJ2Vycm9yJywgcmVqZWN0KVxuICAgIGRvY3VtZW50LmJvZHkuYXBwZW5kKGxpbmspXG4gIH0pXG59XG5cbmV4cG9ydCBmdW5jdGlvbiBjcmVhdGVJbmplY3RVbm9jc3MoKSB7XG4gIHJldHVybiBuZXcgUHJvbWlzZSgocmVzb2x2ZSwgcmVqZWN0KSA9PiB7XG4gICAgY29uc3Qgc3R5bGUgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdzdHlsZScpXG4gICAgc3R5bGUuaWQgPSAndW5vY3NzX3N0eWxlJ1xuICAgIHN0eWxlLmFkZEV2ZW50TGlzdGVuZXIoJ2xvYWQnLCByZXNvbHZlKVxuICAgIHN0eWxlLmFkZEV2ZW50TGlzdGVuZXIoJ2Vycm9yJywgcmVqZWN0KVxuICAgIGRvY3VtZW50LmJvZHkuYXBwZW5kKHN0eWxlKVxuICB9KVxufVxuXG4vLyDlj5HpgIFkb23kv6Hmga/liLAg54i26aG16Z2iXG5leHBvcnQgZnVuY3Rpb24gc2VuZEh0bWwoKSB7XG4gIGNvbnN0IGRpdiA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKS5pbm5lckhUTUxcbiAgdG9wLnBvc3RNZXNzYWdlKGRpdiwgbG9jYXRpb24uYW5jZXN0b3JPcmlnaW5zWzBdKVxufVxuXG4vLyDmlLbniLbpobXpnaLkvKDmnaXliLAgY3NzXG5leHBvcnQgZnVuY3Rpb24gZ2V0VW5vY3NzQ29tcGlsZVJlcygpIHtcbiAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ21lc3NhZ2UnLCAoZXZlbnQpID0+IHtcbiAgICBjb25zdCBzdHlsZUVsbSA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyN1bm9jc3Nfc3R5bGUnKVxuICAgIGlmIChzdHlsZUVsbSlcbiAgICAgIHN0eWxlRWxtLmlubmVySFRNTCA9IGV2ZW50LmRhdGFcbiAgfSlcbn0iLCJfbyI6e319
@@ -31,9 +31,9 @@ features:
     title: Icon
     details: Use any icon in your project from your favourite icon set.
     link: "#"
-  - icon: 🌈
-    title: Component design
-    details: Windi UI offers a range of UI components that are sleek and easily customizable.
+  - icon: 🛠️
+    title: On Demand Import
+    details: Windi UI comes with an intelligent resolver that automatically imports only used components.
     link: "#"
   - icon: 📦
     title: Diverse Component Selection