setTweak("heroVariant", v)} /> { const map = { neutro: { silverHex: "#c8c8cc", silverGlow: "rgba(200,200,204,0.18)" }, azulado: { silverHex: "#b8c4d6", silverGlow: "rgba(184,196,214,0.22)" }, quente: { silverHex: "#d4c8b8", silverGlow: "rgba(212,200,184,0.22)" }, }; setTweak({ silverTone: v, ...map[v] }); }} /> { const map = { limpo: { gridOpacity: 0, particleOpacity: 0 }, grid: { gridOpacity: 0.10, particleOpacity: 0 }, particles: { gridOpacity: 0.04, particleOpacity: 0.55 }, }; setTweak({ density: v, ...map[v] }); }} /> setTweak("grainOpacity", v)} /> setTweak("copy", v)} /> setTweak("showDashboard", v)} /> ); }; // --------------------------------------------------------------------------- // NAV // --------------------------------------------------------------------------- const Nav = ({ C }) => ( ); // --------------------------------------------------------------------------- // HERO — 4 variants // --------------------------------------------------------------------------- const Hero = ({ C, variant }) => { if (variant === "blueprint") return ; if (variant === "cinema") return ; if (variant === "asymmetric") return ; return ; }; const HeroCentered = ({ C }) => (

{C.eyebrow}

{C.title}

{C.sub}

{C.primaryCTA} {C.secondaryCTA}

◇ {C.metaA}

◇ {C.metaB}

◇ {C.metaC}

); const HeroBlueprint = ({ C }) => (

{C.eyebrow}

{C.title}

{C.sub}

{C.primaryCTA} {C.secondaryCTA}

◇ {C.metaA}

◇ {C.metaB}

◇ {C.metaC}

); const HeroCinema = ({ C }) => (

{C.eyebrow}

{C.title}

{C.sub}

{C.primaryCTA} {C.secondaryCTA}

◇ {C.metaA}

◇ {C.metaB}

◇ {C.metaC}

); const HeroAsymmetric = ({ C }) => (

{C.eyebrow}

{C.title}

{C.sub}

{C.primaryCTA} {C.secondaryCTA}

◇ {C.metaA}

◇ {C.metaB}

CRX-MK01

◇ ATIVO

); const Arrow = () => ( ); // --------------------------------------------------------------------------- const BlueprintGrid = () => ( ); // --------------------------------------------------------------------------- const ParticlesCanvas = () => { const ref = useRef(null); useEffect(() => { const c = ref.current; if (!c) return; const ctx = c.getContext("2d"); const resize = () => { c.width = window.innerWidth; c.height = window.innerHeight; }; resize(); window.addEventListener("resize", resize); const N = 60; const ps = Array.from({ length: N }, () => ({ x: Math.random() * c.width, y: Math.random() * c.height, vx: (Math.random() - 0.5) * 0.15, vy: (Math.random() - 0.5) * 0.15, r: Math.random() * 1.2 + 0.3, })); let raf; const tick = () => { ctx.clearRect(0, 0, c.width, c.height); ctx.fillStyle = "rgba(200,200,204,0.5)"; ps.forEach(p => { p.x += p.vx; p.y += p.vy; if (p.x < 0 || p.x > c.width) p.vx *= -1; if (p.y < 0 || p.y > c.height) p.vy *= -1; ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2); ctx.fill(); }); raf = requestAnimationFrame(tick); }; tick(); return () => { cancelAnimationFrame(raf); window.removeEventListener("resize", resize); }; }, []); return

{C.title}

{C.title}

{C.title}

{C.title}

{C.sectionFeatures}

{f.title}

{C.sectionFlow}

{s.t}

{C.sectionDash}

{C.sectionCompare}

{C.sectionTesti}

{"Infraestrutura de "} performance.

{item.label}

{"Fale com "} nossa equipe.

{C.finalTitle}