evandro
c7d09d63d4
Hero e movimento - cena 3D em tempo real com os blocos da marca (kit feito no Blender, 3d/blocos.py): marca, tela, integrações e dados; segue a rolagem, tem vida em repouso, reage ao cursor e, parada no topo, passa sozinha pelos estados com legenda - três níveis de aparelho (full, lite, static); sem WebGL fica o pôster - título novo: "Sites e sistemas sob medida para o jeito que a sua empresa trabalha." - faixa de clientes com o ramo, linha do primeiro passo, hero alinhado às seções - rótulos digitados, entrada dos blocos, cortina de blocos entre páginas e capa compartilhada entre a lista de cases e o case Ofertas - atendimento no WhatsApp com IA e nota fiscal para a reforma tributária (páginas de serviço, cartões da home, formulário e aviso com data de validade) - página /ia atualizada, com fontes - peças 3D em loop nos cartões e topos de página (3d/pecas.py) Design - hover por papel (bloco nos botões, barra nos links), rótulos sem caixa alta - um destino por rótulo: "Falar sobre meu projeto" leva ao formulário, "Chamar no WhatsApp" abre o WhatsApp - logo montado em blocos, 404 redesenhado, grades sem célula vazia - ícones do PWA e manifesto novos Specs em specs/, contexto de design em DESIGN.md e PRODUCT.md.
77 lines
3.1 KiB
TypeScript
77 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { usePathname } from "next/navigation";
|
|
import { useEffect, useState } from "react";
|
|
import { type WhatsAppContexts, whatsAppSubjectForPath } from "@/lib/whatsapp";
|
|
import WhatsAppLink from "./WhatsAppLink";
|
|
import { WhatsAppMark } from "./WhatsAppMark";
|
|
|
|
/** Link "Chamar no WhatsApp" do hero e seção de contato: enquanto qualquer um está na tela, o botão flutuante some. */
|
|
export const HERO_CTA_ID = "hero-contact-cta";
|
|
const CONTACT_SECTION_ID = "contact";
|
|
|
|
/**
|
|
* Atalho para o WhatsApp só no celular (abaixo de 768 px), montado no layout para valer em todo o site. A mensagem
|
|
* cita o serviço ou o case da página aberta. Fica escondido quando já há um convite de contato à vista (hero e
|
|
* contato da home) e enquanto a barra de cookies está aberta (o `data-cookie-bar` que GoogleAnalytics põe no <html>):
|
|
* os dois disputavam a base da tela. O rodapé reserva no fim da página o espaço que ele ocupa.
|
|
* Fica num <aside> com nome (região de contato rápido para leitores de tela).
|
|
*/
|
|
export default function FloatingWhatsApp({
|
|
contexts,
|
|
}: {
|
|
/** Nomes dos serviços e dos cases, montados no servidor (app/layout.tsx). */
|
|
contexts?: WhatsAppContexts;
|
|
}) {
|
|
const pathname = usePathname();
|
|
const subject = whatsAppSubjectForPath(pathname, contexts);
|
|
// null até o observador responder pela primeira vez: assim o botão não pisca na chegada, quando o hero está à vista
|
|
const [inviteVisible, setInviteVisible] = useState<Record<
|
|
string,
|
|
boolean
|
|
> | null>(null);
|
|
|
|
// o botão vive no layout: a cada página o hero e o contato (que só existem na home) entram ou saem de cena
|
|
// biome-ignore lint/correctness/useExhaustiveDependencies: pathname só reinicia a observação a cada página
|
|
useEffect(() => {
|
|
setInviteVisible(null);
|
|
const targets = [HERO_CTA_ID, CONTACT_SECTION_ID]
|
|
.map((id) => document.getElementById(id))
|
|
.filter((element): element is HTMLElement => element !== null);
|
|
if (targets.length === 0) {
|
|
setInviteVisible({});
|
|
return;
|
|
}
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
setInviteVisible((current) => {
|
|
const next = { ...current };
|
|
for (const entry of entries) {
|
|
next[entry.target.id] = entry.isIntersecting;
|
|
}
|
|
return next;
|
|
});
|
|
});
|
|
for (const target of targets) observer.observe(target);
|
|
return () => observer.disconnect();
|
|
}, [pathname]);
|
|
|
|
if (!inviteVisible || Object.values(inviteVisible).some(Boolean)) return null;
|
|
|
|
return (
|
|
<aside
|
|
aria-label="Contato rápido"
|
|
className="ds-enter-pop fixed right-sp-4 bottom-[calc(var(--sp-4)+env(safe-area-inset-bottom))] z-[8900] md:hidden [[data-cookie-bar=open]_&]:hidden"
|
|
>
|
|
<WhatsAppLink
|
|
placement="floating"
|
|
service={subject}
|
|
className="flex h-14 w-14 items-center justify-center rounded-full bg-[var(--whatsapp)] text-[#071b10] shadow-[0_8px_24px_rgba(0,0,0,0.45)] transition-colors hover:bg-[var(--whatsapp-hover)] motion-reduce:transition-none"
|
|
>
|
|
<WhatsAppMark className="h-7 w-7" />
|
|
<span className="sr-only">Chamar no WhatsApp</span>
|
|
</WhatsAppLink>
|
|
</aside>
|
|
);
|
|
}
|