66 lines
4.1 KiB
Markdown
66 lines
4.1 KiB
Markdown
# 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.
|