{/* Depth echo layers */}
{echoLayers.map((e, i) =>
);
}
// ───────────── HERO ─────────────
function FHero({ content }) {
const tweaks = React.useContext(window.TweaksCtx) || {};
const heroRef = React.useRef(null);
const canvasRef = React.useRef(null);
const progress = useScrollProgress(heroRef);
const [mouse, setMouse] = React.useState({ x: 0.5, y: 0.5 });
// Particle network canvas
React.useEffect(() => {
const c = canvasRef.current;
if (!c) return;
const ctx = c.getContext('2d');
let w, h, raf;
const dpr = Math.min(2, window.devicePixelRatio || 1);
const resize = () => {
const r = c.getBoundingClientRect();
w = r.width;h = r.height;
c.width = w * dpr;c.height = h * dpr;
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
};
resize();
const ro = new ResizeObserver(resize);
ro.observe(c);
const N = 48;
const pts = Array.from({ length: N }, () => ({
x: Math.random() * w, y: Math.random() * h,
vx: (Math.random() - 0.5) * 0.3, vy: (Math.random() - 0.5) * 0.3,
r: 0.8 + Math.random() * 1.6
}));
const loop = () => {
ctx.clearRect(0, 0, w, h);
// grid layer
ctx.strokeStyle = 'rgba(120,140,210,0.06)';
ctx.lineWidth = 1;
for (let x = 0; x < w; x += 60) {ctx.beginPath();ctx.moveTo(x, 0);ctx.lineTo(x, h);ctx.stroke();}
for (let y = 0; y < h; y += 60) {ctx.beginPath();ctx.moveTo(0, y);ctx.lineTo(w, y);ctx.stroke();}
for (const p of pts) {
p.x += p.vx;p.y += p.vy;
if (p.x < 0 || p.x > w) p.vx *= -1;
if (p.y < 0 || p.y > h) p.vy *= -1;
}
for (let i = 0; i < pts.length; i++) {
for (let j = i + 1; j < pts.length; j++) {
const dx = pts[i].x - pts[j].x,dy = pts[i].y - pts[j].y;
const d = Math.hypot(dx, dy);
if (d < 170) {
ctx.strokeStyle = `rgba(33,153,234,${(1 - d / 170) * 0.4})`;
ctx.lineWidth = 0.7;
ctx.beginPath();ctx.moveTo(pts[i].x, pts[i].y);ctx.lineTo(pts[j].x, pts[j].y);ctx.stroke();
}
}
}
for (const p of pts) {
ctx.fillStyle = F.accent;
ctx.shadowColor = F.accent;ctx.shadowBlur = 14;
ctx.beginPath();ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);ctx.fill();
}
ctx.shadowBlur = 0;
raf = requestAnimationFrame(loop);
};
loop();
return () => {cancelAnimationFrame(raf);ro.disconnect();};
}, []);
// Inject hero button styles once
React.useEffect(() => {
if (document.getElementById('hero-btn-styles')) return;
const s = document.createElement('style');
s.id = 'hero-btn-styles';
s.textContent = `
@property --heroBorderAngle {
syntax: '#1
)}
{/* Main layer — rotating gradient fill */}
#1
{/* Shimmer via ::after — perfectly aligned */}
EUREKANT.SOFTWARE.FACTORY.MMXXII
{content.hero.sub}
SCROLL
0 ? 32 : 32}s linear infinite ${dir < 0 ? 'reverse' : ''}`,
gap: 56
}}>
{doubled.map((it, i) =>
✦ {it}
)}
{stats.map((s, i) => {
const n = useCounter(s.n, inView, 1800 + i * 250);
return (
);
})}
0{i + 1} / 0{stats.length}
{n.toLocaleString()}{s.suf}
{s.l}
02
// SOLUCIONES — DE LA IDEA AL MERCADO
{content.soluciones.title}
{content.soluciones.sub}
{content.soluciones.items.map((it, i) =>
setHover(true)}
onMouseLeave={() => {setHover(false);setTilt({ x: 0, y: 0 });}}
onMouseMove={onMove}
style={{
background: item.featured ? F.surfaceHi : F.surface,
border: `1px solid ${item.featured ? 'transparent' : hover ? F.accent : F.line}`,
borderRadius: item.featured ? 25 : 24,
height: item.featured ? 'auto' : '100%',
minHeight: item.featured ? 320 : undefined,
padding: item.featured ? '48px 56px' : 40, position: 'relative', overflow: 'hidden',
transform: item.featured ? 'none' : lift,
transition: 'transform .4s cubic-bezier(.2,.7,.2,1), border-color .3s, background .3s',
cursor: 'pointer'
}}>
:
}
;
const linkProps = item.href ? { href: item.href, style: { textDecoration: 'none', display: 'block', height: '100%' } } : null;
if (item.featured) {
const wrap =
{item.n}
{item.tag}
{item.featured ?
{item.title}
{item.desc}
{item.cta} →
-
{item.bullets.map((b, j) =>
- ▸ {b} )}
{item.title}
{item.desc}
-
{item.bullets.map((b, j) =>
- ▸{b} )}
{item.cta} →
{featuredLabel}
{inner}
03
// PROCESO — METODOLOGÍA PROBADA
{content.proceso.title}
{content.proceso.sub}
{content.proceso.steps.map((s, i) =>
setActive(i)} onClick={() => setActive(i)}
style={{
padding: '32px 0', cursor: 'pointer',
borderTop: `1px solid ${active === i ? F.accent : F.line}`,
opacity: active === i ? 1 : 0.4,
transform: active === i ? 'translateX(8px)' : 'translateX(0)',
transition: 'opacity .4s, border-color .4s, transform .4s'
}}>
)}
{s.n}
{s.title}
{s.dur}
{/* scan line */}
{content.proceso.steps[active].n}
STEP {content.proceso.steps[active].n} / 04 · {content.proceso.steps[active].dur}
{content.proceso.steps[active].title}
{content.proceso.steps[active].desc}
{content.proceso.steps.map((_, i) =>
)}
04
// {caso.eyebrow}
{caso.title}
{caso.desc}
{caso.tags.map((t, i) =>
{t}
)}
{caso.metrics.map((m, i) =>
)}
{m.k}
{m.v}
● Semifinalista
// CLIENTES — VOCES REALES
{t.map((tm, j) =>
)}
“{tm.quote}”
{tm.author} · {tm.role}
{t.map((_, j) =>
05
// {content.equipo.eyebrow}
{content.equipo.title}
{content.equipo.franco.name}
{content.equipo.franco.role}
{content.equipo.franco.bio}
// BLOG — INSIGHTS TÉCNICOS
{content.blog.title}
{tags.map((t) =>
)}
// FAQ
Preguntas frecuentes
{content.faq.map((f, i) => setOpen(open === i ? -1 : i)}
style={{ borderTop: `1px solid ${F.line}`, padding: '32px 0', cursor: 'pointer' }}>
)}
{f.q}
+{f.a}
{/* Chat bubble — siempre visible, wave+orbit CSS puro */}
{/* Eyebrow (opcional, distinta por landing) */}
{content.cta.eyebrow &&
{inView &&
{/* Subtitle with parallax — con contador animado si la landing lo define */}
{/* Buttons */}
{[0, 1, 2].map((i) =>
)}
{content.cta.eyebrow}
}
{/* Title with parallax */}
{inView &&
{counterCfg ? <> {counterCfg.prefix} {count}{counterCfg.unit} {counterCfg.suffix} : content.cta.sub}