docs: change titles and headers wording

BobbieGoede · BobbieGoede · commit f37c94ec6599 · 2024-10-12T14:44:30.000+02:00
diff --git a/docs/content/1.getting-started/2.nuxt.md b/docs/content/1.getting-started/2.nuxt.md
@@ -1,4 +1,8 @@
-# Nuxt Usage
+---
+title: Nuxt Usage
+description: Easily set up motions in your Nuxt project using the nuxt import.
+---
+
 
 If you are using [Nuxt](https://nuxtjs.org/), this package has a specific implementation that makes the declaration of custom directives even easier.
 
diff --git a/docs/content/2.features/0.presets.md b/docs/content/2.features/0.presets.md
@@ -1,6 +1,6 @@
 ---
 title: Presets
-description: Presets are a set of animations that are bundled with the package.
+description: Presets are a set of animations bundled with the package.
 toc: false
 ---
 
diff --git a/docs/content/2.features/1.component-usage.md b/docs/content/2.features/1.component-usage.md
@@ -1,4 +1,7 @@
-# Component usage
+---
+title: Component usage
+description: Directly use motions using components
+---
 
 vueuse/motion allows you to implement your animations directly within the template of your components without the need to wrap target elements in any additional components.
 
diff --git a/docs/content/2.features/1.directive-usage.md b/docs/content/2.features/1.directive-usage.md
@@ -1,4 +1,7 @@
-# Directive Usage
+---
+title: Directive usage
+description: Directly use motions using directives
+---
 
 vueuse/motion allows you to write your animations right from the template of your components without having to wrap the target elements in any wrapper component.
 
diff --git a/docs/content/2.features/2.composable-usage.md b/docs/content/2.features/2.composable-usage.md
@@ -1,4 +1,8 @@
-# Composable Usage
+---
+title: Composable usage
+description: Programmatic motions using composables
+---
+
 
 vueuse/motion is written using Composition API.
 
diff --git a/docs/content/2.features/3.motion-properties.md b/docs/content/2.features/3.motion-properties.md
@@ -1,4 +1,7 @@
-# Motion Properties
+---
+title: Motion Properties
+description: The animatable properties of an element used for motions
+---
 
 Motion properties are represented by an object containing all the animatable properties of an element.
 
diff --git a/docs/content/2.features/4.transition-properties.md b/docs/content/2.features/4.transition-properties.md
@@ -1,3 +1,8 @@
+---
+title: Transition Properties
+description: Tweak your motions by setting transition properties
+---
+
 # Transition Properties
 
 Transition properties are represented by an object containing all transition parameters of a variant.
diff --git a/docs/content/2.features/5.variants.md b/docs/content/2.features/5.variants.md
@@ -1,4 +1,7 @@
-# Variants
+---
+title: Variants
+description: Variants are the states motions animate between
+---
 
 Variants represent an animatable state for your element.
 
diff --git a/docs/content/2.features/6.motion-instance.md b/docs/content/2.features/6.motion-instance.md
@@ -1,3 +1,8 @@
+---
+title: Motion Instance
+description: The instance that exposes motions for programmatic usage
+---
+
 # Motion Instance
 
 Motion instance is the object exposed when binding to a target element using [v-motion](/features/directive-usage) or [useMotion](/features/composable-usage).
diff --git a/docs/content/3.api/1.use-motion.md b/docs/content/3.api/1.use-motion.md
@@ -1,6 +1,7 @@
-# useMotion
-
-useMotion is the core composable of this package.
+---
+title: useMotion
+description: The core composable of this package.
+---
 
 This composable imports every other composable and expose a motion instance.
 
diff --git a/docs/content/3.api/10.use-element-transform.md b/docs/content/3.api/10.use-element-transform.md
@@ -1,8 +1,9 @@
-# useElementTransform
+---
+title: useElementTransform
+description: A composable used to sync a reactive object to a target element CSS transform.
+---
 
-useElementTransform is used to sync a reactive object to a target element CSS transform.
-
-It uses [reactiveTransform](https://github.com/vueuse/motion/blob/main/src/reactiveTransform.ts) and binds it to a target.
+This uses [reactiveTransform](https://github.com/vueuse/motion/blob/main/src/reactiveTransform.ts) and binds it to a target.
 
 ## Parameters
 
diff --git a/docs/content/3.api/11.reactive-style.md b/docs/content/3.api/11.reactive-style.md
@@ -1,6 +1,7 @@
-# reactiveStyle
-
-reactiveStyle is an helper function creating a reactive object compatible with an HTML `style` attribute.
+---
+title: reactiveStyle
+description: A helper function creating a reactive object compatible with an HTML `style` attribute.
+---
 
 ## Parameters
 
diff --git a/docs/content/3.api/12.reactive-transform.md b/docs/content/3.api/12.reactive-transform.md
@@ -1,6 +1,7 @@
-# reactiveTransform
-
-reactiveTransform is an helper function creating a reactive object compatible with an HTML `style` attribute.
+---
+title: reactiveTransform
+description: A helper function creating a reactive object compatible with an HTML `style` attribute.
+---
 
 ## Parameters
 
diff --git a/docs/content/3.api/2.use-spring.md b/docs/content/3.api/2.use-spring.md
@@ -1,4 +1,7 @@
-# useSpring
+---
+title: useSprint
+description: Animate elements using spring animations.
+---
 
 useSpring is a simpler hook than [useMotion](/api/use-motion) and makes it possible to animate HTML or SVG Elements in your Vue components using spring animations.
 
diff --git a/docs/content/3.api/3.use-motions.md b/docs/content/3.api/3.use-motions.md
@@ -1,4 +1,7 @@
-# useMotions
+---
+title: useMotions
+description: Provides access to motion instances declared the template.
+---
 
 useMotions is used to access the motion instances from v-motion directives declared from templates.
 
diff --git a/docs/content/3.api/4.use-motion-properties.md b/docs/content/3.api/4.use-motion-properties.md
@@ -1,3 +1,8 @@
+---
+title: useMotionProperties
+description: Access the Motion Properties of an element.
+---
+
 # useMotionProperties
 
 useMotionProperties is used to access [Motion Properties](/features/motion-properties) for a target element.
diff --git a/docs/content/3.api/5.use-motion-variants.md b/docs/content/3.api/5.use-motion-variants.md
@@ -1,3 +1,8 @@
+---
+title: useMotionVariants
+description: Access and modify the variant state.
+---
+
 # useMotionVariants
 
 useMotionVariants is used to handle the [Variants](/features/variants) state and selection.
diff --git a/docs/content/3.api/6.use-motion-transitions.md b/docs/content/3.api/6.use-motion-transitions.md
@@ -1,3 +1,8 @@
+---
+title: useMotionTransitions
+description: Handle animations of your elements.
+---
+
 # useMotionTransitions
 
 useMotionTransitions is used to handle the multiple animations created when you animate your elements.
diff --git a/docs/content/3.api/7.use-motion-controls.md b/docs/content/3.api/7.use-motion-controls.md
@@ -1,4 +1,7 @@
-# useMotionControls
+---
+title: useMotionControls
+description: Creates controls for motion properties and transitions.
+---
 
 useMotionControls is used to create motion controls from motion properties and motion transitions.
 
diff --git a/docs/content/3.api/8.use-motion-features.md b/docs/content/3.api/8.use-motion-features.md
@@ -1,6 +1,7 @@
-# useMotionFeatures
-
-useMotionFeatures is used to register features such as variant sync, event listeners.
+---
+title: useMotionFeatures
+description: A composable used to register features such as variant sync, event listeners.
+---
 
 ## Parameters
 
diff --git a/docs/content/3.api/9.use-element-style.md b/docs/content/3.api/9.use-element-style.md
@@ -1,8 +1,9 @@
-# useElementStyle
+---
+title: useElementStyle
+description: Sync a reactive object to the CSS style of a target element.
+---
 
-useElementStyle is used to sync a reactive object to a target element CSS styling.
-
-It uses [reactiveStyle](https://github.com/vueuse/motion/blob/main/src/reactiveStyle.ts) and bind it to a target.
+This uses [reactiveStyle](https://github.com/vueuse/motion/blob/main/src/reactiveStyle.ts) and binds it to a target.
 
 ## Parameters
 
diff --git a/docs/content/index.yaml b/docs/content/index.yaml
@@ -20,25 +20,17 @@ hero:
     ```
 
 features:
-  title: 'Let''s put things in motion'
+  title: "Let's put things in motion"
 
   items:
     - title: Smooth animations
-      description: based on [Popmotion](https://popmotion.io/)
-      icon: i-heroicons-arrow-right-20-solid
+      description: Based on Popmotion
     - title: Declarative API
-      description: inspired by [Framer Motion](https://www.framer.com/motion/)
+      description: Inspired by Framer Motion
     - title: Plug & play
       description: with 20+ presets
     - title: SSR Ready
       description:
-    - title: First-class support for Nuxt 3
+    - title: First-class support for Nuxt
     - title: Written in TypeScript
     - title: Lightweight with <20kb bundle size
-
-  links:
-    - label: Get Started
-      trailingIcon: i-heroicons-arrow-right-20-solid
-      to: /getting-started
-      size: lg
-      color: white
