/* global React */ const { useEffect, useRef, useState } = React; // ============ Icon library (minimalist, single-stroke) ============ const I = { arrow: (p={}) => ( ), whatsapp: (p={}) => ( ), wind: (p={}) => ( ), aero: (p={}) => ( ), fabric: (p={}) => ( ), stitch: (p={}) => ( ), drop: (p={}) => ( ), road: (p={}) => ( ), body: (p={}) => ( ), shield: (p={}) => ( ), star: (p={}) => ( ), ig: (p={}) => (), yt: (p={}) => (), st: (p={}) => (), tt: (p={}) => (), ruler: (p={}) => (), bike: (p={}) => (), chat: (p={}) => (), }; // ============ Reveal hook ============ function useReveal() { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver((es) => { es.forEach(e => { if (e.isIntersecting) { el.classList.add('in'); io.unobserve(el); } }); }, { threshold: 0.12 }); io.observe(el); return () => io.disconnect(); }, []); return ref; } // ============ NAV ============ function ThemeToggle() { const getInitial = () => { if (typeof document === 'undefined') return 'dark'; const stored = localStorage.getItem('ciclopro-theme'); if (stored === 'light' || stored === 'dark') return stored; return document.documentElement.getAttribute('data-theme') || 'dark'; }; const [theme, setTheme] = useState(getInitial); useEffect(() => { document.documentElement.setAttribute('data-theme', theme); try { localStorage.setItem('ciclopro-theme', theme); } catch (e) {} }, [theme]); const isLight = theme === 'light'; return ( ); } function Nav() { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 40); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); return ( ); } // ============ HERO ============ function Hero({ heroImg }) { return (
N°/01 — Edición Pro · Temporada 2026 Diseñado en Medellín · Probado en las Palmas
Lat 4°36′N · Long 74°04′W 2,640 m · 12 °C · viento NE

Diseñado
para romper
tus límites.

Uniformes de ciclismo premium creados para máxima comodidad, aerodinámica y rendimiento en cada kilómetro.

Recibir asesoría personalizada Te ayudamos a elegir la talla perfecta por WhatsApp.
+ 2,400
Ciclistas equipados
4.9 ★
Reseñas verificadas
{'< 5 min'}
Respuesta WhatsApp
); } // ============ MARQUEE ============ function Marquee() { const items = [ 'Tela Italiana 4-Way Stretch','Compresión Pro 240 GSM','Costuras Flatlock Selladas', 'Badana Elastic Interface®','Protección UV 50+','Refrigeración Active Mesh', 'Aerodinámica Probada en Túnel','Acabado Hidrofóbico','Cosido en Colombia', ]; const all = [...items, ...items]; return (
{all.map((t, i) => (
{t}
))}
); } // ============ BENEFITS ============ function Benefits() { const ref = useReveal(); const benefits = [ { icon: I.wind, title: 'Tecnología transpirable', desc: 'Mesh Active 3D que extrae humedad y mantiene la piel seca en climas tropicales.' }, { icon: I.aero, title: 'Ajuste aerodinámico', desc: 'Patronaje pre-curvado que reduce arrastre y elimina pliegues en posición de carrera.' }, { icon: I.fabric, title: 'Tela premium 240 GSM', desc: 'Hilatura italiana de alta densidad. Recuperación elástica superior tras cientos de lavados.' }, { icon: I.stitch, title: 'Costuras flatlock', desc: 'Selladas, planas y reforzadas en zonas de fricción. Cero rozaduras en rutas de 6+ horas.' }, { icon: I.drop, title: 'Secado rápido', desc: 'Tratamiento hidrofóbico que evapora sudor 3× más rápido que algodón técnico estándar.' }, { icon: I.road, title: 'Comodidad extrema', desc: 'Construcción ergonómica para ciclistas que entrenan 200+ km semanales sin cansancio textil.' }, { icon: I.body, title: 'Diseño ergonómico', desc: 'Cortes anatómicos por género. Manga raglán que sigue el movimiento natural del hombro.' }, { icon: I.shield, title: 'Badana de alta densidad', desc: 'Multipanel italiana con espumas progresivas. Protección perineal certificada CE.' }, ]; return (
/02 — Tecnología Performance Engineering

Construido
milímetro a
milímetro.

Cada panel de tela, cada costura y cada refuerzo está pensado para una sola cosa: que dejes de pensar en lo que llevas puesto y empieces a pensar en cuánto más puedes durar.

{benefits.map((b, i) => (
{String(i+1).padStart(2,'0')} / 08

{b.title}

{b.desc}

))}
); } // ============ PRODUCTS ============ function Product({ pid, name, tagline, features, specs, images, colorways, badge, reverse, primaryCTA, secondaryCTA, price }) { const [activeIdx, setActiveIdx] = useState(0); const ImgPanel = ({ alignRight }) => (
{badge}
Colorways {colorways.map((c, i) => ( setActiveIdx(i)} style={{ background: c.hex, cursor: 'pointer', outline: activeIdx === i ? '2px solid var(--accent)' : '2px solid transparent', outlineOffset: 3, transition: 'outline 0.2s', }} title={c.name} > ))}
Ref. {pid} · {colorways[activeIdx].name}
); return (
{!reverse && }
P/{pid} Edición Pro · 2026

{name}

{tagline}

{specs.map((s, i) => (
{s.l} {s.v}
))}
{features.map((f, i) => {f})}
Desde {price} · consulta cuotas
{primaryCTA} {secondaryCTA}
{reverse && }
); } function Products() { const ref = useReveal(); return (
/03 — Colección Edición Pro 2026

Dos piezas.
Cero compromisos.

Producción limitada. Cada uniforme se confecciona bajo pedido para garantizar ajuste, color y desempeño consistentes en cada unidad que sale del taller.

Pro Jersey
Aero/Lite} tagline="El jersey más rápido que hemos construido. Patrón pre-curvado, mangas comprimidas y tejido italiano que se mueve contigo." badge="Best Seller" features={[ 'Mangas comprimidas con borde láser', 'Tres bolsillos traseros + bolsillo seguro impermeable', 'Cremallera YKK® camlock con anti-abertura', 'Banda inferior siliconada antideslizante', ]} specs={[ { l: 'Peso', v: '142 g' }, { l: 'Tela', v: '240 GSM IT' }, { l: 'Tallas', v: 'XS — 3XL' }, { l: 'Genero', v: 'Hombre / Mujer' }, ]} images={[ 'images/jersey-negro.avif', 'images/jersey-salmon.avif', 'images/jersey-vinotinto.avif', ]} colorways={[ { name: 'Negro', hex: '#0f0f0f' }, { name: 'Salmón', hex: '#E8735A' }, { name: 'Vinotinto', hex: '#6B1B2A' }, ]} primaryCTA="Hablar por WhatsApp" secondaryCTA="Ver ficha técnica" price="$ 89.000" /> Endurance
Bib Short} tagline="Pantaloneta con tirantes para rutas largas. Badana italiana multidensidad y compresión gradual de muslos para músculos frescos al kilómetro 100." badge="Long Distance" features={[ 'Badana Elastic Interface® Pro 4 horas+', 'Compresión gradual zonificada en muslos', 'Tirantes mesh ultra-livianos sin presión', 'Perneras láser con grippers de silicona', ]} specs={[ { l: 'Densidad', v: '180 kg/m³' }, { l: 'Paneles', v: '8 anatómicos' }, { l: 'Tallas', v: 'XS — 3XL' }, { l: 'Genero', v: 'Hombre / Mujer' }, ]} images={[ 'images/pantaloneta-azul.webp', 'images/pantaloneta-gris.webp', 'images/pantaloneta-negra.webp', ]} colorways={[ { name: 'Azul', hex: '#1B3A6B' }, { name: 'Gris', hex: '#8A8A8A' }, { name: 'Negro', hex: '#0f0f0f' }, ]} primaryCTA="Elegir mi talla" secondaryCTA="Ver badana" price="$ 109.000" />
); } // ============ ASESORÍA ============ function Asesoria() { const ref = useReveal(); return (
/04 — Asesoría Atención humana 1:1

No solo vendemos uniformes.
Te ayudamos a encontrar el tuyo.

CP
Andrés · Ciclo Pro En línea — responde en {'< 5 min'}
Hola, me interesa el Pro Jersey. Mido 1.78 m y peso 72 kg, ¿qué talla me recomiendas? 9:42 AM
¡Hola! 👋 Con esa medida y un fit aero ajustado te calza perfecto talla M. ¿Lo usas más en ruta o entrenamiento intervalado? 9:43 AM
Ruta de 80–120 km los domingos. 9:43 AM
Perfecto. Te recomiendo el combo Aero/Lite + Endurance Bib. Te paso ficha técnica y opciones de color en un momento. 9:44 AM

Cada ciclista tiene un cuerpo, un terreno y una meta diferentes. Por eso no usamos calculadoras de talla automáticas: hablamos contigo, entendemos tu ruta y te recomendamos el uniforme que de verdad va a funcionar.

{[ { n:'01', t:'Cuéntanos tu medida y disciplina', d:'Estatura, peso, tipo de ruta, kilometraje semanal.', icon: I.chat }, { n:'02', t:'Recibe recomendación personalizada', d:'Talla exacta, fit (race / endurance) y combinación ideal.', icon: I.ruler }, { n:'03', t:'Confirmas y producimos para ti', d:'Pago seguro y envío a toda Colombia en 3–5 días hábiles.', icon: I.bike }, ].map(s => (
{s.n}
{s.t}
{s.d}
))}
Iniciar conversación Guía de tallas
); } // ============ EMOTIONAL ============ function Emotional({ img }) { return (
/05 — Manifesto

No se trata de
llegar más lejos.
Se trata de quién
te conviertes
en el camino.

Ciclo Pro · Manifiesto 2026
); } // ============ SOCIAL PROOF ============ function SocialProof() { const ref = useReveal(); const stars = (n=5) => Array.from({length:n}).map((_,i) => ); return (
/06 — Comunidad Pelotón Ciclo Pro

Ciclistas reales.
Kilómetros reales.

2,400+
Ciclistas equipados
4.9/5
Reseñas verificadas
17k
Km de prueba en ruta
98%
Recompra al año
{[ { q: 'El jersey Aero/Lite es lo más cómodo que he probado. La asesoría por WhatsApp acertó la talla a la primera y los acabados son nivel europeo.', n: 'Daniela R.', r: 'Cat. Élite — Bogotá', a: 'DR' }, { q: 'Llevo 4,000 km con la pantaloneta Endurance y la badana sigue intacta. Acompañamiento humano de principio a fin, eso ya casi nadie lo hace.', n: 'Mateo G.', r: 'Triatleta — Medellín', a: 'MG' }, { q: 'Probé Rapha y MAAP. Ciclo Pro está al mismo nivel y con servicio personalizado. La diferencia se nota en rutas largas a Sopó.', n: 'Sebastián V.', r: 'Gran Fondo — Cali', a: 'SV' }, ].map((t, i) => (
{stars()}

"{t.q}"

{t.a}
{t.n} {t.r}
))}
Equipos y eventos que nos ruedan
◆ Andes Cycling Team ▲ Gran Fondo Sopó ● Pelotón Suba ◇ Bogotá Cyclery ⏣ Vuelta Cundinamarca
); } // ============ URGENCY ============ function Urgency() { return (
Edición limitada · Drop 02 Producción 2026 · 320 unidades en circulación · alta demanda esta temporada.
Inventario asignado 78% reservado
); } // ============ FINAL CTA ============ function FinalCTA({ img }) { return (
/07 — Próxima ruta

Tu próxima
mejor ruta
comienza aquí.

Asesoría personalizada para encontrar el uniforme perfecto para ti. Hablamos por WhatsApp y te acompañamos hasta el primer kilómetro.

Comprar por WhatsApp Respuesta rápida y atención personalizada — lun a sáb · 8 a.m. — 8 p.m.
Tu experiencia incluye
{[ { t: 'Asesoría 1:1 por WhatsApp', d: 'Talla, color y combinación ideal.', icon: I.chat }, { t: 'Envío seguro a toda Colombia', d: '3–5 días hábiles. Cambio de talla sin costo.', icon: I.bike }, { t: 'Garantía de costuras 12 meses', d: 'Si algo falla, lo reparamos o reemplazamos.', icon: I.shield }, ].map((it, i) => (
{it.t} {it.d}
))}
); } // ============ FOOTER ============ function Footer() { return ( ); } // ============ WhatsApp Float ============ function WhatsAppFloat() { return ( Asesoría WhatsApp ); } Object.assign(window, { Nav, Hero, Marquee, Benefits, Products, Asesoria, Emotional, SocialProof, Urgency, FinalCTA, Footer, WhatsAppFloat, I });