refactor(docs): revise NextUI Provider structure

apps/docs/content/docs/api-references/nextui-provider.mdx

@@ -5,23 +5,51 @@ description: API References for NextUI Provider
 
 # NextUI Provider
 
+API reference for the `NextUIProvider`. 
+
 ------
 
-Here's the API reference for the `NextUIProvider`.
+## Import
+
+<ImportTabs
+  commands={{
+    main: 'import {NextUIProvider} from "@nextui-org/react";',
+    individual: 'import {NextUIProvider} from "@nextui-org/system";',
+  }}
+/>
+
+## Usage
+
+```jsx
+import * as React from "react";
+import {NextUIProvider} from "@nextui-org/react";
+
+function App() {
+  return (
+    <NextUIProvider>
+      <YourApplication />
+    </NextUIProvider>
+  );
+}
+```
 
 ## Props
 
-### navigate
+<Spacer y={6}/>
+
+`navigate`
 
-`navigate` provides a client side router to all nested components such as Link, Menu, Tabs, Table, etc.
+- **Description**: Provides a client side router to all nested components such as Link, Menu, Tabs, Table, etc.
+- **Type**: `((path: string) => void) | undefined`
 
-**type**: `((path: string) => void) | undefined`
+<Spacer y={2}/>
 
-### locale
+`locale`
 
-The locale to apply to the children.
+- **Description**: The locale to apply to the children.
+- **Type**: `string | undefined`
+- **Default**: `en-US`
 
-**type**: `string | undefined`
 
 Here's the supported locales. By default, It is `en-US`.
 
@@ -61,62 +89,83 @@ interface AppProviderProps {
 }
 ```
 
-### defaultDates
+<Spacer y={2}/>
 
-The default dates range that can be selected in the calendar.
+`defaultDates`
 
-**type**: `{ minDate?: CalendarDate | undefined; maxDate?: CalendarDate | undefined; }`
+- **Description**: The default dates range that can be selected in the calendar.
+- **Type**: `{ minDate?: CalendarDate | undefined; maxDate?: CalendarDate | undefined; }`
+- **Default**: `{ minDate: new CalendarDate(1900, 1, 1), maxDate: new CalendarDate(2099, 12, 31) }`
 
-- minDate
+<Spacer y={2}/>
 
-    The minimum date that can be selected in the calendar.
+`createCalendar`
 
-    **type**: `CalendarDate | undefined`
+- **Description**: 
+    This function helps to reduce the bundle size by providing a custom calendar system.
 
-    **default**: `new CalendarDate(1900, 1, 1)`
+    By default, this includes all calendar systems supported by `@internationalized/date`. However,
+    if your application supports a more limited set of regions, or you know you will only be picking dates
+    in a certain calendar system, you can reduce your bundle size by providing your own implementation
+    of `createCalendar` that includes a subset of these Calendar implementations.
 
-- maxDate
+    For example, if your application only supports Gregorian dates, you could implement a `createCalendar`
+    function like this:
 
-    The maximum date that can be selected in the calendar.
+    ```tsx
+    import {GregorianCalendar} from '@internationalized/date';
 
-    **type**: `CalendarDate | undefined`
+    function createCalendar(identifier) {
+    switch (identifier) {
+      case 'gregory':
+        return new GregorianCalendar();
+      default:
+        throw new Error(`Unsupported calendar ${identifier}`);
+    }
+    }
+    ```
 
-    **default**: `new CalendarDate(2099, 12, 31)`
+    This way, only GregorianCalendar is imported, and the other calendar implementations can be tree-shaken.
 
-### createCalendar
+- **Type**: `((calendar: SupportedCalendars) => Calendar | null) | undefined`
 
-This function helps to reduce the bundle size by providing a custom calendar system.
+<Spacer y={2}/>
 
-By default, this includes all calendar systems supported by `@internationalized/date`. However,
-if your application supports a more limited set of regions, or you know you will only be picking dates
-in a certain calendar system, you can reduce your bundle size by providing your own implementation
-of `createCalendar` that includes a subset of these Calendar implementations.
+`disableAnimation`
 
-For example, if your application only supports Gregorian dates, you could implement a `createCalendar`
-function like this:
+- **Description**: Disables animations globally. This will also avoid `framer-motion` features to be loaded in the bundle which can potentially reduce the bundle size.
+- **Type**: `boolean`
+- **Default**: `false`
 
-```tsx
-import {GregorianCalendar} from '@internationalized/date';
-
-function createCalendar(identifier) {
- switch (identifier) {
-   case 'gregory':
-     return new GregorianCalendar();
-   default:
-     throw new Error(`Unsupported calendar ${identifier}`);
- }
-}
-```
+<Spacer y={2}/>
 
-This way, only GregorianCalendar is imported, and the other calendar implementations can be tree-shaken.
+`disableRipple`
 
-**type**: `((calendar: SupportedCalendars) => Calendar | null) | undefined`
+- **Description**: Disables ripple effect globally.
+- **Type**: `boolean`
+- **Default**: `false`
+
+<Spacer y={2}/>
+
+`skipFramerMotionAnimations`
+
+- **Description**:
+  Controls whether `framer-motion` animations are skipped within the application.
+  This property is automatically enabled (`true`) when the `disableAnimation` prop is set to `true`,
+  effectively skipping all `framer-motion` animations. To retain `framer-motion` animations while
+  using the `disableAnimation` prop for other purposes, set this to `false`. However, note that
+  animations in NextUI Components are still omitted if the `disableAnimation` prop is `true`.
+- **Type**: `boolean`
+- **Default**: Same as `disableAnimation`
+
+---
 
 ## Types
 
-### CalendarDate
+`CalendarDate`
 
-A [CalendarDate](https://react-spectrum.adobe.com/internationalized/date/CalendarDate.html) represents a date without any time components in a specific calendar system from `@internationalized/date`. 
+- **Description**: A [CalendarDate](https://react-spectrum.adobe.com/internationalized/date/CalendarDate.html) represents a date without any time components in a specific calendar system from `@internationalized/date`.
+- **Type**: `import {CalendarDate} from '@internationalized/date';`
 
 ### SupportedCalendars