/* global React, ReactDOM */
const { useState, useEffect, useRef } = React;
if ("scrollRestoration" in history) {
history.scrollRestoration = "manual";
}
window.scrollTo(0, 0);
const WHATSAPP_URL = "https://wa.me/5583998548407?text=Oi!%20Vi%20seu%20site%20e%20quero%20saber%20mais";
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"showFloat": true
}/*EDITMODE-END*/;
const Icon = {
WhatsApp: ({ size = 22 }) => (
),
Arrow: ({ size = 16 }) => (
;
}
function TypingText({ text, as: As = "p", speed = 14, startDelay = 0, className = "" }) {
const ref = useRef(null);
const [shown, setShown] = useState(false);
useEffect(() => {
const el = ref.current; if (!el) return;
const io = new IntersectionObserver((es) => {
es.forEach((e) => {
if (e.isIntersecting) {
setTimeout(() => setShown(true), startDelay);
io.disconnect();
}
});
}, { threshold: 0.2 });
io.observe(el);
return () => io.disconnect();
}, [startDelay]);
const words = text.split(" ");
let counter = 0;
const out = [];
words.forEach((word, wi) => {
const chars = [...word];
out.push(
{chars.map((c, ci) => {
const idx = counter + ci;
return (
{c}
);
})}
);
counter += chars.length;
if (wi < words.length - 1) {
out.push( );
counter += 1;
}
});
return {out} ;
}
function Reveal({ children, delay = 0, as: As = "div", className = "", ...rest }) {
const ref = useRef(null);
const [shown, setShown] = useState(false);
useEffect(() => {
const el = ref.current; if (!el) return;
const io = new IntersectionObserver((es) => {
es.forEach((e) => { if (e.isIntersecting) { setTimeout(() => setShown(true), delay); io.disconnect(); } });
}, { threshold: 0.12 });
io.observe(el);
return () => io.disconnect();
}, [delay]);
return {children} ;
}
function HeroLineSvg({ text, target }) {
const fontStack = '"dharma-gothic-e", "Bebas Neue", "Anton", "Oswald", "Impact", sans-serif';
return (
{text.toUpperCase()}
);
}
function HeroDots({ count = 36 }) {
const rand = (min, max) => min + Math.random() * (max - min);
const containerRef = useRef(null);
const dotsRef = useRef([]);
const [dots] = useState(() =>
Array.from({ length: count }, (_, i) => ({
id: i,
left: Math.random() * 100,
top: Math.random() * 100,
size: 2 + Math.random() * 3,
delay: -Math.random() * 20,
duration: 22 + Math.random() * 16,
dx1: rand(-300, 300), dy1: rand(-200, 200),
dx2: rand(-300, 300), dy2: rand(-200, 200),
dx3: rand(-300, 300), dy3: rand(-200, 200),
}))
);
useEffect(() => {
const hero = containerRef.current?.closest("section");
if (!hero) return;
const RADIUS = 250;
const STRENGTH = 0.35;
let frame = 0;
let mx = 0, my = 0, active = false;
const apply = () => {
frame = 0;
dotsRef.current.forEach((el) => {
if (!el) return;
if (!active) { el.style.transform = ""; return; }
const r = el.getBoundingClientRect();
const dx = mx - (r.left + r.width / 2);
const dy = my - (r.top + r.height / 2);
const dist = Math.hypot(dx, dy);
if (dist < RADIUS) {
const f = (RADIUS - dist) / RADIUS;
el.style.transform = `translate(${dx * f * STRENGTH}px, ${dy * f * STRENGTH}px)`;
} else {
el.style.transform = "";
}
});
};
const queue = () => { if (!frame) frame = requestAnimationFrame(apply); };
const onMove = (e) => { mx = e.clientX; my = e.clientY; active = true; queue(); };
const onLeave = () => { active = false; queue(); };
hero.addEventListener("mousemove", onMove);
hero.addEventListener("mouseleave", onLeave);
return () => {
hero.removeEventListener("mousemove", onMove);
hero.removeEventListener("mouseleave", onLeave);
if (frame) cancelAnimationFrame(frame);
};
}, []);
return (
{dots.map((d, i) => (
{ dotsRef.current[i] = el; }}
className="dot-pos"
style={{ left: `${d.left}%`, top: `${d.top}%` }}
>
))}
);
}
function ScrollCue() {
const [hidden, setHidden] = React.useState(false);
const [isTouch, setIsTouch] = React.useState(false);
React.useEffect(() => {
const onScroll = () => setHidden(window.scrollY > 60);
const mq = window.matchMedia("(max-width: 1024px)");
const update = () => setIsTouch(mq.matches);
update();
mq.addEventListener("change", update);
window.addEventListener("scroll", onScroll, { passive: true });
return () => {
window.removeEventListener("scroll", onScroll);
mq.removeEventListener("change", update);
};
}, []);
return (
{isTouch ? "Arraste para baixo" : "Role para baixo"}
);
}
function Hero() {
return (
Retratos profissionais com inteligência artificial.
Começar meu ensaio
);
}
function Galeria() {
const items = [
{ id: "01", src: "uploads/galeria%2001.jpg" },
{ id: "02", src: "uploads/galeria%2002.jpg" },
{ id: "03", src: "uploads/galeria%2003.jpg" },
{ id: "04", src: "uploads/galeria%2004.jpg" },
{ id: "05", src: "uploads/galeria%2005.jpg" },
{ id: "06", src: "uploads/galeria%2006.jpg" },
{ id: "07", src: "uploads/galeria%2007.jpg" },
{ id: "08", src: "uploads/galeria%2008.jpg" },
{ id: "09", src: "uploads/galeria%2009.jpg" },
];
return (
Galeria
{items.map((it, i) => (
))}
);
}
function Servicos() {
const items = [
{
n: "01",
title: "Criação de foto com IA",
desc: "Transformo suas selfies em retratos profissionais. Você escolhe o estilo (editorial, corporativo, artístico ou casual) e eu entrego o resultado em até 24h.",
},
{
n: "02",
title: "Pacote de ensaio",
desc: "Pra quem quer variedade. Várias fotos em estilos diferentes, perfeito pra renovar o perfil, o LinkedIn e as redes de uma vez.",
},
{
n: "03",
title: "Restauração de foto",
desc: "Fotos antigas, danificadas ou em baixa qualidade ganham vida nova com IA. Nitidez, cor e detalhes recuperados.",
},
];
return (
);
}
function Como() {
const steps = [
{ n: "01", t: "Envie suas selfies", d: "3 fotos com boa iluminação, sem filtro, rosto visível." },
{ n: "02", t: "Escolha o estilo", d: "Editorial, profissional, artístico, casual. Você decide." },
{ n: "03", t: "Pagamento via Pix", d: "Rápido, sem cadastro, sem burocracia." },
{ n: "04", t: "Receba em 24h", d: "Fotos em alta resolução entregues direto no WhatsApp." },
];
const stepDelays = [388, 1164, 1940, 2716];
const gridRef = React.useRef(null);
const [shownSteps, setShownSteps] = React.useState([false, false, false, false]);
React.useEffect(() => {
const el = gridRef.current;
if (!el) return;
const timers = [];
const obs = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
el.classList.add("is-flowing");
stepDelays.forEach((d, i) => {
timers.push(
setTimeout(() => {
setShownSteps((prev) => {
const next = [...prev];
next[i] = true;
return next;
});
}, d)
);
});
obs.disconnect();
}
},
{ threshold: 0.3 }
);
obs.observe(el);
return () => {
obs.disconnect();
timers.forEach(clearTimeout);
};
}, []);
return (
Como funciona
{steps.map((s, i) => (
))}
);
}
function Sobre() {
return (
);
}
function CTAFinal() {
return (
Vamos criar as suas?
Envie suas selfies e receba fotos profissionais em até 24h.
Chamar no WhatsApp
Atendimento humano
—
Sem robô
—
Sem cadastro
);
}
function Footer() {
return (
);
}
function ViewportBlurBottom() {
const [hidden, setHidden] = React.useState(false);
React.useEffect(() => {
const target = document.querySelector(".footer");
if (!target) return;
const obs = new IntersectionObserver(
([entry]) => setHidden(entry.isIntersecting),
{ threshold: 0.05 }
);
obs.observe(target);
return () => obs.disconnect();
}, []);
return (
);
}
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
useEffect(() => {
const update = () => {
const s = Math.min(1, window.innerWidth / 1920);
document.documentElement.style.setProperty("--hero-scale", String(s));
};
update();
window.addEventListener("resize", update);
return () => window.removeEventListener("resize", update);
}, []);
return (
setTweak("showFloat", v)} />
);
}
ReactDOM.createRoot(document.getElementById("root")).render( 
