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.
74 lines
3.6 KiB
TypeScript
74 lines
3.6 KiB
TypeScript
import Image from "next/image";
|
|
import { getShowcaseAssets } from "@/lib/project-showcase";
|
|
import HoverPrefetchLink from "./HoverPrefetchLink";
|
|
|
|
/** O cartão mostra o site da SEV e leva ao case. */
|
|
const SMALL_SCREEN_PROJECT = "sev-modaintima";
|
|
const SMALL_SCREEN_TITLE = "SEV Moda Íntima";
|
|
const SMALL_SCREEN_HREF = `/cases/${SMALL_SCREEN_PROJECT}`;
|
|
/**
|
|
* Altura da imagem do cartão de celular (px): a largura é a da coluna (cerca de 342 px num celular de 390 px). Com 72 px
|
|
* a área da imagem (cerca de 25 mil px²) fica abaixo da do H1 (cerca de 29 mil px² a 390 px): com 96 px ela era maior, e
|
|
* numa rede lenta a imagem, que chega depois, passava a ser o LCP no lugar do título (medido com rede e CPU limitadas).
|
|
*/
|
|
const SMALL_CARD_IMAGE_HEIGHT = 72;
|
|
/**
|
|
* Faixa de 72 px de altura: o pôster do computador (16:10) cortado nela mostrava só uma fatia do topo, e o título
|
|
* "Nova Coleção" saía pela metade. O pôster do celular (390x844, o mesmo site) tem o título em letras maiores: o
|
|
* `object-position` leva a faixa até a linha "Nova Coleção", que cabe inteira nela.
|
|
*/
|
|
const SMALL_CARD_IMAGE_POSITION = "object-[50%_57%]";
|
|
|
|
/**
|
|
* Trabalho real do hero, só abaixo de 1024 px: um cartão largo e clicável (a largura da coluna, cerca de 350 px num
|
|
* celular) com o pôster do site da SEV, abaixo dos botões, que leva ao case da SEV; antes era uma moldura de celular
|
|
* de 65 por 160 px, pequena demais para ver o que era. Em telas largas a coluna da direita é da peça 3D, e o trabalho
|
|
* real começa na seção Projetos.
|
|
* O pôster vai pelo next/image com `sizes` do tamanho em que aparece, em `loading="lazy"` e prioridade baixa: o título
|
|
* segue como o maior elemento da dobra (LCP; ver SMALL_CARD_IMAGE_HEIGHT), e em tela larga, onde o cartão fica
|
|
* escondido pelo breakpoint (display: none), a imagem nem é baixada.
|
|
*/
|
|
export default function HeroWork() {
|
|
const smallCard = getShowcaseAssets(SMALL_SCREEN_PROJECT, "mobile");
|
|
|
|
return (
|
|
<HoverPrefetchLink
|
|
data-testid="hero-work-mobile"
|
|
href={SMALL_SCREEN_HREF}
|
|
className="hero-in group mt-sp-5 flex w-full flex-col overflow-hidden border border-white/20 bg-white/[0.05] font-display no-underline transition-colors hover:border-white/45 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--slash)] motion-reduce:transition-none [--d:.8s] lg:hidden"
|
|
>
|
|
<span
|
|
className="relative block w-full overflow-hidden bg-[var(--ink)]"
|
|
style={{ height: SMALL_CARD_IMAGE_HEIGHT }}
|
|
>
|
|
<Image
|
|
src={smallCard.poster}
|
|
alt=""
|
|
width={smallCard.width}
|
|
height={smallCard.height}
|
|
sizes="(min-width: 1024px) 1px, calc(100vw - 48px)"
|
|
loading="lazy"
|
|
fetchPriority="low"
|
|
className={`absolute inset-0 block h-full w-full object-cover ${SMALL_CARD_IMAGE_POSITION}`}
|
|
/>
|
|
</span>
|
|
<span className="flex min-h-12 items-center justify-between gap-sp-4 px-sp-4 py-sp-2 text-[15px] leading-6 text-[#f4f2ed]">
|
|
<span className="flex flex-col">
|
|
<span className="font-semibold">Site da {SMALL_SCREEN_TITLE}</span>{" "}
|
|
<span className="text-[rgba(244,242,237,.72)]">Ver case</span>
|
|
</span>
|
|
<svg
|
|
aria-hidden="true"
|
|
viewBox="0 0 16 16"
|
|
className="h-4 w-4 shrink-0 transition-transform group-hover:translate-x-1 motion-reduce:transition-none"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
>
|
|
<path d="M2 8h11M9 3.5 13.5 8 9 12.5" />
|
|
</svg>
|
|
</span>
|
|
</HoverPrefetchLink>
|
|
);
|
|
}
|