"use strict";var _jsxruntime = require("react/jsx-runtime");Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } var _react = require('react'); var _three = require('three'); var THREE = _interopRequireWildcard(_three); var _BigNumber = require('./components/BigNumber'); var _BigNumber2 = _interopRequireDefault(_BigNumber); var _Section = require('./components/Section'); var _Section2 = _interopRequireDefault(_Section); var _Deck = require('./engine/Deck'); var _Deck2 = _interopRequireDefault(_Deck); var _Slide = require('./engine/Slide'); var _Slide2 = _interopRequireDefault(_Slide); /* Airbnb - the editorial. White paper, Rausch red, one sculpted object. Sources: Airbnb FY2025 Form 10-K (filed 2026-02-12) and the May 2025 Summer Release newsroom post. Host count uses the 10-K's "over 5 million" rather than the newsroom's 5.5M+, because the two disagree. Layout note (revision pass). The marketplace, the chronology, the quote and the close were , , and a centred headline: four bands of content floating in the middle of an empty stage, and the three-card StatGrid shape in particular appears in four decks in this gallery. They are hand-rolled spreads now. No figure, quotation or citation changed; only the framing did. Both components are still demonstrated elsewhere in the set. stays unused everywhere, per VARIETY.md. WHY THE GLOBE IS GONE, and what replaced it. Slide three was . That component probes --fg, --bg and --primary off the theme and draws a dotted earth in them, which is a real picture on Wise's forest green and a pale grey smudge on this deck's white. VARIETY.md had flagged exactly that ("it reads considerably stronger on Wise's forest green than on Airbnb's white") and it was the weakest thing in the deck. Wise still carries the globe, so the gallery loses nothing. In its place: the Belo, extruded out of the real path data in the logo file and lit as a physical object. See the Belo component below. Every regional figure the globe carried is still on the slide, ranked, with its source. */ /** Fills the stage. Every hand-rolled spread below hangs off this. */ const SPREAD = { flex: "1 1 auto", minHeight: 0, boxSizing: "border-box", display: "flex", flexDirection: "column" }; /** * The brand's real wordmark, from public/gallery/airbnb/logo.svg. * * An with a hard monochrome filter, NOT a CSS mask. The mask was tried * first and rendered nothing: several of these SVGs paint through and * clip paths, so their alpha channel is empty when used as a mask source even * though the file itself displays perfectly. brightness(0) flattens whatever * the file contains to solid black - which also neutralises the * currentColor-driven files - and invert(1) lifts it to white for the dark * grounds. One treatment, ten brands, no per-file special cases. */ function Wordmark({ height = 26, invert = false }) { return ( _jsxruntime.jsx.call(void 0, 'img', { src: "/gallery/airbnb/logo.svg", alt: "Airbnb logo" , width: Math.round(height * 3.2), height: height, style: { display: "block", height, // Explicit width + alignSelf: inside a column flex the default // align-items:stretch was widening the replaced element and floating // it to the middle of the slide instead of the left gutter. alignSelf: "flex-start", opacity: 0.85, filter: invert ? "brightness(0) invert(1)" : "brightness(0)" },} ) ); } /* --------------------------------------------------------------------------- THE HERO OBJECT: the Belo, extruded. WHAT IT IS MADE OF. Not an approximation. public/gallery/airbnb/logo.svg is the Belo-plus-wordmark lockup, one holding thirteen subpaths, and the last three of those are the mark itself. They are pasted below verbatim, parsed at runtime into a THREE.Shape (ring) with one THREE.Path hole (its counter) plus a second free-standing THREE.Shape (the drop in the middle), and pushed through ExtrudeGeometry with a chamfer on every edge. So the silhouette on screen is Airbnb's own outline to the tenth of a unit, not a redrawing of it, which is the only honest way to put a brand mark on a turntable. Extruding it is the right move for this particular mark because it is one continuous looping ribbon: it has a front face, a counter you can see daylight through, and a long inside wall that the bevel lights up. THE HARD PART IS THE WHITE GROUND. A 3D object on a dark slide gets its silhouette for free. On white it does not, and the first thing that happens is that it dissolves into the page. Three things are doing the work here. 1. THE ENVIRONMENT IS A BRIGHT STUDIO WITH A DARK FLOOR. There is no network in the sandbox so there is no HDRI to fetch: a 32x256 canvas is painted with a vertical gradient (white softbox across the ceiling, a hard step down at the horizon, a slate floor), wrapped as an equirectangular CanvasTexture and pushed through PMREMGenerator, which lives in three's core rather than its examples. The step at the horizon is the load bearing part: it draws a hard bright-over-dark line down every bevel, so the object's edges are drawn even where the object's own colour would have matched the page. 2. THERE IS A REAL CAST SHADOW. shadowMap on, one shadow casting directional light, and an invisible plane under the mark carrying a ShadowMaterial. With a transparent renderer that plane paints nothing except the shadow, so what lands on the slide is a soft pool of grey under the two feet of the mark and nothing else. Without it the object floated. 3. THE COLOUR IS THE RAUSCH GRADIENT AND IT IS DARK. #E61E4D to #D70466 against #FFFFFF is a four-and-a-half to one contrast ratio before any shading, and it is applied as a vertex colour attribute swept along the same 115 degree axis as the CSS gradient the rest of the deck uses, so it wraps the side walls too instead of stopping at the front face. Tone mapping is NeutralToneMapping rather than ACES on purpose: ACES pushes a saturated brand red toward orange, and this red has a name. IT SWINGS, IT DOES NOT SPIN. The grid poster and the PDF and PPTX exports are stills grabbed at an arbitrary frame, so a full rotation would show the mark edge-on in a good fraction of them. It oscillates through about thirty degrees, which never hides the face and always shows some of the extrusion. --------------------------------------------------------------------------- */ /** The Belo's outer contour. Verbatim from public/gallery/airbnb/logo.svg. */ const BELO_RING = "M91.5,71c-0.5-1.2-1-2.5-1.5-3.6c-0.8-1.8-1.6-3.5-2.3-5.1l-0.1-0.1 c-6.9-15-14.3-30.2-22.1-45.2l-0.3-0.6c-0.8-1.5-1.6-3.1-2.4-4.7c-1-1.8-2-3.7-3.6-5.5C56,2.2,51.4,0,46.5,0c-5,0-9.5,2.2-12.8,6 c-1.5,1.8-2.6,3.7-3.6,5.5c-0.8,1.6-1.6,3.2-2.4,4.7l-0.3,0.6C19.7,31.8,12.2,47,5.3,62l-0.1,0.2c-0.7,1.6-1.5,3.3-2.3,5.1 c-0.5,1.1-1,2.3-1.5,3.6c-1.3,3.7-1.7,7.2-1.2,10.8c1.1,7.5,6.1,13.8,13,16.6c2.6,1.1,5.3,1.6,8.1,1.6c0.8,0,1.8-0.1,2.6-0.2 c3.3-0.4,6.7-1.5,10-3.4c4.1-2.3,8-5.6,12.4-10.4c4.4,4.8,8.4,8.1,12.4,10.4c3.3,1.9,6.7,3,10,3.4c0.8,0.1,1.8,0.2,2.6,0.2 c2.8,0,5.6-0.5,8.1-1.6c7-2.8,11.9-9.2,13-16.6C93.2,78.2,92.8,74.7,91.5,71z"; /** The counter inside that ring: the hole the daylight comes through. */ const BELO_COUNTER = "M86.3,80.9c-0.7,5.2-4.2,9.7-9.1,11.7c-2.4,1-5,1.3-7.6,1 c-2.5-0.3-5-1.1-7.6-2.6c-3.6-2-7.2-5.1-11.4-9.7c6.6-8.1,10.6-15.5,12.1-22.1c0.7-3.1,0.8-5.9,0.5-8.5c-0.4-2.5-1.3-4.8-2.7-6.8 c-3.1-4.5-8.3-7.1-14.1-7.1s-11,2.7-14.1,7.1c-1.4,2-2.3,4.3-2.7,6.8c-0.4,2.6-0.3,5.5,0.5,8.5c1.5,6.6,5.6,14.1,12.1,22.2 c-4.1,4.6-7.8,7.7-11.4,9.7c-2.6,1.5-5.1,2.3-7.6,2.6c-2.7,0.3-5.3-0.1-7.6-1c-4.9-2-8.4-6.5-9.1-11.7c-0.3-2.5-0.1-5,0.9-7.8 c0.3-1,0.8-2,1.3-3.2c0.7-1.6,1.5-3.3,2.3-5l0.1-0.2c6.9-14.9,14.3-30.1,22-44.9l0.3-0.6c0.8-1.5,1.6-3.1,2.4-4.6 c0.8-1.6,1.7-3.1,2.8-4.4c2.1-2.4,4.9-3.7,8-3.7c3.1,0,5.9,1.3,8,3.7c1.1,1.3,2,2.8,2.8,4.4c0.8,1.5,1.6,3.1,2.4,4.6l0.3,0.6 C67.7,34.8,75.1,50,82,64.9L82,65c0.8,1.6,1.5,3.4,2.3,5c0.5,1.2,1,2.2,1.3,3.2C86.4,75.8,86.7,78.3,86.3,80.9z"; /** The drop suspended in the middle of the ring: a separate solid island. */ const BELO_DROP = "M46.4,76.2c-5.4-6.8-8.9-13.2-10.1-18.6 c-0.5-2.3-0.6-4.3-0.3-6.1c0.2-1.6,0.8-3,1.6-4.2c1.9-2.7,5.1-4.4,8.8-4.4c3.7,0,7,1.6,8.8,4.4c0.8,1.2,1.4,2.6,1.6,4.2 c0.3,1.8,0.2,3.9-0.3,6.1C55.3,62.9,51.8,69.3,46.4,76.2z"; const PATH_SEGMENT = /[MmLlHhVvCcSsZz][^MmLlHhVvCcSsZz]*/g; const PATH_NUMBER = /-?\d*\.?\d+(?:[eE][-+]?\d+)?/g; /** * The smallest SVG path reader that can eat the Belo: M/L/H/V/C/S/Z in both * cases, which is everything Illustrator emitted into that file. It writes * straight into a THREE.Path (THREE.Shape extends it), negating y on the way, * because SVG counts y downward and three counts it up. Without the flip the * mark extrudes upside down, which looks close enough to right at thumbnail * size to survive a careless first pass. * * three ships an SVGLoader that would do this, but it lives in examples/ and * the deck sandbox has core three only. This is thirty lines and exact. */ function tracePath(target, d) { const segments = d.match(PATH_SEGMENT) || []; let x = 0; let y = 0; let startX = 0; let startY = 0; let ctrlX = 0; let ctrlY = 0; let prev = ""; for (const segment of segments) { const raw = segment[0]; const rel = raw === raw.toLowerCase(); const cmd = raw.toUpperCase(); const a = (segment.slice(1).match(PATH_NUMBER) || []).map(Number); if (cmd === "Z") { target.closePath(); x = startX; y = startY; ctrlX = x; ctrlY = y; prev = cmd; continue; } let i = 0; while (i < a.length) { if (cmd === "M") { const nx = rel ? x + a[i] : a[i]; const ny = rel ? y + a[i + 1] : a[i + 1]; i += 2; if (i === 2) { target.moveTo(nx, -ny); startX = nx; startY = ny; } else { target.lineTo(nx, -ny); } x = nx; y = ny; ctrlX = x; ctrlY = y; } else if (cmd === "L") { const nx = rel ? x + a[i] : a[i]; const ny = rel ? y + a[i + 1] : a[i + 1]; i += 2; target.lineTo(nx, -ny); x = nx; y = ny; ctrlX = x; ctrlY = y; } else if (cmd === "H") { const nx = rel ? x + a[i] : a[i]; i += 1; target.lineTo(nx, -y); x = nx; ctrlX = x; ctrlY = y; } else if (cmd === "V") { const ny = rel ? y + a[i] : a[i]; i += 1; target.lineTo(x, -ny); y = ny; ctrlX = x; ctrlY = y; } else if (cmd === "C") { const x1 = rel ? x + a[i] : a[i]; const y1 = rel ? y + a[i + 1] : a[i + 1]; const x2 = rel ? x + a[i + 2] : a[i + 2]; const y2 = rel ? y + a[i + 3] : a[i + 3]; const nx = rel ? x + a[i + 4] : a[i + 4]; const ny = rel ? y + a[i + 5] : a[i + 5]; i += 6; target.bezierCurveTo(x1, -y1, x2, -y2, nx, -ny); ctrlX = x2; ctrlY = y2; x = nx; y = ny; } else if (cmd === "S") { // A smooth cubic reflects the previous handle through the current // point. The Belo uses exactly one of these, in the counter, and // getting it wrong puts a visible kink in the left shoulder. const smooth = prev === "C" || prev === "S"; const x1 = smooth ? 2 * x - ctrlX : x; const y1 = smooth ? 2 * y - ctrlY : y; const x2 = rel ? x + a[i] : a[i]; const y2 = rel ? y + a[i + 1] : a[i + 1]; const nx = rel ? x + a[i + 2] : a[i + 2]; const ny = rel ? y + a[i + 3] : a[i + 3]; i += 4; target.bezierCurveTo(x1, -y1, x2, -y2, nx, -ny); ctrlX = x2; ctrlY = y2; x = nx; y = ny; } else { break; } prev = cmd; } } } function Belo() { const host = _react.useRef(null); _react.useEffect.call(void 0, () => { const el = host.current; if (!el) { return; } const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(30, 1, 0.1, 100); camera.position.set(0, 1.15, 7.5); camera.lookAt(0, -0.06, 0); const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2)); // Neutral rather than ACES: ACES walks a saturated red toward orange, and // Rausch is the one colour in this deck that has to stay itself. renderer.toneMapping = THREE.NeutralToneMapping; renderer.toneMappingExposure = 1.02; renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.domElement.style.display = "block"; el.appendChild(renderer.domElement); // The generated studio: white ceiling, a hard horizon step, a slate floor. const sky = document.createElement("canvas"); sky.width = 32; sky.height = 256; const ctx = sky.getContext("2d"); if (ctx) { const grad = ctx.createLinearGradient(0, 0, 0, 256); grad.addColorStop(0, "#eef2f8"); grad.addColorStop(0.1, "#ffffff"); grad.addColorStop(0.28, "#ffffff"); grad.addColorStop(0.38, "#c4ccd7"); grad.addColorStop(0.48, "#f6f8fb"); grad.addColorStop(0.56, "#98a0ac"); grad.addColorStop(0.78, "#6b727d"); grad.addColorStop(1, "#484e57"); ctx.fillStyle = grad; ctx.fillRect(0, 0, 32, 256); } const skyTex = new THREE.CanvasTexture(sky); skyTex.mapping = THREE.EquirectangularReflectionMapping; skyTex.colorSpace = THREE.SRGBColorSpace; const pmrem = new THREE.PMREMGenerator(renderer); const envRT = pmrem.fromEquirectangular(skyTex); scene.environment = envRT.texture; const ring = new THREE.Shape(); tracePath(ring, BELO_RING); const counter = new THREE.Path(); tracePath(counter, BELO_COUNTER); ring.holes.push(counter); const drop = new THREE.Shape(); tracePath(drop, BELO_DROP); // Extruded in the SVG's own units (the mark is about 95 by 101 of them), // then scaled down as a whole. Reasoning about a 1.4 unit chamfer against a // 7 unit ribbon is a great deal easier than reasoning about 0.03 against // 0.17, and a bevel wider than half the ribbon self-intersects. const geo = new THREE.ExtrudeGeometry([ring, drop], { depth: 21, bevelEnabled: true, bevelThickness: 1.7, bevelSize: 1.25, bevelOffset: 0, bevelSegments: 4, curveSegments: 20 }); geo.center(); // The mark is very nearly square (95 by 101 of its own units) and this // panel is portrait, so width is what runs out first. 0.0228 leaves the // outer lobes about a gutter clear of the panel edge. const SCALE = 0.0228; geo.scale(SCALE, SCALE, SCALE); geo.computeVertexNormals(); // The Rausch gradient as a vertex colour attribute, swept along the same // 115 degree axis the CSS token uses. A CanvasTexture map would have been // the obvious route and is the wrong one: ExtrudeGeometry's UV generator // gives the side walls a completely different parameterisation from the // caps, so the gradient would have stopped dead at the silhouette. geo.computeBoundingBox(); const bb = geo.boundingBox ; const ax = Math.sin((115 * Math.PI) / 180); const ay = -Math.cos((115 * Math.PI) / 180); let lo = Infinity; let hi = -Infinity; for (const cx of [bb.min.x, bb.max.x]) { for (const cy of [bb.min.y, bb.max.y]) { const p = cx * ax + cy * ay; lo = Math.min(lo, p); hi = Math.max(hi, p); } } const stops = [new THREE.Color(0xe61e4d), new THREE.Color(0xe31c5f), new THREE.Color(0xd70466)]; const position = geo.attributes.position; const colors = new Float32Array(position.count * 3); const mix = new THREE.Color(); for (let i = 0; i < position.count; i += 1) { const raw = (position.getX(i) * ax + position.getY(i) * ay - lo) / (hi - lo || 1); const t = Math.min(1, Math.max(0, raw)); if (t < 0.5) { mix.copy(stops[0]).lerp(stops[1], t * 2); } else { mix.copy(stops[1]).lerp(stops[2], (t - 0.5) * 2); } colors[i * 3] = mix.r; colors[i * 3 + 1] = mix.g; colors[i * 3 + 2] = mix.b; } geo.setAttribute("color", new THREE.BufferAttribute(colors, 3)); // Lacquer, not metal. Metalness is held low (rule three of the house // notes): a red at metalness 0.8 is a mirror that reflects a mostly white // room and washes straight out to pink on a white slide. A clearcoat gives // the crisp white highlight without touching the diffuse colour underneath. const enamel = new THREE.MeshPhysicalMaterial({ color: 0xffffff, vertexColors: true, metalness: 0.18, roughness: 0.22, clearcoat: 1, clearcoatRoughness: 0.08, envMapIntensity: 1.15 }); const mark = new THREE.Mesh(geo, enamel); mark.castShadow = true; const rig = new THREE.Group(); rig.add(mark); rig.rotation.x = -0.05; scene.add(rig); // The ground: invisible except where the mark shades it. const groundY = bb.min.y - 0.02; const shadowMat = new THREE.ShadowMaterial({ color: 0x2a0f1a, opacity: 0.4 }); const ground = new THREE.Mesh(new THREE.PlaneGeometry(16, 16), shadowMat); ground.rotation.x = -Math.PI / 2; ground.position.y = groundY; ground.receiveShadow = true; scene.add(ground); const key = new THREE.DirectionalLight(0xffffff, 2.5); key.position.set(2.6, 5.6, 3.4); key.castShadow = true; key.shadow.mapSize.set(1024, 1024); key.shadow.camera.near = 1; key.shadow.camera.far = 16; key.shadow.camera.left = -2.6; key.shadow.camera.right = 2.6; key.shadow.camera.top = 2.6; key.shadow.camera.bottom = -2.6; key.shadow.bias = -0.0012; const rim = new THREE.DirectionalLight(0xdfe6f2, 1.5); rim.position.set(-4.2, 1.4, -2.4); const fill = new THREE.HemisphereLight(0xffffff, 0x9aa1ad, 0.9); scene.add(key, rim, fill); const resize = () => { const w = el.clientWidth || 1; const h = el.clientHeight || 1; renderer.setSize(w, h); camera.aspect = w / h; camera.updateProjectionMatrix(); }; resize(); const started = performance.now(); let raf = 0; const tick = () => { const t = (performance.now() - started) / 1000; // Roughly 30 degrees of swing about a base yaw that already shows the // extruded wall, plus a barely there roll so it reads as handled rather // than mechanised. Never edge on, so every still is a usable still. rig.rotation.y = -0.3 + Math.sin(t * 0.2) * 0.26; rig.rotation.z = Math.sin(t * 0.13) * 0.028; renderer.render(scene, camera); raf = requestAnimationFrame(tick); }; tick(); const ro = new ResizeObserver(resize); ro.observe(el); return () => { cancelAnimationFrame(raf); ro.disconnect(); scene.traverse((obj) => { const mesh = obj ; if (mesh.geometry) { mesh.geometry.dispose(); } }); enamel.dispose(); shadowMat.dispose(); envRT.texture.dispose(); skyTex.dispose(); pmrem.dispose(); renderer.dispose(); el.removeChild(renderer.domElement); }; }, []); return _jsxruntime.jsx.call(void 0, 'div', { ref: host, style: { position: "absolute", inset: 0 },} ); } /** One region of the nights-and-seats ranking on slide three. */ function Region({ name, value, share }) { return ( _jsxruntime.jsxs.call(void 0, 'div', { style: { borderTop: "1px solid var(--hair)", paddingTop: "clamp(10px, 1.6vh, 16px)" }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 16 }, children: [ _jsxruntime.jsx.call(void 0, 'span', { style: { fontSize: "clamp(15px, 1.5vw, 19px)", fontWeight: 600, letterSpacing: "-0.01em" }, children: name}) , _jsxruntime.jsx.call(void 0, 'span', { className: "accent-text", style: { fontSize: "clamp(30px, 3.6vw, 52px)", fontWeight: 700, letterSpacing: "-0.035em", lineHeight: 1 }, children: value }) ]}) , _jsxruntime.jsx.call(void 0, 'div', { style: { marginTop: "clamp(8px, 1.2vh, 13px)", height: 6, borderRadius: 3, background: "var(--hair-2)", overflow: "hidden" }, children: _jsxruntime.jsx.call(void 0, 'div', { style: { width: `${share}%`, height: "100%", borderRadius: 3, background: "var(--accent)" },} ) }) ]}) ); } function App() { return ( _jsxruntime.jsxs.call(void 0, _Deck2.default, { children: [ /* An editorial split painted in Airbnb's real red-to-magenta CTA gradient: type on a solid colour field, not a centred title card. */ _jsxruntime.jsx.call(void 0, _Slide2.default, { nav: "Cover", full: true, children: _jsxruntime.jsxs.call(void 0, 'div', { style: { width: "100%", height: "100%", display: "grid", gridTemplateColumns: "1.05fr 0.95fr" }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { style: { background: "var(--accent)", display: "flex", flexDirection: "column", justifyContent: "center", gap: 26, padding: "var(--gutter-y) clamp(28px, 4vw, 72px)", boxSizing: "border-box" }, children: [ _jsxruntime.jsx.call(void 0, Wordmark, { height: 30, invert: true,} ) , _jsxruntime.jsx.call(void 0, 'h1', { className: "display", style: { margin: 0, color: "var(--accent-ink)", maxWidth: "12ch", fontSize: "clamp(40px, 5vw, 74px)" }, children: "Two hosts, three guests, one apartment." }) ]}) , _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "flex", flexDirection: "column", justifyContent: "center", gap: 20, padding: "var(--gutter-y) clamp(28px, 4vw, 72px)", boxSizing: "border-box" }, children: [ _jsxruntime.jsx.call(void 0, 'p', { className: "lead", style: { margin: 0 }, children: "Airbnb's own origin sentence, unchanged in every annual report since 2007. What happened after it is the rest of this deck." }) , _jsxruntime.jsx.call(void 0, 'p', { className: "foot", style: { margin: 0 }, children: "airbnb.com · Nasdaq: ABNB" }) ]}) ]}) }) , _jsxruntime.jsx.call(void 0, _Section2.default, { nav: "Start", n: 1, kicker: "2007", title: "It began with a spare room in San Francisco." ,} ) /* The regional read, laid against the hero object. Left column ranks the four regions Airbnb actually reports (the four numbers sum to the 533m headline exactly, which is why they can be ranked at all) and the bars are drawn against the largest of them rather than against the total, so the 3x spread between EMEA and Asia Pacific is the thing you see. Right panel is floor to ceiling: no headline over it, no card around it, just the mark in the light. */ , _jsxruntime.jsx.call(void 0, _Slide2.default, { nav: "Reach", full: true, children: _jsxruntime.jsxs.call(void 0, 'div', { style: { ...SPREAD, display: "grid", gridTemplateColumns: "1.04fr 0.96fr" }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { style: { minWidth: 0, display: "flex", flexDirection: "column", justifyContent: "space-between", gap: "clamp(14px, 2.2vh, 26px)", padding: "var(--gutter-y) clamp(24px, 3.2vw, 56px) var(--gutter-y) var(--gutter)", boxSizing: "border-box" }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { children: [ _jsxruntime.jsx.call(void 0, 'p', { className: "kicker", style: { margin: "0 0 10px" }, children: "Where the nights are" }) , _jsxruntime.jsx.call(void 0, 'h2', { className: "headline", style: { margin: 0, maxWidth: "18ch", fontSize: "clamp(28px, 3.6vw, 46px)", lineHeight: 1.06 }, children: "533 million nights and seats, booked in one year." }) ]}) , _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "flex", flexDirection: "column", gap: "clamp(10px, 1.6vh, 18px)" }, children: [ _jsxruntime.jsx.call(void 0, Region, { name: "EMEA", value: "215m", share: 100,} ) , _jsxruntime.jsx.call(void 0, Region, { name: "North America" , value: "158m", share: 73.5,} ) , _jsxruntime.jsx.call(void 0, Region, { name: "Latin America" , value: "90m", share: 41.9,} ) , _jsxruntime.jsx.call(void 0, Region, { name: "Asia Pacific" , value: "70m", share: 32.6,} ) ]}) , _jsxruntime.jsx.call(void 0, 'div', { style: { display: "flex", gap: "clamp(20px, 3.4vw, 56px)", borderTop: "2px solid var(--primary)", paddingTop: "clamp(12px, 1.8vh, 18px)" }, children: [ { value: "+8%", label: "Nights and seats, year over year" }, { value: "$91.3bn", label: "Gross booking value in 2025" } ].map((stat) => ( _jsxruntime.jsxs.call(void 0, 'div', { style: { minWidth: 0 }, children: [ _jsxruntime.jsx.call(void 0, 'div', { style: { fontSize: "clamp(24px, 2.6vw, 36px)", fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1 }, children: stat.value }) , _jsxruntime.jsx.call(void 0, 'p', { style: { margin: "8px 0 0", fontSize: "clamp(12px, 1.1vw, 15px)", lineHeight: 1.4, color: "var(--fg-muted)" }, children: stat.label }) ]}, stat.value) )) }) ]}) , _jsxruntime.jsxs.call(void 0, 'div', { style: { position: "relative", minWidth: 0, borderLeft: "1px solid var(--hair)", background: "radial-gradient(78% 58% at 52% 44%, rgba(255, 56, 92, 0.14) 0%, rgba(255, 56, 92, 0.04) 45%, rgba(255, 255, 255, 0) 72%)" }, children: [ _jsxruntime.jsx.call(void 0, Belo, {} ) , _jsxruntime.jsx.call(void 0, 'p', { className: "foot", style: { position: "absolute", right: "clamp(20px, 2.4vw, 40px)", bottom: "clamp(18px, 2.4vh, 30px)", margin: 0, maxWidth: "34ch", textAlign: "right" }, children: "Regional nights and seats booked. Airbnb FY2025 Form 10-K, filed 12 February 2026." }) ]}) ]}) }) /* Three panels that run from the headline to the bottom gutter, one of them carrying the Rausch gradient. The numbers are set at poster scale and the labels are pinned to the panel feet, so the slide is a filled frame rather than the three-card band this gallery already shows four times. */ , _jsxruntime.jsx.call(void 0, _Slide2.default, { nav: "Marketplace", full: true, children: _jsxruntime.jsxs.call(void 0, 'div', { style: { ...SPREAD, padding: "var(--gutter-y) var(--gutter)", gap: "clamp(20px, 3.6vh, 36px)" }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 32 }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { children: [ _jsxruntime.jsx.call(void 0, 'p', { className: "kicker", style: { margin: "0 0 12px" }, children: "The marketplace" }) , _jsxruntime.jsx.call(void 0, 'h2', { className: "headline", style: { margin: 0, maxWidth: "19ch" }, children: "A network that took eighteen years to build." }) ]}) , _jsxruntime.jsx.call(void 0, Wordmark, { height: 22,} ) ]}) , _jsxruntime.jsx.call(void 0, 'div', { style: { flex: "1 1 auto", minHeight: 0, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "clamp(12px, 1.5vw, 22px)" }, children: [ { value: "5m+", label: "Hosts", caption: "Per Airbnb's FY2025 annual report" }, { value: "2.5bn+", label: "Cumulative guest arrivals", caption: "Since 2007" }, { value: "220+", label: "Countries and regions", caption: "61% of 2025 revenue came from outside the US" } ].map((stat, i) => { const lit = i === 0; return ( _jsxruntime.jsxs.call(void 0, 'div', { style: { borderRadius: "var(--radius-lg)", padding: "clamp(20px, 3.2vh, 34px)", boxSizing: "border-box", display: "flex", flexDirection: "column", justifyContent: "space-between", gap: 18, background: lit ? "var(--accent)" : "var(--surface)", border: lit ? "1px solid transparent" : "1px solid var(--hair)", color: lit ? "var(--accent-ink)" : "var(--fg)" }, children: [ _jsxruntime.jsx.call(void 0, 'div', { className: lit ? undefined : "accent-text", style: { fontSize: "clamp(44px, 5.8vw, 88px)", fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 1 }, children: stat.value }) , _jsxruntime.jsxs.call(void 0, 'div', { children: [ _jsxruntime.jsx.call(void 0, 'div', { style: { fontSize: "clamp(18px, 1.9vw, 24px)", fontWeight: 600, lineHeight: 1.2 }, children: stat.label }) , _jsxruntime.jsx.call(void 0, 'p', { style: { margin: "10px 0 0", fontSize: "clamp(13px, 1.2vw, 16px)", lineHeight: 1.45, color: lit ? "rgba(255, 255, 255, 0.84)" : "var(--fg-muted)" }, children: stat.caption }) ]}) ]}, stat.label) ); }) }) ]}) }) , _jsxruntime.jsx.call(void 0, _BigNumber2.default, { nav: "Business", kicker: "And it is a real business" , value: "$4.6bn", caption: "Free cash flow in 2025, on $12.2bn of revenue and $2.5bn of net income." , foot: "Airbnb FY2025 Form 10-K, filed 12 February 2026" ,} ) /* A rail that uses both halves of the stage: one hairline across the full measure, four dated stops alternating above and below it. Same four entries as the band it replaces, but the content reaches the top and bottom gutters instead of hugging the centre line. */ , _jsxruntime.jsx.call(void 0, _Slide2.default, { nav: "Story", full: true, children: _jsxruntime.jsxs.call(void 0, 'div', { style: { ...SPREAD, padding: "var(--gutter-y) var(--gutter)" }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { children: [ _jsxruntime.jsx.call(void 0, 'p', { className: "kicker", style: { margin: "0 0 12px" }, children: "2007 to today" }) , _jsxruntime.jsx.call(void 0, 'h2', { className: "headline", style: { margin: 0, maxWidth: "22ch" }, children: "Stays, then everything around the stay." }) ]}) , _jsxruntime.jsxs.call(void 0, 'div', { style: { flex: "1 1 auto", minHeight: 0, position: "relative", display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gridTemplateRows: "1fr 1fr", columnGap: "clamp(16px, 2.2vw, 40px)", marginTop: "clamp(14px, 2.4vh, 26px)" }, children: [ _jsxruntime.jsx.call(void 0, 'div', { style: { position: "absolute", left: 0, right: 0, top: "50%", height: 2, background: "var(--hair)" },} ) , _jsxruntime.jsx.call(void 0, 'div', { style: { position: "absolute", left: 0, right: 0, top: "50%", display: "grid", gridTemplateColumns: "repeat(4, 1fr)", columnGap: "clamp(16px, 2.2vw, 40px)" }, children: [0, 1, 2, 3].map((i) => ( _jsxruntime.jsx.call(void 0, 'span', { style: { justifySelf: "start", width: 14, height: 14, borderRadius: "50%", background: "var(--accent)", transform: "translateY(-6px)" },}, i ) )) }) , [ { year: "2007", body: "Two hosts, three guests, and an air mattress in a San Francisco apartment." }, { year: "Dec 2020", body: "Public on the Nasdaq as ABNB, in the middle of a pandemic that closed travel." }, { year: "May 2025", body: "Services and Experiences launch across 10 categories in 260 cities." }, { year: "2025", body: "533 million nights and seats booked, on $91.3bn of gross bookings." } ].map((item, i) => { const above = i % 2 === 0; return ( _jsxruntime.jsxs.call(void 0, 'div', { style: { gridColumn: i + 1, gridRow: above ? 1 : 2, display: "flex", flexDirection: "column", justifyContent: above ? "flex-end" : "flex-start", gap: 10, paddingBottom: above ? "clamp(16px, 2.6vh, 28px)" : 0, paddingTop: above ? 0 : "clamp(20px, 3.2vh, 34px)" }, children: [ _jsxruntime.jsx.call(void 0, 'div', { className: "accent-text", style: { fontSize: "clamp(28px, 3.4vw, 50px)", fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1 }, children: item.year }) , _jsxruntime.jsx.call(void 0, 'p', { style: { margin: 0, fontSize: "clamp(14px, 1.3vw, 17px)", lineHeight: 1.5, color: "var(--fg-muted)" }, children: item.body }) ]}, item.year) ); }) ]}) ]}) }) /* The pull quote taken full bleed onto the Rausch gradient. The centred column left the stage empty either side; here the colour is the slide and the sentence runs to both gutters. */ , _jsxruntime.jsx.call(void 0, _Slide2.default, { nav: "Voice", full: true, children: _jsxruntime.jsxs.call(void 0, 'div', { style: { ...SPREAD, background: "var(--accent)", color: "var(--accent-ink)", justifyContent: "space-between", padding: "var(--gutter-y) var(--gutter)" }, children: [ _jsxruntime.jsx.call(void 0, 'div', { 'aria-hidden': "true", style: { fontSize: "clamp(72px, 9vw, 132px)", fontWeight: 800, lineHeight: 0.72, opacity: 0.5 }, children: "“" }) , _jsxruntime.jsx.call(void 0, 'p', { style: { margin: 0, fontSize: "clamp(26px, 3.6vw, 50px)", fontWeight: 600, lineHeight: 1.2, letterSpacing: "-0.02em", maxWidth: "42ch" }, children: "Seventeen years ago, we changed the way people travel. More than two billion guests later, Airbnb is synonymous with a place to stay. With the launch of services and experiences, we're changing travel again." }) , _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 24, borderTop: "1px solid rgba(255, 255, 255, 0.35)", paddingTop: 18 }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { children: [ _jsxruntime.jsx.call(void 0, 'div', { style: { fontSize: "clamp(17px, 1.7vw, 21px)", fontWeight: 700 }, children: "Brian Chesky" }) , _jsxruntime.jsx.call(void 0, 'div', { style: { fontSize: "clamp(14px, 1.3vw, 17px)", opacity: 0.85, marginTop: 4 }, children: "Co-founder and CEO, Airbnb" }) ]}) , _jsxruntime.jsx.call(void 0, 'div', { style: { fontSize: "clamp(13px, 1.2vw, 16px)", opacity: 0.85 }, children: "2025 Summer Release" }) ]}) ]}) }) /* The landing. After the gradient field, the close goes quiet and very large: one line at display scale running to the gutters, the wordmark at the head and the source pinned to the foot rule. The deck opened on a colour split, so it does not close on one. */ , _jsxruntime.jsx.call(void 0, _Slide2.default, { nav: "Close", full: true, children: _jsxruntime.jsxs.call(void 0, 'div', { style: { ...SPREAD, justifyContent: "space-between", padding: "var(--gutter-y) var(--gutter)" }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24 }, children: [ _jsxruntime.jsx.call(void 0, 'p', { className: "kicker", style: { margin: 0 }, children: "In their words" }) , _jsxruntime.jsx.call(void 0, Wordmark, { height: 24,} ) ]}) , _jsxruntime.jsxs.call(void 0, 'h2', { className: "display", style: { margin: 0, maxWidth: "13ch", fontSize: "clamp(52px, 8.8vw, 118px)", letterSpacing: "-0.045em" }, children: ["Now you can " , _jsxruntime.jsx.call(void 0, 'span', { className: "accent-text", children: "Airbnb"}), " more than an Airbnb." ]}) , _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 32, borderTop: "2px solid var(--primary)", paddingTop: 20 }, children: [ _jsxruntime.jsx.call(void 0, 'p', { className: "lead", style: { margin: 0, maxWidth: "52ch" }, children: "Airbnb's own headline for the 2025 Summer Release. The brand became a verb, then the verb got a bigger object." }) , _jsxruntime.jsx.call(void 0, 'p', { className: "foot", style: { margin: 0, whiteSpace: "nowrap" }, children: "airbnb.com" }) ]}) ]}) }) ]}) ); } exports.default = App;

Airbnb: Two hosts, three guests, one apartment