// sections.jsx — Pantone Print Lab · todas las secciones const { useState, useEffect, useRef } = React; /* ════════════════════════ DATOS ════════════════════════ */ const BRAND_PANTONES = [ { code: '2768', label: 'Dark Blue Horizon', hex: '050F4B', rgb: '05 · 15 · 75', cmyk: '100 · 90 · 13 · 71', color: '#050F4B' }, { code: '2175', label: 'Blue Horizon', hex: '005FFF', rgb: '00 · 95 · 255', cmyk: '99 · 47 · 00 · 00', color: '#005FFF' }, { code: '299', label: 'Light Blue', hex: '00C8FF', rgb: '00 · 200 · 255',cmyk: '86 · 08 · 00 · 00', color: '#00C8FF' }, { code: '2706', label: 'White Blue', hex: 'D2E1F0', rgb: '210 · 225 · 240',cmyk: '19 · 10 · 00 · 00', color: '#D2E1F0' }, ]; /* ════════════════════════ LOGO ════════════════════════ */ function LogoMark({ size = 32, color = 'currentColor' }) { return ( ); } function Logo({ light = false }) { return ( Role Machine ); } /* ════════════════════════ HEADER ════════════════════════ */ function Header({ onJump }) { const [open, setOpen] = useState(false); const links = [ ['Quiénes Somos', 'quienes-somos', false], ['Impresión', 'impresion', false], ['Promocionales', 'promocionales', false], ['Gran Formato', 'gran-formato', false], ['Blog', 'blog', 'external'], ['Contacto', 'contacto', 'external'], ]; return (
{/* Top utility bar */}
{/* LEFT: phones */}
045 014 555
{/* CENTER: animated slogan */}
{(() => { const phrases = [ 'tu marca se imprime mejor en role', 'Impresión Offset y Digital', 'Impresión en alto relieve', 'Tecnología UV', 'Gran formato y promocionales', ]; // Duplicado 2x para loop infinito sin cortes const loop = [...phrases, ...phrases]; return loop.map((phrase, i) => ( {phrase} )); })()}
{/* RIGHT: socials */}
{[ { kind: 'instagram', href: 'https://instagram.com/rolemachine', label: 'Instagram' }, { kind: 'linkedin', href: 'https://linkedin.com/company/rolemachine', label: 'LinkedIn' }, { kind: 'tiktok', href: 'https://tiktok.com/@rolemachine', label: 'TikTok' }, ].map(s => ( ))}
{ e.preventDefault(); onJump('top'); }}> {/* Desktop nav */} {/* Mobile hamburger */}
{/* Mobile overlay */}
{links.map(([label, id, external]) => ( { if (external !== 'external') { e.preventDefault(); setOpen(false); onJump(id); } else { setOpen(false); } }} style={{ padding: '14px 8px', fontFamily: 'var(--sans)', fontSize: 18, fontWeight: 700, color: 'var(--ink)', borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', }}> {label} {external === 'external' && ( )} ))}
); } /* ════════════════════════ HERO ════════════════════════ */ function Hero({ onJump }) { const slides = [ { img: 'assets/hero-1.png', headline: 'Imprimimos', italic: 'ideas', tail: 'con propósito.', sub: 'Empaques, papelería, gran formato y merchandising corporativo.', }, { img: 'assets/hero-3.png', headline: 'Empaques que', italic: 'cuentan', tail: 'tu historia.', sub: 'Cajas, bolsas, etiquetas y papel de seda — troquelados y personalizados para tu marca.', }, { img: 'assets/hero-2.png', headline: 'Identidad de marca', italic: 'para', tail: 'restaurantes.', sub: 'Cartas, individuales, porta-cubiertos y posavasos. Piezas pensadas para la mesa.', }, ]; const [idx, setIdx] = useState(0); useEffect(() => { const id = setInterval(() => setIdx(i => (i + 1) % slides.length), 5500); return () => clearInterval(id); }, []); const s = slides[idx]; return (
{/* Imagen de productos full bleed */}
{slides.map((sl, i) => ( ))} {/* Overlay para legibilidad del texto */}
{/* Bottom fade para stats */}
{/* Contenido encima */}
{/* TOP */}
Imprenta · Guayaquil {String(idx + 1).padStart(2, '0')} / {String(slides.length).padStart(2, '0')}
{/* MIDDLE: headline */}

{s.headline}
{s.italic} {s.tail}

{s.sub}

{/* BOTTOM: stats + slider dots */}
{[ { n: '15+', l: 'Años' }, { n: '50+', l: 'Tiraje mínimo' }, { n: '24h', l: 'Cotización' }, ].map(st => (
{st.n} {st.l}
))}
{/* Slider dots */}
{slides.map((_, i) => (
); } function ArrowDown() { return ( ); } function BrandPantoneStrip() { return (
PALETA OFICIAL · 4 PANTONES FIG. 01
{BRAND_PANTONES.map((p, i) => )}
); } function PantoneCard({ code, label, hex, rgb, cmyk, color, delay = 0, dark = false }) { return (
{dark &&
}
PANTONE®
{label}
HEX {hex}
RGB {rgb}
PANTONE {code}C
CMYK {cmyk}
); } /* ════════════════════════ TICKER ════════════════════════ */ function HexIcon({ size = 22, color = 'currentColor' }) { return ( ); } function Ticker() { const items = [ 'Offset', 'Digital', 'Gran formato', 'Empaques', 'Etiquetas', 'Papelería', 'Promocionales', 'Roll-ups', 'Vinilos', 'Cajas', 'Volantes', ]; return (
{[...items, ...items, ...items].map((it, i) => ( {it} ))}
); } /* ════════════════════════ EDIFICIO HQ ════════════════════════ */ function Edificio() { const [tilt, setTilt] = useState({ x: 0, y: 0 }); const ref = useRef(null); const onMove = (e) => { if (!ref.current) return; const r = ref.current.getBoundingClientRect(); const cx = r.left + r.width / 2; const cy = r.top + r.height / 2; const dx = (e.clientX - cx) / r.width; const dy = (e.clientY - cy) / r.height; setTilt({ x: dy * -3, y: dx * 5 }); }; const reset = () => setTilt({ x: 0, y: 0 }); return (
Sede Role Machine — Guayaquil {/* Gradient overlay */}
{/* Halo cyan */}
{/* TOP LEFT badge */}
Nuestra sede · Guayaquil
{/* BOTTOM */}

Printing
Visions.

Visítanos
Av. de las Américas #904
y Carlos Luis Plaza Dañín
Guayaquil — Ecuador
); } /* ════════════════════════ SOSTENIBILIDAD ════════════════════════ */ function Sostenibilidad() { return (
{/* Card verde */}
Compromiso ambiental
Crecer
responsablemente
{[ { n: '-40%', l: 'Residuos' }, { n: '100%', l: 'Tintas eco' }, { n: '+15', l: 'Años reciclando' }, ].map(s => (
{s.n}
{s.l}
))}
{/* Texto */}
Sostenibilidad

Imprimimos
con conciencia.

Integramos procesos responsables que optimizan recursos y reducen el impacto ambiental, sin comprometer calidad ni eficiencia.

Porque hoy, crecer también implica hacerlo de forma inteligente. Cada decisión en la imprenta —desde el papel hasta los acabados— se piensa con un futuro más limpio en mente.

{[ { icon: '🌱', t: 'Papel reciclado', d: 'Certificado FSC en empaques' }, { icon: '💧', t: 'Tintas a base de agua', d: 'Sin solventes agresivos' }, { icon: '♻️', t: 'Reciclaje activo', d: 'Recortes y residuos clasificados' }, { icon: '⚡', t: 'Energía optimizada', d: 'Equipos de bajo consumo' }, ].map(c => (
{c.icon}
{c.t}
{c.d}
))}
); } /* ════════════════════════ QUIÉNES SOMOS ════════════════════════ */ function QuienesSomos() { return (
{/* Top: title left + lead right */}
Quiénes somos · EST. 2010

Una imprenta
con propósito.

Somos Role Machine — una imprenta guayaquileña con quince años convirtiendo ideas en piezas tangibles. Trabajamos con marcas, agencias y emprendedores que buscan calidad y atención al detalle.

Empaques, gran formato, papelería corporativa, merchandising y soluciones para restaurantes. Asesoría en cada etapa: desde el arte hasta el acabado.

{/* Mini stats grid (compacto) + collage de fotos */}
{[ { n: '15+', l: 'Años de experiencia', s: '2010 — 2026' }, { n: '5k+', l: 'Proyectos entregados', s: 'Marcas y agencias' }, { n: '50+', l: 'Tiraje mínimo', s: 'Flexible para makers' }, { n: '24h', l: 'Tiempo de cotización', s: 'Por WhatsApp o email' }, ].map((s, i) => (
{s.n}
{s.l}
{s.s}
))}
{/* Collage de fotos del equipo + edificio */}
Detrás de cada impresión
{[ 'assets/edificio.png', 'assets/equipo-01-administrativo.png', 'assets/equipo-03-heidelberg.png', 'assets/equipo-04-uv.png', 'assets/equipo-02-gran-formato.png', 'assets/equipo-05-acabados.png', 'assets/equipo-06-diseno.png', 'assets/equipo-07-canon.png', 'assets/equipo-08-heidelberg2.png', ].map((src, i) => (
e.preventDefault()}/>
))}
{/* CLIENTES MARQUEE */}
Nuestros clientes · 100+ marcas Marcas, agencias y empresas que confían en nosotros
{(() => { const logos = Array.from({ length: 26 }, (_, i) => `assets/clientes/${String(i + 1).padStart(2, '0')}.png`); const loop = [...logos, ...logos]; return loop.map((src, i) => ( )); })()}
{/* TECNOLOGÍA / MÁQUINAS */}
Tecnología · Maquinaria de impresión Equipos de clase mundial al servicio de tu marca
{[ { name: 'Heidelberg', img: 'assets/maq-heidelberg.png' }, { name: 'Canon', img: 'assets/maq-canon.png' }, { name: 'Mimaki', img: 'assets/maq-mimaki.png' }, { name: 'Shinohara', img: 'assets/maq-shinohara.png' }, ].map(t => ( {t.name} ))}
); } /* ════════════════════════ SERVICIOS / IMPRESIÓN ════════════════════════ */ function Servicios({ onJump }) { const cats = [ { id: '01', code: 'IMP-01', name: 'Empaques', italic: 'a medida', desc: 'Cajas plegables, etiquetas troqueladas, bolsas kraft, papel antigrasa.', color: 'var(--blue)', textColor: '#fff', tags: ['Cajas plegables', 'Etiquetas', 'Antigrasa', 'Bolsas'], img: 'assets/imp-01-empaques.png' }, { id: '02', code: 'IMP-02', name: 'Papelería', italic: 'corporativa', desc: 'Tarjetas, cuadernos, carpetas, sobres y hojas membretadas.', color: 'var(--navy)', textColor: '#fff', tags: ['Tarjetas', 'Cuadernos', 'Membretes', 'Carpetas'], img: 'assets/imp-02-papeleria.png' }, { id: '03', code: 'IMP-03', name: 'Publicitaria', italic: 'masiva', desc: 'Volantes, trípticos, menús, afiches, revistas y libros.', color: 'var(--cyan)', textColor: 'var(--navy)', tags: ['Volantes', 'Trípticos', 'Afiches', 'Menús'], img: 'assets/imp-03-publicitaria.png' }, { id: '04', code: 'IMP-04', name: 'Restaurantes', italic: 'menús', desc: 'Cartas, individuales, manteles personalizados, manga, vasos.', color: 'var(--pale)', textColor: 'var(--navy)', tags: ['Cartas', 'Individuales', 'Vasos', 'Mangas'], img: 'assets/imp-04-restaurantes.png' }, { id: '05', code: 'IMP-05', name: 'Alto relieve UV', italic: 'Mimaki', desc: 'UV 3D selectivo, relieve, brillo y textura premium. Etiquetas y empaques con efectos táctiles.', color: 'var(--blue)', textColor: '#fff', tags: ['UV 3D', 'Selectivo', 'Relieve', 'Mimaki'], img: 'assets/imp-05-uv.png' }, ]; return (
Catálogo principal · 05 categorías

Todo lo que
imprimimos.

Solicitar catálogo →
{cats.map(c => )}
); } function ServicioCard({ id, code, name, italic, desc, color, textColor, tags, img }) { const [hover, setHover] = useState(false); return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ background: color, color: textColor, borderRadius: 18, minHeight: 520, display: 'flex', flexDirection: 'column', transition: 'transform 0.3s ease, box-shadow 0.3s ease', transform: hover ? 'translateY(-6px)' : 'translateY(0)', boxShadow: hover ? '0 24px 60px rgba(5,15,75,0.25)' : '0 6px 24px rgba(5,15,75,0.10)', position: 'relative', overflow: 'hidden', }}> {/* Imagen al medio-arriba */}
{name} {/* top labels overlay sobre imagen */}
{/* Cuerpo */}
{name}
{italic}

{desc}

{tags.map(t => ( {t} ))}
); } function ArrowDiag({ color }) { return ( ); } /* ════════════════════════ PROMOCIONALES ════════════════════════ */ function Promocionales() { const items = [ { id: 'cuadernos', name: 'Cuadernos · Libretas', desc: 'Pasta dura, suave o anillada. A5 / A6. Personalizables.', refs: 8, color: 'var(--navy)', textColor: '#fff', img: 'assets/promo-01-cuadernos.png' }, { id: 'termos', name: 'Tomatodos · Termos', desc: 'Acero inoxidable, doble pared, 350–750ml.', refs: 12, color: 'var(--cyan)', textColor: 'var(--navy)', img: 'assets/promo-02-termos.png' }, { id: 'bolsos', name: 'Bolsos · Sport bag', desc: 'Tote bags, mochilas ejecutivas, neceseres.', refs: 6, color: 'var(--blue)', textColor: '#fff', img: 'assets/promo-03-bolsos.png' }, { id: 'plumas', name: 'Plumas · Bolígrafos', desc: 'Ejecutivos, ecológicos, metálicos, gel.', refs: 9, color: 'var(--navy)', textColor: '#fff', img: 'assets/promo-04-plumas.png' }, { id: 'gorras', name: 'Gorras · Textiles', desc: 'Bordado o sublimación. Trucker caps y más.', refs: 5, color: 'var(--blue)', textColor: '#fff', img: 'assets/promo-05-gorras.png' }, { id: 'llaveros', name: 'Llaveros · Pop sockets',desc: 'Metálicos, cuero o silicona. Láser o tampografía.', refs: 7, color: 'var(--navy)', textColor: '#fff', img: 'assets/promo-06-llaveros.png' }, { id: 'calendarios',name: 'Calendarios', desc: 'Triangulares, de pared, pasta dura o suave.', refs: 4, color: 'var(--cyan)', textColor: 'var(--navy)', img: 'assets/promo-07-calendarios.png' }, { id: 'bolsas', name: 'Bolsas · Empaques', desc: 'Kraft con y sin asas, papel de regalo, cajas premium.', refs: 6, color: 'var(--blue)', textColor: '#fff', img: 'assets/promo-08-bolsas.png' }, ]; return (
Merchandising corporativo · 57+ referencias

Tu marca,
objeto cotidiano.

Cuadernos, termos, bolsos, plumas, gorras y más — todos con tu identidad bordada, grabada o impresa.

{items.map(it => )}
); } function DescargarCatalogoCard() { const [hover, setHover] = useState(false); return ( setHover(true)} onMouseLeave={() => setHover(false)} style={{ background: '#fff', color: 'var(--navy)', borderRadius: 14, minHeight: 320, display: 'flex', flexDirection: 'column', transition: 'transform 0.25s ease, box-shadow 0.25s ease', transform: hover ? 'translateY(-4px)' : 'translateY(0)', boxShadow: hover ? '0 24px 60px rgba(5,15,75,0.25)' : '0 6px 24px rgba(5,15,75,0.10)', position: 'relative', overflow: 'hidden', border: '1px solid rgba(5,15,75,0.08)', }}> {/* Imagen */}
Descargar catálogo
PDF · 38 páginas
Descargar catálogo

Recibe el catálogo completo de promocionales por WhatsApp.

); } function PromoCard({ name, desc, refs, color, textColor, img }) { const [hover, setHover] = useState(false); return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ background: color, color: textColor, borderRadius: 14, minHeight: 320, display: 'flex', flexDirection: 'column', transition: 'transform 0.25s ease, box-shadow 0.25s ease', transform: hover ? 'translateY(-4px)' : 'translateY(0)', boxShadow: hover ? '0 18px 50px rgba(5,15,75,0.18)' : '0 4px 18px rgba(5,15,75,0.06)', position: 'relative', overflow: 'hidden', }}> {/* Imagen */}
{img && ( {name} )}
{/* Cuerpo */}
{name}

{desc}

); } /* ════════════════════════ GRAN FORMATO ════════════════════════ */ function GranFormato() { const items = [ { id: 'rollup', name: 'Roll-up Lonas', spec: 'Brillo · Mate · PET', img: 'assets/gf-01-rollup.png' }, { id: 'banner', name: 'Banner X', spec: 'Brillo · Mate', img: 'assets/gf-02-banner.png' }, { id: 'counter', name: 'Counter', spec: 'PVC reforzado', img: 'assets/gf-03-counter.png' }, { id: 'backing', name: 'Backing', spec: 'Aluminio + Lona', img: 'assets/gf-04-backing.png' }, { id: 'anforas', name: 'Ánforas publicitarias', spec: 'Cartón corrugado', img: 'assets/gf-05-anforas.png' }, { id: 'señaletica',name: 'Señalética', spec: 'PVC · Acrílico · Vinil', img: 'assets/gf-06-senaletica.png' }, { id: 'arenado', name: 'Arenado', spec: 'Vinil esmerilado', img: 'assets/gf-07-arenado.png' }, { id: 'vinil', name: 'Vinil de corte', spec: 'Polimérico', img: 'assets/gf-08-vinil.png' }, { id: 'ruleta', name: 'Ruletas', spec: 'MDF + impresión', img: 'assets/gf-09-ruletas.png' }, { id: 'exhibidor', name: 'Exhibidores', spec: 'Cartón · PVC', img: 'assets/gf-10-exhibidores.png' }, { id: 'dummies', name: 'Dummies', spec: 'Producto de exhibición', img: 'assets/gf-11-dummies.png' }, ]; return (
Gran formato · Branding alto impacto

Tu marca,
a escala real.

Todo para transformar tu marca en presencia física: desde un roll-up portátil hasta el branding completo de tu showroom.

{/* Items grid */}
{items.map((it, i) => )}
); } function BigStats() { return (
{[ { n: '15+', l: 'Años imprimiendo' }, { n: '50+', l: 'Tiraje mínimo' }, { n: '24h', l: 'Cotización' }, ].map(s => (
{s.n} {s.l}
))}
); } function GFCard({ name, spec, img, idx, total }) { const [hover, setHover] = useState(false); return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: 'flex', flexDirection: 'column', cursor: 'default', borderRight: '1px solid rgba(255,255,255,0.15)', borderBottom: '1px solid rgba(255,255,255,0.15)', background: 'var(--navy)', overflow: 'hidden', position: 'relative', alignSelf: 'start', }}> {/* Imagen */}
{img && ( {name} )}
{/* Texto */}
{name}
{spec}
); } /* ════════════════════════ BLOG ════════════════════════ */ function Blog() { const posts = [ { id: 'alto-relieve-uv-mimaki', cat: 'Tecnología', date: '20 may 2026', title: 'Etiquetas de alto relieve UV con tecnología Mimaki', excerpt: 'Stickers UV, etiquetas con textura 3D, brillo selectivo y acabados premium. La última tecnología Mimaki llegó a Role Machine.', cover: 'var(--blue)', img: 'assets/blog-05-uv.png', readTime: '5 min', featured: true, }, { id: 'material-empaque', cat: 'Tendencias', date: '12 may 2026', title: 'Cómo elegir el material correcto para tu empaque', excerpt: 'Couché, kraft, sulfato o cartulina rígida. Cada sustrato cambia la personalidad de tu producto. Te contamos cuándo usar cada uno.', cover: 'var(--blue)', img: 'assets/blog-01-material.png', readTime: '4 min', featured: true, }, { id: 'sangrado-area-segura', cat: 'Guía técnica', date: '28 abr 2026', title: 'Sangrado y área segura: lo básico antes de imprimir', excerpt: 'Los 3mm que hacen la diferencia entre un trabajo profesional y uno que se ve descuidado al cortar.', cover: 'var(--navy)', img: 'assets/blog-02-sangrado.png', readTime: '3 min', }, { id: 'smile-caso', cat: 'Casos de estudio', date: '15 abr 2026', title: 'Smile Estética Dental: 4 años imprimiendo material corporativo', excerpt: 'Cómo construimos una relación de confianza con una de las clínicas dentales más reconocidas de Guayaquil.', cover: 'var(--cyan)', img: 'assets/blog-03-smile.png', readTime: '5 min', }, { id: 'top-promocionales-2026', cat: 'Promocionales', date: '02 abr 2026', title: 'Top 5 promocionales corporativos para 2026', excerpt: 'Termos, libretas ecológicas y tote bags lideran la demanda este año. Te mostramos las tendencias.', cover: 'var(--blue)', img: 'assets/blog-04-promos.png', readTime: '6 min', }, ]; return (
Blog · Artículos y novedades

Aprende sobre
impresión.

Ver todos los artículos →
{posts.map((p, i) => )}
); } function BlogCard({ id, cat, date, title, excerpt, cover, img, readTime, featured, idx }) { const [hover, setHover] = useState(false); return ( setHover(true)} onMouseLeave={() => setHover(false)} style={{ background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 18, overflow: 'hidden', display: 'flex', flexDirection: 'column', transition: 'transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease', transform: hover ? 'translateY(-4px)' : 'translateY(0)', boxShadow: hover ? '0 18px 50px rgba(5,15,75,0.15)' : '0 4px 18px rgba(5,15,75,0.04)', borderColor: hover ? 'var(--line-2)' : 'var(--line)', cursor: 'pointer', color: 'inherit', textDecoration: 'none', }}> {/* Cover */}
{img && ( {title} )} {/* Cat chip */}
{cat}
{/* Body */}
{date} · {readTime} de lectura

{title}

{excerpt}

Leer artículo
); } function Proceso() { const steps = [ { n: '01', t: 'Cuéntanos tu proyecto', d: 'Envíanos un brief o referencias por WhatsApp. Te respondemos en menos de 24 horas.', img: 'assets/proceso-01.svg' }, { n: '02', t: 'Cotización y materiales', d: 'Asesoría sobre sustrato, acabado, tiraje y plazos. Cotización formal por escrito.', img: 'assets/proceso-02.svg' }, { n: '03', t: 'Aprobación de arte', d: 'Revisamos archivos, verificamos sangrado y áreas seguras. Prueba digital incluida.', img: 'assets/proceso-03.svg' }, { n: '04', t: 'Impresión y entrega', d: 'Offset, digital o gran formato según tu trabajo. Entrega 48–96 hrs a todo Ecuador.', img: 'assets/proceso-04.svg' }, ]; return (
4 pasos · del brief al envío

Cómo funciona.

{steps.map((s, i) => { const bg = i === 0 ? 'var(--blue)' : i === 1 ? 'var(--cyan)' : i === 2 ? 'var(--pale)' : 'var(--navy)'; const fg = i === 1 || i === 2 ? 'var(--navy)' : '#fff'; return (
{/* Top: número + paso */}
{s.n} PASO
{/* Imagen central */}
{s.t}
{/* Texto abajo */}
{s.t}

{s.d}

); })}
); } /* ════════════════════════ TESTIMONIOS ════════════════════════ */ function Testimonios() { const ts = [ { q: 'Quería agradecerles, estamos encantados con su trabajo. Material de excelente calidad y atención excepcional.', a: 'Grupo Carrera Villacis', r: 'CEO' }, { q: 'En Role encontré lo que necesitaba: calidad y cuidado en cada detalle. Decidí realizar grandes pedidos con ellos.', a: 'WENS Consulting', r: 'CEO' }, { q: 'Llevamos desde 2022 imprimiendo nuestros cuadernos y agendas. Quedan recomendados al 100%.', a: 'Pharmedic', r: 'Comunicación' }, ]; return (
15 años, miles de tirajes

Lo que dicen
nuestros clientes.

{ts.map((t, i) => (
"
{t.q}
{t.a}
{t.r}
))}
); } /* ════════════════════════ CONTACTO (FORMULARIO) ════════════════════════ */ function Contacto() { const [submitting, setSubmitting] = useState(false); const [sent, setSent] = useState(false); const [form, setForm] = useState({ email: '', nombre: '', empresa: '', mensaje: '' }); const update = (k, v) => setForm(f => ({ ...f, [k]: v })); const handleSubmit = (e) => { e.preventDefault(); if (submitting) return; setSubmitting(true); // Por ahora abre WhatsApp pre-llenado. Cuando tengas backend, cambiar por fetch(). const text = `Hola Role Machine, soy ${form.nombre}` + (form.empresa ? ` de ${form.empresa}` : '') + `.\n\n${form.mensaje}\n\nContacto: ${form.email}`; const url = `https://wa.me/593962865530?text=${encodeURIComponent(text)}`; window.open(url, '_blank'); setTimeout(() => { setSent(true); setSubmitting(false); }, 600); }; return (
{/* Izquierda: texto */}
Contáctanos

Hablemos
de tu proyecto.

Estamos aquí para responder tus preguntas, discutir tus objetivos y explorar formas en que podemos trabajar juntos para darle vida a tu visión.

Horario de atención
Lunes – Viernes
9:00 AM – 5:00 PM
Taller
Av. de las Américas #904
Cdla. Albatros Mz. 33 Sl.15
Guayaquil, Ecuador
{/* CTA Bolsa de trabajo */}
💼 Bolsa de trabajo
¿Quieres unirte al equipo? Postula aquí.
Postular →
{/* Derecha: formulario */}
{/* Halo decorativo */}
{sent ? (

¡Mensaje enviado!

Te respondemos por WhatsApp en menos de 24 horas.

) : (
update('email', v)} type="email" placeholder="tu@correo.com"/> update('nombre', v)} placeholder="Tu nombre"/> update('empresa', v)} placeholder="Empresa (opcional)"/> update('mensaje', v)} textarea placeholder="Cuéntanos sobre tu proyecto..."/>
)}
); } function FormField({ label, required, value, onChange, type = 'text', placeholder, textarea }) { const [focused, setFocused] = useState(false); const inputStyle = { width: '100%', appearance: 'none', border: focused ? '1.5px solid var(--blue)' : '1.5px solid var(--line-2)', borderRadius: 999, padding: '14px 20px', fontFamily: 'var(--sans)', fontSize: 14, color: 'var(--ink)', background: '#fff', outline: 'none', transition: 'border-color 0.18s ease, box-shadow 0.18s ease', boxShadow: focused ? '0 0 0 4px rgba(0,95,255,0.10)' : 'none', resize: textarea ? 'vertical' : 'none', minHeight: textarea ? 120 : undefined, fontWeight: 400, }; if (textarea) { inputStyle.borderRadius = 14; inputStyle.paddingTop = 14; inputStyle.paddingBottom = 14; } return (
{textarea ? (