Evandro Fonseca Junior
f8545cd442
Três ofertas (site que traz pedidos pelo WhatsApp, sistema para tirar a operação da planilha, revisão de sistema existente) com miniatura e formulário com o tipo escolhido; botão principal do hero abre o WhatsApp; moldura da SEV no hero do celular; menu fecha ao navegar, Esc, foco preso incluindo a barra de cookies e espaço para ela; CinematicHome como componente de servidor com ilha cliente; /ia com H1 de oferta e cartão do que você recebe; botão flutuante em aside com transform; AVIF antes de WebP; copy sem repetir contato direto.
90 lines
3.9 KiB
TypeScript
90 lines
3.9 KiB
TypeScript
import Image from "next/image";
|
|
import { getShowcaseAssets } from "@/lib/project-showcase";
|
|
import { BrowserFrame } from "./showcase/BrowserFrame";
|
|
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 MOBILE_PROJECT = "as-servicos";
|
|
/** No celular a moldura mostra o site da SEV, o mesmo projeto do navegador ao lado do título no computador. */
|
|
const SMALL_SCREEN_PROJECT = "sev-modaintima";
|
|
/** Altura da moldura de celular abaixo dos botões (px); a largura sai da proporção 390x844 do aparelho. */
|
|
const SMALL_PHONE_HEIGHT = 180;
|
|
|
|
/**
|
|
* 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, uma moldura de celular
|
|
* pequena (180 px de altura) com o pôster mobile da SEV, abaixo dos botões.
|
|
* 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
|
|
* era banda desperdiçada), em `loading="lazy"` e prioridade baixa: o título segue como o maior elemento da dobra (LCP)
|
|
* e a imagem que fica escondida pelo breakpoint (display: none) nem é baixada.
|
|
*/
|
|
export default function HeroWork({ url = null }: { url?: HeroWorkUrl }) {
|
|
const desktop = getShowcaseAssets(DESKTOP_PROJECT, "desktop");
|
|
const phone = getShowcaseAssets(MOBILE_PROJECT, "mobile");
|
|
const smallPhone = getShowcaseAssets(SMALL_SCREEN_PROJECT, "mobile");
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
data-testid="hero-work"
|
|
className="hero-in pointer-events-none absolute top-1/2 right-sp-12 hidden w-[40%] -translate-y-[46%] [--d:.8s] lg:block"
|
|
>
|
|
<BrowserFrame url={url} className="w-[88%]">
|
|
{/* 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"
|
|
width={desktop.width}
|
|
height={desktop.height}
|
|
sizes="(min-width: 1400px) 500px, 36vw"
|
|
loading="lazy"
|
|
fetchPriority="low"
|
|
className="block h-auto w-full"
|
|
/>
|
|
</BrowserFrame>
|
|
{/* position inline: .ds-phone (showcase.css, sem camada) define position: relative e vence a utilidade "absolute" */}
|
|
<PhoneFrame
|
|
className="right-0 bottom-[-12%] w-[26%]"
|
|
style={{ position: "absolute" }}
|
|
>
|
|
<Image
|
|
src={phone.poster}
|
|
alt="Site da AS Serviços aberto no celular"
|
|
width={phone.width}
|
|
height={phone.height}
|
|
sizes="(min-width: 1400px) 136px, 10vw"
|
|
loading="lazy"
|
|
fetchPriority="low"
|
|
className="absolute inset-0 block h-full w-full object-cover object-top"
|
|
/>
|
|
</PhoneFrame>
|
|
</div>
|
|
|
|
<div
|
|
data-testid="hero-work-mobile"
|
|
className="hero-in pointer-events-none mt-sp-5 flex items-center gap-sp-4 [--d:.8s] lg:hidden"
|
|
>
|
|
<PhoneFrame style={{ height: SMALL_PHONE_HEIGHT }}>
|
|
<Image
|
|
src={smallPhone.poster}
|
|
alt="Site da SEV Moda Íntima aberto no celular"
|
|
width={smallPhone.width}
|
|
height={smallPhone.height}
|
|
sizes="84px"
|
|
loading="lazy"
|
|
fetchPriority="low"
|
|
className="absolute inset-0 block h-full w-full object-cover object-top"
|
|
/>
|
|
</PhoneFrame>
|
|
<p className="max-w-[16em] font-display text-[15px] leading-6 text-[rgba(244,242,237,.72)]">
|
|
Site da SEV Moda Íntima, como aparece no celular.
|
|
</p>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|