# Vibn Marketplace

A small extension to **vibn-ai-templates** for building two-sided marketplaces. Ships with a fully composed example brand — Atlas — and a set of marketplace-specific components.

## What's in it

- **`marketplace-tokens.css`** — A new `theme-atlas` (warm-editorial, Airbnb school) plus marketplace-specific tokens (`--listing-radius`, `--rating`, `--map-pin`, etc.). Stacks on top of the base `tokens.css`.
- **`marketplace-components.jsx`** — Components you need for marketplace UX, none of which exist in the base library:
  - **Listings** · `ListingCard`, `ListingCardHorizontal`, `PhotoGallery`, `PhotoSlot`
  - **Reviews & trust** · `RatingStars`, `ReviewCard`, `RatingsSummary`, `TrustBadge` (verified, superhost, instant, top-rated, new)
  - **Pricing** · `PriceTag`, `PriceBreakdown` (receipt with discounts)
  - **Host/profile** · `HostHeader` with KPI strip
  - **Messaging** · `MessageBubble`
  - **Search & discovery** · `SearchBar` (destination + dates + guests), `CategoryRail`, `FilterChips`, `AmenityChip`
  - **Map & calendar** · `MiniMap` (stylized SVG with price pins), `CalendarMonth`, `AvailabilityHeatmap`
  - **Dashboard** · `StatTile`
- **`marketplace-shells.jsx`** — Two layout shells:
  - `MarketplaceTopShell` — public-facing top nav with inline search, host-mode toggle, big footer
  - `MarketplaceDashboardShell` — sidebar with Guest/Host segmented toggle (the canonical two-sided marketplace pattern)

## Architecture

Marketplace components depend on the base library (`vibn-ai-templates`). Load order:

```html
<link rel="stylesheet" href="vibn-ai-templates/tokens.css">
<link rel="stylesheet" href="vibn-marketplace/marketplace-tokens.css">

<script type="text/babel" src="vibn-ai-templates/icons.jsx"></script>
<script type="text/babel" src="vibn-ai-templates/components.jsx"></script>
<script type="text/babel" src="vibn-ai-templates/shells.jsx"></script>
<script type="text/babel" src="vibn-marketplace/marketplace-components.jsx"></script>
<script type="text/babel" src="vibn-marketplace/marketplace-shells.jsx"></script>
```

Wrap your app in `class="theme-atlas"` and you're done.

## Atlas — the worked example

`Atlas Marketplace Templates.html` is a full 8-page sample marketplace using only these primitives. Pages cover the full lifecycle:

| # | Page | What it demonstrates |
|---|---|---|
| 01 | Home / discovery | Hero, inline search bar, category rail, featured grid, cities, how-it-works |
| 02 | Search + map | Split list/map layout, filter chips, sort, horizontal listing cards |
| 03 | Listing detail | Photo gallery, summary, amenities, dual-month calendar, ratings summary, reviews, host header, sticky booking card with price breakdown |
| 04 | Checkout | Payment, message-to-host, ground rules, sticky summary |
| 05 | Guest dashboard | Hero upcoming-trip card, past trips, wishlist |
| 06 | Messages | Inbox + thread + trip context card + composer |
| 07 | Host dashboard | KPI strip, earnings bar chart, upcoming check-ins, availability heatmap, recent reviews |
| 08 | New listing wizard | Step 3/6 — photos, title, description with live preview card |

## What's still hand-written

`atlas-pages.jsx` is page-specific composition — these are *templates*, not reusable components. They show how to assemble the kit. Use them as starting points and rip out anything you don't need.

## Marketplace adaptation

To pivot the kit to a different marketplace type:

- **Services (Upwork/Fiverr)** — Swap `PhotoGallery` for a portfolio grid, `PriceTag` for hourly-rate ranges, `CalendarMonth` for availability slots. The `HostHeader` and `MessageBubble` work as-is.
- **Goods (Etsy)** — Add a quantity/variant selector. The listing card is already photo-led; just adjust subtitle to surface seller name and shipping.
- **On-demand (delivery, rides)** — Drop the calendar; replace with a live map. `TrustBadge` already has variants you can rename. The dashboard shell is built for two-sided role switching.

The CSS variable approach means you can also restyle the marketplace to feel utilitarian (e.g. swap `theme-atlas` for `theme-minimal` or `theme-dark`) without changing a single component.