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.9 KiB
TypeScript
92 lines
2.9 KiB
TypeScript
import { Breadcrumb } from "@/app/components/Breadcrumb";
|
|
import { pageTop } from "@/app/components/button-styles";
|
|
import type { CaseStudyContent } from "@/lib/site-content";
|
|
import { CaseCover, coverSizes } from "./CaseCover";
|
|
import { getCaseMedia } from "./case-media";
|
|
import { compactHero } from "./hero-styles";
|
|
|
|
/** Fatos verificáveis do projeto. Sem nenhum, a lista não aparece. */
|
|
function CaseFacts({ facts }: { facts?: string[] }) {
|
|
if (!facts?.length) return null;
|
|
|
|
return (
|
|
<ul
|
|
className="mt-sp-5 flex flex-wrap gap-x-sp-6 gap-y-sp-2 text-[15px] leading-6 text-white/80"
|
|
aria-label="Fatos do projeto"
|
|
>
|
|
{facts.map((fact) => (
|
|
<li key={fact}>{fact}</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
}
|
|
|
|
/** Pôster do site na coluna da direita (no celular, logo abaixo do título). */
|
|
function CaseHeroCover({ caseStudy }: { caseStudy: CaseStudyContent }) {
|
|
return (
|
|
<div className="min-w-0 lg:col-start-2 lg:row-span-2 lg:row-start-1">
|
|
<CaseCover
|
|
id={caseStudy.id}
|
|
title={caseStudy.title}
|
|
demoUrl={caseStudy.demoUrl}
|
|
sizes={coverSizes.hero}
|
|
priority
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Topo do case: trilha, título, resumo e fatos. Com captura gravada, o texto fica à esquerda e o pôster à direita;
|
|
* no celular a mídia vem logo abaixo do título. Sem captura, o topo é uma coluna só e mais baixo.
|
|
*/
|
|
export function CaseHero({
|
|
caseStudy,
|
|
isClient,
|
|
}: {
|
|
caseStudy: CaseStudyContent;
|
|
isClient: boolean;
|
|
}) {
|
|
const hasMedia = Boolean(getCaseMedia(caseStudy.id, "desktop"));
|
|
|
|
return (
|
|
<section
|
|
className={`ds-section ds-section-dark ${pageTop} ${
|
|
hasMedia ? "" : compactHero
|
|
}`}
|
|
>
|
|
<div
|
|
className={`ds-section-shell ${
|
|
hasMedia
|
|
? "grid items-center gap-y-sp-6 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,1fr)] lg:gap-x-sp-16 lg:gap-y-0"
|
|
: ""
|
|
}`}
|
|
>
|
|
<div className="max-w-[860px] lg:col-start-1 lg:row-start-1 lg:self-end">
|
|
<Breadcrumb
|
|
items={[
|
|
{ label: "Início", href: "/" },
|
|
{ label: "Cases", href: "/cases" },
|
|
{ label: caseStudy.title, href: `/cases/${caseStudy.id}` },
|
|
]}
|
|
/>
|
|
{/* o tipo do projeto, sem o nome: a trilha logo acima já o diz */}
|
|
<p className="ds-eyebrow">
|
|
{isClient ? "Case de cliente" : "Projeto de laboratório"}
|
|
</p>
|
|
<h1 className="ds-section-title text-balance text-white">
|
|
{caseStudy.headline}
|
|
</h1>
|
|
</div>
|
|
{hasMedia ? <CaseHeroCover caseStudy={caseStudy} /> : null}
|
|
<div className="max-w-[68ch] lg:col-start-1 lg:row-start-2 lg:self-start">
|
|
<p className="ds-copy !text-[rgba(255,255,255,.78)]">
|
|
{caseStudy.summary}
|
|
</p>
|
|
<CaseFacts facts={caseStudy.facts} />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|