/* Problem, chaotic stack diorama showing fragmented tooling */ const ProblemMiniChannelChip = ({ label, dotColor }) => ( {label} ); /* Each card is a tiny interface fragment, distinct content per card */ const PROBLEM_CARDS = [ { id: "wa", label: "WhatsApp tool", sub: "Templates · broadcasts", rotate: -3, x: 0, y: 8, w: 280, z: 3, body: (
Hi, what time is check-in?
[ Template: check_in_v2 ]
…and breakfast hours?
No template found
), }, { id: "bot", label: "Chatbot", sub: "Decision trees · web only", rotate: 2.5, x: 22, y: 0, w: 260, z: 4, body: (
› Are you a guest?
YesNoOther
› Booking ref?
⊗ flow ended
), }, { id: "crm", label: "Hotel CRM", sub: "Email-only · contacts", rotate: -1.5, x: 6, y: 14, w: 280, z: 2, body: (
NameEmailStays
M. Aguilarm.a@…4
M. Aguilarmarta@…,
,??
), }, { id: "call", label: "Call center", sub: "Manual handoffs", rotate: 3.2, x: 18, y: 6, w: 270, z: 5, body: (
4 in queue · avg 6m 42s
{Array.from({length: 24}).map((_,i)=>( ))}
No CRM context loaded
), }, { id: "email", label: "Email platform", sub: "Marketing automation", rotate: -2.5, x: 4, y: 4, w: 280, z: 3, body: (
CampaignSpring offer · 12,400
Open rate14.2%
Bounces1,802
Booked?
), }, { id: "loy", label: "Loyalty system", sub: "Standalone tier rules", rotate: 1.8, x: 14, y: 12, w: 260, z: 4, body: (
GOLD 8,420 pts
if nights ≥ 6 → +5%
if pms.guest = ?
), }, { id: "survey", label: "Survey tool", sub: "Post-stay forms", rotate: -3.5, x: 24, y: 2, w: 260, z: 2, body: (
Rate your stay
★★★★☆
Comments…
Sent 14d after checkout
), }, { id: "an", label: "Analytics", sub: "Disconnected dashboards", rotate: 2, x: 8, y: 10, w: 280, z: 3, body: (
Sessions12.4k
Conversion,
Source: ??
Revenue,
), }, ]; const SectionProblem = () => { const wrapRef = React.useRef(null); const [drift, setDrift] = React.useState(0); React.useEffect(() => { // Scroll-linked parallax is the effect people with vestibular // disorders report most, and this one moved eight cards at once with // no opt-out. Leave drift at 0 and the cards simply sit still; the // diorama still says everything it needs to say. if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; const onScroll = () => { if (!wrapRef.current) return; const rect = wrapRef.current.getBoundingClientRect(); const vh = window.innerHeight; const progress = (vh - rect.top) / (vh + rect.height); setDrift(Math.max(0, Math.min(1, progress))); }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return (
The state of guest communication

Hotels don't lack tools. They lack a system.

Your guests message you everywhere, WhatsApp, Instagram, web chat, email, the phone. Your data lives somewhere else, PMS, booking engine, CRM, spreadsheets, the front desk. Your team sits in the middle, answering the same questions a hundred times a day, missing upsells, and reacting instead of driving revenue.

The result is predictable: slow responses, fragmented guest experience, lost direct bookings, and a CRM that nobody trusts.

{/* Diorama */}
{/* Floating warning labels */}
Same guest · 3 systems
No shared context
No revenue attribution
{/* Severed connection threads between cards */} {PROBLEM_CARDS.map((c, i) => { const driftY = drift * 30 * (i % 2 === 0 ? 1 : -1); const driftX = drift * 16 * (i % 3 === 0 ? 1 : -1); return (
{c.label}
{c.sub}
{c.body}
); })}

Modern guest communication isn't a tooling problem.
It's a system problem.

); }; window.SectionProblem = SectionProblem;