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.
92 lines
2.8 KiB
TypeScript
92 lines
2.8 KiB
TypeScript
import { secondaryButtonLight, textLink } from "@/app/components/button-styles";
|
|
import HoverPrefetchLink from "@/app/components/HoverPrefetchLink";
|
|
import {
|
|
buttonLabels,
|
|
caseStudies,
|
|
type ServiceOffer,
|
|
} from "@/lib/site-content";
|
|
|
|
function OfferCard({
|
|
offer,
|
|
className,
|
|
}: {
|
|
offer: ServiceOffer;
|
|
className: string;
|
|
}) {
|
|
const proofCases = offer.proof.caseIds.flatMap((id) => {
|
|
const caseStudy = caseStudies.find((item) => item.id === id);
|
|
return caseStudy ? [caseStudy] : [];
|
|
});
|
|
|
|
return (
|
|
<article className={`ds-card ${className}`}>
|
|
<h3 className="ds-card-title !mt-0 text-balance">{offer.name}</h3>
|
|
<p className="ds-copy !flex-grow-0">{offer.summary}</p>
|
|
<ul className="ds-list space-y-sp-2">
|
|
{offer.deliverables.map((item) => (
|
|
<li key={item}>{item}</li>
|
|
))}
|
|
</ul>
|
|
<p className="ds-kicker mt-sp-6">{offer.proof.label}</p>
|
|
{proofCases.length > 0 ? (
|
|
<ul className="mt-sp-2 flex flex-wrap gap-x-sp-4">
|
|
{proofCases.map((caseStudy) => (
|
|
<li key={caseStudy.id}>
|
|
<HoverPrefetchLink
|
|
href={`/cases/${caseStudy.id}`}
|
|
className={`${textLink} focus-visible:outline-2 focus-visible:outline-offset-4`}
|
|
>
|
|
<span className="sr-only">{buttonLabels.case} </span>
|
|
{caseStudy.title}
|
|
</HoverPrefetchLink>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
) : null}
|
|
{offer.proof.note ? (
|
|
<p className="ds-copy !mt-sp-2 !flex-grow-0 text-[15px]">
|
|
{offer.proof.note}
|
|
</p>
|
|
) : null}
|
|
<div className="mt-sp-6">
|
|
<HoverPrefetchLink
|
|
href={offer.href}
|
|
className={`${secondaryButtonLight} focus-visible:outline-2 focus-visible:outline-offset-4`}
|
|
>
|
|
{buttonLabels.service}
|
|
<span className="sr-only"> {offer.name}</span>
|
|
</HoverPrefetchLink>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Largura de cada cartão na grade de 6 colunas: três por linha (2 colunas cada), e a última linha incompleta se divide
|
|
* por inteiro, sem célula vazia (dois cartões: 3 colunas cada; um: a linha toda).
|
|
*/
|
|
function offerSpan(index: number, total: number) {
|
|
const rest = total % 3;
|
|
if (index < total - rest) return "lg:col-span-2";
|
|
return rest === 2 ? "lg:col-span-3" : "lg:col-span-6";
|
|
}
|
|
|
|
/** As ofertas lado a lado no computador, três por linha: nome, o que a pessoa recebe, onde ver funcionando e o link da página certa. */
|
|
export function ServiceOfferCards({
|
|
offers,
|
|
}: {
|
|
offers: readonly ServiceOffer[];
|
|
}) {
|
|
return (
|
|
<div className="mt-sp-8 grid items-stretch gap-sp-6 lg:grid-cols-6">
|
|
{offers.map((offer, index) => (
|
|
<OfferCard
|
|
key={offer.id}
|
|
offer={offer}
|
|
className={offerSpan(index, offers.length)}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|