docs: update README for improved clarity and structure

Author: ismail9k

README.md

@@ -1,62 +1,61 @@
-# Vue 3 Carousel
+<p align="center">
+  <img src="/docs/public/vue3-carousel-logo.svg" width="200" alt="Vue 3 Carousel Logo">
+</p>
+
+<h1 align="center">Vue 3 Carousel</h1>
 
+<p align="center">
 Modern lightweight Vue 3 carousel component
+</p>
 
-<p>
+<p align="center">
   <a href="https://npm-stat.com/charts.html?package=vue3-carousel"><img src="https://img.shields.io/npm/dm/vue3-carousel.svg" alt="npm"/></a>
   <a href="https://www.npmjs.com/package/vue3-carousel"><img src="https://img.shields.io/npm/v/vue3-carousel.svg" alt="npm"/></a>
   <a href="https://packagequality.com/#?package=vue3-carousel"><img src="https://packagequality.com/shield/vue3-carousel.svg" alt="Package Quality"/></a>
 </p>
 
-## Documentation
-
-https://vue3-carousel.ismail9k.com/
-
-## Features
-
-- [x] Responsive breakpoints
-- [x] Mouse/touch dragging
-- [x] Infinity scroll (wrapping around)
-- [x] Auto play
-- [x] Add classes for active and for visible slides
-- [x] RTL
-- [x] Enrich a11y
-- [x] Vertical Slides
-
-## Nuxt Module
-
-If you're using Nuxt and prefer to use it via module, please refer to [vue3-carousel-nuxt](https://github.com/gaetansenn/vue3-carousel-nuxt?tab=readme-ov-file)
+## ✨ Features
 
-## Getting started
+- 📱 **Responsive** - Breakpoints support
+- 🔄 **Infinite Scroll** - Wrap around sliding
+- 🖱️ **Mouse/Touch** - Dragging support
+- ⚡ **Auto Play** - Automatic sliding
+- 🎯 **Slide Classes** - Active & visible states
+- 🌐 **RTL** - Right-to-left support
+- ♿ **A11y** - Keyboard navigation & ARIA labels
+- 📊 **Vertical** - Vertical sliding mode
 
-### Installation
-
-First step is to install it using `yarn` or `npm`:
+## 🚀 Installation
 
 ```bash
-npm install vue3-carousel
+# npm
+npm i vue3-carousel
 
-# or use yarn
+# yarn
 yarn add vue3-carousel
+
+# pnpm
+pnpm install vue3-carousel
 ```
 
-### Basic Using
+## 📖 Basic Usage
 
 ```vue
 <script setup>
 // If you are using PurgeCSS, make sure to whitelist the carousel CSS classes
-import 'vue3-carousel/dist/carousel.css'
+import 'vue3-carousel/carousel.css'
 import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
 
-const config = {
-  itemsToShow: 1.5
+const carouselConfig = {
+  itemsToShow: 2.5,
+  wrapAround: true
 }
 </script>
 
 <template>
-  <Carousel v-bind="config">
+  <Carousel v-bind="carouselConfig">
     <Slide v-for="slide in 10" :key="slide">
-      {{ slide }}
+      <div class="carousel__item">{{ slide }}</div>
     </Slide>
 
     <template #addons>
@@ -66,3 +65,17 @@ const config = {
   </Carousel>
 </template>
 ```
+
+## 📚 Documentation
+
+Visit our [documentation website](https://vue3-carousel.ismail9k.com/) for detailed usage and examples:
+
+- [Getting Started](https://vue3-carousel.ismail9k.com/guide)
+- [Carousel Component](https://vue3-carousel.ismail9k.com/components/carousel)
+- [Slide Component](https://vue3-carousel.ismail9k.com/components/slide)
+- [Navigation Component](https://vue3-carousel.ismail9k.com/components/navigation)
+- [Pagination Component](https://vue3-carousel.ismail9k.com/components/pagination)
+
+## 💚 Nuxt Module
+
+For Nuxt users, check out [vue3-carousel-nuxt](https://github.com/gaetansenn/vue3-carousel-nuxt) module.