docs: use admonitions styling

Author: jscottsmith

documentation/docs/examples/easing.mdx

@@ -22,7 +22,11 @@ function Component() {
 }
 ```
 
-**Note:** When defining an `easing` prop like above, ALL provided CSS effects will be eased.
+:::important
+
+When defining an `easing` prop like above, ALL provided CSS effects will be eased.
+
+:::
 
 <EasingDemo eased={{ easing: 'easeOutQuad' }} />
 

documentation/docs/usage/components/parallax-banner-component.md

@@ -6,8 +6,6 @@ Component that utilizes `<Parallax>` components to achieve a parallaxing banner
 
 Use the `layers` to supply a `speed` and `image` to your banner. In this case, it will create a banner using a single image, that moves slower than the rate of scroll, and the edges of the image will never be visible.
 
-**NOTE:** You MUST add a `height` value either as a `style` or through a `className` otherwise the banner will have no height and be hidden.
-
 ```jsx
 <ParallaxBanner
   layers={[
@@ -22,6 +20,12 @@ Use the `layers` to supply a `speed` and `image` to your banner. In this case, i
 />
 ```
 
+:::caution
+
+You MUST add a `height` value either as a `style` or through a `className` otherwise the banner will have no height and be hidden.
+
+:::
+
 ## Multiple Layers
 
 Supply the `layers` prop with additional configuration for more images. Each layer can contain unique configurations.

documentation/docs/usage/components/parallax-component.md

@@ -6,11 +6,11 @@ The main component for applying scroll effects based on an elements position wit
 import { Parallax } from 'react-scroll-parallax';
 ```
 
-# Examples
+## Examples
 
 Some basic example of how to use the `<Parallax>` component.
 
-## Speed Control
+### Speed Control
 
 The `speed` prop that will make an element's scroll speed appear to speed up or slow down. This is the simplest way to achieve a parallax effect.
 
@@ -27,9 +27,13 @@ const SlowAndFast = () => (
 );
 ```
 
-**NOTE:** The `speed` prop simplifies the application of a `translateX` or `translateY` effect based on the `ParallaxController` scroll axis – [See <ParallaxProvider\> Props](/docs/usage/components/parallax-provider#parallaxprovider-props)
+:::info
 
-## Translate Controls
+The `speed` prop simplifies the application of a `translateX` or `translateY` effect based on the `ParallaxController` scroll axis – [See <ParallaxProvider\> Props](/docs/usage/components/parallax-provider#parallaxprovider-props)
+
+:::
+
+### Translate Controls
 
 If you need more fine tune control of the scroll position you can apply start and end transforms more directly. In this example the element begins with a `translateY(-20%)` and ends with `translateY(10%)`
 
@@ -41,17 +45,21 @@ const TranslateY = () => (
 );
 ```
 
-**NOTE:** Translate values without units default to `%` so `-20` becomes `-20%`.
+:::info
+
+Translate values without units default to `%` so `-20` becomes `-20%`.
+
+:::
 
-# Props
+## Props
 
-## Props: Effects
+### Props: Effects
 
 Most props to configure a parallax element like CSS effects are documented and managed by the `parallax-controller`.
 
 [See all the parallax props](https://parallax-controller.vercel.app/docs/usage/props) that this component will accept.
 
-## Props: Component Configuration
+### Props: Component Configuration
 
 The following props allow some configuration of the react component:
 

documentation/docs/usage/components/parallax-provider.md

@@ -18,7 +18,11 @@ const AppContainer = () => (
 );
 ```
 
-**NOTE:** You can have multiple providers, however they will all be independent instances of a `ParallaxController`. It's recommended to only use one when possible.
+:::info
+
+You can have multiple providers, however they will all be independent instances of a `ParallaxController`. It's recommended to only use one when possible.
+
+:::
 
 ## ParallaxProvider Props
 

documentation/docs/usage/usage.md

@@ -39,7 +39,11 @@ const Component = () => {
 };
 ```
 
-**Note** that the hook will apply the effect styles directly to the element that the `ref` is attached.
+:::info
+
+The hook will apply the effect styles directly to the element that the `ref` is attached.
+
+:::
 
 Any of the [documented effects and configurations](https://parallax-controller.vercel.app/docs/usage/props) can be passed as params to the hook.
 
@@ -57,7 +61,11 @@ const Component = () => (
 );
 ```
 
-**Note** that the component will apply the effect styles to a `div` managed by the component and not the children.
+:::info
+
+The component will apply the effect styles to a `div` managed by the component and **not** the children.
+
+:::
 
 Any of the [documented effects and configurations](https://parallax-controller.vercel.app/docs/usage/props) can be passed as props to the component.