docs: optmize the introduction (#7)

* docs: optmize the introduction

* fix: some bugs

.docs/composables/useNavigationMotion.ts

@@ -12,16 +12,16 @@ function _useNavigation() {
  search: false,
  children: [
  {
- label: 'Get Started',
- description: 'Learn how to get started with Nuxt.',
+ label: 'Getting Started',
+ description: 'Learn how to get started with Vue3 and Nuxt3.',
  icon: 'i-ph-rocket-launch-duotone',
  to: '/motion/getting-started',
  active: route.path.startsWith('/motion/getting-started'),
  },
  {
  label: 'API',
- description: 'Learn how to get started with Nuxt.',
- icon: 'i-ph-rocket-launch-duotone',
+ description: 'Learn about APIs of Oku Motion.',
+ icon: 'i-ph-brackets-curly-duotone',
  to: '/motion/api',
  active: route.path.startsWith('/motion/api'),
  },

.docs/content/motion/1.getting-started/1.introduction.md

@@ -1,20 +1,21 @@
 ---
 title: 'Introduction'
-description: Motion One for Vue is a 5kb animation library for Vue 3. Built on Motion One, it's capable of springs, independent transforms, and hardware accelerated animations.
+description: Get started with Oku Motion and learn by exploring interactive examples.
 navigation.icon: i-ph-info-duotone
 ---
 
+## Overview
 
-Motion One is the smallest fully-featured animation library for the web.
+Oku Motion is a simple yet powerful motion library for Vue3 and Nuxt3.
 
-It can animate HTML or SVG elements using the Web Animations API, which means some animations can run off the main thread. These animations will remain smooth, even while your website is busy rendering or processing.
+It enables effortlessly smooth animations for web elements, harnessing the power of the Web Animations API for optimal performance. Its versatility extends to animating anything, offering creative freedom and ensuring your website stands out with visually stunning effects.
 
-Additionally, it can animate anything by passing it a custom function, like innerText or Three.js.
+In this quick overview, we'll take a look at some of the APIs that Oku Motion offers.
 
-By the end of this quick guide, you'll have installed Motion One and created your first animation.
+It's based on [Motion One](https://motion.dev).
 
-It's based on Motion One. [Website](https://motion.dev)
 
 
+<!-- 
 - `@oku-ui/motion` all functions
-- `@oku-ui/motion/types` types
+- `@oku-ui/motion/types` types -->

.docs/content/motion/1.getting-started/2.install.md

@@ -1,10 +1,12 @@
 ---
-title: 'Installation'
-description: 'Motion One can be installed via npm:'
+title: 'Quick Start'
+description: 'Oku Motion requires Vue 3 or greater.'
 navigation.icon: i-ph-play-duotone
 ---
 
-# Vue 3
+## Installation
+
+### Vue 3
 
 ::code-group
 ```sh [pnpm]
@@ -21,11 +23,8 @@ yarn add @oku-ui/motion
 ```
 ::
 
-::callout{icon="i-ph-check-circle-duotone"}
-Well done! You have successfully installed Motion One.
-::
+### Nuxt 3
 
-# Nuxt 3
 1. Install the module
 
 ::code-group
@@ -63,11 +62,17 @@ export default defineNuxtConfig({
 Well done! You have successfully installed Motion One.
 ::
 
-## Next Steps
+## Importing
 
-Now that you have installed Motion One, you can start using it in your Vue 3 project.
+Once installed, you can import Oku Motion via `@oku-ui/motion`.
 
-### How to use Motion One
+```vue
+<script setup lang="ts">
+ import { Motion } from "@oku-ui/motion"
+</script>
 
-:read-more{title="Use" to="/motion/use"}
+<template>
+ <Motion />
+</template>
+```
 

.docs/content/motion/1.getting-started/_dir.yml

@@ -1,3 +1,3 @@
 title: Getting Started
-titleTemplate: '%s · Get Started with Nuxt'
-icon: i-ph-compass-tool-light
+titleTemplate: '%s · Get Started with Vue3 and Nuxt3'
+icon: i-ph-compass-tool-light