Update documentation structure and content for icons and UI components

docs/icons/index.mdx

@@ -1,6 +1,7 @@
 ---
 title: Tabler Icons
 description: Tabler Icons is a powerful and versatile icon library that offers a huge collection of high quality icons suitable for a wide range of applications. With its clean and modern aesthetic, extensive customisation options, and user-friendly website and plugins, Tabler Icons is an excellent resource for designers and developers looking to enhance their projects with high-quality icons.
+order: 2
 ---
 
 ```html example centered separated

docs/ui/components/ribbons.mdx

@@ -70,7 +70,7 @@ Using multiple classes at once will give you more position options. For example,
 
 Customize the ribbon's background color. You can click [here](/docs/ui/colors) to see the list of available colors.
 
-```html example columns={1} centered background="base" background="base"
+```html example columns={1} centered background="base"
 <div class="card">
   <div class="card-body" style="height: 5rem">
   </div>

docs/ui/components/statuses.mdx

@@ -245,7 +245,7 @@ The dots can also be animated. To do this, use the `.status-dot-animated` class.
 
 Use the status indicator to show the status of a component or page. The status indicator can be animated. To do this, use the `.status-indicator-animated` class.
 
-```html example centered separated columns={1} centered
+```html example centered separated columns={1}
 <span class="status-indicator status-blue status-indicator-animated">
   <span class="status-indicator-circle"></span>
   <span class="status-indicator-circle"></span>

docs/ui/index.mdx

@@ -1,3 +1,4 @@
 ---
-title: UI Kit
+title: Tabler UI
+order: 1
 ---