87 lines
4.3 KiB
HTML
87 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Atlas — Two-sided marketplace templates</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Inter+Tight:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400&family=DM+Serif+Display:ital@0;1&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="vibn-ai-templates/tokens.css">
|
|
<link rel="stylesheet" href="vibn-marketplace/marketplace-tokens.css">
|
|
<style>
|
|
html, body { margin: 0; padding: 0; min-height: 100%; background: #f0eee9; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
|
|
</style>
|
|
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
|
|
<script type="text/babel" src="design-canvas.jsx"></script>
|
|
<!-- Vibn base library -->
|
|
<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>
|
|
<!-- Marketplace extension -->
|
|
<script type="text/babel" src="vibn-marketplace/marketplace-components.jsx"></script>
|
|
<script type="text/babel" src="vibn-marketplace/marketplace-shells.jsx"></script>
|
|
|
|
<script type="text/babel" src="atlas-pages.jsx"></script>
|
|
|
|
<script type="text/babel">
|
|
const { DesignCanvas, DCSection, DCArtboard } = window;
|
|
const {
|
|
AtlasHome, AtlasSearch, AtlasListing, AtlasCheckout,
|
|
AtlasMessages, AtlasGuestDash, AtlasHostDash, AtlasNewListing,
|
|
} = window;
|
|
|
|
// Wrap each page in .theme-flux — modern dark-glass aesthetic
|
|
// with violet/fuchsia aurora backdrop. The marketplace components
|
|
// are theme-aware, so swapping the class to `theme-atlas` or any
|
|
// other theme re-skins the whole tree.
|
|
const Atlas = ({ children }) => (
|
|
<div className="theme-flux" style={{ width: "100%", height: "100%" }}>{children}</div>
|
|
);
|
|
|
|
const W = 1440, H = 900;
|
|
|
|
function App() {
|
|
return (
|
|
<DesignCanvas>
|
|
<DCSection
|
|
id="public"
|
|
title="Public-facing · discovery → booking"
|
|
subtitle="The guest's path from landing to confirmed booking."
|
|
>
|
|
<DCArtboard id="home" label="01 · Home / discovery" width={W} height={1500}><Atlas><AtlasHome/></Atlas></DCArtboard>
|
|
<DCArtboard id="search" label="02 · Search results + map" width={W} height={H}><Atlas><AtlasSearch/></Atlas></DCArtboard>
|
|
<DCArtboard id="listing" label="03 · Listing detail" width={W} height={2400}><Atlas><AtlasListing/></Atlas></DCArtboard>
|
|
<DCArtboard id="checkout" label="04 · Checkout" width={W} height={1100}><Atlas><AtlasCheckout/></Atlas></DCArtboard>
|
|
</DCSection>
|
|
|
|
<DCSection
|
|
id="guest"
|
|
title="Guest (demand-side) experience"
|
|
subtitle="Post-booking: managing trips and talking to hosts."
|
|
>
|
|
<DCArtboard id="g-trips" label="05 · Guest dashboard · trips" width={W} height={H}><Atlas><AtlasGuestDash/></Atlas></DCArtboard>
|
|
<DCArtboard id="messages" label="06 · Messages inbox" width={W} height={H}><Atlas><AtlasMessages/></Atlas></DCArtboard>
|
|
</DCSection>
|
|
|
|
<DCSection
|
|
id="host"
|
|
title="Host (supply-side) experience"
|
|
subtitle="Earnings, calendar and listing creation."
|
|
>
|
|
<DCArtboard id="h-today" label="07 · Host dashboard · today" width={W} height={H}><Atlas><AtlasHostDash/></Atlas></DCArtboard>
|
|
<DCArtboard id="h-new" label="08 · New listing · step 3 of 6" width={W} height={H}><Atlas><AtlasNewListing/></Atlas></DCArtboard>
|
|
</DCSection>
|
|
</DesignCanvas>
|
|
);
|
|
}
|
|
|
|
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
|
|
</script>
|
|
</body>
|
|
</html>
|