Evandro Fonseca Junior
10f170abf4
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.
63 lines
2.2 KiB
TypeScript
63 lines
2.2 KiB
TypeScript
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, 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 && !years) return null;
|
|
|
|
return (
|
|
<div
|
|
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()}
|
|
>
|
|
{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>
|
|
);
|
|
}
|