/* Hero — IA que coloca negócios locais NO MAPA
Includes mouse parallax 3D scene with 3 characters */
function CharacterCard({ name, role, color, description, specialties, index, active, onHover, onLeave, mouseX, mouseY, parallaxAmt }) {
// Carousel offset relative to active
const offset = index - active;
// -2..+2 positions wrap
const wrapped = ((offset + 3) % 3); // 0,1,2
// map to slot: 0 = center, 1 = right, 2 = left
let slot;
if (wrapped === 0) slot = 'center';
else if (wrapped === 1) slot = 'right';
else slot = 'left';
const slotConfig = {
center: { x: 0, z: 80, ry: 0, scale: 1.0, opacity: 1, z2: 3 },
left: { x: -55, z: -40, ry: 18, scale: 0.72, opacity: 0.55, z2: 1 },
right: { x: 55, z: -40, ry: -18, scale: 0.72, opacity: 0.55, z2: 1 }
}[slot];
const isHover = active === index && onHover; // tooltip only on center
const tx = (mouseX * 6) * parallaxAmt + slotConfig.x * 1;
const ty = mouseY * 5 * parallaxAmt;
const rx = -mouseY * 4 * parallaxAmt;
return (
onHover && onHover(index)}
onMouseLeave={() => onLeave && onLeave()}
onClick={() => onHover && onHover(index)}
style={{
position: 'absolute',
top: '50%',
left: '50%',
width: '62%',
marginLeft: '-31%',
marginTop: '-31%',
transformStyle: 'preserve-3d',
transform: `translate3d(calc(${slotConfig.x}% + ${tx}px), ${ty}px, ${slotConfig.z}px) rotateY(${slotConfig.ry + mouseX * 6 * parallaxAmt}deg) rotateX(${rx}deg) scale(${slotConfig.scale})`,
transition: 'transform 1.1s cubic-bezier(.22,.85,.3,1), opacity .9s ease',
cursor: 'pointer',
zIndex: slotConfig.z2,
opacity: slotConfig.opacity
}}
>
{/* Glow halo */}
{/* Speech-bubble tooltip with specialties — only on center card */}
{slot === 'center' && (
{/* tail */}
{name}
{role}
{description}
Especialidades
{specialties.map(s => (
{s}
))}
)}
);
}
function FloatingPins({ color, variant }) {
const pins = [
{ x: 12, y: 20, delay: 0 },
{ x: 82, y: 12, delay: 0.6 },
{ x: 88, y: 70, delay: 1.2 }
];
return (
{pins.map((p, i) => (
))}
{/* LEFT: copy */}
null}>
Do mapa para a web. Do invisível para o digital.
IA que coloca
negócios locais
no mapa.
Seu negócio no Rio de Janeiro merece um site próprio. Conheça os
layouts e converse com a CodeKid sobre a presença digital da sua loja.
{['Primeira análise gratuita', 'Site no ar em até 48 horas úteis após aprovação e envio do conteúdo necessário', 'Sem fidelidade'].map(t => (
{t}
))}
{/* RIGHT: 3D carousel with 3 character cards */}
);
}
function HeroCarousel({ characters, sceneRef, mouse, parallaxAmt }) {
const [active, setActive] = React.useState(1); // start centered on Cauê
const [paused, setPaused] = React.useState(false);
// Auto-rotate every 4.5s
React.useEffect(() => {
if (paused) return;
const t = setInterval(() => setActive(a => (a + 1) % 3), 6500);
return () => clearInterval(t);
}, [paused]);
return (
setPaused(true)}
onMouseLeave={() => setPaused(false)}
>
{characters.map((c, i) => (
setActive(idx)}
onLeave={() => {}}
mouseX={mouse.x}
mouseY={mouse.y}
parallaxAmt={parallaxAmt}
/>
))}
{/* Dots indicator */}
{characters.map((c, i) => (
);
}
function BackgroundRadar() {
return (
);
}
function DemoModal({ onClose }) {
// fecha com ESC + trava o scroll da pagina enquanto aberto
React.useEffect(() => {
const onKey = (e) => { if (e.key === 'Escape') onClose(); };
window.addEventListener('keydown', onKey);
const prevOverflow = document.body.style.overflow;
document.body.style.overflow = 'hidden';
return () => {
window.removeEventListener('keydown', onKey);
document.body.style.overflow = prevOverflow;
};
}, [onClose]);
return (
e.stopPropagation()} style={{
position: 'relative', width: '100%', maxWidth: 960
}}>
{/* botao fechar */}
);
}
window.Hero = Hero;
window.DemoModal = DemoModal;
/* Per-character themed background effect inside the photo frame */
function ThemeEffect({ variant, color }) {
if (variant === 0) return ;
if (variant === 1) return ;
return ;
}
/* CAIO — falling code characters */
function CodeRainEffect({ color }) {
const chars = '01{};=+#';
const cols = React.useMemo(() => (
Array.from({ length: 10 }).map((_, i) => ({
x: i * 10 + Math.random() * 4,
delay: Math.random() * 4,
dur: 4 + Math.random() * 4,
str: Array.from({ length: 12 }).map(() => chars[Math.floor(Math.random() * chars.length)]).join('\n')
}))
), []);
return (
{cols.map((c, i) => (
{c.str}
))}
