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:
1 parent
e80f73d075
commit
10f170abf4
56 files changed
+3099
-906
No files matched your search
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user