#2325 add Readme for components project and cleanup Main readme (#2326)

Author: TheHadiAhmadi

README.md

@@ -25,17 +25,17 @@
 </p>
 
 ![Demo Gif](./docs/resources/demo.gif)
----
+
 ## Table of contents
 
-- [](#)
-- [Table of contents](#table-of-contents)
 - [Introduction](#introduction)
+- [Connect with us](#connect-with-us)
 - [Features](#features)
 - [Supported Databases](#supported-databases)
 - [Getting Started](#getting-started)
   - [Prerequisites](#prerequisites)
   - [Installation](#installation)
+- [Component Library](#component-library)
 - [Documentation](#documentation)
 - [Contributing](#contributing)
 - [License](#license)
@@ -45,6 +45,18 @@ FluentCMS is a modern Content Management System (CMS) built on the powerful ASP.
 
 FluentCMS is an open-source project, and we welcome contributions from the community. If you're interested in helping us improve FluentCMS, please read our [CONTRIBUTING.md](./CONTRIBUTING.md) guide.
 
+## Connect with us
+
+<a href="https://discord.gg/WyqYuC6YbY">
+<img width="48" height="48" src="/docs/resources/discord.svg" alt="discord">
+</a>
+<a href="https://reddit.com/r/FluentCMS">
+<img width="48" height="48" src="/docs/resources/reddit.svg" alt="reddit">
+</a>
+<a href="https://fluentcms.com">
+<img width="48" height="48" src="/docs/resources/website.svg" alt="website">
+</a>
+
 ## Features
 
 - **Blazing Fast**: Built on top of Blazor components for client-side operations.
@@ -123,6 +135,10 @@ FluentCMS is an open-source project, and we welcome contributions from the commu
 
 5. Visit `http://localhost:5000` in your browser.
 
+## Component Library
+
+This project includes a custom, independent Blazor-based component library styled with flowbite's Design System. You can learn more in [Component Library's README file](/src/Frontend/FluentCMS.Web.UI.Components/).
+
 ## Documentation
 
 For more information on how to use FluentCMS, please refer to our [documentation](./docs/README.md). We are actively working on expanding our documentation to provide more detailed information.

docs/resources/discord.svg

@@ -1 +1,91 @@
-# FluentCMS Web UI Components
+# FluentCMS Component Library
+
+A custom Blazor-based component library designed with Flowbite styles, providing a rich set of reusable and modular UI components. These components are built based on our needs in FluentCMS.
+
+## Components
+The library includes the following components:
+
+### General Components
+- [x] Accordion
+- [x] Alert
+- [x] Avatar
+- [x] Badge
+- [x] Breadcrumb
+- [x] Button
+- [x] Card
+- [x] CloseButton
+- [x] Confirm
+- [x] DataTable
+- [x] Divider
+- [x] Dropdown
+- [x] Grid & GridItem
+- [x] Icon
+- [x] Indicator
+- [x] InlineEditor
+- [x] Modal
+- [x] Pagination
+- [x] Spacer
+- [x] Spinner
+- [x] Stack
+- [x] Stepper
+- [x] Tabs
+- [x] Toast
+- [x] Tooltip
+- [x] Typography
+
+### Form Components
+- [x] Autocomplete
+- [x] Checkbox
+- [x] CheckboxGroup
+- [x] DateInput
+- [x] FileUpload
+- [x] Input
+- [x] MarkdownEditor
+- [x] NumberInput
+- [x] TreeSelector
+- [x] RichTextEditor
+- [x] RadioGroup
+- [x] Select
+- [x] Switch
+- [x] Textarea
+- [x] Label
+- [x] FormField
+
+## Getting Started
+
+### Installation
+
+1. Install nuget package:
+
+    ```bash
+    dotnet package add FluentCMS.Web.UI.Components
+    ```
+
+2. Register UI Components service in `Program.cs` file:
+
+    ```cs
+    builder.Services.AddUIComponents();
+    ```
+
+3. Add link to Styles in head section of the `App.razor` file:
+
+    ```razor
+    <link rel="stylesheet" href="/_content/FluentCMS.Web.UI.Components/css/flowbite.min.css">
+    ```
+4. Use components in your project:
+    ```razor
+    <Button Type="ButtonType.Submit" Color="Color.Primary">Submit</Button>
+    <Button @onclick="() => Console.WriteLine("Cancelled")">Cancel</Button>
+    ```
+
+5. Run the application:
+
+   ```bash
+   dotnet run
+   ```
+
+## Contribution
+We welcome contributions! If you'd like to contribute, please open an issue or submit a pull request.
+
+## License
+This project is open-source and available under the MIT License.