feat(home): seção Sobre com prova por ponto, contato por oferta e hero com a Lavação 047 na tela larga

app/components/HeroWork.tsx

@@ -7,23 +7,30 @@ import { PhoneFrame } from "./showcase/PhoneFrame";
 /** Endereço mostrado na barra do navegador (mesmo formato de displayUrl em showcase/BrowserFrame). */
 export type HeroWorkUrl = { text: string; secure: boolean } | null;
 
-const DESKTOP_PROJECT = "sev-modaintima";
+const DESKTOP_PROJECT = "lavacao-047";
+const DESKTOP_PROJECT_TITLE = "Lavação 047";
 const MOBILE_PROJECT = "as-servicos";
-/** No celular o cartão mostra o site da SEV, o mesmo projeto do navegador ao lado do título no computador, e leva ao case. */
+/** No celular o cartão mostra o site da SEV e leva ao case; o navegador da tela larga, ao lado do título, mostra o da Lavação 047. */
 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 350 px num celular de 390 px). Com 72 px
+ * 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, em dois formatos. Em telas de 1024 px ou mais, ao lado do título: o pôster do site da SEV
- * Moda Íntima no navegador (com o domínio próprio, sevmodaintima.com.br, na barra de endereço) e o do aplicativo
- * da AS Serviços no celular, numa coluna de cerca de 40% da largura. Abaixo de 1024 px, um cartão largo e clicável
+ * Trabalho real do hero, em dois formatos. Em telas de 1024 px ou mais, ao lado do título: o pôster do site da
+ * Lavação 047 no navegador (a barra de endereço só mostra domínio próprio; o da Lavação é de hospedagem, então ela
+ * fica com "pré-visualização") e o do aplicativo da AS Serviços no celular, numa coluna de cerca de 40% da largura. 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.
  * Os pôsteres vão pelo next/image com `sizes` do tamanho em que aparecem (um arquivo de 1440 px para 491 px de tela
@@ -34,7 +41,7 @@ const SMALL_CARD_IMAGE_HEIGHT = 72;
 export default function HeroWork({ url = null }: { url?: HeroWorkUrl }) {
   const desktop = getShowcaseAssets(DESKTOP_PROJECT, "desktop");
   const phone = getShowcaseAssets(MOBILE_PROJECT, "mobile");
-  const smallCard = getShowcaseAssets(SMALL_SCREEN_PROJECT, "desktop");
+  const smallCard = getShowcaseAssets(SMALL_SCREEN_PROJECT, "mobile");
 
   return (
     <>
@@ -46,7 +53,7 @@ export default function HeroWork({ url = null }: { url?: HeroWorkUrl }) {
           {/* a moldura mostra ~491 px em 1440 px de tela: 36vw até 1400 px, e fixo dali em diante */}
           <Image
             src={desktop.poster}
-            alt="Site da SEV Moda Íntima aberto no computador"
+            alt={`Site da ${DESKTOP_PROJECT_TITLE} aberto no computador`}
             width={desktop.width}
             height={desktop.height}
             sizes="(min-width: 1400px) 500px, 36vw"
@@ -87,10 +94,10 @@ export default function HeroWork({ url = null }: { url?: HeroWorkUrl }) {
             alt=""
             width={smallCard.width}
             height={smallCard.height}
-            sizes="(min-width: 1024px) 1px, 100vw"
+            sizes="(min-width: 1024px) 1px, calc(100vw - 48px)"
             loading="lazy"
             fetchPriority="low"
-            className="absolute inset-0 block h-full w-full object-cover object-top"
+            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]">