Evandro Fonseca Junior
f8545cd442
Três ofertas (site que traz pedidos pelo WhatsApp, sistema para tirar a operação da planilha, revisão de sistema existente) com miniatura e formulário com o tipo escolhido; botão principal do hero abre o WhatsApp; moldura da SEV no hero do celular; menu fecha ao navegar, Esc, foco preso incluindo a barra de cookies e espaço para ela; CinematicHome como componente de servidor com ilha cliente; /ia com H1 de oferta e cartão do que você recebe; botão flutuante em aside com transform; AVIF antes de WebP; copy sem repetir contato direto.
28 lines
1.1 KiB
TypeScript
28 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { type ReactNode, useEffect, useRef } from "react";
|
|
import { useCinematicScroll } from "./useCinematicScroll";
|
|
import { useHomeFragmentNavigation } from "./useHomeFragmentNavigation";
|
|
|
|
/**
|
|
* A ilha de cliente da home: só ela precisa de hooks (rolagem suave e passagens entre cenas, chegada por fragmento).
|
|
* Ela recebe as cenas como `children`, então CinematicHome e as seções continuam no servidor e só o que já era
|
|
* de cliente (Hero, Contact, Section...) vai para o pacote do navegador.
|
|
* Cada filho direto de <main> é uma cena; useCinematicScroll liga as passagens entre elas. O rodapé vem do layout.
|
|
*/
|
|
export default function CinematicMain({ children }: { children: ReactNode }) {
|
|
const onLayoutReady = useHomeFragmentNavigation();
|
|
const mainRef = useRef<HTMLElement>(null);
|
|
useCinematicScroll(mainRef);
|
|
// o layout da home é estável na montagem: a chegada por fragmento (#contato etc.) já pode ser resolvida
|
|
useEffect(() => onLayoutReady(), [onLayoutReady]);
|
|
|
|
return (
|
|
<div className="overflow-x-clip">
|
|
<main ref={mainRef} className="ds-main relative z-0">
|
|
{children}
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|