# Afara Online - Web Components Library

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![Built with Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsdXN0cmF0b3IgMTkuMi4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0%2BCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNCwxNjBjLTMzLjEsMC02MCwyNi45LTYwLDYwdjE4MGMwLDMzLjEsMjYuOSw2MCw2MCw2MGMzMy4xLDAsNjAtMjYuOSw2MC02MFYyMjAKCUM0ODQsMTg2LjksNDU3LjEsMTYwLDQyNCwxNjB6Ii8%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0yNTYsMjcyYy0zMy4xLDAtNjAsMjYuOS02MCw2MHY2OGMwLDMzLjEsMjYuOSw2MCw2MCw2MGMzMy4xLDAsNjAtMjYuOSw2MC02MHYtNjgKCUMzMTYsMjk4LjksMjg5LjEsMjcyLDI1NiwyNzJ6Ii8%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik04OCw4MGMtMzMuMSwwLTYwLDI2LjktNjAsNjB2MjY4YzAsMzMuMSwyNi45LDYwLDYwLDYwYzMzLjEsMCw2MC0yNi45LDYwLTYwVjE0MAoJQzE0OCwxMDYuOSwxMjEuMSw4MCw4OCw4MHoiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)](https://stenciljs.com)

Beautiful, responsive web components for event businesses and fashion galleries. Built with Stencil.js, these components work seamlessly in Framer, React, Vue, Angular, or vanilla HTML.

## 🎨 Components

### brands-we-love-gallery

A fully responsive, interactive brand gallery component perfect for showcasing fashion collaborators, partners, or featured brands.

**Features:**

- ✨ Responsive design (mobile, tablet, desktop)
- 🖼️ Interactive image gallery with lightbox
- 📱 Touch/swipe support for mobile devices
- ⌨️ Keyboard navigation (arrows, escape)
- 🔄 Circular gallery navigation
- ♿ Full accessibility (ARIA labels, keyboard support)
- 🎨 Customizable branding colors
- 📍 Instagram handle integration

[View Component Documentation →](src/components/brands-we-love-gallery/readme.md)

## 🚀 Quick Start

### Installation

```bash
npm install afara-online
# or
yarn add afara-online
```

### Usage in HTML/Framer

```html
<!-- Include the component -->
<script type="module">
  import { defineCustomElements } from 'https://unpkg.com/afara-online/loader/index.es2017.js';
  defineCustomElements();
</script>

<!-- Use the component -->
<brands-we-love-gallery id="gallery"></brands-we-love-gallery>

<script>
  // Load brand data
  fetch('https://your-cdn.com/brands.json')
    .then(res => res.json())
    .then(brands => {
      document.getElementById('gallery').brands = brands;
    });
</script>
```

### Usage in React

```tsx
import { defineCustomElements } from 'afara-online/loader';

defineCustomElements();

function App() {
  const brands = [...]; // Your brand data

  return <brands-we-love-gallery brands={JSON.stringify(brands)} />;
}
```

### Usage in Vue

```vue
<template>
  <brands-we-love-gallery :brands="brandsJSON" />
</template>

<script>
import { defineCustomElements } from 'afara-online/loader';

defineCustomElements();

export default {
  data() {
    return {
      brands: [...], // Your brand data
    };
  },
  computed: {
    brandsJSON() {
      return JSON.stringify(this.brands);
    },
  },
};
</script>
```

## 📦 Brand Data Structure

Create a JSON file with your brand data:

```json
[
  {
    "id": "unique-brand-id",
    "name": "BRAND NAME",
    "city": "City Name",
    "country": "Country Name",
    "instagramHandle": "instagram_handle",
    "thumbnailUrl": "https://url-to-thumbnail.jpg",
    "galleryImages": ["https://url-to-image-1.jpg", "https://url-to-image-2.jpg", "https://url-to-image-3.jpg"]
  }
]
```

## 🎨 Design System

This component library uses a cohesive design system:

- **Font:** Inter
- **Primary Purple:** `#2E1065`
- **Accent Orange:** `#F97316`
- **Dark Grey:** `#1E293B`

## 🛠️ Development

### Prerequisites

- Node.js 16+
- Yarn or npm

### Setup

```bash
# Clone the repository
git clone https://github.com/yourusername/afara-online.git

# Install dependencies
yarn install

# Start development server
yarn start
```

Visit `http://localhost:3333` to see the demo.

### Build

```bash
# Build for production
yarn build
```

### Testing

```bash
# Run tests
yarn test

# Run tests in watch mode
yarn test.watch
```

## 📱 Browser Support

- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)
- iOS Safari 12+
- Chrome Android (latest)

## 🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## 📄 License

MIT License - see the [LICENSE](LICENSE) file for details.

## 🔗 Links

- [Stencil.js Documentation](https://stenciljs.com)
- [Web Components](https://www.webcomponents.org/)
- [Framer](https://www.framer.com/)

## 💡 Use Cases

Perfect for:

- Event business websites
- Fashion brand showcases
- Collaboration highlights
- Partner directories
- Portfolio galleries
- Product catalogs

## 📧 Support

For support, email support@example.com or open an issue on GitHub.

---

Built with ❤️ using [Stencil.js](https://stenciljs.com)