/* global React */ const { useState, useEffect, useRef } = React; /* ============================================================ Helpers ============================================================ */ const LOGO_SRC = "brand/logo-principal-dark.png"; const LOGO_SRC_LIGHT = "brand/logo-principal.png"; /* ============================================================ 1. NAVBAR ============================================================ */ function Navbar({ onNavigate }) { const [scrolled, setScrolled] = useState(false); const [sheetOpen, setSheetOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); const items = [ { id: 'nosotros', label: 'NOSOTROS' }, { id: 'problema', label: 'REALIDAD' }, { id: 'sistema', label: 'SISTEMA' }, { id: 'servicios', label: 'SERVICIOS' }, { id: 'proceso', label: 'PROCESO' }]; const handle = (id) => { setSheetOpen(false); onNavigate(id); }; return (
{/* Nav CTA removed — lives in hero now */}
{sheetOpen &&
setSheetOpen(false)}>
}
); } /* ============================================================ HERO BACKGROUND — floating paths (adapted from framer-motion original) ============================================================ */ /* HeroBackground removed */ function HeroBackground() {return null;} /* ============================================================ 2. HERO ============================================================ */ function Hero({ layout = 'left' }) { const [p, setP] = useState(0); const [animate, setAnimate] = useState(false); useEffect(() => { const updateAnimate = () => setAnimate(window.innerWidth > 768); updateAnimate(); let raf = null; const onScroll = () => { if (raf) return; raf = requestAnimationFrame(() => { const trigger = Math.max(300, window.innerHeight * 0.55); setP(Math.min(1, Math.max(0, window.scrollY / trigger))); raf = null; }); }; onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', updateAnimate); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', updateAnimate); if (raf) cancelAnimationFrame(raf); }; }, []); const finalScale = 0.16; const initX = 48,initY = 84; // hero left padding below 52px navbar const finalX = 24,finalY = 14; const scale = animate ? 1 - (1 - finalScale) * p : 1; const tx = animate ? (finalX - initX) * p : 0; const ty = animate ? (finalY - initY) * p : 0; return (
{/* Floating logo — shrinks from hero position to upper-left as user scrolls */} {animate &&
0.95} style={{ position: 'fixed', top: initY, left: initX, zIndex: 60, transformOrigin: 'top left', transform: `translate3d(${tx}px, ${ty}px, 0) scale(${scale})`, willChange: 'transform', pointerEvents: 'none' }}> Velora Studio
} {/* LEFT COLUMN */}
{animate ? /* spacer reserves the logo's original space; real logo is rendered fixed below */
ESTUDIO DE DISEÑO ESTRATÉGICO

Diseñamos la operación que conecta marca, datos y producto en un solo motor.

{/* DIVIDER removed */} {/* RIGHT COLUMN */}
Tu marca no necesita otra campaña. Necesita un sistema.
{e.preventDefault();document.getElementById('sistema')?.scrollIntoView({ behavior: 'smooth', block: 'start' });}} className="hero-primary-cta" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'var(--color-surface-dark)', color: 'var(--color-text-inverse)', fontFamily: 'var(--font-inter)', fontWeight: 600, fontSize: 12, letterSpacing: '1px', textTransform: 'uppercase', padding: '14px 32px', borderRadius: 2, border: 'none', transition: 'background 150ms ease-out' }} onMouseEnter={(e) => e.currentTarget.style.background = '#000'} onMouseLeave={(e) => e.currentTarget.style.background = 'var(--color-surface-dark)'}> VER CÓMO OPERA {e.preventDefault();document.getElementById('contacto')?.scrollIntoView({ behavior: 'smooth', block: 'start' });}} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'var(--color-accent)', color: '#fff', fontFamily: 'var(--font-inter)', fontWeight: 600, fontSize: 12, letterSpacing: '1px', textTransform: 'uppercase', padding: '14px 32px', borderRadius: 2, border: 'none', transition: 'background 150ms ease-out' }} onMouseEnter={(e) => e.currentTarget.style.background = 'var(--color-accent-hover)'} onMouseLeave={(e) => e.currentTarget.style.background = 'var(--color-accent)'}>AGENDA TU DIAGNÓSTICO  →
); } const heroLabelStyle = { fontFamily: 'var(--font-inter)', fontWeight: 600, fontSize: 10, letterSpacing: '2.5px', textTransform: 'uppercase', color: 'var(--color-accent)' }; /* ============================================================ 3. PROBLEMA ============================================================ */ function Problema() { const items = [ { title: 'Tu producto es mejor. Ellos ganan igual.', body: 'Tienes un producto sólido y tracción real, pero un competidor con menos sustancia te está ganando por posicionamiento, marca y presencia digital. El mercado percibe lo que ve, no lo que mereces.' }, { title: 'Inviertes en marketing. No apareces.', body: 'Tienes un negocio que funciona por referidos, pero cuando alguien te busca en Google no te encuentra, tu sitio no convence o tus redes no reflejan lo que realmente eres. Cada cliente que pasa sin verte es dinero que se fue.' }, { title: 'Tu equipo ejecuta. La estrategia no avanza.', body: 'Tienes agencias, freelancers o equipo interno trabajando — pero sin una dirección integrada, cada uno jala para su lado. Los reportes llegan, los resultados no. El problema no es el talento: es que nadie diseñó el sistema.' }]; return (
{/* ── QUOTE ── */}

«Más datos, más reuniones, menos claridad.»

{/* ── ITEMS — 3 columnas, respiran ── */}
{items.map((it, i) =>
{String(i + 1).padStart(2, '0')}
{it.title}
{it.body}
 )}
); } /* ============================================================ CAPACIDADES — spotlight reel section ============================================================ */ function Capacidades() { const items = [ 'Diseño Estratégico', 'Identidad de Marca', 'Estrategia de Contenido', 'Presencia Digital', 'Performance Marketing', 'Business Intelligence', 'Automatización', 'Growth Systems', 'Customer Journey', 'Arquitectura de Marca', 'Decisiones con Datos', 'Diseño Editorial']; const listRef = useRef(null); useEffect(() => { const list = listRef.current; if (!list) return; const update = () => { const items = list.querySelectorAll('.velora-reel-item'); const center = window.innerHeight / 2; let closest = null; let minDist = Infinity; items.forEach((item) => { const rect = item.getBoundingClientRect(); const itemCenter = rect.top + rect.height / 2; const dist = Math.abs(itemCenter - center); if (dist < minDist) { minDist = dist; closest = item; } }); items.forEach((i) => i.classList.remove('is-active')); if (closest) closest.classList.add('is-active'); }; window.addEventListener('scroll', update, { passive: true }); update(); return () => window.removeEventListener('scroll', update); }, []); return (
NOSOTROS HACEMOS
); } /* ============================================================ 3.5 NOSOTROS ============================================================ */ function Nosotros() { const paragraphs = [ 'Velora es un estudio de diseño estratégico, marketing digital e inteligencia de negocios.', 'Convertimos la complejidad de tu negocio en marca con carácter, presencia digital que genera clientes y decisiones respaldadas por datos reales — no como una agencia que publica contenido, sino como el equipo que diseña el sistema que lo hace funcionar.', 'Si tienes un negocio establecido que ya vende pero que no tiene la presencia, los sistemas ni la marca que merece — ahí es donde entramos. Construimos la estructura que convierte lo que ya funciona en algo que escala.', 'Cada proyecto empieza por ver lo que otros no ven: la estructura invisible detrás de tu negocio. Lo que ya funciona, lo que frena, lo que falta conectar. Desde ahí construimos.']; return (
{paragraphs.map((para, i) =>

{para}

 )}
{e.preventDefault();document.getElementById('proceso')?.scrollIntoView({ behavior: 'smooth', block: 'start' });}} className="nosotros-cta" style={{ display: 'inline-block', marginTop: 32, fontFamily: 'var(--font-inter)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '1px', color: 'var(--color-accent)', fontSize: '15px' }}> CONOCE EL PROCESO →
); } /* ============================================================ RADIAL DIAGRAM — spoke system with Velora star center ============================================================ */ const VELORA_STAR_PATH = "M422.72,190.05c-.11,2.83-2.4,5.12-5.26,5.19-11.1,.29-22.94,.82-37.33,1.79-35.19,2.33-64.03,5.66-90.81,10.49-17.65,3.22-31.71,6.62-44.28,10.7-15.89,5.15-28.81,13.14-43.27,26.67-44.71,41.91-83.33,91.09-119.09,137.88-1.07,1.36-2.65,2.11-4.26,2.11-1.07,0-2.18-.32-3.11-1-2.36-1.65-2.97-4.87-1.4-7.3,7.12-10.95,13.92-21.94,19.01-30.28,11.38-18.58,26.09-43.24,39.34-69.3,.89-1.72,2.04-3.83,3.36-6.26,6.8-12.53,22.76-41.88,12.99-50.36-10.17-8.84-24.88-11.13-39.12-13.39-1.68-.25-3.36-.5-5.01-.79-33.65-5.51-67.76-8.91-99.58-11.81C2.08,194.13-.04,191.76,0,188.94c.07-2.79,2.29-5.12,5.08-5.26,10.88-.57,22.55-1.4,35.69-2.47,34.79-2.86,63.32-6.26,89.84-10.7,17.68-2.94,31.71-5.91,44.28-9.31,17.22-4.69,29.39-11.28,41.99-22.8,45.71-41.63,85.4-92.17,119.01-136.27,1.72-2.29,4.94-2.79,7.27-1.22,2.36,1.61,3.08,4.8,1.57,7.23-4.44,7.37-8.81,14.78-13.17,22.23-15.71,26.92-27.88,48.89-38.33,69.23-.93,1.75-2.26,4.15-3.87,6.98-6.26,11.13-25.27,44.99-16.97,52.55,7.34,6.62,23.44,9.38,35.22,11.42,2.58,.43,5.01,.86,7.16,1.29,32.14,6.26,64.43,9.63,103.01,12.71,2.83,.21,5.01,2.65,4.94,5.51Z"; const RD_CX = 370, RD_CY = 315, RD_R = 200, RD_INNER = 74; // angle: degrees clockwise from right (SVG y-down). lx/ly: label anchor point. ta: textAnchor // Labels = diferenciadores del sistema Velora, no tipos de servicio const RD_SPOKES = [ { angle: 0, label: 'Sistema Propio', lx: 592, ly: 319, ta: 'start' }, { angle: 45, label: '22 Agentes IA', lx: 528, ly: 472, ta: 'start' }, { angle: 90, label: 'Datos Integrados', lx: 370, ly: 538, ta: 'middle' }, { angle: 135, label: 'Una Sola Voz', lx: 212, ly: 472, ta: 'end' }, { angle: 180, label: 'Sin Dependencias', lx: 148, ly: 319, ta: 'end' }, { angle: 225, label: 'Documentación Viva', lx: 212, ly: 158, ta: 'end' }, { angle: 270, label: 'Dirección Humana', lx: 370, ly: 84, ta: 'middle' }, { angle: 315, label: 'Marca + Negocio', lx: 528, ly: 158, ta: 'start' }, ]; function rdEndpoint(angleDeg) { const r = angleDeg * Math.PI / 180; return { x: RD_CX + RD_R * Math.cos(r), y: RD_CY + RD_R * Math.sin(r) }; } // Inner start point — on the ring perimeter, not the center function rdInner(angleDeg) { const r = angleDeg * Math.PI / 180; return { x: RD_CX + RD_INNER * Math.cos(r), y: RD_CY + RD_INNER * Math.sin(r) }; } const RD_LINE_LEN = RD_R - RD_INNER; // 200-74 = 126 function RadialDiagram() { const containerRef = useRef(null); const lineRefs = useRef([]); const dotRefs = useRef([]); const glowRefs = useRef([]); const glowTweens = useRef([]); useEffect(() => { const { gsap, ScrollTrigger } = window; if (!gsap || !ScrollTrigger) return; const container = containerRef.current; if (!container) return; const lines = lineRefs.current.filter(Boolean); const dots = dotRefs.current.filter(Boolean); const glows = glowRefs.current.filter(Boolean); // Initial state lines.forEach(l => { l.style.strokeDasharray = String(RD_LINE_LEN); l.style.strokeDashoffset = String(RD_LINE_LEN); }); dots.forEach(d => { d.style.opacity = '0'; }); glows.forEach(g => { g.style.opacity = '0'; }); const startGlow = () => { const interval = 0.75; // seconds between each dot — slower radial sweep const glowDuration = interval * 8; // 6s — full radial cycle // Dots stay at fixed r=5.5 — no size animation, only the glow halo animates glows.forEach((g, i) => { // Glow halo: opacity blooms then fades (GaussianBlur softened to stdDeviation=2) const gtl = gsap.timeline({ repeat: -1, delay: i * interval }); gtl .to(g, { opacity: 0.55, duration: 0.30, ease: 'power2.out' }) .to(g, { opacity: 0, duration: 0.80, ease: 'power2.in' }) .to(g, { duration: glowDuration - 1.10 }); glowTweens.current.push(gtl); }); }; const tl = gsap.timeline({ scrollTrigger: { trigger: container, start: 'top 88%', toggleActions: 'play none none none' }, onComplete: startGlow, }); tl.to(lines, { strokeDashoffset: 0, duration: 0.75, ease: 'power2.inOut', stagger: 0.09 }) .to(dots, { opacity: 1, duration: 0.3, stagger: 0.09 }, '<0.35'); return () => { glowTweens.current.forEach(tw => tw.kill()); glowTweens.current = []; if (tl.scrollTrigger) tl.scrollTrigger.kill(); tl.kill(); }; }, []); return (
); } /* ============================================================ 4. SISTEMA ============================================================ */ function Sistema() { const pillars = [ { title: 'Estrategia antes de ejecución', body: 'Mapeamos tu modelo de negocio, arquitectura de marca y modelo de datos antes de producir un solo activo. Sin brief estratégico, no hay logo. Sin modelo de datos, no hay campaña.' }, { title: '22 agentes, un solo frente', body: 'Nuestro sistema Velora opera en paralelo: brand, performance, BI y CRM al mismo tiempo. Tú hablas con un estratega; 22 flujos de trabajo se ejecutan simultáneamente.' }, { title: 'Activos que permanecen', body: 'Construimos estándares, no entregables. Brand guidelines, modelos entrenados en tu marca, dashboards y playbooks que siguen generando valor cuando terminamos.' }]; return (
{/* Diagrama — full container width */}
{/* Textos debajo del diagrama */}

«Sistema que trabaja mientras tú atiendes lo que te necesita.»

{pillars.map((p, i) =>
{p.title}
{p.body}
 )}
); } /* ============================================================ 5. SERVICIOS ============================================================ */ function Servicios() { const services = [ { name: 'DIAGNÓSTICO', keywords: ['Análisis estratégico de tu marca en 5 días. El punto de partida antes de cualquier proyecto.'], price: '$9,900 MXN · precio fijo', tiempo: '5 días hábiles', ideal: 'Para negocios que quieren entender su situación real antes de invertir en un proyecto mayor.', includes: [ 'PDF de diagnóstico estratégico de 12–15 páginas', 'Análisis de marca actual: fortalezas y brechas', 'Benchmark de 3 competidores directos', 'Propuesta de posicionamiento diferenciador', 'Recomendación de siguiente paso con justificación', 'Los $9,900 se descuentan si avanzas a BRAND o LAUNCH en 30 días', ] }, { name: 'BRAND', keywords: ['Identidad de marca que hace que todo lo demás tenga coherencia'], price: 'desde $18,000 MXN', tiempo: '3–4 semanas', ideal: 'Para negocios con producto o servicio claro que necesitan una identidad que comunique lo que realmente son.', includes: [ 'Brand Strategy + Dirección Creativa', 'Logo, Paleta de Color, Tipografía e Iconografía', 'Manual de Identidad (Brand Guidelines PDF)', 'Aplicaciones en piezas clave (presentaciones, redes, documentos)', 'Opcionalmente: Landing Page', ] }, { name: 'LAUNCH', keywords: ['De cero a primer cliente en 90 días. Sistema que crece desde el inicio.'], price: 'desde $38,000 MXN', tiempo: '3–4 semanas', ideal: 'Para founders y negocios listos para activar su sistema de captación digital desde el inicio.', includes: [ 'Landing Page de conversión', 'Configuración de métricas y análisis de datos', 'Arquitectura de campañas de publicidad digital lista para activar', 'Opcionalmente: Brand Kit + gestión del primer mes de ads', 'Reporte de lanzamiento a 30 días', ] }, { name: 'SCALE', keywords: ['Continuar creciendo con un sistema que funciona sin perder margen ni identidad.'], price: 'desde $25,000 MXN / mes', tiempo: ['Inicio en 1–2 semanas', 'Mínimo 3 meses de gestión'], ideal: 'Para negocios con presencia digital que quieren crecer de forma sostenida sin perder el control.', includes: [ 'Estrategia de Contenido Mensual + Calendario Editorial', 'Producción y publicación en 2–3 redes sociales', 'Gestión de Paid Media (Meta Ads y/o Google Ads)', 'Reporte mensual con métricas y optimización continua', 'La pauta publicitaria va aparte — tú la controlas directamente', ] }, { name: 'ECOSYSTEM', keywords: ['Control de tus marcas, para que todo tu sistema hable el mismo idioma.'], price: 'desde $38,000 MXN', tiempo: '4–6 semanas de implementación', ideal: 'Para empresas medianas con herramientas desconectadas que necesitan un solo sistema integrado.', includes: [ 'Diagnóstico de sistemas y herramientas actuales', 'Integración de CRM + automatizaciones', 'Dashboards conectados a tus fuentes de datos', 'Flujos comerciales optimizados (onboarding, seguimiento, reportes)', 'Gestión mensual del ecosistema disponible post-implementación', ] }, { name: 'TECH', keywords: ['Infraestructura que facilita tu operación para que te enfoques en lo que importa.'], price: 'desde $30,000 MXN', tiempo: 'Desde 8 semanas (primer entregable)', ideal: 'Para negocios que necesitan una solución digital propia — no un template adaptado.', includes: [ 'Diseño completo de la solución antes de escribir una sola línea de código', 'Desarrollo por etapas con entregables visibles cada 2 semanas', 'Tu producto lanzado, documentado y con todos los accesos transferidos', 'Tecnología elegida según las necesidades reales de tu negocio', 'Soporte y mantenimiento disponible después del lanzamiento', ] }]; return (
{(() => { const [openIndex, setOpenIndex] = useState(null); const toggle = (i) => setOpenIndex(prev => prev === i ? null : i); return (
{services.map((s, i) => toggle(i)} /> )}
); })()}
¿No sabes por cuál empezar?{' '} {e.preventDefault();document.getElementById('contacto')?.scrollIntoView({ behavior: 'smooth' });}} style={{ color: 'var(--color-accent)', textDecoration: 'underline', textUnderlineOffset: 3 }}> Agenda una llamada de 45 minutos {' '}y te orientamos sin costo.
); } function ServiceRow({ name, keywords, price, tiempo, ideal, includes, open, onToggle }) { const [hover, setHover] = useState(false); const scrollToContact = (e) => { e.stopPropagation(); document.getElementById('contacto')?.scrollIntoView({ behavior: 'smooth' }); }; return (
{/* Header row — clickable to toggle */}
setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto auto', alignItems: 'center', gap: 32, paddingTop: 28, paddingBottom: open ? 16 : 28, cursor: 'pointer', userSelect: 'none', }} className="service-grid" >
{name}
{keywords.join(' · ')}
{price &&
{price}
}
+
{/* Expandable panel */}
{/* Left — includes */}
Qué incluye
    {(includes || []).map((item, i) => (
  • — {item}
    • ))}
{/* Right — tiempo + ideal + CTA */}
{tiempo && (
Tiempo de entrega
{Array.isArray(tiempo) ? tiempo.map((t, i) => (
0 ? 4 : 0, fontStyle: i > 0 ? 'italic' : 'normal' }}>{t}
)) :
{tiempo}
}
)} {ideal && (
Ideal para
{ideal}
)}
); } /* ============================================================ 6. PROCESO ============================================================ */ function Proceso() { const steps = [ { n: '01', title: 'Diagnóstico', body: 'Sesión de 45 min con dirección. Mapeamos marca, datos, stack y agencias. Te decimos en qué orden mover qué piezas.' }, { n: '02', title: 'Diseño', body: 'En 4 semanas construimos tu sistema completo: identidad, presencia digital y las herramientas que lo hacen funcionar. Todo documentado para que tú siempre tengas el control.' }, { n: '03', title: 'Despliegue', body: 'Activamos todo lo que construimos: campañas, métricas, presencia digital y las herramientas de tu operación. Te entregamos con capacitación completa y todo documentado para que tu equipo opere desde el primer día.' }, { n: '04', title: 'Dirección', body: 'Revisión mensual. Una sola junta, un solo reporte, un solo responsable. Sin coordinar entre múltiples proveedores — Velora responde por todo.' }]; return (
{/* connector line */}
{steps.map((s, i) => )}
); } function ProcessStep({ step, index }) { const [hover, setHover] = useState(false); return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ position: 'relative', zIndex: 1 }}>
{step.n}
{step.title}
{step.body}
); } /* ============================================================ 8. MARQUEE ============================================================ */ function Marquee({ speed = 12 }) { const phrases = [ 'Construye el sistema', 'Ejecuta más', 'Coordina menos', ]; // Repeat the cycle enough times so the line is always wider than any viewport const cycle = phrases.join(' · ') + ' · '; const line = cycle.repeat(8); const textStyle = { fontFamily: 'var(--font-inter)', fontWeight: 700, fontSize: 'clamp(48px, 6vw, 80px)', color: 'var(--color-text-primary)', lineHeight: 1, letterSpacing: '-1px', whiteSpace: 'nowrap', flexShrink: 0, }; return (
{/* width: max-content makes -50% translate = exactly one copy width */}
{line}
); } /* ============================================================ 9. CONTACTO ============================================================ */ function Contacto({ pushToast }) { const [form, setForm] = useState({ nombre: '', email: '', empresa: '', servicio: '', mensaje: '' }); const [errors, setErrors] = useState({}); const [status, setStatus] = useState('idle'); // idle | loading | success const h2Ref = useRef(null); useEffect(() => { const el = h2Ref.current; if (!el || !window.gsap || !window.ScrollTrigger) return; const inners = el.querySelectorAll('.contacto-line-inner'); window.gsap.set(inners, { yPercent: 115 }); window.gsap.to(inners, { yPercent: 0, duration: 1.3, ease: 'power3.out', stagger: 0.16, scrollTrigger: { trigger: el, start: 'top 88%', toggleActions: 'play none none none' }, }); }, []); const set = (k) => (e) => setForm((p) => ({ ...p, [k]: e.target.value })); const validate = () => { const errs = {}; if (!form.nombre.trim()) errs.nombre = 'Ingresa tu nombre.'; if (!form.email.trim()) errs.email = 'Ingresa tu email.';else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) errs.email = 'Email inválido.'; if (!form.servicio) errs.servicio = 'Selecciona un servicio.'; return errs; }; const submit = (e) => { e.preventDefault(); const errs = validate(); setErrors(errs); if (Object.keys(errs).length) return; setStatus('loading'); setTimeout(() => { setStatus('success'); pushToast('Mensaje recibido — te contactamos en menos de 24h.'); setForm({ nombre: '', email: '', empresa: '', servicio: '', mensaje: '' }); setTimeout(() => setStatus('idle'), 1200); }, 1100); }; const inputBase = { width: '100%', background: 'rgba(26,23,20,0.03)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-input)', padding: '12px 14px', color: 'var(--color-text-primary)', fontFamily: 'var(--font-arimo)', fontSize: 15, transition: 'border-color 150ms ease-out' }; const labelBase = { display: 'block', fontFamily: 'var(--font-arimo)', fontWeight: 700, fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.8px', color: 'var(--color-text-tertiary)', marginBottom: 6 }; return (
Vamos a operar

{['Agenda una llamada.', 'En 45 minutos sabemos exactamente qué mover primero.'].map((line, i) => (
{line}
))}

O llena el formulario y te escribimos para confirmar fecha y hora — generalmente el mismo día.

hola@velorastudio.com.mx
CDMX · QUERETARO · LATAM
{errors.nombre && }
{errors.email && }
{errors.servicio && }