docs: main README improvements (#17)

README.md

@@ -1,49 +1,101 @@
-# Dynamic Grid
+# Dynamic Grid Component
 
-Dynamic Grid is a flexible and customizable grid component for web applications. It is built on top of `dynamic-grid-core` and provides a simple way to use the grid system in your web pages.
+Welcome to the Dynamic Grid Component repository! This project provides a set of components for creating dynamic grid layouts, suitable for a variety of web applications. It is composed of three packages:
 
-## Packages
+- **Core Library**: [`dynamic-grid-core`](./packages/dynamic-grid-core/README.md)
+- **Web Component**: [`dynamic-grid-web`](./packages/dynamic-grid-web/README.md)
+- **React Component**: [`dynamic-grid-react`](./packages/dynamic-grid-react/README.md)
 
-The Dynamic Grid project is split into three packages:
+## Overview
 
-- `dynamic-grid-core`: The core library that provides the grid system functionality.
-- `dynamic-grid-web`: A web component that provides a simple way to use the grid system in your web pages.
-- `dynamic-grid-react`: A React component that provides a simple way to use the grid system in your React applications.
+The Dynamic Grid Component is designed to provide a flexible and easy-to-use grid layout system. By leveraging the core library, the web component, and the React component, developers can create responsive and adaptive grid layouts that adjust based on the available space and specified parameters.
 
-## Installation
+### Packages
 
-To install any of the packages, simply include the following script tag in your HTML file:
+#### `dynamic-grid-core`
 
-```html
-<script src="https://unpkg.com/@mordech/{package-name}"></script>
-```
+The core library that contains the fundamental logic for calculating grid layouts. It ensures that the grid adapts to the available space by adjusting the number of columns based on the minimum column width.
+
+For more details, refer to the [`dynamic-grid-core` README](./packages/dynamic-grid-core/README.md).
+
+#### `dynamic-grid-web`
+
+A web component built with [Lit](https://lit.dev/), allowing for dynamic grid layouts in any web application. This component utilizes the core library to handle the layout calculations.
+
+For more details, refer to the [`dynamic-grid-web` README](./packages/dynamic-grid-web/README.md).
+
+#### `dynamic-grid-react`
+
+A React component that integrates seamlessly with React applications, providing the same dynamic grid functionality. This component also relies on the core library for layout calculations.
 
-Replace `{package-name}` with the name of the package you want to use (`dynamic-grid-core`, `dynamic-grid-web`, or `dynamic-grid-react`).
+For more details, refer to the [`dynamic-grid-react` README](./packages/dynamic-grid-react/README.md).
 
-Alternatively, you can install the packages using `npm` or `yarn`:
+## Installation
+
+Each package can be installed individually via npm. Depending on your needs, you can choose to install one or more of the packages.
+
+### Core Library
 
 ```bash
 npm install @mordech/dynamic-grid-core
+```
+
+### Web Component
+
+```bash
 npm install @mordech/dynamic-grid-web
-npm install @mordech/dynamic-grid-react
 ```
 
+### React Component
+
 ```bash
-yarn add @mordech/dynamic-grid-core
-yarn add @mordech/dynamic-grid-web
-yarn add @mordech/dynamic-grid-react
+npm install @mordech/dynamic-grid-react
 ```
 
-## Usage
+## Contributions
+
+We welcome contributions from the community! If you'd like to contribute, please follow these steps:
+
+1. **Fork the repository**: Click the "Fork" button at the top right of this page to create a copy of the repository in your GitHub account.
+
+2. **Clone your fork**: Use `git clone` to clone your forked repository to your local machine.
+
+   ```bash
+   git clone https://github.com/your-username/dynamic-grid-component.git
+   ```
+
+3. **Install dependencies**: Navigate to the project directory and install the dependencies.
+
+   ```bash
+   yarn install
+   ```
+
+4. **Set up Husky**: Initialize Husky to ensure pre-commit hooks are set up correctly.
+
+   ```bash
+   yarn husky install
+   ```
+
+5. **Create a new branch**: Create a new branch for your feature or bug fix.
+
+   ```bash
+   git checkout -b my-new-feature
+   ```
+
+6. **Make your changes**: Implement your feature or bug fix.
+
+7. **Commit your changes**: Use [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) when committing changes.
+
+8. **Push to the branch**: Push your changes to your forked repository.
 
-To use the grid system in your web pages or React applications, simply include the appropriate package and use the provided components or functions.
+   ```bash
+   git push origin my-new-feature
+   ```
 
-For more detailed usage instructions, please refer to the README files for each package:
+9. **Create a Pull Request**: Open a pull request in the original repository. Provide a clear description of your changes and why they are necessary.
 
-- `dynamic-grid-core`: [README](./packages/dynamic-grid-core/README.md)
-- `dynamic-grid-web`: [README](./packages/dynamic-grid-web/README.md)
-- `dynamic-grid-react`: [README](./packages/dynamic-grid-react/README.md)
+As this project is maintained by a solo maintainer, please be patient while your pull request is reviewed. Ensure your code follows the project's coding standards and includes appropriate tests. If you need any help or have questions, feel free to open an issue.
 
 ## License
 
-The Dynamic Grid project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more information.
+This project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for more information.