function Metodo() {
const pilares = [
{
n: '01',
t: 'Vamos às Gôndolas',
d: 'Pesquisa de mercado e benchmarking. Mapeamos o terreno real antes de qualquer decisão — onde estão os concorrentes, o que o consumidor diz, e onde existe espaço para crescer.',
},
{
n: '02',
t: 'Criação Guiada',
d: 'A busca pela interseção perfeita: o conjunto de elementos que satisfaz o consumidor e o conjunto que destaca a marca frente ao mercado. Nenhuma decisão visual começa antes dessa intersecção estar clara.',
},
{
n: '03',
t: 'Atualização do Produto',
d: 'Contrato com datas e entregas descritas. Plataforma própria para o cliente acompanhar o andamento em tempo real. Atualização periódica via e-mail e WhatsApp. Uma resposta direta à desorganização do mercado de design.',
highlight: true,
},
];
const etapas = [
{ n: '01', t: 'Briefing', d: 'Entendimento do contexto, dos objetivos e das restrições. A conversa honesta que define o escopo e evita retrabalho.' },
{ n: '02', t: 'Benchmarking', d: 'Mapa Visual + Síntese de Mercado. Análise linha a linha: o que os concorrentes comunicam, como comunicam, e o espaço que nenhum deles ocupa.' },
{ n: '03', t: 'Criação', d: 'O processo inteiro guiado pela análise anterior. Cada decisão de cor, tipografia e hierarquia tem raciocínio documentado — não é gosto, é argumento.' },
{ n: '04', t: 'Validação', d: 'Reunião de apresentação das tomadas de decisão e do resultado obtido. Você entende o porquê de cada escolha antes da entrega final.' },
{ n: '05', t: 'Entrega', d: 'Rótulo vetorizado, mockups em alta definição e imagem comercial tratada. Tudo documentado e pronto para produção imediata.' },
];
const [activeStep, setActiveStep] = useState(0);
const stepRefs = useRef([]);
useEffect(() => {
const observers = stepRefs.current.map((el, i) => {
if (!el) return null;
const io = new IntersectionObserver(
([entry]) => { if (entry.isIntersecting) setActiveStep(i); },
{ threshold: 0.38 }
);
io.observe(el);
return io;
});
return () => observers.forEach(io => io?.disconnect());
}, []);
const sectionRef = useRef(null);
const phiP = useScrollProgress(sectionRef);
return (
{/* Floating PHI watermark — parallax */}
Φ
{/* Header */}
Protocolo proprietário
Método PHIΦ
3 pilares. 5 etapas. A ordem importa — pilares são o porquê, etapas são o como.
Antes de decidir como parecer,,
<>decide-se onde jogar.,
]}
/>
{/* PILARES */}
Os pilares · a fundação filosófica · o porquê
{pilares.map((p, i) => )}
{/* ETAPAS — scroll storytelling */}
As etapas · o fluxo operacional · o como
{/* Sticky left timeline */}
{/* Track line */}
{/* Progress fill */}
{etapas.map((e, i) => (