docs: update ready components pages

docs/.vitepress/config.ts

@@ -27,37 +27,37 @@ function buildSidebar() {
 
 function getComponents() {
   return [
-    { text: 'Alert', link: '/guide/alert/alert.md' },
-    { text: 'Button', link: '/guide/button/button.md' },
-    { text: 'Button Group', link: '/guide/buttonGroup/buttonGroup.md' },
-    { text: 'Dropdown', link: '/guide/dropdown/dropdown.md' },
-    { text: 'Spinner', link: '/guide/spinner/spinner.md' },
-    { text: 'Tabs', link: '/guide/tabs/tabs.md' },
-    { text: 'ListGroup', link: 'guide/listGroup/listGroup.md' },
+    { text: 'Alert', link: '/components/alert/alert.md' },
+    { text: 'Button', link: '/components/button/button.md' },
+    { text: 'Button Group', link: '/components/buttonGroup/buttonGroup.md' },
+    { text: 'Dropdown', link: '/components/dropdown/dropdown.md' },
+    { text: 'Spinner', link: '/components/spinner/spinner.md' },
+    { text: 'Tabs', link: '/components/tabs/tabs.md' },
+    { text: 'ListGroup', link: 'components/listGroup/listGroup.md' },
 
-    { text: '- Accordion', link: 'guide/accordion/accordion.md' },
-    { text: '- Avatar', link: 'guide/avatar/avatar.md' },
-    { text: '- Badge', link: 'guide/badge/badge.md' },
-    { text: '- Breadcrumb', link: 'guide/breadcrumb/breadcrumb.md' },
-    { text: '- Card', link: 'guide/card/card.md' },
-    { text: '- Carousel', link: 'guide/carousel/carousel.md' },
-    { text: '- Footer', link: 'guide/footer/footer.md' },
-    { text: '- Modal', link: 'guide/modal/modal.md' },
-    { text: '- Navbar', link: 'guide/navbar/navbar.md' },
-    { text: '- Pagination', link: 'guide/pagination/pagination.md' },
-    { text: '- Progress', link: 'guide/progress/progress.md' },
-    { text: '- Rating', link: 'guide/rating/rating.md' },
-    { text: '- Sidebar', link: 'guide/sidebar/sidebar.md' },
-    { text: '- Table', link: 'guide/table/table.md' },
-    { text: '- Timeline', link: 'guide/timeline/timeline.md' },
-    { text: '- Toast', link: 'guide/toast/toast.md' },
-    { text: '- Tooltip', link: 'guide/tooltip/tooltip.md' },
+    { text: '- Accordion', link: 'components/accordion/accordion.md' },
+    { text: '- Avatar', link: 'components/avatar/avatar.md' },
+    { text: '- Badge', link: 'components/badge/badge.md' },
+    { text: '- Breadcrumb', link: 'components/breadcrumb/breadcrumb.md' },
+    { text: '- Card', link: 'components/card/card.md' },
+    { text: '- Carousel', link: 'components/carousel/carousel.md' },
+    { text: '- Footer', link: 'components/footer/footer.md' },
+    { text: '- Modal', link: 'components/modal/modal.md' },
+    { text: '- Navbar', link: 'components/navbar/navbar.md' },
+    { text: '- Pagination', link: 'components/pagination/pagination.md' },
+    { text: '- Progress', link: 'components/progress/progress.md' },
+    { text: '- Rating', link: 'components/rating/rating.md' },
+    { text: '- Sidebar', link: 'components/sidebar/sidebar.md' },
+    { text: '- Table', link: 'components/table/table.md' },
+    { text: '- Timeline', link: 'components/timeline/timeline.md' },
+    { text: '- Toast', link: 'components/toast/toast.md' },
+    { text: '- Tooltip', link: 'components/tooltip/tooltip.md' },
   ]
 }
 
 function getUtils() {
   return [
-    { text: 'Flowbite Themable', link: '/guide/flowbiteThemable/flowbiteThemable.md' },
+    { text: 'Flowbite Themable', link: '/components/flowbiteThemable/flowbiteThemable.md' },
   ]
 }
 
@@ -74,7 +74,8 @@ export default defineConfig({
     sidebar: buildSidebar(),
     logo: '/assets/logo.svg',
     socialLinks: [
-      { icon: 'github', link: 'https://github.com/themesberg/flowbite-vue' }
+      { icon: 'github', link: 'https://github.com/themesberg/flowbite-vue' },
+      { icon: 'discord', link: 'https://discord.gg/4eeurUVvTy' }
     ],
 
     footer: {

docs/components/alert/alert.md

@@ -9,7 +9,17 @@ import AlertInlineExample from './examples/AlertInlineExample.vue';
 
 # Alert
 
-reference: [https://flowbite.com/docs/components/alert/](https://flowbite.com/docs/components/alert/)
+#### Show contextual information to your users using alert elements based on Tailwind CSS
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/components/alert/](https://flowbite.com/docs/components/alert/)
+:::
+
+The alert component can be used to provide information to your users such as success or error messages, but also highlighted information complementing the normal flow of paragraphs and headers on a page.
+
+Flowbite also includes dismissable alerts which can be hidden by the users by clicking on the close icon.
 
 ## Prop - type
 

docs/components/button/button.md

@@ -17,7 +17,17 @@ import ButtonLoadingExample from './examples/ButtonLoadingExample.vue';
 
 # Button
 
-reference: [https://flowbite.com/docs/components/buttons/](https://flowbite.com/docs/components/buttons/)
+#### Use the button component inside forms, as links, social login, payment options with support for multiple styles, colors, sizes, gradients, and shadows
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/components/buttons/](https://flowbite.com/docs/components/buttons/)
+:::
+
+The button component is probably the most widely used element in any user interface or website as it can be used to launch an action but also to link to other pages.
+
+Flowbite provides a large variety of styles and sizes for the button component including outlined buttons, multiple colors, sizes, buttons with icons, and more.
 
 ## Prop - color
 

docs/components/buttonGroup/buttonGroup.md

@@ -5,7 +5,15 @@ import ButtonGroupIconExample from './examples/ButtonGroupIconExample.vue';
 
 # Button Group
 
-reference: [https://flowbite.com/docs/components/button-group/](https://flowbite.com/docs/components/button-group/)
+#### Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/components/button-group/](https://flowbite.com/docs/components/button-group/)
+:::
+
+The button group component from Flowbite can be used to stack together multiple buttons and links inside a single element.
 
 ## Basic example
 

docs/components/dropdown/dropdown.md

@@ -5,6 +5,16 @@ import DropdownListGroupExample from './examples/DropdownListGroupExample.vue';
 
 # Dropdown
 
+#### Get started with the dropdown component to show a list of menu items when clicking on the trigger element based on multiple layouts, styles, and placements
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/components/dropdowns/](https://flowbite.com/docs/components/dropdowns/)
+:::
+
+The dropdown component can be used to show a list of menu items when clicking on an element such as a button and hiding it when focusing outside of the triggering element.
+
 
 ## Props - placement
 

docs/components/listGroup/listGroup.md

@@ -7,6 +7,15 @@ import ListGroupHoverIconDisabledExample from './examples/ListGroupHoverIconDisa
 
 # ListGroup
 
+#### Use the list group component to display a series of items, buttons or links inside a single element
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/components/list-group/](https://flowbite.com/docs/components/list-group/)
+:::
+
+The list group component can be used to display a series of elements, buttons or links inside a single card component similar to a sidebar.
 
 ## No hover
 ```vue

docs/components/spinner/spinner.md

@@ -6,7 +6,16 @@ import SpinnerColorExample from './examples/SpinnerColorExample.vue';
 
 # Spinner
 
-reference: [https://flowbite.com/docs/components/spinner/](https://flowbite.com/docs/components/spinner/)
+#### Use the spinner component as a loader indicator in your projects when fetching data based on an animated SVG using the utility classes from Tailwind CSS
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/components/spinner/](https://flowbite.com/docs/components/spinner/)
+:::
+
+The spinner component can be used as a loading indicator which comes in multiple colors, sizes, and styles separately or inside elements such as buttons to improve the user experience whenever data is being fetched from your server.
+
 
 ## Basic example
 

docs/components/tabs/tabs.md

@@ -6,7 +6,15 @@ import TabsUnderlineExample from './examples/TabsUnderlineExample.vue';
 
 # Tabs
 
-reference: [https://flowbite.com/docs/components/tabs/](https://flowbite.com/docs/components/tabs/)
+#### Use these responsive tabs components to create a secondary navigational hierarchy for your website or toggle content inside a container
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/components/tabs/](https://flowbite.com/docs/components/tabs/)
+:::
+
+The tabs component can be used either as an extra navigational hierarchy complementing the main navbar or you can also use it to change content inside a container just below the tabs using the data attributes from Flowbite.
 
 ## Prop - variant (default)