docs: enhance README with detailed features and instructions

Added comprehensive sections to README including features, installation commands, getting started example, and API reference. This improves clarity and helps new users quickly understand and utilize the library.

README.md

@@ -1 +1,113 @@
-# react-refocus
+
+<div align="center">
+  <a href="https://react-refocus.mallikcheripally.com/">
+    <picture>
+      <source srcset="https://raw.githubusercontent.com/mallikcheripally/react-refocus/main/assets/images/github-poster-dark-theme.png" media="(prefers-color-scheme: dark)">
+      <img src="https://raw.githubusercontent.com/mallikcheripally/react-refocus/main/assets/images/github-poster.png" alt="react-refocus">
+    </picture>
+  </a>
+</div>
+
+<div align="center">
+  <a href="https://www.npmjs.com/package/react-refocus">
+    <img alt="npm" src="https://img.shields.io/npm/v/react-refocus.svg" />
+  </a>
+  <a href="https://react-refocus.mallikcheripally.com">
+    <img alt="documentation" src="https://img.shields.io/badge/Visit-Documentation-js.svg" />
+  </a>
+  <a href="https://github.com/mallikcheripally/react-refocus/actions">
+    <img alt="build" src="https://img.shields.io/github/actions/workflow/status/mallikcheripally/react-refocus/ci.yml" />
+  </a>
+  <a href="https://github.com/mallikcheripally/react-refocus/blob/main/LICENSE">
+    <img alt="license" src="https://img.shields.io/npm/l/react-refocus.svg" />
+  </a>
+  <a href="https://www.npmjs.com/package/react-refocus">
+    <img alt="downloads" src="https://img.shields.io/npm/dm/react-refocus.svg" />
+  </a>
+  <a href="https://github.com/prettier/prettier">
+    <img alt="prettier" src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg" />
+  </a>
+  <a href="https://codecov.io/gh/mallikcheripally/react-refocus">
+    <img alt="code coverage" src="https://codecov.io/gh/mallikcheripally/react-refocus/branch/main/graph/badge.svg" />
+  </a>
+</div>
+<br />
+
+<div align="center" style="font-size: 20px">
+Focus Management for Your React Application
+</div>
+
+## Features
+
+### 🔒 Focus Trapping
+<p>Ensure focus remains within a specified component, enhancing interactions for modals, dialogs, and overlays.</p>
+
+### 🔄 Focus Restoration
+<p>Automatically return focus to a previously focused element after actions like closing a modal or a dialog.</p>
+
+### 🧭 Focus Order Management
+<p>Dynamically manage and adjust the tab order of elements in the UI layout.</p>
+
+### ✅ Keyboard Navigation
+<p>Improve keyboard navigation within complex UI components like menus, dropdowns, and lists.</p>
+
+### 🎨 Custom Focus Indicators
+<p>Easily customize focus indicators with various styles and animations to match your design.</p>
+
+### 👁️ Focus Visibility
+<p>Differentiate between keyboard and mouse focus using the :focus-visible state.</p>
+
+### ⚡️ Auto Focus
+<p>Automatically set focus on any element when components mount.</p>
+
+### 📢 Screen Reader Announcements
+<p>Improve accessibility by announcing focus changes to screen readers.</p>
+
+### 🚀 High Performance
+<p>Built for high performance with a minimal footprint.</p>
+
+
+## Installation
+
+To install the React Refocus library, use the following command:
+
+```bash
+npm install react-refocus
+```
+
+Alternatively, if you use Yarn:
+
+```bash
+yarn add react-refocus
+```
+
+## Getting Started
+
+```javascript
+import { FocusTrap } from 'react-refocus';
+
+const MyComponent = () => (
+<FocusTrap>
+<div>
+<button>Button 1</button>
+<button>Button 2</button>
+</div>
+</FocusTrap>
+);
+```
+
+## API Reference
+
+> #### See **[Documentation](https://reactrefocus.mallikcheripally.com)** for complete API reference.
+
+### Contributing
+
+We welcome contributions from the community to make React Refocus better. If you find any issues or have suggestions for improvements, feel free to contribute or open an issue on our [GitHub Repository](https://github.com/mallikcheripally/react-refocus).
+
+### License
+
+This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.
+
+### Something Missing?
+
+If you find any issues or have suggestions for improvements, feel free to contribute or open an issue on our [GitHub Repository](https://github.com/mallikcheripally/react-refocus). We welcome contributions from the community to make React Refocus better.