feat(home): posicionamento com prova, menu sem recarregar e WhatsApp em todo o site

H1 'Sites e sistemas que trazem pedidos pelo WhatsApp e tiram sua operação da planilha.'; HeroWork maior com a SEV; menu Cases, Serviços, Como trabalho, Sobre e IA com next/link e pré-carregamento no hover; menu do celular em tela cheia; WhatsApp flutuante e no rodapé com a mensagem da rota; rodapé em todas as páginas; FAQ da home; /ia como oferta de revisão de app feito com IA; formulário com noscript, validação do mailto e plano B do pop-up; cartões sem foco indevido; sem a fonte Monument.
This commit is contained in:
Evandro Fonseca Junior committed 2026-10-14 14:15:25 -03:00
1 parent e80f73d075
commit 10f170abf4
56 files changed
+3099 -906

No files matched your search

+43 -24
View File
@@ -1,43 +1,62 @@
import Link from "next/link";
import HoverPrefetchLink from "./HoverPrefetchLink";
export type ClientLink = { id: string; name: string };
/**
* Faixa "Já entregue para" do hero: só projetos de cliente (lib/proof.ts), cada um levando ao próprio case.
* Sem clientes, nada é desenhado.
* Faixa "Já entregue para" do hero: só projetos de cliente (lib/proof.ts), cada um levando ao próprio case, e na
* mesma linha os anos de experiência (calculados em app/page.tsx). Sem clientes e sem anos, nada é desenhado.
* Os links têm 44 px de altura de toque; a rota só é pré-carregada quando a pessoa chega no link.
*/
export default function ClientStrip({
clients = [],
years,
className = "",
}: {
clients?: ClientLink[];
/** Anos de experiência, na mesma linha dos clientes. */
years?: number;
className?: string;
}) {
if (clients.length === 0) return null;
if (clients.length === 0 && !years) return null;
return (
<div
className={`flex flex-wrap items-baseline gap-x-sp-3 gap-y-sp-1 font-display text-[14px] leading-6 text-[rgba(244,242,237,.64)] sm:text-[15px] ${className}`.trim()}
className={`flex flex-wrap items-center gap-x-sp-3 gap-y-sp-1 font-display text-[15px] leading-6 text-[rgba(244,242,237,.64)] ${className}`.trim()}
>
<p>Já entregue para:</p>
<ul className="flex flex-wrap items-baseline gap-x-sp-3">
{clients.map((client, index) => (
<li key={client.id} className="flex items-baseline gap-x-sp-3">
<Link
href={`/cases/${client.id}`}
className="font-medium text-[#f4f2ed] no-underline underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--slash)]"
>
{client.name}
</Link>
{/* o ponto fica no fim do item: numa quebra de linha ele nunca abre a linha seguinte */}
{index < clients.length - 1 && (
<span aria-hidden="true" className="text-[rgba(244,242,237,.4)]">
·
</span>
)}
</li>
))}
</ul>
{clients.length > 0 && (
<>
<p>Já entregue para:</p>
<ul className="flex flex-wrap items-center gap-x-sp-3">
{clients.map((client, index) => (
<li key={client.id} className="flex items-center gap-x-sp-3">
<HoverPrefetchLink
href={`/cases/${client.id}`}
className="inline-flex min-h-11 items-center font-medium text-[#f4f2ed] no-underline underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--slash)]"
>
{client.name}
</HoverPrefetchLink>
{/* o ponto fica no fim do item (e do último cliente, quando vêm os anos depois): numa quebra de linha ele nunca abre a linha seguinte */}
{(index < clients.length - 1 || Boolean(years)) && (
<span
aria-hidden="true"
className="text-[rgba(244,242,237,.4)]"
>
·
</span>
)}
</li>
))}
</ul>
</>
)}
{years ? (
<p>
<span className="font-mono font-semibold text-[var(--slash)]">
{years}
</span>{" "}
anos de experiência
</p>
) : null}
</div>
);
}