/* GALAHOME UI Kit — marketing website components */ /* global React */ const { useState } = React; const ICONS = { search: , menu: , mapPin: , bed: , bath: , max: , house: , hand: , trend: , quote: , phone: , mail: , dollar: , arrow: →, }; function Header({ current, onNav }) { const items = [['propiedades','Propiedades'],['mapa','Mapa'],['calculadoras','Calculadoras'],['nosotros','Nosotros'],['blog','Blog'],['contacto','Contacto']]; const subItems = [['compradores','Compradores'],['vendedores','Vendedores'],['inversionistas','Inversionistas']]; const [scrolled, setScrolled] = useState(false); const [isMobile, setIsMobile] = useState(false); const [menuOpen, setMenuOpen] = useState(false); React.useEffect(()=>{ const onScroll = () => setScrolled(window.scrollY > 8); onScroll(); window.addEventListener('scroll', onScroll, { passive:true }); const mq = window.matchMedia('(max-width: 768px)'); const sync = () => setIsMobile(mq.matches); sync(); mq.addEventListener('change', sync); return () => { window.removeEventListener('scroll', onScroll); mq.removeEventListener('change', sync); }; },[]); React.useEffect(()=>{ document.body.style.overflow = menuOpen ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; },[menuOpen]); const goTo = (k) => { setMenuOpen(false); onNav(k); }; if (isMobile) { return (
goTo('home')} style={{cursor:'pointer',display:'flex',alignItems:'center',justifyContent:'center'}}> GALAHOME
{menuOpen && (
GALAHOME
{ICONS.phone}+52 55 7122 4111 {ICONS.mail}contacto@galahome.mx {ICONS.mapPin}Benito Juárez, CDMX
)} ); } return (
{/* Brand */} onNav('home')} style={{cursor:'pointer',display:'flex',alignItems:'center',gap:12,flexShrink:0}}> GALAHOME
GALAHOME Real Estate
{/* Nav */} {/* Actions: Comprar (primary) · Vender (ghost) · Search · Contacto */}
); } /* Pills "Comprar / Vender" — paired segmented control that lives inside the header. Comprar = filled violet (primary intent), Vender = outline (secondary). Subtle, brand-aligned, replaces the heavy dark ActionBar that broke the page. */ function BuySellPills({ onNav, current }) { const buyActive = current === 'propiedades'; return (
); } /* ActionBar kept as a no-op so existing screens that mount it continue to render without an extra dark band. The buy/sell affordances now live in
. */ function ActionBar() { return null; } function Footer({ onNav }) { const go = (s) => (e) => { e.preventDefault(); if (onNav) onNav(s); window.scrollTo(0,0); }; const linkStyle = { cursor:'pointer',color:'rgba(255,255,255,0.7)',textDecoration:'none',transition:'color 180ms',display:'inline-block', }; const onHoverIn = (e) => { e.currentTarget.style.color = '#fff'; }; const onHoverOut = (e) => { e.currentTarget.style.color = 'rgba(255,255,255,0.7)'; }; const contactItem = (icon, content, href) => ( {icon} {content} ); const socialBtn = (href, label, svg) => ( {e.currentTarget.style.background='var(--gh-violeta)';e.currentTarget.style.borderColor='var(--gh-violeta)';e.currentTarget.style.color='#fff';e.currentTarget.style.transform='translateY(-2px)';}} onMouseLeave={e=>{e.currentTarget.style.background='transparent';e.currentTarget.style.borderColor='rgba(255,255,255,0.2)';e.currentTarget.style.color='rgba(255,255,255,0.85)';e.currentTarget.style.transform='none';}}> {svg} ); const dirEncoded = encodeURIComponent('Av. Río Churubusco 601, Xoco, Benito Juárez, 03330 Ciudad de México, CDMX'); return ( ); } function WhatsAppFAB() { const [hover, setHover] = React.useState(false); const phone = '525571224111'; // GALAHOME WhatsApp const msg = encodeURIComponent('Hola GALAHOME, me interesa saber más sobre sus propiedades.'); return ( setHover(true)} onMouseLeave={()=>setHover(false)} style={{ position:'fixed', right:24, bottom:24, zIndex:60, display:'flex', alignItems:'center', gap:10, background:'#25D366', color:'#fff', padding: hover ? '14px 20px 14px 14px' : '14px', borderRadius:999, boxShadow:'0 8px 24px rgba(37,211,102,0.45), 0 2px 6px rgba(0,0,0,0.15)', textDecoration:'none', fontFamily:'inherit', fontWeight:600, fontSize:14, transition:'padding 220ms cubic-bezier(.2,.9,.3,1.2)', overflow:'hidden', }}> {hover && Chatea con nosotros} ); } function PropertyCard({ data, onClick }) { return (
e.currentTarget.style.boxShadow='var(--gh-shadow-lg)'} onMouseLeave={e=>e.currentTarget.style.boxShadow='var(--gh-shadow-sm)'}>
{data.title}e.currentTarget.style.transform='scale(1.05)'} onMouseLeave={e=>e.currentTarget.style.transform='scale(1)'}/>
{data.status} {data.price} {/* Marca de agua */}
{data.type}
{data.title}
{ICONS.mapPin}{data.loc}
{ICONS.bed}{data.bed} rec {ICONS.bath}{data.bath} baño {ICONS.max}{data.area} m²
); } function HeroFilters({ open, onClose, onApply }) { const [op, setOp] = useState('comprar'); const [precio, setPrecio] = useState('cualquiera'); const [recs, setRecs] = useState('cualquiera'); const [banos, setBanos] = useState('cualquiera'); const [m2Min, setM2Min] = useState(0); const [m2Max, setM2Max] = useState(400); const [zonas, setZonas] = useState([]); const [tipo, setTipo] = useState('cualquiera'); const PRECIO_COMPRA = [ { key:'cualquiera', label:'Cualquiera' }, { key:'0-3M', label:'Hasta $3M' }, { key:'3-6M', label:'$3M – $6M' }, { key:'6-10M', label:'$6M – $10M' }, { key:'10-15M', label:'$10M – $15M' }, { key:'15M+', label:'$15M+' }, ]; const PRECIO_RENTA = [ { key:'cualquiera', label:'Cualquiera' }, { key:'0-15K', label:'Hasta $15K' }, { key:'15-25K', label:'$15K – $25K' }, { key:'25-40K', label:'$25K – $40K' }, { key:'40-60K', label:'$40K – $60K' }, { key:'60K+', label:'$60K+' }, ]; const ZONAS = ['Del Valle','Narvarte','Coyoacán','Mixcoac','Xoco','Portales','Mitikah']; const TIPOS = [ { key:'cualquiera', label:'Cualquiera' }, { key:'depto', label:'Departamento' }, { key:'casa', label:'Casa' }, { key:'penthouse', label:'Penthouse' }, { key:'loft', label:'Loft' }, ]; const NUMS = ['cualquiera','1','2','3','4+']; const toggleZona = (z) => setZonas(arr => arr.includes(z) ? arr.filter(x=>x!==z) : [...arr, z]); const reset = () => { setOp('comprar'); setPrecio('cualquiera'); setRecs('cualquiera'); setBanos('cualquiera'); setM2Min(0); setM2Max(400); setZonas([]); setTipo('cualquiera'); }; if (!open) return null; const seg = (val, setVal, opts) => (
{opts.map(o => { const k = typeof o === 'string' ? o : o.key; const lbl = typeof o === 'string' ? (o==='cualquiera' ? 'Cualquiera' : o) : o.label; const active = val === k; return ( ); })}
); const precioOpts = op === 'rentar' ? PRECIO_RENTA : PRECIO_COMPRA; return (
e.stopPropagation()} style={{background:'#fff',borderRadius:18,maxWidth:640,width:'100%',maxHeight:'90vh',overflowY:'auto',boxShadow:'0 30px 60px -12px rgba(13,43,94,0.45)',position:'relative',animation:'pm-lift 220ms cubic-bezier(.2,.9,.3,1.2)'}}>
Filtros

Refina tu búsqueda

{/* Operación */}
Operación
{[{k:'comprar',l:'Comprar'},{k:'rentar',l:'Rentar'}].map(o=>( ))}
{/* Precio */}
{op==='rentar' ? 'Renta mensual' : 'Precio'}
{seg(precio, setPrecio, precioOpts)}
{/* Tipo */}
Tipo de propiedad
{seg(tipo, setTipo, TIPOS)}
{/* Recámaras / baños */}
Recámaras
{seg(recs, setRecs, NUMS)}
Baños
{seg(banos, setBanos, NUMS)}
{/* m² */}
Metros cuadrados
{m2Min} – {m2Max}{m2Max>=400?'+':''} m²
setM2Min(Math.min(Number(e.target.value), m2Max))} style={{width:'100%',accentColor:'var(--gh-violeta)'}}/>
setM2Max(Math.max(Number(e.target.value), m2Min))} style={{width:'100%',accentColor:'var(--gh-violeta)'}}/>
{/* Zonas */}
Zonas (múltiple)
{ZONAS.map(z=>{ const active = zonas.includes(z); return ( ); })}
{/* Footer del modal */}
); } function Hero({ onSearch, onNav }) { const imgs = [ '/assets/propiedades/city-park-grand-p17/amenidad-01.jpg', '/assets/propiedades/mitikah-loft-p44/amenidad-01.jpg', '/assets/propiedades/city-towers-coyoacan/amenidad-01.webp', ]; const [idx, setIdx] = useState(0); const [filtersOpen, setFiltersOpen] = useState(false); const [query, setQuery] = useState(''); React.useEffect(()=>{const t=setInterval(()=>setIdx(i=>(i+1)%imgs.length),5000);return()=>clearInterval(t);},[]); const apply = (filters) => { setFiltersOpen(false); if (onNav) onNav('propiedades'); else onSearch && onSearch(); }; return (
{imgs.map((src,i)=>(
))}
Inmobiliaria en CDMX

Tu próximo hogar en CDMX,
sin trabas.

Compra, venta y renta con asesoría legal incluida y reporte de mercado en cada propiedad.

{e.preventDefault();onSearch();}} style={{background:'#fff',borderRadius:999,boxShadow:'var(--gh-shadow-xl)',padding:6,maxWidth:680,margin:'0 auto',display:'flex',alignItems:'center',gap:6}}> setQuery(e.target.value)} placeholder="Colonia, zona o nombre de propiedad…" style={{flex:1,border:0,padding:'14px 20px',fontSize:14,background:'transparent',outline:'none',color:'var(--gh-gris-carbon)'}}/>
{/* Slide indicators */}
{imgs.map((_,i)=>(
setFiltersOpen(false)} onApply={apply}/>
); } function FeatureGrid() { const feats = [ {ic:ICONS.house, t:'Portafolio curado', p:'Inventario verificado en zonas de alta plusvalía de la CDMX. Cada propiedad pasa por un check de documentación antes de publicarse.'}, {ic:ICONS.hand, t:'Asesoría legal incluida', p:'Acompañamiento end-to-end: revisión de escrituras, gravámenes y contratos sin costo adicional para compradores y vendedores.'}, {ic:ICONS.trend, t:'Inteligencia de mercado', p:'Reporte de precio por m², ROI estimado y contexto de zona en cada propiedad. Decisiones con datos, no con corazonadas.'}, ]; return (
Por qué GALAHOME

Tres compromisos que cambian la forma de comprar o vender

{feats.map((f,i)=>(
{e.currentTarget.style.transform='translateY(-4px)';e.currentTarget.style.boxShadow='0 18px 40px -18px rgba(13,43,94,0.22)';e.currentTarget.style.borderColor='var(--gh-lavanda, #C4A8E8)';}} onMouseLeave={e=>{e.currentTarget.style.transform='none';e.currentTarget.style.boxShadow='0 1px 2px rgba(13,43,94,0.04)';e.currentTarget.style.borderColor='#ECEEF2';}}>
0{i+1}
{React.cloneElement(f.ic, { width:28, height:28 })}

{f.t}

{f.p}

))}
); } function Testimonial({ q, name, role }) { return (
{e.currentTarget.style.transform='translateY(-3px)';e.currentTarget.style.boxShadow='0 18px 40px -18px rgba(13,43,94,0.22)';}} onMouseLeave={e=>{e.currentTarget.style.transform='none';e.currentTarget.style.boxShadow='0 1px 2px rgba(13,43,94,0.04)';}}>
{React.cloneElement(ICONS.quote, { width:20, height:20 })}

“{q}”

{name[0]}
{name}
{role}
); } Object.assign(window, { ICONS, Header, ActionBar, Footer, WhatsAppFAB, PropertyCard, Hero, FeatureGrid, Testimonial });