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.
56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import type { ReactNode } from "react";
|
|
import { trackWhatsAppOpen } from "@/lib/analytics";
|
|
import { buildWhatsAppUrl } from "@/lib/whatsapp";
|
|
|
|
interface WhatsAppLinkProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
/** Para o botão flutuante achar o convite (HERO_CTA_ID). */
|
|
id?: string;
|
|
/** Assunto da conversa, na frase "Quero conversar sobre {service}". Sem ele, a mensagem fala de "um projeto". */
|
|
service?: string;
|
|
placement: string;
|
|
/** Chamado junto com a abertura do link, por exemplo para fechar o menu do celular. */
|
|
onClick?: () => void;
|
|
}
|
|
|
|
/** Rótulo de métrica quando o link não traz um assunto; o texto da mensagem usa "um projeto". */
|
|
const DEFAULT_ANALYTICS_SERVICE = "Contato";
|
|
|
|
export default function WhatsAppLink({
|
|
children,
|
|
className = "",
|
|
id,
|
|
service,
|
|
placement,
|
|
onClick,
|
|
}: WhatsAppLinkProps) {
|
|
// assunto vazio ou só com espaços vale como ausente: sem isso a mensagem sairia "sobre ."
|
|
const subject = service?.trim() || undefined;
|
|
const analyticsService = subject ?? DEFAULT_ANALYTICS_SERVICE;
|
|
return (
|
|
<a
|
|
id={id}
|
|
href={buildWhatsAppUrl(
|
|
`Olá, Evandro! Quero conversar sobre ${subject ?? "um projeto"}. Contato iniciado pelo site evandro.dev.br.`,
|
|
)}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={`${className} focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--slash)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--ink)]`}
|
|
onClick={(event) => {
|
|
if (event.button === 0)
|
|
trackWhatsAppOpen({ service: analyticsService, placement });
|
|
onClick?.();
|
|
}}
|
|
onAuxClick={(event) => {
|
|
if (event.button === 1)
|
|
trackWhatsAppOpen({ service: analyticsService, placement });
|
|
}}
|
|
>
|
|
{children}
|
|
</a>
|
|
);
|
|
}
|