docs: add guide section (#11)

* docs: optmize the introduction

* fix: some bugs

* docs: optimize the introduction docs

* docs: add some words

* docs: add guide

.docs/composables/useNavigationMotion.ts

@@ -13,14 +13,21 @@ function _useNavigation() {
         children: [
           {
             label: 'Getting Started',
-            description: 'Learn how to get started with Vue3 and Nuxt3.',
+            description: 'Learn how to get started with Oku Motion.',
             icon: 'i-ph-rocket-launch-duotone',
             to: '/motion/getting-started',
             active: route.path.startsWith('/motion/getting-started'),
           },
+          {
+            label: 'Guide',
+            description: 'Learn to build animations with Oku Motion',
+            icon: 'i-ph-book-open-duotone',
+            to: '/motion/guide/animation/simple-animations',
+            active: route.path.startsWith('/motion/guide'),
+          },
           {
             label: 'API',
-            description: 'Learn about APIs of Oku Motion.',
+            description: 'Explore the Oku Motion API.',
             icon: 'i-ph-brackets-curly-duotone',
             to: '/motion/api',
             active: route.path.startsWith('/motion/api'),

.docs/content/motion/2.guide/1.animation/1.simple-animations.md

@@ -0,0 +1,17 @@
+---
+title: 'Simple animations'
+description: ''
+---
+
+Most animations will be performed with the `motion` component and the animate prop.
+
+```html
+<Motion animate={{ x: 100 }} />
+```
+
+When any value in `animate` changes, the component will automatically animate to the updated target.
+
+<iframe
+  src="https://stackblitz.com/edit/vitejs-vite-wmhgda?embed=1&file=src%2FDemo.vue&hideExplorer=1&hideNavigation=1&view=preview"
+  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+></iframe>

.docs/content/motion/2.guide/1.animation/_dir.yml

@@ -0,0 +1,3 @@
+title: Animation
+icon: i-ph-sparkle-duotone
+# navigation: false

.docs/content/motion/2.guide/_dir.yml

@@ -0,0 +1,4 @@
+title: Guide
+icon: i-ph-folder-notch-open-duotone
+deep: true
+# navigation: false