// shared.jsx — Brand tokens, content, shared components for all 4 layouts. const AM = { // Brand palette (kept exact: black/cream/gold) ink: '#0a0a0a', inkSoft: '#1a1a1a', cream: '#f5f1e8', creamSoft: '#ebe5d6', gold: '#c9a961', goldSoft: '#a8884a', paper: '#fafaf7', line: 'rgba(201,169,97,0.25)', lineDark: 'rgba(245,241,232,0.12)', }; // Resolver asset: usa data-URI bundleado (window.AM_ASSETS) o la ruta original. // `assetUrl(path)` → string listo para src/href. // `bgUrl(path)` → string listo para usar dentro de url(...) en CSS background-image. function assetUrl(path) { const A = (typeof window !== 'undefined' && window.AM_ASSETS) || {}; return A[path] || path; } function bgUrl(path) { // Las data-URIs no necesitan comillas dentro de url(), pero las rutas tampoco. return `url("${assetUrl(path)}")`; } if (typeof window !== 'undefined') { window.assetUrl = assetUrl; window.bgUrl = bgUrl; } // CONTENIDO REAL — B2B Property Management. // Audiencia: PROPIETARIOS de Airbnb / casas en Tulum. // Objetivo: que el dueño contacte para gestionar su propiedad. const COPY = { hero: { eyebrow: 'TULUM · PROPERTY MANAGEMENT · DESDE 2015', title: 'Tu propiedad\nen Tulum,\ncuidada como\nnuestra.', sub: 'Operación integral con estándares Superhost. 10 años de experiencia.', cta: 'Gestionar mi propiedad', ctaSub: 'Habla con un asesor · respuesta en minutos', }, stats: [ { v: '10+', l: 'Años de experiencia' }, { v: '93%', l: 'Clientes satisfechos' }, { v: '4.9', l: 'Rating Airbnb' }, ], // 6 servicios — operación integral, copy conciso. services: [ { n: '01', t: 'Comercialización', d: 'Publicación, fotos y sincronización en todos los canales.', proof: '', bullets: ['Listings en Airbnb, Web y Redes Sociales', 'Calendario sincronizado en tiempo real', 'Fotografía profesional y copywriting'] }, { n: '02', t: 'Pricing dinámico', d: 'Tarifas que se ajustan al mercado y la temporada.', proof: 'Optimización diaria', bullets: ['Análisis constante de la competencia', 'Ajustes por temporada y eventos locales', 'Maximiza ingreso sin perder ocupación'] }, { n: '03', t: 'Hospitalidad 24/7', d: 'Atención bilingüe a huéspedes durante toda la estancia.', proof: 'ES · EN', bullets: ['Respuesta en menos de 5 minutos', 'Check-in y check-out coordinados', 'Concierge bilingüe (ES · EN)'] }, { n: '04', t: 'Limpieza & mantenimiento', d: 'Staff propio con checklist auditable y red de proveedores.', proof: 'In-house · Preventivo', bullets: ['Equipo de limpieza confiable', 'Checklist auditable post-estancia', 'Mantenimiento preventivo programado'] }, { n: '05', t: 'Cuentas', d: 'Depósitos, servicios y pagos a proveedores con trazabilidad.', proof: 'Transparente', bullets: ['Depósitos directos a tu cuenta', 'Pago de servicios e impuestos', 'Trazabilidad completa de cada movimiento'] }, { n: '06', t: 'Reportes mensuales', d: 'Operación y utilidad de tu propiedad, claras cada mes.', proof: 'Mensual', bullets: ['Estado de cuenta detallado', 'KPIs de ocupación y rating', 'Recomendaciones de mejora continua'] }, ], // Beneficios para el propietario — ultra cortos. benefits: [ { n: '01', t: 'Plusvalía', d: 'Tu propiedad mantiene su valor. Sin maltrato.' }, { n: '02', t: 'Flujo consistente', d: 'Rentabilidad maximizada con ingresos transparentes.' }, { n: '03', t: 'Tiempo libre', d: 'Tú disfrutas. Nosotros operamos.' }, ], // Proceso para el dueño steps: [ { n: '01', t: 'Conversación', d: 'Entendemos tu propiedad y objetivos.' }, { n: '02', t: 'Auditoría', d: 'Visitamos, fotografiamos y proponemos pricing.' }, { n: '03', t: 'Lanzamiento', d: 'Publicamos y empezamos a recibir reservas.' }, { n: '04', t: 'Operación', d: 'Gestionamos todo. Tú recibes reportes.' }, ], // KPIs vs benchmark de industria kpis: [ { v: '4.8', l: 'Calificación general', b: 'Benchmark: 4.8' }, { v: '100%', l: 'Tasa de respuesta', b: 'Benchmark: 90%' }, { v: '0%', l: 'Cancelaciones', b: 'Benchmark: <1%' }, { v: '4.8', l: 'Más ocupación vs similares', b: 'Sobre promedio del sector' }, ], // Una década en números decade: [ { v: '10+', l: 'Años' }, { v: '87', l: 'Propiedades' }, { v: '10,000+', l: 'Huéspedes' }, { v: '2019', l: 'Superhost desde' }, ], // Propiedades en gestión (showcase) properties: [ { id: 'mistiq-temple', name: 'Mistiq Temple', tag: 'Condo Luxury · 2 hab', info: '4 pax · 2 hab · 2 beds · 2.5 baños · Plunge pool privada', rating: '4.64', reviews: 14, img: 'redesign/img/properties/mistiq-temple.jpg', url: 'https://airbnb.com/h/mistiqtemple2b303' }, { id: 'botanic', name: 'Botanic', tag: 'Rooftop Pool · 2 hab', info: '6 pax · 2 hab · 3 beds · 2 baños · Plunge pool · 5 min playa', rating: '4.81', reviews: 42, img: 'redesign/img/properties/botanic.jpg?v=2', url: 'https://airbnb.com/h/botanic409' }, { id: 'jungle-houses', name: 'Jungle House', tag: 'Casa Privada · 3 hab', info: '11 pax · 3 hab · 6 beds · 3.5 baños · Alberca privada · Parking', rating: '4.81', reviews: 52, img: 'redesign/img/properties/jungle-houses.jpg?v=2', url: 'https://airbnb.com/h/junglehouses1' }, { id: 'mistiq-gardens', name: 'Mistiq Gardens', tag: 'Loft Moderno · Guest Favorite', info: '6 pax · 1 hab · 4 beds · 1 baño · 6 albercas · Sky Pool', rating: '5.0', reviews: 8, img: 'redesign/img/properties/mistiq-gardens.jpg', url: 'https://airbnb.com/h/mistiqgardens128' }, ], contact: { wa: '+52 998 148 2146', waHref: 'https://wa.me/529981482146', email: 'info@amtulum.com', emailHref: 'mailto:info@amtulum.com', instagram: '@am_tulum', instagramHref: 'https://www.instagram.com/am_tulum/', facebook: 'AM Tulum', facebookHref: 'https://www.facebook.com/profile.php?id=61578880155653', }, }; // ─── Shared atoms ───────────────────────────────────────── // AM TULUM logo — usa imagen real con tints por color // `size` = altura total en px; ancho proporcional (1.42:1) // `compact` = solo ícono+wordmark sin "Property Management" function Logo({ size = 28, color = '#fff', compact = false, shadow = false }) { // Renderizamos el PNG tal cual (1276×340) — proporción exacta del archivo original. // El PNG es negro sobre transparente. Para color blanco aplicamos filter:invert. const A = (typeof window !== 'undefined' && window.AM_ASSETS) || {}; // Pick the cleaner v2 logo (cropped from the high-res 2000×2000 PNG the client provided). // White version is rendered as-is; black version is used directly when scrolled. // Detect if the requested color is dark — if so, use the black variant; otherwise white. const isDark = (() => { if (!color) return false; if (color === '#000' || color === '#0a0a0a' || color === '#000000') return true; if (typeof color === 'string' && color.startsWith('#')) { const hex = color.replace('#', ''); const r = parseInt(hex.slice(0, 2), 16); const g = parseInt(hex.slice(2, 4), 16); const b = parseInt(hex.slice(4, 6), 16); const lum = 0.299 * r + 0.587 * g + 0.114 * b; return lum < 128; } return false; })(); const key = isDark ? 'logo-am-tulum-v2-black.png' : 'logo-am-tulum-v2-white.png'; const src = A[key] || `redesign-v2/img/${isDark ? 'logo-black.png' : 'logo-white.png'}`; // El asset ya viene con el color correcto (white-on-transparent o black-on-transparent). // Solo aplicamos sombra si se pidió. const filter = shadow ? 'drop-shadow(0 2px 6px rgba(0,0,0,0.55)) drop-shadow(0 1px 2px rgba(0,0,0,0.4))' : 'none'; if (compact) { // Icon-only bbox in the new logo (828×200): x=8..240, y=8..192 → 232×184. const ICON_W = 232, ICON_H = 184; const FULL_W = 828, FULL_H = 200; const ICON_X = 8, ICON_Y = 8; const H = size; const W = H * (ICON_W / ICON_H); const scale = H / ICON_H; return (
); } // Full logo: PNG completo — proporción 828/200 = 4.14 (asset cropped from client master). const fullAspect = 828 / 200; const H = size; const W = H * fullAspect; return ( AM Tulum · Property Management ); } function GoldButton({ children, full = false, sub, dark = true, style = {} }) { return ( ); } function Eyebrow({ children, color = AM.gold }) { return (
{children}
); } function Serif({ children, size = 38, color = '#fff', italic = false, style = {} }) { return (
{children}
); } // SVG icons used across layouts const Ico = { home: (c='#fff', s=22) => , compass: (c='#fff', s=22) => , star: (c='#fff', s=22) => , cal: (c='#fff', s=22) => , user: (c='#fff', s=22) => , arrow: (c='#fff', s=18) => , bed: (c='#fff', s=16) => , guests: (c='#fff', s=16) => , pin: (c='#fff', s=14) => , wa: (c='#fff', s=22) => , search: (c='#fff', s=20) => , menu: (c='#fff', s=22) => , chev: (c='#fff', s=14) => , drag: (c='#fff', s=28) => , }; // Phone shell — matches the iPhone aspect we use everywhere const PHONE_W = 390; const PHONE_H = 844; // iOS-style status bar (9:41, signal, wifi, battery) — only shown in canvas demo, not production function IOSStatusBar({ dark = true }) { if (typeof window !== 'undefined' && window.__AM_RESPONSIVE__) return null; const c = dark ? '#fff' : AM.ink; return (
9:41
{/* Signal */} {/* Wifi */} {/* Battery */}
); } // Generic phone wrapper — gives every layout the rounded corners + status bar function PhoneShell({ dark = true, statusDark = false, children }) { return (
{children}
); } Object.assign(window, { AM, COPY, Logo, GoldButton, Eyebrow, Serif, Ico, PhoneShell, PHONE_W, PHONE_H, });