Afara Online - Web Components Library

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 →

🚀 Quick Start

Installation

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

Usage in HTML/Framer

<!-- 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

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

<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:

[
  {
    "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

# 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

# Build for production
yarn build

Testing

# 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 file for details.

🔗 Links

• Stencil.js Documentation
• Web Components
• Framer

💡 Use Cases

Perfect for:

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

📧 Support

For support, email [email protected] or open an issue on GitHub.

Built with ❤️ using Stencil.js